javascript - Multiple linesdata series from JSON file with Chart.js - Stack Overflow

admin管理员组

文章数量:1328488

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

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.

• javascript
• jquery
• json
• chart.js

Share Follow edited Jun 17, 2017 at 13:56 Chris asked Jun 17, 2017 at 13:51 ChrisChris 1,32755 gold badges1818 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

本文标签： javascriptMultiple linesdata series from JSON file with ChartjsStack Overflow