Graph sometimes appears to show two lines for a series
Brought to you by:
moxiesquinn
Menu
▾
▴
I am using GWT 2.5 and Highcharts 1.5.0. (I am also using SmartGWT in the application.) My graph has an outgoing percentage line which is updated every 10 seconds. This line works fine and the single update every ten seconds works great. The screen that contains this graph also has a set of checkboxes which the operator can change to make different selections on the graph. When a different selection is made, the application via a web service call gets the new set of data and displays it on the graph.
Under normal circumstances when I just add a point I use Series.addPoint, however when I need to display a whole batch of data (i.e. the user made a checkbox change) I have been using Series.setPoints. It seems to work faster.
It's possible for the user to check a few checkboxes and for each one I have to display new data. If a few calls are made to the web service the graph will quickly add the new set of data and then refresh with the newest data. Depending on the number of checkbox changes this can happen several times. I have a requirement to provide new data for each change. I cannot force the user to make all his checkbox changes and then apply them.
Under most circumstances, it does not matter how many changes the user makes, because the graph just seems to update correctly, however there have been some occasions when I get a double line on the graph. It's almost like the last line has not been cleared before the new one is drawn.
If this wasn't a web application with GWT I would synchronize the method to add points to the graph but I am unable to do this. Are there any events or other methods I can use to verify all the old data which is internally stored in the series is actually not there?
Thanks for taking the time to read this and any help you can give
Phil
You may have encountered a bug with the core Highchart's API, but I can't tell for sure without a working example (which I understand would be pretty difficult to provide in this case.) But, you may want to consider upgrading to a later Highcharts JS file to see if that makes a difference:
http://www.highcharts.com/download
Another important thing to note is that the "Series.addPoint" method support an optional "boolean redraw" parameter. If you have a lot of changes you're making to a chart at once, it's best to set that parameter to false. And then, when you know you've finished making a bunch of changes, then you can manually call the "Chart.redraw()" method to apply all of the changes to the live chart. (There's a similar "redraw" parameter for the other methods that can be used to dynamically change the chart on the fly after it has been rendered, such as adding and removing series.)
Hope that helps, but definitely keep us posted on what you find. We have a similar type of application to what you're describing (where based on the user selecting different checkboxes the chart dynamically adds and removes series by loading data from the server) and haven't noticed the issue with the double lines, but it may be that we haven't quite found a way to trigger the behavior you're seeing.