Graph line and graph diagram in flot.js for JSON data

Question

I have JSON data like this

{
    "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
    }
  ]
}

All I want to do is draw this data on my web page. Please help me. JQuery for this can be made from this link

https://jsfiddle.net/93ttkjr4/

I want this data to be populated on my web page.

Answer 1

You should change your data to the right format for Flot (which is an array of arrays of arrays) with something like this (example_data is the JSON from your question):

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- .