Updating data using fleet reset data

Question

I have a graphics card that I want to dynamically update via AJAX.

I can display the chart first, but whenever I try to update the DataSet and redraw the chart, it resets all my data:

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

I tried this with a few different array settings, and it seems that I am passing it the correct data - the chart simply does not accept.

Does anyone have any idea? Thanks!

http://datasift.islsandbox.com/

WebSockets are used in this example, so WebKit is the best choice for testing.

Answer 1

In your code you have two things with installing a fleet. On boot, you do this:

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

Then you get the new data through AJAX and do this:

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

The downside is that the first time you use the data format, where each series is an object, but then when you call setData a second time, you use the series as an array. I don’t know exactly where, but this is a mess. Here's how to fix it in the 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(); 

Answer 2

If you want several episodes with your tags:

 plot.setData([ { label: 'Hola', data: data[0], }, { label: 'Hola2', data: data[1] } ]); plot.setupGrid(); plot.draw(); 

If the data can be obtained from an ajax call in json format.

For example, in php:

 <?php $data[] = array(2,4); $data[] = array(12,6); $data[] = array(22,8); $data[] = array(32,2); $data1[] = array(4,6); $data1[] = array(14,3); $data1[] = array(24,9); $data1[] = array(34,5); $response[0] = $data; $response[1] = $data1; echo json_encode($response); ?> 

In any case, the return format value from the server side should be approximately the same as for the two series, such as the example above:

[[[[2,4], [12,6], [22,8], [32,2]], [[4,6], [14,3], [24,9], [34,5 ]]]

Answer 3

If you want to update your chart more than once, you can encapsulate parameter variables

 var drawcourb = function(){ var options = { series : { } }; var plot = $.plot($("#placeholder"), [ { label : "balbla", data : courbData, otherOption : "value" } ], options); return function(courbData){ plot.setdata([{ label : "blabla", data : courbData, }]); plot.draw(); } 

}

Then you can call the update of your function:

 var updateProgressPlot = drawcourb(); updateProgressPlot(newDataSet);