Updating dataSet with flot resets data

Question

I've got a flot chart that I want to dynamically update via AJAX.

I can render the chart initially, but whenever I try to update the dataSet and redraw the chart, it resets all my data points:

plot.setData(dataSet);
        plot.draw();

I have tried this with several different array setups, and it seems like I am passing it the right data—the chart just doesn't take.

Anyone have any ideas? Thanks!

http://datasift.islsandbox.com/

This example uses WebSockets, so a WebKit browser is your best bet for testing.

Answer 1

In your code you have two things with flot setup. On load, you do this:

var plot = $.plot($("#flotchart"), [{
    data: [[35, 0]],
    bars: {show: true, horizontal: true}
}]);

Then later, you get some new data via AJAX and do this:

 var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData(dataSet);
 plot.draw();

The thing that's missing is that in your initial call you're using the data format where each series is an object, but then when you call setData the second time around, you're using the the "series as an array" variation. I'm not exactly sure where, but that is messing up flot. Here's how to fix it in your second call:

 var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData([{
    data:dataSet,
    bars: {show: true, horizontal: true}
 }]);
 plot.draw();