在flot.js中绘制JSON数据的折线图和条形图

时间:2016-02-02 07:13:00

标签: javascript jquery json flot

我有像这样的JSON数据

{
    "srno": 1234567890,
    "datetime": "MM-dd-yyyy HH:mm",
    "meters": [
    {
        "mid": 63,
        "phase":1,
        "v": 1234,
        "c": 5678,
        "kw": 2348,
        "kwh": 2342,
        "okda" : 1,
        "poca" : 1
    },
    {
        "mid": 62,
        "phase":2,
        "v": 1234,
        "c": 5678,
        "kw": 2348,
        "kwh": 2342,
        "okda" : 1,
        "poca" : 3
    }
  ]
}

我想要的只是在我的网页上绘制这些数据。请帮帮我。 可以从此链接推断出相同的Jquery

https://jsfiddle.net/93ttkjr4/

我希望在我的网页上填充这些数据。

1 个答案:

答案 0 :(得分:1)

您必须将数据更改为Flot(数组数组的数组)的正确format,如下所示(example_data是您问题中的JSON):

var bar_data = [];
for (var i = 0; i < example_data.meters.length; i++){
    var meter = example_data.meters[i];
    var temp = { data: [], bars: { order: i }};
    for (item in meter){
        temp.data.push([item, meter[item]]);    
    }
    bar_data.push(temp);
}

有关条形图的fiddle插件,请参阅此Side-by-side Improved以获取完整示例。