Not able to use two “data series” in Flotcharts (In real time example)

[Roberval Sena 山本]

I just follow the tutors (and the post from "StackOverfklow") to create 2 lines series in this real-time graphics example, but this two lines appear to use the very same data...

I just cant figure out what I am doing wrong... here is my adustments(they are -> getRandomData2):

here is my version:

$(function() {

// info for graph2

instant=1;

high=-45;

frequency=3;

// We use an inline data source in the example, usually data would

// be fetched from a server

var data = [],

totalPoints = 300;

function getRandomData() {

if (data.length > 0)

data = data.slice(1);

// Do a random walk

while (data.length < totalPoints) {

var prev = data.length > 0 ? data[data.length - 1] : 50,

y = prev + Math.random() * 10 - 5;

if (y < 0) {

y = 0;

} else if (y > 100) {

y = 100;

}

data.push(y);

}

// Zip the generated y values with the x values

var res = [];

for (var i = 0; i < data.length; ++i) {

res.push([i, data[i]])

}

return res;

}

function getRandomData2() {

if (data.length > 0)

data = data.slice(1);

while (data.length < totalPoints) {

instant=instant-frequency;

if (instant<high ){instant=(high*-1);}

instantShow=instant;

if(instantShow<20){instantShow=20;}

data.push(instantShow);

}

// Zip the generated y values with the x values

var res = [];

for (var i = 0; i < data.length; ++i) {

res.push([i, data[i]])

}

return res;

}

// Set up the control widget

var updateInterval = 30;

$("#updateInterval").val(updateInterval).change(function () {

var v = $(this).val();

if (v && !isNaN(+v)) {

updateInterval = +v;

if (updateInterval < 1) {

updateInterval = 1;

} else if (updateInterval > 2000) {

updateInterval = 2000;

}

$(this).val("" + updateInterval);

}

});

var plot = $.plot("#placeholder", [getRandomData()],[getRandomData2()], {

// var plot = $.plot("#placeholder", [{ data: getRandomData()},{ data: getRandomData2()}], {

series: {

shadowSize: 0   // Drawing is faster without shadows

},

yaxis: {

min: 0,

max: 100

},

xaxis: {

show: false

}

});  

function update() { plot.setData([getRandomData()],[getRandomData2()]);

// function update() { plot.setData([{data:getRandomData()},{ data:getRandomData2()} ]);

    plot.draw(); 

setTimeout(update, 25); 

}

update();

// Add the Flot version string to the footer

$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");

});

[Ced]

Here is a working JSFiddle.
Note that this example requires jquery.flot.time.js.

var DATA_AGE_LIMIT = 30000; // milliseconds
var UPDATE_INTERVAL = 1000; // milliseconds

var data = [
  {
    label: "Series 1",
    data: []
  },
  {
    label: "Series 2",
    data: []
  }
];

var options = {
  series: {
    shadowSize: 0

  },
  yaxis: {
    min: 0,
    max: 100
  },
  xaxis: {

    mode: "time"
  }
};

// Modifies a series object to remove old data points and
// adds a new data point.
function getRandomData(series) {

  var now = new Date().getTime();

  // Drop old data points from the series
  var i;
  for (i=0; i<series.data.length; i++) {
    if (series.data[i][0] > now - DATA_AGE_LIMIT) {
      break;
    }
  }
  series.data = series.data.slice(i);
 
  // Get new random Y value
  // Start the random sequence at 50 or
  // get a random value within +/- 5 of previous value
  var lastY = series.data.length > 0 ? series.data[series.data.length - 1][1] : 50;
  var newY = lastY + Math.random() * 10 - 5;

  // Limit the new value between 0 and 100
  if (newY < 0) {
    newY = 0;
  } else if (newY > 100) {
    newY = 100;
  }

  // Add the new data point to the series
  series.data.push([now, newY]);
}

function update() {
  getRandomData(data[0]);
  getRandomData(data[1]);

  $.plot("#graph", data, options);
  setTimeout(update, UPDATE_INTERVAL);
}

update();

[Roberval Sena 山本]

Thanks a lot !!

It was REALY helpfull!   glad it comes with jsfidle!!
To a beginner like me, examples are the most important point! 

now I can study it! 

tks again!