Dynamic Stacking Column
1 Reply
Hi Albert,
Thanks for using Syncfusion products.
We have analyzed your query. We have prepared a sample to render stacking column with adding dynamic series in chart.
Please follow below guide lines to create a stacking column with adding dynamic series chart using JS 2 and Angular.
Step 1: You can clone our quickstart application using “git clone https://github.com/angular/quickstart.git quickstart” command.
Step 2: Install the angular dependencies using “npm install” command.
Step 3: Install Syncfusion chart package using “npm install @syncfusion/ej2-ng-charts --save” command.
Step 4: Map the chart packages in systemjs.config.js file. Refer below image for systemjs.config changes.
Step 5: Import chart modules and its services into your application from chart package. Refer below code snippet for importing chart modules and services.
Note: StackingColumnSeriesService, CategoryService and LegendService services used for your sample.
|
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the ChartModule for the Chart component
import { ChartModule, StackingColumnSeriesService, CategoryService, LegendService } from '@syncfusion/ej2-ng-charts';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, ChartModule ],
providers: [StackingColumnSeriesService, CategoryService, LegendService],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
|
Step 6: Modify the template in app.component.ts file as below to render a stacking column chart [src/app/app.component.ts].
|
selector: 'app-container',
template:
`<button id="add-series" (click)="addSeries($event)">Click to Add Series</button>
<ej-chart #chart style='display:block;' width='700px' id='chart-container' [title]='title' [primaryXAxis]='primaryXAxis'>
<e-series-collection>
<e-series [dataSource]='product1.data' [type]='product1.type' xName='date' yName='qty' [name]='product1.name' [animation]='animation'></e-series>
<e-series [dataSource]='product2.data' [type]='product2.type' xName='date' yName='qty' [name]='product2.name' [animation]='animation'></e-series>
<e-series [dataSource]='product3.data' [type]='product3.type' xName='date' yName='qty' [name]='product3.name' [animation]='animation'></e-series>
</e-series-collection>
</ej-chart>`, |
Step 7: Now create Products class to structure your data and bind values for that like below [src/app/app.component.ts]..
Note: Import ChartSeriesType from chart package.
|
export class Products {
public name: string;
public data: {date: string, qty: number}[] = [];
public type: ChartSeriesType = 'StackingColumn';
constructor(product: string, data: {date: string, qty: number}[]) {
this.name = product;
this.data = data;
}
// Binding the values to products
export class AppComponent {
public product1: Products;
public product2: Products;
public product3: Products;
constructor() {
this.product1 = new Products('Product A', [
{ date: '2016-01-01', qty: 200}, {date: '2016-02-01', qty: 20 }, {date: '2016-03-01', qty: 40 }]);
this.product2 = new Products('Product B', [
{ date: '2016-01-01', qty: 100}, {date: '2016-02-01', qty: 30 }, {date: '2016-03-01', qty: 30 }]);
this.product3 = new Products('Product C', [
{ date: '2016-01-01', qty: 50}, {date: '2016-02-01', qty: 60 }, {date: '2016-03-01', qty: 90 }]);
}
}
|
Step 8: Through button click, we have added n number of series to chart through ‘addSeries’ method in chart.
Note: Import ViewChild from ‘@angular/core’ package.
|
selector: 'app-container',
template:
`<button id="add-series" (click)="addSeries($event)">Click to Add Series</button>`
// Creating addSeries handler for button click.
export class AppComponent {
// To get chart instance by tag id chart
@ViewChild('chart')
public chart: Chart;
// button click event handler to add dynamic series in chart
public addSeries(e: Event) {
let series: Products = new Products('Product ' + (this.chart.series.length + 1), this.getRandomData(3));
this.chart.addSeries([{dataSource : series.data, name: series.name, type : series.type, xName: 'date',
yName: 'qty', animation: this.animation}]);
}
// To generate random data
public getRandomData(count: number): {date: string, qty: number}[] {
let data: {date: string, qty: number}[] = [];
for (let i = 0; i < count; i++) {
data.push({ date: '2016-0' + (i + 1) + '-01', qty: Math.round(Math.random() * 100)});
}
return data;
}
} |
Step 9: Add the `app-container` tag to index.html file, please refer the below code snippet for that [src/index.html].
|
<body>
<app-container>Chart Loading</app-container>
</body> |
Now we have prepared a sample for stacking column with dynamic update, to run that sample please follow below steps.
Step 1: Move to quickstart directory.
Step 2: execute “npm install” command.
Step 3: execute “npm install @syncfusion/ej2-ng-charts --save” command.
Step 4: execute “npm start” command.
We have attached the sample for your reference. Find the sample from the below link.
Demo Sample Link: StackingColumnDynamicSeries
Please refer below screenshot for stacking column with adding dynamic series.
Screenshot:
 |
Kindly revert us, if you have any concern.
Thanks,
Bhuvanesh V.
SIGN IN To post a reply.
