Bar chart not displayed in ASP.NET MVC using AJAX call

[etairi]

I have the following code segment:

(function () {
    var randomScalingFactor = function () { return Math.round(Math.random() * 100) };

    var barData = {
        labels: [],
        datasets: [
            {
                label: "Test",
                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: []
            }
        ]
    };

    $.ajax({
        url: "/GetTeams",
        dataType: "json",
        success: function (data) {
            console.log("Length is: " + data.length);
            for (i = 0; i < data.length; i++) {
                barData.labels.push(data[i].FullName);
                barData.datasets[0].data.push(randomScalingFactor());
            }
            console.log(barData.labels);
            console.log(barData.datasets[0].data);
        }
    });

    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barData, {
        responsive: true
    });

}());

When I check the console, for the arrays, I get the following values:

"Length is: 10"
Array [ "Team #1", "Team #2", "Team #3", "Team #4", "Team #5", "Team #6", "Team #7", "Team #8", "Team #9", "Team #10" ]
Array [ 74, 53, 38, 37, 92, 47, 40, 5, 22, 16 ]

This seems all fine to me. But, the graph is not displayed. It shows just this: http://prntscr.com/6edcyt. But if I enter manually the labels and the values, it works all fine. But, when I use an AJAX call it is not working. Any idea how to solve it?

[etairi]

Including something like the line below in the success part of the AJAX call should solve the problem:

window.myBar.update();

[tiesont]

$.ajax (and by extension $.get, $.post, and $.load) are non-blocking operations, so you're creating the chart before the data request has completed. Use the .done handler (or the success callback, like you're already using) to create the chart when you've received a 200 response:

    $.ajax({
        url: "/GetTeams",
        dataType: "json",
        success: function (data) {
            console.log("Length is: " + data.length);
            for (i = 0; i < data.length; i++) {
                barData.labels.push(data[i].FullName);
                barData.datasets[0].data.push(randomScalingFactor());
            }
            console.log(barData.labels);
            console.log(barData.datasets[0].data);

            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx).Bar(barData, {
                responsive: true
            });
        }
    });

Calling update() would work, too, since the dataset would then be populated.

It's worth noting that this isn't ASP.NET MVC specific. The same thing would happen with RoR, PHP, etc.

[fulldecent]

@etairi Could you please let us know if this is working for you?

[etairi]

Yes, it is working. I already noticed the problem and fixed it. Also thanks to @tiesont for the good answer!