Dynamic Stacking Column

[Albert K]

Hi,

How do I achieve a dynamic number of stacking column with JS 2 and angular?  

Also can I combine the data source to look like

{ series: 'Product A' , data: [{ date:'2016-01-01', qty: 200}, {date:'2016-02-01', qty: 20 }, {date:'2016-03-01', qty: 40 }],

   series: 'Product B' , data: [{ date:'2016-01-01', qty: 100}, {date:'2016-02-01', qty: 30 }, {date:'2016-03-01', qty: 30 }],

  serires: 'Product C' , data: [{ date:'2016-01-01', qty: 50}, {date:'2016-02-01', qty: 60 }, {date:'2016-03-01', qty: 90 }] }

Thank you.

[Bhuvanesh Valarman]

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.