Multiple lines / data series from JSON file with Chart.js

Question

I've seen some examples on multiple lines in one graph and done some easy pie and bar charts from JSON files in Chart.js.

Currently easy bars and pie charts go like this:

$.getJSON("http://127.0.0.1/charts/test/amounts.json", function (result)
{
    var labels = [], data = [];

    for (var i = 0; i < result.length ; i++)
    {
        labels.push(result[i].source);
        data.push(result[i].amount);
    }

    var ctx = document.getElementById("myChart").getContext("2d");
    ctx.canvas.width = 800;
    ctx.canvas.height = 500;

    var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                {
                        label: "Total products per Source",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: data
                }
            ]}
    });
});

But I cannot imagine how to start or format my JSON files for multiple lines. Do I need to have multiple JSON files, one for each line? If so, how would I load it into my canvas?

Or can I format my JSON file in a way, that I can use only one file for multiple lines? I've seen this example: https://codepen.io/k3no/pen/pbYGVa but I'm still not sure on how to get JSON and multiple lines together ..

My data (still in Python/Pandas for now) looks like this:

source       time            rating
Source1      2017-05-14       13919
             2017-06-04       14154
Source2      2017-05-28         272
             2017-06-11         307
             2017-06-18         329
Source3      2017-06-04        3473
             2017-06-11        3437

And I'd like to have time as an x axis, rating as the y axis and the sources are the different lines / data series.

Answer 1

No, you don't need multiple JSON file (one for each line) . Single JSON file would be enough to create multi-line chart.

Considering, your JSON file / data looks somewhat like this ...

[{ "date": "2017-05-14", "source1": 13919, "source2": 0, "source3": 0 }, { "date": "2017-05-28", "source1": 0, "source2": 272, "source3": 0 }, { "date": "2017-06-04", "source1": 14154, "source2": 0, "source3": 3473 }, { "date": "2017-06-11", "source1": 0, "source2": 307, "source3": 3437 }, { "date": "2017-06-18", "source1": 0, "source2": 329, "source3": 0 }]

^{note: if there's no source data for a particular date then, you need to put a 0 for that}

you can format / parse it in the following way, to make it usable for multiple line chart ...

var labels = result.map(function(e) {
   return e.date;
});
var source1 = result.map(function(e) {
   return e.source1;
});
var source2 = result.map(function(e) {
   return e.source2;
});
var source3 = result.map(function(e) {
   return e.source3;
});

Now, to actually create multi-line chart, you would have to make individual dataset for each source.

Here is a working example putting all together ...

 $.getJSON('https://istack.000webhostapp.com/json/t6.json', function(result) { var labels = result.map(function(e) { return e.date; }), source1 = result.map(function(e) { return e.source1; }), source2 = result.map(function(e) { return e.source2; }), source3 = result.map(function(e) { return e.source3; }); var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: "Source 1", data: source1, borderWidth: 2, backgroundColor: "rgba(6, 167, 125, 0.1)", borderColor: "rgba(6, 167, 125, 1)", pointBackgroundColor: "rgba(225, 225, 225, 1)", pointBorderColor: "rgba(6, 167, 125, 1)", pointHoverBackgroundColor: "rgba(6, 167, 125, 1)", pointHoverBorderColor: "#fff" }, { label: "Source 2", data: source2, borderWidth: 2, backgroundColor: "rgba(246, 71, 64, 0.1)", borderColor: "rgba(246, 71, 64, 1)", pointBackgroundColor: "rgba(225, 225, 225, 1)", pointBorderColor: "rgba(246, 71, 64, 1)", pointHoverBackgroundColor: "rgba(246, 71, 64, 1)", pointHoverBorderColor: "#fff" }, { label: "Source 3", data: source3, borderWidth: 2, backgroundColor: "rgba(26, 143, 227, 0.1)", borderColor: "rgba(26, 143, 227, 1)", pointBackgroundColor: "rgba(225, 225, 225, 1)", pointBorderColor: "rgba(26, 143, 227, 1)", pointHoverBackgroundColor: "rgba(26, 143, 227, 1)", pointHoverBorderColor: "#fff" }] } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="myChart"></canvas>