Plotting Line Chart and Bar Chart in flot.js for JSON data

Question

I've a 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 is to plot this data on my webpage. Please Help me out. The Jquery for the same can be inferred from this link

https://jsfiddle.net/93ttkjr4/

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

what plotting library are you using?

madalinivascu
– madalinivascu

2016-02-02 07:15:24 +00:00
Commented Feb 2, 2016 at 7:15 — madalinivascu
– madalinivascu, Commented Feb 2, 2016 at 7:15
Hi Madalin, I'm using flot.js as my plotting library

Youthoria
– Youthoria

2016-02-02 07:18:10 +00:00
Commented Feb 2, 2016 at 7:18 — Youthoria
– Youthoria, Commented Feb 2, 2016 at 7:18

Raidri · Accepted Answer · 2016-02-02 10:23:43Z

1

You have to change your data into the right format for Flot (which is arrays 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);
}

See this fiddle for a full example using the Side-by-side Improved plugin for the bars.

answered Feb 2, 2016 at 10:23

Raidri

17.7k11 gold badges69 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Plotting Line Chart and Bar Chart in flot.js for JSON data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related