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
– Max Rose-Collins, Commented May 26, 2015 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
– Liam, Commented May 26, 2015 at 12:40

Liam · Accepted Answer · 2015-05-26 12:54:53Z

1

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:...});   
}

edited May 26, 2015 at 12:54

answered May 26, 2015 at 12:49

Liam

30k28 gold badges143 silver badges206 bronze badges

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

1 Comment

Max Rose-Collins Over a year ago

Thank you, this was a great start to solving my problem.

Collectives™ on Stack Overflow

Chart.js plotting two json datasets on a line chart

1 Answer 1

Fiddle

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related