Question

Now I currently have an array that contains 120 pairs. For example:

[[1, 12],
 [2, 15],
 [3, 10]]

Essentially 120 long. Now I am using this data in a Jquery Flot graph. “I have a live example on jsFiddle here“

Code:

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

function EveryOneSec() {
  if (numbers.length == 120) {
      numbers.shift();
  }
  numbers.push([x++, Math.random()*10]);
  PlotData = numbers;
  $.plot($("#PlaceHolder"), [{ data: PlotData, points: { show: true},lines: { show: true }}]);
    console.log(PlotData);
  setTimeout(EveryOneSec, 1000);
}
EveryOneSec();

I am creating the numbers on the fly (see jsFiddle Example) just with a simple increment of 1 for the first number and math random for the 2nd now this all works well and fine and sits their counting up again see the jsfiddle example.

Now what I would like to try and do is instead of increasing the numbers by 1 is play with the array. So that the first pair of the array is always [1, ##] and the 120th is always [120, ##] for all within the array. The idea being that it updates every 1 sec so the final result closest to the axis on the left is 120 showing 120 secs ago or 2mins.

So the question is: What would be the most efficient way to do this?

Because the number added on the fly is going to become outdated as soon as it does the next update.

Answer 1

An array with 120 element does not take long to iterate, so doing a for…next on it is ok, IMO. Cleaning up the code, you could have :

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

function EveryOneSec() {
  numbers.push(Math.round(Math.random()*10));  // generate integer from 0-10
  numbers = numbers.slice(-120); // keep only the last 120 max elements every time
  var PlotData = $.map(numbers, function(n,i) { return [[i+1,n]]; });
  $.plot($("#PlaceHolder"), [{ data: PlotData, points: { show: true},lines: { show: true }]);
  console.log(PlotData);
}
var timer = setInterval(EveryOneSec, 1000);

// you can stop the timer with clearInterval(timer);

******EDIT**** : the code above will “scroll” the points from right to left, to reverse this, you can unshift the data instead of pushing, simply replace the first two lines of the function by this

numbers.unshift(Math.round(Math.random()*10));  // generate integer from 0-10
numbers = numbers.slice(0, 120); // keep only the fist 120 max elements every time

you will “scroll” from left to right 🙂

To reverse the axis (from 120 to 0), simply replace the returned value : [[120-i,n]]