How to implement dynamic data on chartjs?

Question

I need your help to learn how to dynamically implement data from a json file to Chartjs. The fields that I need to fill dynamically are labels and data.

JSON File <<<

[
   {
      "EFICAZ_TAB_ITEM_ID":1,
      "EFICAZ_PERCENTS":99
   },
   {
      "EFICAZ_TAB_ITEM_ID":2,
      "EFICAZ_PERCENTS":99
   },
   {
      "EFICAZ_TAB_ITEM_ID":3,
      "EFICAZ_PERCENTS":99
   }
]


CHARTJS <<<

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: [???],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [???],
        }]
    },

    // Configuration options go here
    options: {}
});

You need to get 2 arrays from your json: 1) Array of labels 2) Array of values Then you've to set that arrays as data.labels and data.datasets.data. If it's not initial values of your charts you have to update your charts with update() method called to your chart's instance. — Brissy
– Brissy, Commented Jun 11, 2018 at 12:45

Ash · Accepted Answer · 2018-06-11 13:12:38Z

I have used $.ajax() to fetch JSON data, and save the data in two arrays, then you can use these arrays for your chart label and data. Hope this helps!

 var lbl = [];
    var dta = [];

    $.ajax({
      url: "test.json",
      dataType: 'json',
      async: false,
      success: function(data) {
        $.each(data, function(i, field){
             lbl.push(field.EFICAZ_TAB_ITEM_ID
    );
               dta.push(field.EFICAZ_PERCENTS);

           });
      }
    });


     $.getJSON("test.json", function(result){
           $.each(result, function(i, field){
             lbl.push(field.EFICAZ_TAB_ITEM_ID
    );
               dta.push(field.EFICAZ_PERCENTS);

           });
        });


    var ctx = document.getElementById("myCanvas").getContext('2d');



    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: lbl,
            datasets: [{
                label: "My First dataset",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: dta,
            }]
        },

        // Configuration options go here
        options: {}
    });

Brissy · Accepted Answer · 2018-06-11 13:16:13Z

Here is example

document.addEventListener('DOMContentLoaded', function(){
  
  var chartData = [
   {
      "EFICAZ_TAB_ITEM_ID":1,
      "EFICAZ_PERCENTS":21
   },
   {
      "EFICAZ_TAB_ITEM_ID":2,
      "EFICAZ_PERCENTS":55
   },
   {
      "EFICAZ_TAB_ITEM_ID":3,
      "EFICAZ_PERCENTS":32
   }
]
 
 var labels = [];
 var values = [];
 chartData.forEach(function(el,key){
  labels.push(el.EFICAZ_TAB_ITEM_ID);
  values.push(el.EFICAZ_PERCENTS);
})
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: labels,
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: values,
        }]
    },

    // Configuration options go here
    options: {}
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Collectives™ on Stack Overflow

How to implement dynamic data on chartjs?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related