JSON to Chart.js

Hi all,

I have this index.html that reads a JSON file that is located in the same Folder using jQuery function “$getJSON()” and it works.

$.getJSON("data.json", function(data) { console.log(data); });

as the code say it, the output is sent to the console and until here is everything ok…

image

but now, my real issue is to put this JSON data into chart.js and it would be very helpful if some of you have ever did something like this before.

Do you know what should I do now, since I’m a little newbie on this.

data.json file is like the below code and I want to show in a bar chart the fields from_curr and value_1.

{"currency":[ {"__type":"WebApplication2.Class2","from_curr":"AED","to_curr":"USD","value_1":0.27}, {"__type":"WebApplication2.Class2","from_curr":"AFN","to_curr":"USD","value_1":0.02}, {"__type":"WebApplication2.Class2","from_curr":"ALL","to_curr":"USD","value_1":0.01}, {"__type":"WebApplication2.Class2","from_curr":"ANG","to_curr":"USD","value_1":0.56}, {"__type":"WebApplication2.Class2","from_curr":"AOA","to_curr":"USD","value_1":0.01}]}

Thanks for your help!!

Author: Fantashit

1 thought on “JSON to Chart.js

  1. I would do this

    function(data) {
      var dataset = {
        data: []
      };
      var labels = [];
    
      data.currency.forEach(function(currency) {
        dataset.data.push(currency.value_1);
        labels.push(currency.from_curr);
      });
      var chartInstance = new Chart(ctx, {
        type: 'bar',
        data: {
          datasets: [dataset],
          labels: labels
        },
        options: {
          /* insert chart options here */
        }
      });
    }

Comments are closed.