How to use JSON data in creating a chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Json Data

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

Description

How to use JSON data in creating a chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js chart from fetched Json </title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  ww w. ja  va  2  s .c o m
fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/CSVtoJSON.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(ids) {
  new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: ids.map(function(id) {
              return id.Label;
              }),
      datasets: [
        {
          label: "value2",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: ids.map(function(id) {
                return id.Value2;
                }),
        },
         {
          label: "value",
          //backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: ids.map(function(id) {
                return id.Value;
                }),
        },
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Sample Json Data Chart'
      }
    }
});
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="bar-chart" width="400" height="100"></canvas>  
   </body>
</html>

Related Tutorials