Dynamic refreshing of chart

[hari-rangarajan]

I'm running into this problem with tool tips getting stuck: http://stackoverflow.com/questions/36205526/tooltip-bug-with-dynamic-google-charts

Can you consider adding this solution:
"
container = document.getElementById('' + youridentifier + '');
chart = new google.visualization.Timeline(container);
chart.draw(dataSet, options);

Every time you "redraw" the google chart you have to create a new visualization object .
"
Thanks

[hari-rangarajan]

On second thoughts, is there a way to use 'shouldComponentUpdate' to prevent unnecessary updates?

[rakannimer]

Hey @hari-rangarajan,

Re-creating a new visualization object on each re-draw would make the library feel sluggish, and all animations when changing the data will be lost, so I'm not sure it would be the best idea.

Can you provide me with some code that I can run to help debug this issue ?

Cheers !

[hari-rangarajan]

I don't how to package a runnable version but here is the idea to trigger the bug. Set new data when processing any event. The old tool tips get stuck. This is what the stack overflow link I posted earlier talks about.

componentDidMount: function() {
var chart_events = [
{
eventName : 'onmouseover',
callback : function(Chart) {
// Returns Chart so you can access props and the ChartWrapper object from chart.wrapper
console.log("mouseover the chart");
>>>>>> this.setState(columns: newColumnData); <<<<<<
}
}
];

},
render: function() {
<Chart chartType = "ScatterChart" rows = {this.state.rows} columns = {this.state.columns} options = {this.state.options} graph_id = "ScatterChart" width={"100%"} height={"400px"} chartEvents = {chart_events} />

}

[hari-rangarajan]

Another way to do it would be to create a component containing any html element and the google chart. When handling any event on the google chart, update the html element with a setState. This will force a redraw on the entire component and produce the problem.