Loading json file to chartjs

Question

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.

Tharanga Abeyseela · Accepted Answer · 2020-05-07 10:54:48Z

2

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

answered May 7, 2020 at 10:54

Tharanga Abeyseela

3,5134 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

uminder · Accepted Answer · 2020-05-07 04:01:43Z

0

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>

answered May 7, 2020 at 4:01

uminder

26.4k6 gold badges45 silver badges91 bronze badges

2 Comments

Markus Over a year ago

Thanks. How can i load this from an external json file without adding const data, what i'm doing is use python to generate the json file and store in a directory, then my chartjs need to load the file and plot the graph.

uminder Over a year ago

@Markus: I answered the part related to JavaScript and Chart.js. Maybe stackoverflow.com/a/45273953/2358409 provides some help about $.getJSON()

Collectives™ on Stack Overflow

Loading json file to chartjs

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related