How to refresh data in Chart with Meteor + React

Question

I am using Charts in my Meteor React project. The line chart works fine when I declare the chart data and place it in the "componentWillMount". The chart then loads and displays the data correctly. After the chart has loaded and rendered, I don't seem to be able to update the chart. The data source I'm using is a state in the React component. When I update the state, the chart doesn't automatically refresh. I am running the chart in a setInterval and want to update it frequently. What is the best way to refresh the chart? Thanks.

Baby Palanidurai · Answer

Hi Mark, 

Thanks for using Syncfusion products, 

  We have analyzed your query and as per your requirement we have prepared a sample in which the chart got initialized in componentWillMount. In that sample we have refreshed the data in set interval by using refresh method in chart options.  

Please find the code snippet below to achieve this requirement, 





componentWillMount() { 
    this.tick(); 
  } 
   componentDidMount() { 
    this.timerID = setInterval( 
      () => this.tick(), 
      100 
    ); 
  } 

  componentWillUnmount() { 
    clearInterval(this.timerID); 
  } 

  tick() { 
   
        if (this.value < 25) { 
                        this.value += Math.random() * 2.0; 
                    } else { 
                        this.value -= 2.0; 
                    } 
                    this.series1.push({ x: this.i, y: this.value }); 
                    this.i++; 
                    this.series1.shift();  
                    this.setState({ title: 'akdsjajf'+ this.i, series1: this.series1 }); 
                    if (this.chart) { 
                    this.chart.refresh(); 
                    } 
  }   

Screenshot: 
  

Sample for your reference can be find from below link, 
http://plnkr.co/edit/gcoIDKY5XrCfAWsAx0Up?p=preview 

More information on dynamic update can be found in the below link  

https://ej2.syncfusion.com/react/documentation/chart/how-to.html#create-a-live-chart 

Kindly revert us, if you have any concerns. 


Thanks, 
Baby.

Preethi Nesakkan Gnanadurai · Answer

From: Mark Thrasher  
Subject: Re: Syncfusion support community forum 138312, How to refresh data in Chart with Meteor + React, has been updated. 

Thank you very much for the code snippet.  I was able to resolve my problem using the ref={g => chart=g} line of code.  I have been very impressed with SyncFusion UI components.  Again, thanks for you help!

Baby Palanidurai · Answer

Hi Mark,
 
Thanks for your update,
 
   Please let us know if you need any further assistance on this.
 
 
Thanks,
Baby.