Chart.js plotting two json datasets on a line chart

Question

I'm trying to work out how to plot labels to the correct places using Chart.js

var json = {
    "competition one": [
        {
            "date": "2015-05-20",
            "position": 37
        },
        {
            "date": "2015-05-21",
            "position": 22
        }
    ],
    "competition two": [
        {
            "date": "2015-05-20",
            "position": 29
        },
        {
        "date": "2015-05-21",
        "position": 19
        }
    ]
}

How can I plot the labels to the correct places? With the dates going to the correct labels so it isn't repeated?

Specifically, I'm struggling to get "competition one" into the label of the dataset array (label: "competition one")

I need it to resemble the following data structure that is required by Chart.js?

var data = {
    labels: ["2015-05-20", "2015-05-21"],
    datasets: [
        {
            label: "competition one",
            data: [37, 22]
        },
        {
            label: "Competition two",
            data: [29, 19]
        }
    ]
};

I have tried it myself, I don't get how to get the labels in the correct places — Max Rose-Collins, May 26 '15 at 12:31
I'd suggest that your JSON is wrong. Do you have control over how this is generated? It will make your life much easier if you could change the json structure so that `"competition one"`, etc. are values and not variables, so something like `json = [{label:"competition one", data:[{...}, {..}]}, ..]` — Liam, May 26 '15 at 12:40
In that case you will need to [get the property names](http://stackoverflow.com/questions/4260308/javascript-getting-the-objects-property-name) of `json` and loop them — Liam, May 26 '15 at 12:44

Liam · Accepted Answer · 2015-05-26T12:54:53.560

As mentioned in comments you can get the properties names like thus:

var json = {
    "competition one": [
        {
            "date": "2015-05-20",
            "position": 37
        },
        {
            "date": "2015-05-21",
            "position": 22
        }
    ],
    "competition two": [
        {
            "date": "2015-05-20",
            "position": 29
        },
        {
        "date": "2015-05-21",
        "position": 19
        }
    ]
}

var keys = Object.keys(json);
for (var i = 0; i < keys.length; i++)
{
    var key = keys[i];
    //"competition one", "competition two", etc
    console.log(key);   
}

Fiddle

you then just need to manipulate these values into your desired object structure.

var keys = Object.keys(json);
//set up our object containing an array called datasets
var data = {datasets:[]};
for (var i = 0; i < keys.length; i++)
{
    var key = keys[i];
    //push the key into the dataset array as an object {}
    data.datasets.push({label:key, data:...});   
}

Thank you, this was a great start to solving my problem. – Max Rose-Collins May 27 '15 at 17:47 — Max Rose-Collins, May 27 '15 at 17:47

Chart.js plotting two json datasets on a line chart

1 Answers1

Fiddle