We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131109 Jun 20,2017 04:37 PM UTC Jun 21,2017 12:41 PM UTC JavaScript 1
loading
Tags: ejSparkline
Chuck Harris
Asked On June 20, 2017 04:37 PM UTC

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')
);


Dharanidharan Dharmasivam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;