将实时数据绘制到折线图中

我有一些实时收集的数据，我想绘制成折线图。将实时数据绘制到折线图中

我想将上次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); 
    } 
}

所以点击“开始”按钮，将开始为数据GET请求，每1秒。服务器以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} 
}

谢谢！

来源

2015-06-04 anetworknoobie

哪些值你在图表中想要什么？请指定x和y轴映射 –

我制作了this demo（一定要点击Start Feed按钮！），它使用了ZingChart。在获取请求的回调函数中，我遍历数据并将其转换为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');

由于我打电话修改和setseriesvalues一堆倍成一排，我设置上都update选项false，其中排队的改变，已排队被推到图表的一切当调用update时。

（是的，我在这里做的假数据 - 我两个不同的JSON文件之间交替，但你应该明白我的意思。）

来源

2015-06-09 16:09:13 Stalfos

将实时数据绘制到折线图中

回答

相关问题