1. Home
  2. Forum
  3. Angular - EJ 2
  4. creating and Updating multiple charts dynamically

creating and Updating multiple charts dynamically

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.

10 Replies
BP Baby Palanidurai Syncfusion Team March 21, 2018 01:10 PM UTC

Hi Manu, 

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

Query 
Response 
  1. 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. 

  1. 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, 

Kindly revert us, if you have any queries. 

Thanks, 
Baby. 


MA Manu March 22, 2018 10:55 AM UTC

Thank you, this helps :)

BP Baby Palanidurai Syncfusion Team March 23, 2018 04:40 AM UTC

Hi Manu, 

Thanks for your update, 

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

Regards, 
baby 


MA Manu April 11, 2018 02:42 PM UTC

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

BP Baby Palanidurai Syncfusion Team April 12, 2018 12:54 PM UTC

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. 


MA Manu April 12, 2018 01:25 PM UTC

Is there any work around for axisLabelRender.

BP Baby Palanidurai Syncfusion Team April 13, 2018 08:34 AM UTC

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, 

Kindly revert us, if you have any concerns. 
  
Thanks, 
Baby 


MA Manu April 18, 2018 09:35 AM UTC

Thank you this helped

BP Baby Palanidurai Syncfusion Team April 19, 2018 04:17 AM UTC

Hi Manu, 

Thanks for your update, 

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

Regards, 
baby 


BP Baby Palanidurai Syncfusion Team April 23, 2018 06:54 AM UTC

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, 

Kindly revert us, if you have any concerns. 

Thanks, 
Baby. 


Loader.
Up arrow icon