Adding data to line chart using addData() method in Chart.js

Question

Sorry if this isn't the proper way to ask this. I do not have 'reputation 50' to comment on a response to an identical question, and etiquette says I should not 'Answer' with a question.

I have the same problem as described in Add data to line chart using chart.js but the solution does not work for me. I am running a newer version of Chart.js (1.0.1-beta.4), and I have tried the older version 1.0.1-beta.3 as suggested. Everything works for me except addData(). I have commented out other methods that do work.

BTW, it is not clear to me how addData() targets a specific dataset within the Chart. The documentation says: The values array passed into addData should be one for each dataset in the chart.
However, I am only using one dataset.
Below is my code made as trivial as possible to demonstrate my problem.

The error I get is: Uncaught TypeError: Cannot read property 'points' of undefined
I'm using Linux Mint 17 and Chrome Version 39.0.2171.71 (64-bit).

<!doctype html>
<html>
    <head>
        <title>Line Chart</title>
        <script src="/js/Chart.min.js"></script>
        <script>
            window.onload = function() {
                var ctx = document.getElementById("canvas").getContext("2d");

                var lineChartData = {
                    labels : ["1","2","3"],
                    datasets : [
                        {
                            label: "Pulse",
                            data: [ 50, 60, 70 ],
                        },
                    ]
                };

                var myLineChart = new Chart(ctx).Line( lineChartData, {} ) ;

                // myLineChart.datasets[0].points[2].value = 100 ; // works
                // myLineChart.update();       // works - resizes for y=100
                // myLineChart.removeData() ;  // works

                myLineChart.addData( [4,80], "4");    // doesn't work
            }
        </script>
    </head>
    <body>
        <div style="width:30%">
            <div>
                <canvas id="canvas" height="150" width="400"></canvas>
            </div>
        </div>
    </body>
</html>

So here is a clue, although I don't know what to make of it. I have a single dataset, but if I look at the length of it in my code, it is length 1, but if I look at it within the addData() in Chart.js, it has become size 2. So it bombs on dataset 2. If I add a dummy dataset so it really is 2, then it works on dataset 1, and sets X=0 in the graph for dataset 2. Unfortunately, I don't understand the code in addData() to figure out what is going on. — RJ White

RJ White RJ White · Accepted Answer · 2014-12-24T10:13:50

ok, I figured out what was wrong.
I misinterpreted how to use addData(). I thought the array supplied was a single set of x,y coordinates, but it is a set of y coordinates, 1 for each dataset, and the next 'label' arguement is the 'x' label.
I'm closing this.
Sorry to waste anyones time.

Adding data to line chart using addData() method in Chart.js

1 Answers