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

[Philip]

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]

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]

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]

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]

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

[Durga Gopalakrishnan]

Hi Philip, 

Most welcome. Please get back to us, if you need any further assistance. 

Regards, 

Durga G