1. Home
  2. Forum
  3. jQuery
  4. Render Sparkline with new dataSource in response to events (button click in this simple example, SignalR in actual application

Render Sparkline with new dataSource in response to events (button click in this simple example, SignalR in actual application

Using ReactJS, want to rerender sparkline control each time dataSource is changed. Following is CodePen example using button clicks to change the data. The sparkline draws any of the data sets correctly on initial load, but I cannot figure out how to change the dataSource and force the control to render the new data set.

Using 15.2.0.40

What is correct way to refresh a SyncFusion javascript control when using ReactJS?

Thank you.


var dataSourceStart= [10,20,30,40,50,40,30,20,10]; 
var dataSourceOne= [50,40,30,20,10,20,30,40,50]; 
var dataSourceTwo= [10,50,20,60,30,70,40,80,50,90]; 


class SparklineDemo extends React.Component{
  constructor(props)
  {
    super(props);
    this.handleClickOne = this.handleClickOne.bind(this);
    this.handleClickTwo = this.handleClickTwo.bind(this);
    this.state = {data : this.props.data};
  }
  handleClickOne(){
    console.log('handleClickOne');
    this.setState((prevState, props)=>
                  {
                  return {data : dataSourceOne};
    });
    $('#sparkline1').ejSparkline("redraw"); 
  }
  handleClickTwo(){
    console.log('handleClickTwo');
    this.setState((prevState, props)=>
                  {
      return {data : dataSourceTwo};
    });
    $('#sparkline1').ejSparkline("redraw"); 
  }
  componentWillMount(){
    console.log('componentWillMount');    
  }
  componentWillUnmount(){
    console.log('componentWillUnmount');    
  }
  componentDidMount(){
    console.log('componentDidMount');    
  }
  componentWillReceiveProps(nextProps)  {
    console.log('componentWillReceiveProps ' + nextProps.data)
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log('shouldComponentUpdate ' + nextProps.data + ' ' + nextState.data);
    return true;
  }
  componentWillUpdate(nextProps,nextState){
    console.log('componentWillUpdate ' + nextProps.data + ' ' + nextState.data)
  }
  componentDidUpdate(prevProps,prevState){
    console.log('componentDidUpdate ' + prevProps.data + ' ' + prevState.data);
  }
  render()
  {
        var sizeSettings = {
            height: "92px",
            width: "92px"
        };
    console.log('render');
  return (
    <div className="default">
        <EJ.Sparkline id="sparkline1" dataSource={this.state.data} type="column" fill="#ff0000" size={sizeSettings}></EJ.Sparkline>
    
        <EJ.Button id="button1" text="Button One" click={this.handleClickOne}></EJ.Button>
        <EJ.Button id="button2" text="Button Two" click={this.handleClickTwo}></EJ.Button>
      </div>
    );
  }
}

ReactDOM.render(
  <SparklineDemo data={dataSourceStart}/>,
  document.getElementById('root')
);


1 Reply
DD Dharanidharan Dharmasivam Syncfusion Team June 21, 2017 12:41 PM UTC

Hi Chuck, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. To update  the dataSource in sparkline in any external events(click event if button, etc), need to take instance of sparkline component and update the data source as depicted in the below code snippet and call the redraw method in order to take effect of updated data source. We have created a sample with respect to this requirement, in which we have updated the data source in button click event. Find  the code snippet below to achieve this requirement. 

React JS: 

<input type="button" onclick="update()" value="Update"/> 
 
//Code to render sparkline 
React.createElement(EJ.Sparkline, {id: "sparkline1"} 
 
var dataSourceStart = [10, 20, 30, 40, 50, 40, 30, 20, 10]; 
         
 function update() { 
          var sparklineObject = $("#sparkline1").ejSparkline("instance"); 
          sparklineObject.model.dataSource = dataSourceStart; 
          sparklineObject.redraw() 
} 


Screenshot before updating data: 
 

Screenshot after updating data: 
 

Sample for reference can be find from below link. 
 
Thanks, 
Dharani. 


Loader.
Up arrow icon