aggiornamento live grafico Rickshaw

Question

Sto cercando di utilizzare Rickshaw per creare un bel grafico segnaposto che mostra l'aggiornamento in tempo reale con dati casuali, in questo modo:

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); 

Questo funziona, fatta eccezione per la parte commentata. Così com'è, continua ad aggiungere dati, il che significa che il grafico diventa sempre più affollato. Mi piacerebbe essere in grado di rimuovere il primo oggetto ogni volta che aggiungo un nuovo oggetto alla fine, in modo da mantenere il grafico con lo stesso numero di punti dati, ma quando inserisco quel codice in esso rapidamente il grafico non per visualizzare tutti i dati, anche se console.log mostra che la matrice è ancora piena di dati.

Come posso fare in modo che funzioni, in modo da visualizzare solo un numero fisso di punti dati alla volta?

Answer 1

Seguendo l'esempio dell'esempio sulla documentazione per Rickshaw (http://code.shutterstock.com/rickshaw/examples/fixed.html), ho buttato insieme qualcosa di simile a quello che vi serve:

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

La classe FixedDuration non funziona con RandomData, per quanto ne so. Quello che faccio, è rimuovere il primo punto dati negli array serie in modo che il grafico non affollata e flussi a sinistra come si aggiunge un altro dato:

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); 

io non sono del tutto sicuro perché è necessario aggiungere l'ultimo punto di dati aggiunto ritorna alla fine dell'array (series[x].push(seriesX)), ma non funziona diversamente. Non ha l'effetto di raddoppiare l'ultimo datapoint, ne viene aggiunto solo uno. Spero che questo funzioni per te!