Dynamically create series in line chart

[Umer]

Hi!!
I have used your library to create line chart, but in the example all the series are created statically.
I want to create series dynamically. Can you help me with that?
Thanks 

[Baby Palanidurai]

Hi Umer, 

      We have analyzed your query. To use line series, you need to inject LineSeriesService into AppModule and you can add dynamic series to chart using addSeries method. To add new series dynamically, you can pass the series value to the addSeries method. Please find the code snippet below to achieve this requirement. 

HTML 

<ejs-chart #chart id='chartcontainer' > 

            <e-series-collection> 

                <e-series [dataSource]='data' type='Column' xName='x' yName='y' > </e-series> 

            </e-series-collection> 

    </ejs-chart> 

    <button ejs-button class='e-flat' (click)='add()'>add </button> 

TS 

 

export class AppComponent implements OnInit { 

    @ViewChild('chart') 

    public chart: ChartComponent; 

     add() { 

                this.chart.addSeries([{ 

                type: 'Column', 

                dataSource: [{ x: 'John', y: 11000 }, { x: 'Jake', y: 16000 }, { x: 'Peter', y: 19000 }, 

                { x: 'James', y: 12000 }, { x: 'Mary', y: 10700 }], 

                xName: 'x', width: 2, 

                yName: 'y' 

            }]); 

        } 

} 

Screenshot: 

                  

Sample for reference can be find from below link, 

https://plnkr.co/edit/5GjR0wDTBe5m4WF49SV1?p=preview 

And also, If you want to add data points dynamically, you can refer from below link, 

https://ej2.syncfusion.com/16.1.24/angular/documentation/chart/how-to.html#create-a-live-chart 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby. 

[Preethi Nesakkan Gnanadurai]

From: umer Ali  

Subject: Re: Syncfusion support community forum 136311, Dynamically create series in line chart, has been updated. 

I have tried your method my code is 

<ejs-chart #chart style='display:block' align='center' id='chartcontainer' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' 

            [tooltip]='tooltip' (load)='load($event)' [chartArea]='chartArea' [width]='width'> 

            <e-series-collection> 

                <e-series [dataSource]='data' type='Line' xName='x' yName='y' name="Umer" width=2 [marker]="marker"> </e-series> 

            </e-series-collection> 

        </ejs-chart> 

In Component  

ngOnInit() { 

    this.data = [ 

      { x: new Date(2018, 3, 8 , 14 , 26 , 1), y: 32.61 }, 

      { x: new Date(2018, 3, 8,14,26,4), y: 40.57 }, 

      { x: new Date(2018, 3, 8,14,26,9), y: 50.29 }, 

      { x: new Date(2018, 3, 8,14,26,23), y: 25.04 }, 

   

   

    ]; 

 

    this.primaryXAxis = { 

      valueType: 'DateTime', 

      labelFormat: '', 

      interval : 5, 

      intervalType: 'Seconds', 

      edgeLabelPlacement: 'Shift', 

      majorGridLines: { width: 0 } 

  }; 

 

    this.primaryYAxis = { 

      labelFormat: '{value} mph', 

      rangePadding: 'None', 

     minimum: 0, 

      maximum: 100, 

      interval: 10, 

      lineStyle: { width: 0 }, 

      majorTickLines: { width: 0 }, 

    }; 

  this.title = 'Speed - Datetime Graph'; 

     

  } 

Add Method 

add(){  

    this.chart.addSeries([{  

    dataSource: [{ x: new Date(2018, 4, 8 , 14 , 26 , 1), y: 32.61 }, 

      { x: new Date(2018, 3, 8,14,26,4), y: 40.57 }, 

      { x: new Date(2018, 3, 8,14,26,9), y: 50.29 }, 

      { x: new Date(2018, 3, 8,14,26,23), y: 25.04 },],  

    xName: 'x', width: 2,  

    yName: 'y'  

    }]);  

        } 

Now when every time i clicked the add button it will delete the original series and create the new one i don't want the previous series to be deleted. Can you help? 

[Baby Palanidurai]

Hi Umer, 

We have analyzed your query. You have used same datasource for original series and new series and also you used series type as line. While add the new series using button click, there is original series have not deleted. Because of using same data for original and new series and also used series type as line type, the new series plotted in the same path. So this is the problem for looking like a original series deleted. If you use series name or different datasource or series type as different types, you will see the difference. Please find the code snippet below to achieve this requirement. 

HTML: 

 

        <e-series-collection>  

                <e-series [dataSource]='data' type='Line' xName='x' yName='y' name="Umer"> </eseries>  

        </e-series-collection> 

TS: 

 

add() { 

                this.chart.addSeries([{ 

                type: 'Column', 

                dataSource: [{ x: new Date(2018, 3, 8 , 14 , 26 , 1), y: 52.61 },  

      { x: new Date(2018, 3, 8,14,26,4), y: 60.57 },  

      { x: new Date(2018, 3, 8,14,26,9), y: 90.29 },  

      { x: new Date(2018, 3, 8,14,26,23), y: 125.04 }], 

                xName: 'x', width: 2, 

                yName: 'y', name: ‘series’ 

            }]); 

        } 

Screenshot: 

 

Sample for your reference can be find from below link, 

https://plnkr.co/edit/CXjIjz6QrzPQSW1W3MeE?p=preview 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby.