Live-Aktualisierung Rikscha Graph

Question

Ich versuche Rikscha zu verwenden, um einen schönen Platzhalter Diagramm zu erstellen, die Live-Aktualisierung mit zufälligen Daten zeigt, etwa so:

var series = [[], []]; 
var random = new Rickshaw.Fixtures.RandomData(150); 

for(var i = 0; i < 80; i++) { 
    random.addData(series); 
} 

var throughput = new Rickshaw.Graph({ 
    element: document.querySelector("#throughput_chart"), 
    width: "300", 
    height: "200", 
    renderer: "line", 
    series: [{ 
     color: "gold", 
     data: series[0] 
    }] 
}); 

var alerts = new Rickshaw.Graph({ 
    element: document.querySelector("#alerts_chart"), 
    width: "300", 
    height: "200", 
    renderer: "line", 
    series: [{ 
     color: "red", 
     data: series[1] 
    }] 
}); 

throughput.render(); 
alerts.render(); 

setInterval(function() { 
    random.addData(series); 
    throughput.update(); 
    alerts.update(); 
    /* XXX: This causes the data to stop drawing properly 
    series.forEach(function(s) { 
     s.shift(); 
    }); 
    */ 
}, 1000); 

Dies funktioniert, mit Ausnahme des auf Kommentar Teil. So fügt es immer neue Daten hinzu, was bedeutet, dass der Graph immer enger wird. Ich möchte in der Lage sein, das erste Element jedes Mal zu entfernen, wenn ich am Ende ein neues Element hinzufüge, um den Graphen mit der gleichen Anzahl von Datenpunkten zu erhalten, aber wenn ich diesen Code einfüge, verursacht das schnell den Graphen um alle Daten anzuzeigen, obwohl console.log zeigt, dass das Array immer noch voll von Daten ist.

Wie kann ich das machen, so dass ich nur eine feste Anzahl von Datenpunkten gleichzeitig anzeigen kann?

Answer 1

die Führung des Beispiels auf der Dokumentation Rickshaw (http://code.shutterstock.com/rickshaw/examples/fixed.html) Im Anschluss an, ich habe etwas zusammen geschlagen zu ähnlich, was Sie brauchen:

JS FIDDLE

var tv = 50; 

var throughput = new Rickshaw.Graph({ 
    element: document.querySelector("#throughput_chart"), 
    width: "300", 
    height: "200", 
    renderer: "line", 
    series: new Rickshaw.Series.FixedDuration([{ 
     name: 'one', color: 'gold' 
    }], undefined, { 
     timeInterval: tv, 
     maxDataPoints: 100, 
     timeBase: new Date().getTime()/1000 
    }) 
}); 

var alerts = new Rickshaw.Graph({ 
    element: document.querySelector("#alerts_chart"), 
    width: "300", 
    height: "200", 
    renderer: "line", 
    series: new Rickshaw.Series.FixedDuration([{ 
     name: 'one', color: 'red' 
    }], undefined, { 
     timeInterval: tv, 
     maxDataPoints: 100, 
     timeBase: new Date().getTime()/1000 
    }) 
}); 

for(var i = 0; i < 100; i++){ 
    addRandomData(throughput); 
    addRandomData(alerts); 
} 

throughput.render(); 
alerts.render(); 

setInterval(function() { 

    addRandomData(throughput); 
    addRandomData(alerts); 
    throughput.render(); 
    alerts.render(); 

}, tv); 

function addRandomData(chart) { 
    var data = { 
     one: Math.floor(Math.random() * 40) + 120 
    }; 
    chart.series.addData(data); 
} 

Answer 2

Die FixedDuration Klasse funktioniert nicht mit RandomData, soweit ich weiß. Was ich tue, ist der ersten Datenpunkt in der Serie Arrays entfernen, so dass die Grafik nicht voll bekommt und es strömt nach links, wenn mehr Daten hinzugefügt werden:

setInterval(function() { 
    random.addData(seriesData); 
    for (i=0; i < seriesData.length; i++){ 
     var series0 = seriesData[i][seriesData[i].length-1]; 
     seriesData[i].shift(); 
     seriesData[i].push(series0); 
    } 
    graph.update(); 
}, 3000); 

Ich bin nicht ganz sicher, warum Sie hinzufügen müssen der zuletzt hinzugefügte Datenpunkt wieder am Ende des Arrays (series[x].push(seriesX)), aber es funktioniert nicht anders. Es hat nicht den Effekt, den letzten Datenpunkt zu verdoppeln, nur einer wird hinzugefügt. Hoffe, das funktioniert für dich!