How to dynamically update jQuery Flot from Native JSON

Prior Information: (In case you are wondering where I am coming from)

First Question: How to set a JS variable every n sec to a JSON array.

Thanks to help got that all going well :)

I then worked on limiting the total amount in the array, tried to set it to 10 but every time it would stop at 7.. with help from here got this working nicely.

Second Question: How to limit a native JSON array to 10 places.

Again working perfectly..

---

Question:

Now I am 开发者_JAVA技巧stuck at a stage where I have got my JSON array formatting into the exact context I would like. e.g: [["0", "7"], ["0", "7"], ["0", "7"]] And I am aiming on plotting this into a Jquery Flot Graph. Now if I manually set a variable of:

var PlotData= [["0", "7"], ["0", "7"], ["0", "7"]]

Jquery Flot will plot this perfectly but as an incrementing value that starts at null it will add a blank graph then never refresh it. My code is as follows:

var numbers = [];
var jsonString = "";
var PlotData;

function EveryOneSec() {
  if (numbers.length == 10) {
      numbers.shift();
  }
  numbers.push(['0", "' Math.random()]);
  jsonString = JSON.stringify({'numbers': numbers});
  PlotData = numbers; //set to numbers for now rather than the JSON just for testing.
  $.plot($("#PlaceHolder"), [{ data: PlotData, points: { show: true}}]);
  setTimeout(EveryOneSec, 1000);
}

Now the function runs every sec. But will not update the Plot. Does anyone know what I am missing or what I have to do to be able to Dynamically update the Jquery Flot Graph?

---

Creating a new plot as Reigel suggests isn't the way to go - it might have been in 2010 when it was written.

Nowadays, you should use setData(), redraw() and possibly setupGrid().

var oldData = [[0,0],[1,1]],
    newData = [[1,1],[2,2]],
    graph = $.plot($("#plot"), oldData, options);

graph.setData(newData);  // Replace oldData with newData
graph.setupGrid();       // Adjust axes to match new values
graph.draw();            // Update actual plot

---

try something like this...

$.plot($("#PlaceHolder"), PlotData, {points: { show: true}});

also I think, you got unpaired quotes here

numbers.push(['0", "' Math.random()]); // typo? should it be like ["0", Math.random()]