CODEWITHSUNDEEP
jquerychartschart.js
Rubén
Rubén

Reputation: 29

Add data to line chart using chart.js

I would like to add a new data in chart but the browser throws an error that says "Uncaught TypeError: undefined is not a function" when calling to my "Add" function.

It seems that the chart object does not recognized the "AddData" function but I don't know how to solve it. In documentation appears this function it doesn't work properly to me.

.addData( valuesArray, label ) Calling addData(valuesArray, label) on your Chart instance passing an array of values for each dataset, along with a label for those points.

Fiddle sample http://jsfiddle.net/rferreiraperez/pevy7vsz/5/

var myLineChart = new Chart(ctx).Line(data);

$("#add").on( "click", function() {
    var month = $("#month").val();
    var point = $("#point").val();
    var points = new Array();
    points.push(point);
    console.log("adding...");
    console.log("month:" + month);
    console.log("point:" + point);
    myLineChart.addData(points, month);
});

Thanks a lot.

Upvotes: 2

Views: 8419

Answers (2)

Sheraz Ahmed
Sheraz Ahmed

Reputation: 899

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();

            });

Upvotes: 0

Kevin Yue
Kevin Yue

Reputation: 392

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

Upvotes: 3

Related Questions