将实时数据绘制成折线图

时间:2015-06-04 09:22:15

标签: javascript html plot

我有一些实时收集的数据,我想绘制成折线图。

我想将最后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}
}

谢谢!

1 个答案:

答案 0 :(得分:0)

我已经使用ZingChart this demo(请务必点击“开始Feed”按钮!)。在get请求的回调中,我遍历数据并将其放入ZingChart的正确格式,然后当它全部被清理时,我使用modify方法在{{values中设置scale-x属性1}},它以毫秒为单位获取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文件之间交替,但你应该明白这一点。)