将实时数据绘制成折线图
Plot real time data into line chart
我有一些实时收集的数据,我想绘制成折线图。
我想绘制最近60次调用中收到的数据到折线图中(不拉数据时暂停绘图),每个名称:值对获得1个图表(因此在这种情况下会有6个图表)。当然,我需要每秒钟或者每次调用httpGet()
时更新图表。
我不知道如何进行下一步后,我已经得到响应(数据绘图)从服务器…最后,我正在寻找的是一些"CPU使用历史"的风格。
下面是我从聚合服务器收集数据的JavaScript文件:
//httpGet() adopted from SO/247483
function httpGet()
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "foo.com/sensordata", false );
xmlHttp.send( null );
console.log(xmlHttp.responseText);
return xmlHttp.responseText;
}
var interval;
//this is called by a button in the html file
function start(btn)
{
if(btn.value=="Start"){
interval = setInterval(httpGet, 1000);
btn.value="Stop";
} else {
btn.value="Start";
clearInterval(interval);
}
}
所以点击"开始"按钮将开始每1秒对数据进行GET请求。服务器以JSON格式返回数据,这是控制台输出的示例:
{
"Time":"2015/06/04 18:35:39",
"SensorA":{"Value1":0.34804,"Value2":-0.39175,"Value3":-0.61718},
"SensorB":{"Value1":516,"Value2":1,"Value2":2103}
}
谢谢!
我做了这个使用ZingChart的演示(一定要点击Start Feed按钮!)在get请求的回调中,我循环遍历数据并将其转换为ZingChart的正确格式,然后当所有数据都被清除后,我使用modify方法在scale-x
中设置values
属性,该属性以毫秒为单位接受Unix时间值数组,并使用setseriesvalues方法更新图表中的数据。
for(var i = 0; i < 6; i++){
zingchart.exec('myChart','modify',{
update:false,
data:{
"scale-x":{
"values":dataObj.date
}
}
});
zingchart.exec('myChart','setseriesvalues',{
update:false,
graphid:i,
values:[dataObj[Object.keys(dataObj)[(i + 1)]]]
});
}
zingchart.exec('myChart','update');
由于我连续多次调用modify和setseriesvalues,我将update
选项设置为false
,它将更改排队,当update
被调用时,已排队的所有内容都被推送到图表中。
(是的,我在这里伪造数据——我在两个不同的JSON文件之间交替,但你应该明白。)
相关文章:
- 如何用d3.js绘制折线图
- d3绘制动画折线图的基本示例
- 如何在不使用外部库的情况下使用 JavaScript 绘制折线图
- AngularJS nvd3折线图指令未在数据更改时重新绘制(非实时)
- 用不同的x轴数据集绘制谷歌折线图
- 如何隐藏由Chart.js V2.0绘制的组合折线图和条形图中的点
- 根据ajax重新绘制并破坏旧的折线图后,关于折线图(chart.js)的丢点工具提示
- 用谷歌图表json数据绘制简单的折线图,日期在x轴上
- 如何在高图表中使用系列数据绘制折线图
- D3js:如何使用 JSON 数据绘制多系列折线图
- 当 ykey 值等于 0 且 xkey 为月时绘制折线图
- 绘制一个具有三个轴向的谷歌折线图
- 在 flot.js 中绘制折线图和条形图以获取 JSON 数据
- D3.js:绘制简单、可更新的折线图
- 绘制 D3 折线图后如何添加更多时间序列数据
- *Highcharts*绘制百分比折线图
- 使用Canvas清除并重新绘制折线图上的数据
- 在x轴折线图上绘制错误日期的高位图表(高位股票)
- 使用角度nvd3js指令绘制一个包含实线和虚线的折线图
- gRaphael 折线图绘制轴以外的值