[Chartjs]-Multiple lines / data series from JSON file with Chart.js

by

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

Leave a comment