How to implement dynamic data on chartjs?

manpreet Best Answer 3 years ago

_x000D_ 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: {} });