Create a chart.js point dataset from json - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

Create a chart.js point dataset from json

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js 3 time serie from JSON</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script type="text/javascript">
    window.onload=function(){// w ww  .j  a va 2  s.  c o  m
var adddata = [{
    label: "a",
    backgroundColor: 'blue',
    borderColor: 'blue',
    fill: false,
    data: [{
      x: new Date("2018-01-14 09:24:34"),
      y: 22
    }, {
      x: new Date("2018-01-15 09:24:34"),
      y: 25
    }, {
      x: new Date("2018-01-16 09:24:34"),
      y: 12
    }, {
      x: new Date("2018-01-17 09:24:34"),
      y: 22
    }],
  }, {
    label: "b",
    backgroundColor: 'red',
    borderColor: 'red',
    fill: false,
    data: [{
      x: new Date("2018-01-13 09:24:34"),
      y: 34
    }, {
      x: new Date("2018-01-15 09:24:34"),
      y: 22
    }, {
      x: new Date("2018-01-17 09:24:34"),
      y: 2
    }, {
      x: new Date("2018-01-18 09:24:34"),
      y: 13
    }]
  }];
var json_str = '{"Values":{"2018-01-15 09:24:34":"10","2018-01-16 19:24:31":"5","2018-01-17 09:24:33":"8","2018-01-18 09:24:35":"9"}}'
var json = JSON.parse(json_str);
console.log(json);
var data = [];
for (var d in json.Values) {
   console.log(d, json.Values[d]);
  data.push({ x: new Date(d), y: json.Values[d]})
}
var dataset = {
      label: "c (from JSON)",
    backgroundColor: 'green',
    borderColor: 'green',
    fill: false,
    data: data
};
adddata.push(dataset);
createChart();
function createChart() {
  var ctx = document.getElementById("myChart").getContext("2d");
  ctx.canvas.width = 1000;
  ctx.canvas.height = 600;
  var cfg = {
    type: 'line',
    data: {
      datasets: adddata
    },
    options: {
      legend: {
        display: true
      },
      tooltips: {
        //mode: 'nearest',
        //intersect: false,
        callbacks: {
          title: function(tooltipItem, data) {
            console.log('title',tooltipItem);
            var date = moment(tooltipItem[0]['xLabel']).format('DD.MM.YYYY');
            return date;
          },
          label: function(tooltipItem, data) {
            console.log('label',tooltipItem);
            return data.datasets[tooltipItem.datasetIndex].label+": "+tooltipItem['yLabel'];
          }
        },
      },
      scales: {
        xAxes: [{
          type: 'time',
          distribution: 'linear',
          time: {
            unit: 'day',
            unitStepSize: 1,
            displayFormats: {
              'day': 'DD-MM-YY'
            }
          }
        }],
        yAxes: [{
          //type: 'linear',
        }]
      }
    }
  };
  var chart = new Chart(ctx, cfg);
}
    }

      </script> 
   </head> 
   <body> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
      <canvas id="myChart" width="400" height="200"></canvas>  
   </body>
</html>

Related Tutorials