Matthew Goulart Matthew Goulart - 1 month ago 9
Ajax Question

How does one add data to a Chart in an ajax call?

I am trying to add data obtained from an ajax call to a chart using Chart.js.

The following code is not working:

$(document)
.ready(function () {

fetchBeds($("#site").val());

var ctx = $('#paretoChart');
var paretoChart = new Chart(ctx);

fetchChartData(1, '2016-10-28', '2016-11-2', paretoChart);
});


function fetchChartData(bed, start, end, chart) {

$.ajax({
url: "/reports/fetchChartData",
type: "GET",
data: {
bed: bed,
start: start,
end: end

},
dataType: "json",
success: function (response) {

var chartData = {
labels: response.data.labels,
datasets: [{
label: 'Pareto of Events',
data: response.data.chartData,
}]
};

chart.data = chartData;
console.log(chart);
chart.update();
}
});
}


When run, it doesn't generate any errors (my ajax call is working fine, verified in firefox). Simply nothing happens. I have a feeling it has to do with how I am applying the
data
to the chart. If I take the example data from the chart.js website and use that directly in the
new Chart(...)
call, it works fine.

Is it even possible to apply new data after the chart has been created?

Here is the data returned from the ajax call, just in case:

{"result":true,"message":null,"data":{"labels":["Plant","Process"],"chartData":["1","1"]}}


Thank you!

Answer

Alright I got the newest ChartJS and tried it out with your scenario.

My html:

<canvas id="myChart" width="200" height="200"></canvas>

Creating the chart:

$(function () {
    var ctx = $("#myChart");
    var myChart = new Chart(ctx, { type: 'bar', data: { labels: [], datasets: [] } });

     UpdateChart(myChart)
});

I had to specify the type and a data object with empty labels and datasets for it to even render on the screen as an empty chart.

My function that updates the chart:

function UpdateChart(chart) {
            var data =  {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
            }
            chart.data.labels = data.labels
            chart.data.datasets = data.datasets
            chart.update()
        }

I tried doing chart.data = data but that didn't work for me. I had to specifically update data.labels then data.datasets before updating.

Comments