Canlı güncelleme Puspus grafiği

Question

ben şöyle rastgele veriler, canlı güncelleme gösteren güzel bir yer tutucu grafik oluşturmak için Rickshaw kullanmaya çalışıyorum

:

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

Bu dışarı yorum kısmı hariç çalışır. Olduğu gibi, veri eklemeye devam ediyor, bu da grafiğin gittikçe kalabalıklaştığı anlamına geliyor. Grafiği aynı sayıda veri noktasıyla tutmak için, her yeni nesneyi eklediğimde, ilk öğeyi kaldırabilmeyi isterdim, ancak bu kodu hızlı bir şekilde koyduğumda, console.log, dizinin hala veriyle dolu olduğunu gösterse de, herhangi bir veriyi görüntülemek için kullanılır.

Bu işi nasıl yapabilirim, böylece bir seferde yalnızca sabit sayıda veri noktası görüntülüyorsunuz? Çekçek belgelerine (http://code.shutterstock.com/rickshaw/examples/fixed.html) örneğin yolundan giderek

Answer 1

, sana ne gerek için birlikte benzer bir şey çaldı ettik:

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

FixedDuration sınıfı ile çalışmıyor RandomData, bildiğim kadarıyla. Ne yapmam, grafik kalabalık almaz böylece serisi dizilerde ilk Datapoint kaldırmak ve daha fazla veri eklendiğinde gibi sola akışları:

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

Ben Eklemek neden ihtiyaç tamamen emin değilim Son eklenen veri noktası, dizinin sonuna (series[x].push(seriesX)) geri döndü, ancak aksi halde çalışmaz. Son veri noktasını iki katına çıkarma etkisi yoktur, sadece bir tanesi eklenir. Umarım bu senin için çalışır!