Skip to content

Commit 2b37164

Browse files
author
pipeline
committed
Ej2 2810 bubble series
1 parent 2c5fb56 commit 2b37164

12 files changed

+438
-4
lines changed

‎src/chart/bubble.component.ts

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

‎src/chart/bubble.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="control-section">
2+
<div>
3+
<ej-chart style='display:block;' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
4+
[title]='title' [tooltip]='tooltip' (pointRender)='pointRender($event)' [legendSettings]='legend'>
5+
<e-series-collection>
6+
<e-series [dataSource]='data' type='Bubble' xName='x' yName='y' size='size' name='pound' [marker]='marker'> </e-series>
7+
</e-series-collection>
8+
</ej-chart>
9+
</div>
10+
<div style="float: right; margin-right: 10px; margin-top: -5px">
11+
</div>
12+
</div>
13+
<div id="description">
14+
<p>
15+
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 by position and size of the bubble.
16+
Each points is drawn as a bubble, where bubble's size deponds on <code>size</code>
17+
You can use <code>fill</code> properties to customize the data appearance.
18+
</p>
19+
<p>
20+
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
21+
</p>
22+
<br>
23+
<p style="font-weight: 500">Injecting Module</p>
24+
<p>
25+
Chart component features are segregated into individual feature-wise modules. To use bubble series feature, we need to inject
26+
<code>BubbleService</code> into the <code>@NgModule.providers</code> section.
27+
</p>
28+
<p>
29+
More information on the bubbleseries can be found in this
30+
<a target="_blank" href="http://ej2.syncfusion.com/angular/documentation/chart/api-chartComponent.html#bubbleseriesmodule-bubbleseries">documentation section</a>.
31+
</p>
32+
</div>

‎src/chart/chart.module.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
CategoryService, SplineSeriesService, AreaSeriesService, DateTimeService, MarkerService, StackingAreaSeriesService,
1111
StackingBarSeriesService, StackingColumnSeriesService, ScatterSeriesService, StepLineSeriesService,
1212
LogarithmicService, BarSeriesService, ColumnSeriesService, TooltipService, CrosshairService,
13-
ZoomService, SelectionService, LegendService, DataLabelService,
13+
ZoomService, SelectionService, LegendService, DataLabelService, BubbleSeriesService, RangeColumnSeriesService
1414
} from '@syncfusion/ej2-ng-charts';
1515

1616
import { LineChartComponent } from './line.component';
@@ -29,6 +29,10 @@ import { CategoryChartComponent } from './category.component';
2929
import { StackedBarChartComponent } from './stacked-bar.component';
3030
import { StackedColumnChartComponent } from './stacked-column.component';
3131
import { StepLineChartComponent } from './step-line.component';
32+
import { PercentStackedColumnChartComponent } from './stacked-column100.component';
33+
import { PercentStackedBarChartComponent } from './stacked-bar100.component';
34+
import { PercentStackedAreaChartComponent } from './stacked-area100.component';
35+
import { RangeColumnChartComponent } from './range-column.component';
3236
import { SymbolsChartComponent } from './symbols.component';
3337
import { ScatterChartComponent } from './scatter.component';
3438
import { TrackBallChartComponent } from './trackball.component';
@@ -37,6 +41,7 @@ import { LocalDataChartComponent } from './local-data.component';
3741
import { SelectionChartComponent } from './selection.component';
3842
import { PerformanceChartComponent } from './performance.component';
3943
import { ZoomingChartComponent } from './zooming.component';
44+
import { BubbleChartComponent } from './bubble.component';
4045
import { SharedModule } from '../common/shared.module';
4146
export const chartAppRoutes: Object[] = [
4247
{ path: 'chart/line', component: LineChartComponent, name: 'Line', order:'01' ,category: 'Series' },
@@ -45,10 +50,18 @@ export const chartAppRoutes: Object[] = [
4550
{ path: 'chart/area', component: AreaChartComponent, name: 'Area', order:'01',category: 'Series' },
4651
{ path: 'chart/spline', component: SplineChartComponent, name: 'Spline', order:'01',category: 'Series' },
4752
{ path: 'chart/stacked-column', component: StackedColumnChartComponent, name: 'Stacked Column',order:'01', category: 'Series' },
53+
{ path: 'chart/stacked-column100', component: PercentStackedColumnChartComponent, name: '100% Stacked Column',
54+
order: '01', category: 'Series', type: 'new'},
55+
{ path: 'chart/range-column', component: RangeColumnChartComponent, name: 'Range Column',order:'01',category: 'Series', type: 'new'},
4856
{ path: 'chart/stacked-bar', component: StackedBarChartComponent, name: 'Stacked Bar',order:'01', category: 'Series' },
57+
{ path: 'chart/stacked-bar100', component: PercentStackedBarChartComponent, name: '100% Stacked Bar', order: '01',
58+
category: 'Series', type: 'new' },
4959
{ path: 'chart/stacked-area', component: StackedAreaChartComponent, name: 'Stacked Area', order:'01',category: 'Series' },
60+
{ path: 'chart/stacked-area100', component: PercentStackedAreaChartComponent, name: '100% Stacked Area',order:'01',
61+
category: 'Series', type: 'new'},
5062
{ path: 'chart/step-line', component: StepLineChartComponent, name: 'StepLine', order:'01',category: 'Series' },
5163
{ path: 'chart/scatter', component: ScatterChartComponent, name: 'Scatter', order:'01',category: 'Series' },
64+
{ path: 'chart/bubble', component: BubbleChartComponent, name: 'Bubble', order: '01', category:'Series', type: 'new'},
5265
{ path: 'chart/combination-series', component: CombinationSeriesChartComponent,
5366
name: 'Combination Series', order:'01',category: 'Series' },
5467
{ path: 'chart/performance', component: PerformanceChartComponent, name: 'Performance',order:'01', category: 'Series' },
@@ -73,15 +86,16 @@ let declarations: Type<Object>[] = [LineChartComponent, ColumnChartComponent, Ba
7386
ScatterChartComponent, CombinationSeriesChartComponent, PerformanceChartComponent, NumericAxisChartComponent,
7487
CategoryChartComponent, LogarithmicAxisChartComponent, MultipleAxesChartComponent, SymbolsChartComponent, SelectionChartComponent,
7588
CrosshairChartComponent, TrackBallChartComponent, ZoomingChartComponent, LocalDataChartComponent, RemoteDataChartComponent,
76-
DateTimeAxisChartComponent];
89+
PercentStackedAreaChartComponent, PercentStackedBarChartComponent, PercentStackedColumnChartComponent, DateTimeAxisChartComponent,
90+
BubbleChartComponent, RangeColumnChartComponent];
7791
@NgModule({
7892
imports: [chartRouter, ChartModule, SharedModule, ButtonModule],
7993
exports: [],
8094
declarations: declarations,
8195
providers: [LineSeriesService, AreaSeriesService, DateTimeService, CategoryService, MarkerService, StackingAreaSeriesService,
8296
TooltipService, CrosshairService, SplineSeriesService, StackingBarSeriesService, StackingColumnSeriesService, ScatterSeriesService,
8397
StepLineSeriesService, LogarithmicService, BarSeriesService, ColumnSeriesService, ZoomService, SelectionService, LegendService,
84-
DataLabelService
98+
DataLabelService, BubbleSeriesService, RangeColumnSeriesService
8599
]
86100
})
87101
export class ChartSampleModule {

‎src/chart/range-column.component.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Component, ViewEncapsulation } from '@angular/core';
2+
3+
/**
4+
* Column Series
5+
*/
6+
@Component({
7+
selector: 'control-content',
8+
templateUrl: 'range-column.html',
9+
styleUrls: ['chart.style.css'],
10+
encapsulation: ViewEncapsulation.None
11+
})
12+
export class RangeColumnChartComponent {
13+
14+
public data1: Object[] = [
15+
{ x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 },
16+
{ x: 'Mar', low: 1.9, high: 8.5 }, { x: 'Apr', low: 3.1, high: 10.8 },
17+
{ x: 'May', low: 5.7, high: 14.4 }, { x: 'June', low: 8.4, high: 16.9 },
18+
{ x: 'July', low: 10.6, high: 19.2 }, { x: 'Aug', low: 10.5, high: 18.9 },
19+
{ x: 'Sep', low: 8.5, high: 16.1 }, { x: 'Oct', low: 6.0, high: 12.5 },
20+
{ x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
21+
];
22+
public data2: Object[] = [
23+
{ x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 },
24+
{ x: 'Mar', low: 1.2, high: 7.5 }, { x: 'Apr', low: 2.5, high: 9.8 },
25+
{ x: 'May', low: 4.7, high: 11.4 }, { x: 'June', low: 6.4, high: 14.4 },
26+
{ x: 'July', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 },
27+
{ x: 'Sep', low: 7.5, high: 15.1 }, { x: 'Oct', low: 3.0, high: 10.5 },
28+
{ x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
29+
];
30+
31+
public primaryXAxis: Object = {
32+
title: 'Months',
33+
valueType: 'Category'
34+
};
35+
public primaryYAxis: Object = {
36+
title: 'Temperature(Celsius)',
37+
labelFormat: '{value}°C',
38+
};
39+
public title: string = 'Maximum and Minimum Temperature';
40+
public tooltip: Object = {
41+
enable: true,
42+
format: '${point.x}<br>High : ${point.high}<br>Low : ${point.low}'
43+
};
44+
constructor() {
45+
//code
46+
};
47+
48+
}

‎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>
3+
<ej-chart id='chartcontainer' style="display:block;" [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
4+
[tooltip]='tooltip'>
5+
<e-series-collection>
6+
<e-series [dataSource]='data1' type='RangeColumn' xName='x' high='high' low='low' name='India' width=2> </e-series>
7+
<e-series [dataSource]='data2' type='RangeColumn' xName='x' high='high' low='low' name='Germany' width=2> </e-series>
8+
</e-series-collection>
9+
</ej-chart>
10+
</div>
11+
</div>
12+
<div id='description'>
13+
<p>
14+
In this example, you can see how to render and configure the range column type series. RangeColumn type charts are used for
15+
data having two values in y-axis. Those can be represented by <code>high</code> and <code>low</code> properities, which represent start and end point of columns in chart. You can use <code>border</code>,
16+
<code>fill</code> properities to customize the data appearance.
17+
</p>
18+
<br>
19+
<p style="font-weight: 500">Injecting Module</p>
20+
<p>
21+
Chart component features are segregated into individual feature-wise modules. To use RangeColumn feature, we need to inject
22+
<code>RangeColumnService</code> into the <code>@NgModule.providers</code> section.
23+
</p>
24+
<p>
25+
More information on the column series can be found in this
26+
<a target="_blank" href="http://ej2.syncfusion.com/angular/documentation/chart/api-chartComponent.html#rangecolumnseriesmodule-rangecolumnseries">documentation section</a>.
27+
</p>
28+
</div>

‎src/chart/stacked-area100.component.ts

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Component, ViewEncapsulation } from '@angular/core';
2+
3+
/**
4+
* Stacked Area Series
5+
*/
6+
@Component({
7+
selector: 'control-content',
8+
templateUrl: 'stacked-area100.html',
9+
styleUrls: ['chart.style.css'],
10+
encapsulation: ViewEncapsulation.None
11+
})
12+
export class PercentStackedAreaChartComponent {
13+
14+
public data: Object[] = [
15+
{ x: new Date(2000, 0, 1), y: 0.61 },
16+
{ x: new Date(2001, 0, 1), y: 0.81 }, { x: new Date(2002, 0, 1), y: 0.91 },
17+
{ x: new Date(2003, 0, 1), y: 1.00 }, { x: new Date(2004, 0, 1), y: 1.19 },
18+
{ x: new Date(2005, 0, 1), y: 1.47 }, { x: new Date(2006, 0, 1), y: 1.74 },
19+
{ x: new Date(2007, 0, 1), y: 1.98 }, { x: new Date(2008, 0, 1), y: 1.99 },
20+
{ x: new Date(2009, 0, 1), y: 1.70 }, { x: new Date(2010, 0, 1), y: 1.48 },
21+
{ x: new Date(2011, 0, 1), y: 1.38 }, { x: new Date(2012, 0, 1), y: 1.66 },
22+
{ x: new Date(2013, 0, 1), y: 1.66 }, { x: new Date(2014, 0, 1), y: 1.67 }
23+
];
24+
public data1: Object[] = [
25+
{ x: new Date(2000, 0, 1), y: 0.03 },
26+
{ x: new Date(2001, 0, 1), y: 0.05 }, { x: new Date(2002, 0, 1), y: 0.06 },
27+
{ x: new Date(2003, 0, 1), y: 0.09 }, { x: new Date(2004, 0, 1), y: 0.14 },
28+
{ x: new Date(2005, 0, 1), y: 0.20 }, { x: new Date(2006, 0, 1), y: 0.29 },
29+
{ x: new Date(2007, 0, 1), y: 0.46 }, { x: new Date(2008, 0, 1), y: 0.64 },
30+
{ x: new Date(2009, 0, 1), y: 0.75 }, { x: new Date(2010, 0, 1), y: 1.06 },
31+
{ x: new Date(2011, 0, 1), y: 1.25 }, { x: new Date(2012, 0, 1), y: 1.55 },
32+
{ x: new Date(2013, 0, 1), y: 1.55 }, { x: new Date(2014, 0, 1), y: 1.65 }
33+
];
34+
public data2: Object[] = [
35+
{ x: new Date(2000, 0, 1), y: 0.48 },
36+
{ x: new Date(2001, 0, 1), y: 0.53 }, { x: new Date(2002, 0, 1), y: 0.57 },
37+
{ x: new Date(2003, 0, 1), y: 0.61 }, { x: new Date(2004, 0, 1), y: 0.63 },
38+
{ x: new Date(2005, 0, 1), y: 0.64 }, { x: new Date(2006, 0, 1), y: 0.66 },
39+
{ x: new Date(2007, 0, 1), y: 0.76 }, { x: new Date(2008, 0, 1), y: 0.77 },
40+
{ x: new Date(2009, 0, 1), y: 0.55 }, { x: new Date(2010, 0, 1), y: 0.54 },
41+
{ x: new Date(2011, 0, 1), y: 0.57 }, { x: new Date(2012, 0, 1), y: 0.61 },
42+
{ x: new Date(2013, 0, 1), y: 0.67 }, { x: new Date(2014, 0, 1), y: 0.67 }
43+
];
44+
public data3: Object[] = [
45+
{ x: new Date(2000, 0, 1), y: 0.23 },
46+
{ x: new Date(2001, 0, 1), y: 0.17 }, { x: new Date(2002, 0, 1), y: 0.17 },
47+
{ x: new Date(2003, 0, 1), y: 0.20 }, { x: new Date(2004, 0, 1), y: 0.23 },
48+
{ x: new Date(2005, 0, 1), y: 0.36 }, { x: new Date(2006, 0, 1), y: 0.43 },
49+
{ x: new Date(2007, 0, 1), y: 0.51 }, { x: new Date(2008, 0, 1), y: 0.72 },
50+
{ x: new Date(2009, 0, 1), y: 1.29 }, { x: new Date(2010, 0, 1), y: 1.38 },
51+
{ x: new Date(2011, 0, 1), y: 1.82 }, { x: new Date(2012, 0, 1), y: 2.16 },
52+
{ x: new Date(2013, 0, 1), y: 2.51 }, { x: new Date(2014, 0, 1), y: 2.61 }
53+
];
54+
public primaryXAxis: Object = {
55+
title: 'Years',
56+
valueType: 'DateTime',
57+
intervalType: 'Years',
58+
labelFormat: 'y',
59+
edgeLabelPlacement: 'Shift',
60+
majorTickLines: { width: 0 }
61+
};
62+
public primaryYAxis: Object = {
63+
title: 'Spend in Percentage',
64+
majorTickLines: { width: 0 }
65+
};
66+
public title: string = 'Trend in Sales of Ethical Produce';
67+
constructor() {
68+
//code
69+
};
70+
71+
}

‎src/chart/stacked-area100.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="control-section">
2+
<div>
3+
<ej-chart style='display:block;' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
4+
<e-series-collection>
5+
<e-series [dataSource]='data' type='StackingArea100' xName='x' yName='y' name='Organic'> </e-series>
6+
<e-series [dataSource]='data1' type='StackingArea100' xName='x' yName='y' name='Fair-trade'> </e-series>
7+
<e-series [dataSource]='data2' type='StackingArea100' xName='x' yName='y' name='Veg Alternatives'> </e-series>
8+
<e-series [dataSource]='data3' type='StackingArea100' xName='x' yName='y' name='Others'> </e-series>
9+
</e-series-collection>
10+
</ej-chart>
11+
</div>
12+
<div style="float: right;margin-right: 10px; margin-top: -5px">Source:
13+
<a href="https://www.gov.uk/" target="_blank">www.gov.uk</a>
14+
</div>
15+
</div>
16+
<div id="description">
17+
<p>
18+
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.
19+
</p>
20+
<br>
21+
<p style="font-weight: 500">Injecting Module</p>
22+
<p>
23+
Chart component features are segregated into individual feature-wise modules. To use 100% stacked area series, we need to
24+
inject
25+
<code>StackingAreaService</code> into the <code>@NgModule.providers</code> section.
26+
</p>
27+
<p>
28+
More information on the 100% stacked area series can be found in this
29+
<a target="_blank" href="http://ej2.syncfusion.com/angular/documentation/chart/api-chartComponent.html#stackingareaseriesmodule-stackingareaseries">documentation section</a>.
30+
</p>
31+
</div>

0 commit comments

Comments
 (0)