Loading json file to chartjs

user_3871127 0
Viewed 2981

I'm trying to load a json file (static file) to chartjs. but it's not giving any result back.I'm using python to generate the json file. I'm new to jquery and javascript.

this is my code looks like.

<!doctype html>
<html>

<head>
    <title>Bar Chart</title>
    <script type="text/javascript" language="javascript" src="static/js/chart-min.js"></script>
    <script type="text/javascript" language="javascript" src="static/js/util.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>
<body>
<script>
    <div id="container" style="width: 75%;">
        <canvas id="canvas"></canvas>
    </div>

$.getJSON( "var/graph.json", function( data ) {
 var myChart = new Chart(ctx, {
 type: 'bar',
 data: data,
 options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
  }
 });

</script>

</body>

</html>

My static json file looks like this

{
    "test_data": [
        ["aa", "11"],
        ["bb", "123"],
        ["cc", "81"],
        ["dd", "12"],
        ["ee", "22"]
    ]
}

What i'm missing here...i need to draw a line graph (x Axis - name (aa,bb,cc,dd) y Axis numbers (11,123,81,22) Appreciate your help on this.

chart.js json javascript
2 Answers

$.getJSON("var/graph.json", function(data) {
   var labels = data.test_data.map(function(e) {
      return e[0];
   });
   var data = data.test_data.map(function(e) {
      return e[1];
   });

var ctx = document.getElementById('canvas').getContext('2d');
   var chart = new Chart(ctx, {
      type: 'line',
      data: {
         labels: labels,
         datasets: [{
            backgroundColor: 'rgb(129, 198, 2228)',
            borderColor: 'rgb(0, 150, 215)',
            data: data
         }]
      },
      options: {
         responsive: 'true',
      }
   });
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="canvas" height="80"></canvas>
user_21990120

You need to transform the data into a format suitable for a linear chart axis. For your line chart, you need to define labels and the data of the dataset. This can be done using the Array.map() method.

data: {
  labels: data.test_data.map(a => a[0]),
  datasets: [{
      data: data.test_data.map(a => a[1]),
      ...
    }]
  },

Please have a look at your amended code below.

const data = {
  "test_data": [
    ["aa", "11"],
    ["bb", "123"],
    ["cc", "81"],
    ["dd", "12"],
    ["ee", "22"]
  ]
};

new Chart('canvas', {
  type: 'line',
  data: {
    labels: data.test_data.map(a => a[0]),
    datasets: [{
      label: 'My Dataset',
      data: data.test_data.map(a => a[1]),
      fill: false,
      borderColor: 'red'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="canvas" height="80"></canvas>

user_23584090
Related