chartjs; cannot read property '0' of undefined

Question

What I'm trying to do is use chartjs to create a Bar chart. The data is retrieved via $.ajax. And JSON data retrieved from $.ajax will be added later to dataset. However, when I'm about to create a chartjs. There is an error from Chart.js library:

Uncaught TypeError: Cannot read property '0' of undefined

I have checked all the data after finished loading the ajax .There is no problem with the JSON (I've already check the console). Moreover, when I checked the myBarChart type is reported as undefined. Even I already assigned a new chartjs to itself after I finished retrive JSON data.

Here is a JavaScript Code:

var driverCode, driverPointsGained = "";
var exLabel = new Array();
var exPoints = new Array();
var chartData;
var myBarChart;
var ctx = document.getElementById("driverStandingChart").getContext("2d");
//var ctx = $("#driverStandingChart").get(0).getContext("2d");

Chart.defaults.global.responsive = true;

function addChartData(codename, pointsgained) {
    chartData = {
        label: codename,
        datasets: [
            {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data: pointsgained
            }
        ]
    };
    return chartData;
}

$("#testAjaxLoading").click(function (e) {
    e.preventDefault();
    $.ajax({
        url: "http://ergast.com/api/f1/current/driverStandings.json",
        dataType: "json",
        success: function (data) {
            console.info(data);

            for (var i = 0; i <= data.MRData.total-1; i++) {

                driverCode = data.MRData.StandingsTable.StandingsLists[0].DriverStandings[i].Driver.code;
                driverPointsGained = data.MRData.StandingsTable.StandingsLists[0].DriverStandings[i].points;

                console.info("code: " + driverCode + " points: " + driverPointsGained);

                //push data to array
                exLabel.push(driverCode);
                exPoints.push(driverPointsGained);
            }

            addChartData(exLabel,exPoints);

            console.log(chartData);

            myBarChart = new Chart(ctx).Bar(chartData);

            alert("finished retrieve data");
        },
        error: function (err) {
            console.error(err);
        }
    });
});

Full code with HTML: https://gist.github.com/sancowinx/31b6289b7f28908db0c1

For the JSON data, I use an API from Ergast API to get a JSON Results.

edit: adding Stack Trace:

enter image description here $.ajax.success is actually myBarChart = new Chart(ctx).Bar(chartData);

Any suggestions? Thanks in advance.

Can't run your sample without your `f1.js` file dependency. :/ — brokethebuildagain, Sep 29 '14 at 19:53
Also, it would be a lot easier if you pasted the stack trace for the error: https://developer.chrome.com/devtools/docs/javascript-debugging#viewing-exception-stack-trace — brokethebuildagain, Sep 29 '14 at 19:55
@CullenJ Added stacktrace. Actually for f1.js is not quite related to this problem. f1.js was for retrieving other result. However, you can look for f1.js source [here](https://gist.github.com/sancowinx/62bd7eea1f28b4dcbbb5) — sancowinx, Sep 29 '14 at 20:03

score 2 · Answer 1 · edited May 23 '17 at 11:43

Your stack trace tells me that either ctx or chartData is undefined. My guess is that it's ctx if you've already checked chartData. (Verify this using console.log.) Perhaps this is the answer if that's the case: canvas.getContext("2d") is undefined

If that's not the case, then an element that ChartJS was looking for in your JSON was undefined. You'll have to look through the documentation to see what element is missing if that's the case.

chartjs; cannot read property '0' of undefined

1 Answers1

Linked