Simple question: How can I refresh the chart when the data in the dataSource has chnaged?

Question

Hi All,

 

New here and trying
to make this work.  Please note I’m also not very skilled in JS.

 As the subject
says, how do I update/refresh the chart if the datasource has changed?  In
my case I am using a JSON array but that is being update and changed dynamically
in my app.

 I've tried
chart.refresh().  Is there something equivalent to updateSeries?  (I have
added series successfully but that only adds a series, not updates the existing
series with new data.Thanks in advance.

Durga Gopalakrishnan · Accepted Answer

Hi Philip, 
 
Thank you for contacting Syncfusion support. 
 
We have analyzed your query. Using chart addSeries method, you can update chart series only. To add data points in a series, you need to push the x and y values as object to the series datasource and then update the chart using refresh method. We have prepared a sample as per you requirement. 
 
Code Snippet 
 




document.getElementById('load').onclick = () => { 
         chart.series[0].dataSource.push({ x: new Date(2012, 0, 1), y: 74 }); 
         chart.series[1].dataSource.push({ x: new Date(2012, 0, 1), y: 90 }); 
         chart.refresh(); 
} 
 
Screenshot 
 
  
  
Sample 
https://stackblitz.com/edit/yscmdq-p8qqlf 
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Durga G

Philip · Answer

Hello and thankyou for your response. I see that your suggestion is using normal Jacascript array methods (like push or pop, unshift etc)

This is usefull to know as i can further research and apply.

In my case though what method would be best if you wanted to override that data in the datasource, not just add new data to it?

Currently i am re-running the entire chart render process but im sure there is a better way.

Thanks.

Durga Gopalakrishnan · Answer

Hi Philip, 

We have analysed your query. You can override the data in data source by assigning the values directly and re render entire chart using refresh method. We have modified sample and attached same for reference. Please check with the below code snippet and sample. 

Code Snippet 
 




document.getElementById('load').onclick = () => { 
        // to override single point. 
          chart.series[0].dataSource[0].y = 14; 
         chart.series[1].dataSource[0].y = 34; 
 
        // to change whole data 
        chart.series[0].dataSource = [ 
          { x: new Date(2012, 0, 1), y: 31 },  
          //… 
        ]; 
         chart.series[1].dataSource = [ 
            { x: new Date(2012, 0, 1), y: 18 },  
            //… 
         ]; 
         chart.refresh(); 
} 

Screenshots 

Before Button Click 

  
After Button Click 

  
Sample 
https://stackblitz.com/edit/yscmdq-aag5hb 

Please revert us, if you have any concerns. 

Regards, 
Durga G

Philip · Answer

Thank you Durga.  This info has been helpful and will improve the performance on reloading new data.

Durga Gopalakrishnan · Answer

Hi Philip, 

Most welcome. Please get back to us, if you need any further assistance. 

Regards, 
Durga G