[Chartjs]-Add data to line chart using chart.js

by

3👍

✅

I tested it! And found that the version of the Chart.js you were used is 0.2.0, but it doesn’t has the addData method.

You should use the latest version, and try again, it should work!

http://www.chartjs.org/assets/Chart.min.js

0👍

This is how I did it for a line chart. 

 var label_X = [0];
 var data_Y = [0];
 var line_chart;
var data = {
            labels: label_X,
            datasets: [{
                label: '# of Generations',
                data: data_Y,
                backgroundColor: [
                    'rgba(243, 187, 69, 0.7)',
                    '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
            }]
        };
        var options = {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    }
                }]
            }
        };
        var ctx = $("#line-chart").get(0);
        line_chart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });

This was all the initializations then You need to make an ajax call to

 $.get("someurl", {
            dataType: 'json'
        }).done(function (response) {

                data_Y.push((response.Y_value));
                label_X.push(response.X_labels);
                line_chart.update();

            });

Leave a comment