creating and Updating multiple charts dynamically

[Manu]

Hello,

1) I want to create 10 charts dynamically on the same page, how do we do it.

2) To update a single chart, I'm using the below code

@ViewChild('chart')
public chart: ChartComponent;

UpdateChart(){

this.chart.series[0].dataSource = test;
this.chart.refresh();
}
Suppose if there are 10 charts in the same page, the chart ids are generated dynamically, how do we refresh the chart with new data.

[Baby Palanidurai]

Hi Manu, 

We have analyzed your query. Please find the following response for your query. 

Query	Response
How to adding more charts dynamically.	You can use *ngFor for adding more charts dynamically. Please find the code snippet below to achieve this requirement.  <div *ngFor="let data of [1,2,3, 4, 5, 6, 7, 8, 9, 10]; index as i" [attr.data-index]="i">      <ejs-chart>      </ejs-chart>      </div>  In this we have include 10 chart based on the indexes in the data.
How do refresh charts with data for dynamic charts.	Since we are adding the chart dynamically, we don’t have information about the number of chart and we can’t get the chart using viewChild options. Instead we can get the parent element of chart and we can refresh the chart. For example if we add our charts inside a div, we can get the child elements and if its id matches with our scenario, we can get chart instance from ej2_instances  variable  and we can refresh the chart with new dataSource.  add() {          var elements = this.elements.nativeElement.children;          for (let i =0; i < elements.length-1; i++) {             if (elements[i].children.length > 0 && elements[i].children[0].id == 'chart' + this.input.nativeElement.value) {             elements[i].children[0].ej2_instances[0].series[0].dataSource = ChartDataService.prototype.GetData().series2;             elements[i].children[0].ej2_instances[0].refresh();              break;             }           }          }  Based on the scenario, we have prepared the sample, please find the sample below.

Screenshot: 

Before adding data source for specified charts 

 

After adding data source for specified charts 

 

Sample for your reference can be find from below link, 

https://plnkr.co/edit/QxVC2K3lMVdHfFx1j5ge?p=preview&preview 

Kindly revert us, if you have any queries. 

Thanks, 

Baby. 

[Manu]

Thank you, this helps :)

[Baby Palanidurai]

Hi Manu, 

Thanks for your update, 

Please let us know if you need any further assistance on this. 

Regards, 

baby 

[Manu]

Hello,

For the dynamic charts if I have to use any of the events like axisLabelRender , how do i do it.

For example in the below example, for the selected index if I want to added the axisLabelRender event, how do I it.

http://plnkr.co/edit/Cv61TiyIHZQEZbqKQRDg?p=preview

[Baby Palanidurai]

Hi Manu, 

Sorry for the inconvenience.  

We have analyzed your query. Currently we are facing events while using in dynamic charts and the fix will be available for Essential Studio volume 1 service pack 2 release which is expected to be out in the end April, 2018. 

Thanks, 

Baby. 

[Manu]

Is there any work around for axisLabelRender.

[Baby Palanidurai]

Hi Manu, 

We can achieve your requirement as a workaround, for this you have to enable the “axisLabelRender” event for all the charts while creating it; now the event will trigger for all the charts, since you need to customize the axis label only for the selected chart you can validate the chart id in the event as like in below code snippet. 

Html: 

<div *ngFor="let data of [1,2,3, 4, 5, 6, 7, 8, 9, 10]; index as i" [attr.data-index]="i"> 

    <ejs-chart #chart1 id=chart{{i}} height = '250' (axisLabelRender)='axisLabelRender($event)'> 

    </ejs-chart> 

    </div> 

Component.ts: 

add() { 

        var elements = this.elements.nativeElement.children 

        for (let i =0; i < elements.length-1; i++) { 

           if (elements[i].children.length > 0 && elements[i].children[0].id == 'chart' + this.input.nativeElement.value) { 

             this.chartName=elements[i].children[0].id;   // Store the selected particular index 

             elements[i].children[0].ej2_instances[0].refresh(); 

            break; 

           } 

         } 

        } 

// 

public axisLabelRender(args: IAxisLabelRenderEventArgs ): void { 

        // checking chart element id with selected particular index 

      if (args.axis.baseModule.chart.element.id==this.chartName && args.axis.orientation === 'Vertical') { 

        args.text = (parseFloat(args.text)).toExponential(2); 

         

    } 

Screenshot: 

Before select the particular index: 

 

After select the particular index to call events: 

 

Sample for your reference can be find from below link, 

https://plnkr.co/edit/wd9Hw3OfsoGfHqO5s2U0?p=preview&preview 

Kindly revert us, if you have any concerns. 

  

Thanks, 

Baby 

[Manu]

Thank you this helped

[Baby Palanidurai]

Hi Manu, 

Thanks for your update, 

Please let us know, if you need any further assistance on this. 

Regards, 

baby 

[Baby Palanidurai]

Hi Manu, 

     Thanks for your patience, we have mentioned in our previous update, that we are facing issue in events while using in dynamic charts, actually this is a sample level issue in binding events.  

Please find the code snippet below to achieve this requirement. Sorry for the inconvenience.  

             let chart: ChartComponent = elements[i].children[0].ej2_instances[0]; 

             chart.axisLabelRender.subscribe((args: IAxisLabelRenderEventArgs) => { 

                  if (args.axis.orientation === 'Vertical') { 

                      args.text = (parseFloat(args.text)).toExponential(1); 

         

                   }   

              }); 

              chart.refresh(); 

Sample for your reference can be find from below link, 

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

Kindly revert us, if you have any concerns. 

Thanks, 

Baby.