라이브 업데이트 인력거 그래프

Question

내가 지금과 같은 임의의 데이터, 라이브 업데이트를 보여주는 좋은 자리 그래프를 만들 수 인력거를 사용하려고 해요

:

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

이것은 주석 부분을 제외하고 작동합니다. 즉, 그래프가 점점 더 붐비는 데이터를 계속 추가합니다. 나는 데이터 항목의 동일한 번호로 그래프를 유지하기 위해 끝에 새 항목을 추가 할 때마다 첫 번째 항목을 제거 할 수 있기를 원합니다. 그러나 그 코드를 빠르게두면 그래프가 표시되지 않습니다. console.log이 배열에 여전히 데이터로 가득 차 있음을 보여 주더라도 데이터를 표시 할 수 있습니다.

한 번에 고정 된 수의 데이터 포인트 만 표시하도록하려면 어떻게해야합니까? 인력거에 대한 설명서 (http://code.shutterstock.com/rickshaw/examples/fixed.html)의 예를의 리드에 따라

는

Answer 1

, 나는 당신이 필요로 함께 비슷한 기절했습니다

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 클래스는 작동하지 않습니다 RandomData, 내가 아는 한. 내가 뭘하면, 그래프가 혼잡하지 않도록 시리즈 어레이의 첫 번째 데이터 포인트를 제거하고 더 많은 데이터가 추가로 왼쪽으로 스트림 :

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

내가 추가해야하는 이유 완전히 확실하지 않다 마지막으로 추가 된 datapoint가 배열 끝으로 되 돌아 오지만 (series[x].push(seriesX)), 그렇지 않으면 작동하지 않습니다. 마지막 데이터 포인트를 두 배로 늘리는 효과가 없으므로 하나만 추가됩니다. 희망이 당신을 위해 작동합니다!