Skip to content

Commit fa8098c

Browse files
author
pipeline
committed
Ej2 2810 bubble series
1 parent 8d1bbf6 commit fa8098c

13 files changed

+447
-2
lines changed

‎src/chart/bubble.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="control-section">
2+
<div id="container"></div>
3+
<div style="float: right; margin-right: 10px; margin-top: -5px">
4+
</div>
5+
</div>
6+
<div id="description">
7+
<p>
8+
In this example, you can see how to render and configure the bubble type charts.A bubble chart is a type of chart that displays three dimensions of data.
9+
Each points is drawn as a bubble, where bubble's size deponds on <code>size</code> property. You can use <code>fill</code> property to customize the data appearance.
10+
</p>
11+
<p>
12+
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
13+
</p>
14+
<br>
15+
<p style="font-weight: 500">Injecting Module</p>
16+
<p>
17+
Chart component features are segregated into individual feature-wise modules. To use bubble series, we need to inject
18+
<code>BubbleSeries</code> module using <code>Chart.Inject(BubbleSeries)</code> method.
19+
</p>
20+
<p>
21+
More information on the bubble series can be found in this
22+
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
23+
</p>
24+
</div>
25+
<style>
26+
#control-container {
27+
padding: 0px !important;
28+
}
29+
</style>

‎src/chart/bubble.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Chart, BubbleSeries, Tooltip, IPointRenderEventArgs } from '@syncfusion/ej2-charts';
2+
import { EmitType } from '@syncfusion/ej2-base';
3+
Chart.Inject(BubbleSeries, Tooltip);
4+
5+
let seriesColor: string[] = ['#E94649', '#F6B53F', '#6FAAB0', '#C4C24A', '#FB954F', '#D9CEB2', '#FF8D8D',
6+
'#69D2E7', '#E27F2D', '#6A4B82', '#F6B53F', '#C4C24A', '#FF8D8D', '#69D2E7'];
7+
let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
8+
args.fill = seriesColor[args.point.index];
9+
};
10+
11+
/**
12+
* Bubble series
13+
*/
14+
this.default = (): void => {
15+
let chart: Chart = new Chart({
16+
17+
//Initializing Primary X Axis
18+
primaryXAxis: {
19+
title: 'Literacy Rate',
20+
minimum: 60,
21+
maximum: 100,
22+
interval: 5
23+
},
24+
25+
//Initializing Primary Y Axis
26+
primaryYAxis: {
27+
title: 'GDP growth rate',
28+
minimum: -2,
29+
maximum: 16,
30+
interval: 2
31+
},
32+
33+
//Initializing Chart Series
34+
series: [
35+
{
36+
type: 'Bubble',
37+
dataSource: [{ x: 92.2, y: 7.8, size: 1.347, text: 'China' },
38+
{ x: 74, y: 6.5, size: 1.241, text: 'India' },
39+
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
40+
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
41+
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
42+
{ x: 54.9, y: 3.7, size: 0.177, text: 'Pakistan' },
43+
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
44+
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
45+
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
46+
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
47+
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
48+
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
49+
{ x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' },
50+
{ x: 56.8, y: 6.1, size: 0.151, text: 'Bangladesh' }],
51+
xName: 'x', yName: 'y', size: 'size', name: 'pound',
52+
marker: { dataLabel: { name: 'text' } }
53+
},
54+
],
55+
pointRender: labelRender,
56+
title: 'World Countries Details',
57+
tooltip: {
58+
enable: true,
59+
format: '${point.text}<br>Literacy Rate:${point.x}%<br>GDP Annual Growth Rate:${point.y}<br>Population: ${point.size} Billion'
60+
},
61+
legendSettings: { visible: false }
62+
});
63+
chart.appendTo('#container');
64+
};

‎src/chart/range-column.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="control-section">
2+
<div id="container"></div>
3+
</div>
4+
<div id="description">
5+
<p>
6+
In this example, you can see how to render and configure the range column type series. RangeColumn type charts are used for data having two values in y-axis.
7+
Those can be represented by <code>high</code> and <code>low</code> properties,which represent start and end point of columns in chart. You can use <code>border</code>,
8+
<code>fill</code> properities to customize the data appearance.
9+
</p>
10+
<p>
11+
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
12+
</p>
13+
14+
<p style="font-weight: 500">Injecting Module</p>
15+
<p>
16+
chart component features are segregated into individual feature-wise modules. To use range column series, we need to Injecting
17+
<code>RangeColumnSeries</code> module using <code>chart.Inject(RangeColumnSeries)</code> method.
18+
</p>
19+
<p>
20+
More information on the range column series can be found in this
21+
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
22+
</p>
23+
</div>
24+
<style>
25+
#control-container {
26+
padding: 0px !important;
27+
}
28+
</style>

‎src/chart/range-column.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Chart, RangeColumnSeries, Category, Tooltip } from '@syncfusion/ej2-charts';
2+
Chart.Inject(RangeColumnSeries, Category, Tooltip);
3+
4+
/**
5+
* RangeColumn series
6+
*/
7+
this.default = (): void => {
8+
9+
let chart: Chart = new Chart({
10+
11+
12+
//Initializing Primary X Axis
13+
primaryXAxis: {
14+
valueType: 'Category',
15+
title: 'Months'
16+
},
17+
18+
//Initializing Primary Y Axis
19+
primaryYAxis: {
20+
labelFormat: '{value}˚C',
21+
edgeLabelPlacement: 'Shift',
22+
title: 'Temperature'
23+
},
24+
25+
//Initializing Chart Series
26+
series: [
27+
{
28+
type: 'RangeColumn', name: 'India', xName: 'x', high: 'high', low: 'low',
29+
dataSource: [
30+
{ x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 },
31+
{ x: 'Mar', low: 1.9, high: 8.5 }, { x: 'Apr', low: 3.1, high: 10.8 },
32+
{ x: 'May', low: 5.7, high: 14.4 }, { x: 'June', low: 8.4, high: 16.9 },
33+
{ x: 'July', low: 10.6, high: 19.2 }, { x: 'Aug', low: 10.5, high: 18.9 },
34+
{ x: 'Sep', low: 8.5, high: 16.1 }, { x: 'Oct', low: 6.0, high: 12.5 },
35+
{ x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
36+
],
37+
}, {
38+
type: 'RangeColumn', name: 'Germany', xName: 'x', high: 'high', low: 'low',
39+
dataSource: [
40+
{ x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 },
41+
{ x: 'Mar', low: 1.2, high: 7.5 }, { x: 'Apr', low: 2.5, high: 9.8 },
42+
{ x: 'May', low: 4.7, high: 11.4 }, { x: 'June', low: 6.4, high: 14.4 },
43+
{ x: 'July', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 },
44+
{ x: 'Sep', low: 7.5, high: 15.1 }, { x: 'Oct', low: 3.0, high: 10.5 },
45+
{ x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
46+
]
47+
}
48+
],
49+
tooltip: {
50+
enable: true,
51+
format: '${point.x}<br>High : ${point.high}<br>Low : ${point.low}'
52+
},
53+
title: 'Maximum and Minimum Temperature'
54+
});
55+
chart.appendTo('#container');
56+
};

‎src/chart/sample.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "Chart",
33
"directory": "chart",
44
"category": "Data Visualization",
5+
"type": "update",
56
"samples": [
67
{
78
"url": "line",
@@ -32,16 +33,42 @@
3233
"url": "stacked-column",
3334
"name": "Stacked Column",
3435
"category": "Series"
36+
},
37+
{
38+
"url": "stacked-column100",
39+
"name": "100% Stacked Column",
40+
"category": "Series",
41+
"type": "new"
42+
},
43+
{
44+
"url": "range-column",
45+
"name": "Range Column",
46+
"category": "Series",
47+
"type": "new"
3548
},
3649
{
3750
"url": "stacked-bar",
3851
"name": "Stacked Bar",
3952
"category": "Series"
53+
54+
},
55+
{
56+
"url": "stacked-bar100",
57+
"name": "100% Stacked Bar",
58+
"category": "Series",
59+
"type": "new"
4060
},
4161
{
4262
"url": "stacked-area",
4363
"name": "Stacked Area",
4464
"category": "Series"
65+
},
66+
{
67+
"url": "stacked-area100",
68+
"name": "100% Stacked Area",
69+
"category": "Series",
70+
"type": "new"
71+
4572
},
4673
{
4774
"url": "step-line",
@@ -53,6 +80,12 @@
5380
"name": "Scatter",
5481
"category": "Series"
5582
},
83+
{
84+
"url": "bubble",
85+
"name": "Bubble",
86+
"category": "Series",
87+
"type": "new"
88+
},
5689
{
5790
"url": "combination-series",
5891
"name": "Combination Series",

‎src/chart/stacked-area100.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="control-section">
2+
<div id="container"></div>
3+
<div style="float: right;margin-right: 10px; margin-top: -5px">Source:
4+
<a href="https://www.gov.uk/" target="_blank">www.gov.uk</a>
5+
</div>
6+
</div>
7+
<div id="description">
8+
<p>
9+
In this example, you can see how to render and configure the 100% stacking area type charts. You can use <code>fill</code> properties to customize the 100% stacking area.
10+
</p>
11+
<br>
12+
<p style="font-weight: 500">Injecting Module</p>
13+
<p>
14+
Chart component features are segregated into individual feature-wise modules. To use stackedArea100 series, we need to inject
15+
<code>StackingAreaSeries</code> module using <code>Chart.Inject(StackingAreaSeries)</code> method.
16+
</p>
17+
<p>
18+
More information on the stacking area series can be found in this
19+
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
20+
</p>
21+
</div>
22+
<style>
23+
#control-container {
24+
padding: 0px !important;
25+
}
26+
</style>

‎src/chart/stacked-area100.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Chart, StackingAreaSeries, DateTime } from '@syncfusion/ej2-charts';
2+
Chart.Inject(StackingAreaSeries, DateTime);
3+
let chartData: any[] = [
4+
{ x: new Date(2000, 0, 1), y: 0.61, y1: 0.03, y2: 0.48, y3: 0.23 },
5+
{ x: new Date(2001, 0, 1), y: 0.81, y1: 0.05, y2: 0.53, y3: 0.17 },
6+
{ x: new Date(2002, 0, 1), y: 0.91, y1: 0.06, y2: 0.57, y3: 0.17 },
7+
{ x: new Date(2003, 0, 1), y: 1.00, y1: 0.09, y2: 0.61, y3: 0.20 },
8+
{ x: new Date(2004, 0, 1), y: 1.19, y1: 0.14, y2: 0.63, y3: 0.23 },
9+
{ x: new Date(2005, 0, 1), y: 1.47, y1: 0.20, y2: 0.64, y3: 0.36 },
10+
{ x: new Date(2006, 0, 1), y: 1.74, y1: 0.29, y2: 0.66, y3: 0.43 },
11+
{ x: new Date(2007, 0, 1), y: 1.98, y1: 0.46, y2: 0.76, y3: 0.51 },
12+
{ x: new Date(2008, 0, 1), y: 1.99, y1: 0.64, y2: 0.77, y3: 0.72 },
13+
{ x: new Date(2009, 0, 1), y: 1.70, y1: 0.75, y2: 0.55, y3: 1.29 },
14+
{ x: new Date(2010, 0, 1), y: 1.48, y1: 1.06, y2: 0.54, y3: 1.38 },
15+
{ x: new Date(2011, 0, 1), y: 1.38, y1: 1.25, y2: 0.57, y3: 1.82 },
16+
{ x: new Date(2012, 0, 1), y: 1.66, y1: 1.55, y2: 0.61, y3: 2.16 },
17+
{ x: new Date(2013, 0, 1), y: 1.66, y1: 1.55, y2: 0.67, y3: 2.51 },
18+
{ x: new Date(2014, 0, 1), y: 1.67, y1: 1.65, y2: 0.67, y3: 2.61 }
19+
];
20+
21+
/**
22+
* stackedArea100 series
23+
*/
24+
this.default = (): void => {
25+
let chart: Chart = new Chart({
26+
primaryXAxis: {
27+
title: 'Years',
28+
valueType: 'DateTime',
29+
intervalType: 'Years',
30+
labelFormat: 'y',
31+
edgeLabelPlacement: 'Shift'
32+
},
33+
primaryYAxis:
34+
{
35+
title: 'Spend in Percentage',
36+
rangePadding: 'None'
37+
},
38+
series: [
39+
{
40+
dataSource: chartData, xName: 'x', yName: 'y',
41+
//Series type as 100% stacked area series
42+
type: 'StackingArea100',
43+
name: 'Organic',
44+
}, {
45+
dataSource: chartData, xName: 'x', yName: 'y1',
46+
type: 'StackingArea100', name: 'Fair-trade',
47+
}, {
48+
dataSource: chartData, xName: 'x', yName: 'y2',
49+
type: 'StackingArea100', name: 'Veg Alternatives',
50+
}, {
51+
dataSource: chartData, xName: 'x', yName: 'y3',
52+
type: 'StackingArea100', name: 'Others',
53+
}
54+
],
55+
title: 'Trend in Sales of Ethical Produce'
56+
});
57+
chart.appendTo('#container');
58+
};

‎src/chart/stacked-bar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<br>
1313
<p style="font-weight: 500">Injecting Module</p>
1414
<p>
15-
Chart component features are segregated into individual feature-wise modules. To use stacking area series, we need to inject
15+
Chart component features are segregated into individual feature-wise modules. To use stacking bar series, we need to inject
1616
<code>StackingBarSeries</code> module using <code>Chart.Inject(StackingBarSeries)</code> method.
1717
</p>
1818
<p>

‎src/chart/stacked-bar100.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="control-section">
2+
<div id="container"></div>
3+
</div>
4+
<div id="description">
5+
<p>
6+
In this example, you can see how to render and configure the 100% stacking bar type charts. You can use <code>border</code>,
7+
<code>fill</code> properties to customize the vertical bar.
8+
</p>
9+
<p>
10+
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
11+
</p>
12+
<br>
13+
<p style="font-weight: 500">Injecting Module</p>
14+
<p>
15+
Chart component features are segregated into individual feature-wise modules. To use 100% stacking bar series, we need to
16+
inject
17+
<code>StackingBarSeries</code> module using <code>Chart.Inject(StackingBarSeries)</code> method.
18+
</p>
19+
<p>
20+
More information on the 100% stacking bar series can be found in this
21+
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
22+
</p>
23+
</div>
24+
<style>
25+
#control-container {
26+
padding: 0px !important;
27+
}
28+
</style>

0 commit comments

Comments
 (0)