How to dynamically update jQuery Flot from Native JSON.

Question

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 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?

Answer 1

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()]