Nicht in der Lage, zwei "Datenreihen" in Flotcharts zu verwenden (In Echtzeitbeispiel)

Question

Ich folge nur den Tutoren (und dem Beitrag von "StackOverfklow"), um 2 Zeilen Serie in this real-time graphics example zu erstellen, aber diese zwei Zeilen scheinen die sehr zu verwenden gleiche Daten ...

ich einfach nicht herausfinden, was ich falsch mache ... hier ist mein adustments (sie sind -> getRandomData2):

$(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() ], { 
    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()]); 
    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; "); 
}); 

Danke für alle suport/Tipps!

Answer 1

Das Problem ist, dass Sie in Ihrer getRandomData() und getRandomData2() arbeiten Sie an der gleichen Variablen data, so eine Funktion überschreibt den Effekt der anderen. Die Lösung ist einfach, sie zu trennen:

// We use an inline data source in the example, usually data would 
// be fetched from a server 

var data1  = [], 
    data2  = [], 
    totalPoints = 300; 

und sie in entsprechenden Funktionen:

function getRandomData() { 
    if (data1.length > 0) 
     data1 = data1.slice(1); 

    // Do a random walk 
    while (data1.length < totalPoints) { 
     var prev = data1.length > 0 ? data1[data1.length - 1] : 50, 
      y = prev + Math.random() * 10 - 5; 

     if (y < 0) { 
      y = 0; 
     } else if (y > 100) { 
      y = 100; 
     } 

     data1.push(y); 
    } 

    // Zip the generated y values with the x values 
    var res = []; 
    for (var i = 0; i < data1.length; ++i) { 
     res.push([i, data1[i]]) 
    } 

    return res; 
} 

function getRandomData2() { 
    if (data2.length > 0) 
     data2 = data2.slice(1); 

    while (data2.length < totalPoints) { 
     instant = instant - frequency; 
     if (instant < high) { 
      instant = (high * -1); 
     } 

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

     data2.push(instantShow); 
    } 

    // Zip the generated y values with the x values 
    var res = []; 
    for (var i = 0; i < data2.length; ++i) { 
     res.push([i, data2[i]]) 
    } 

    return res; 
} 

Dann sind Sie zwei Linien sehen: fiddle.