Chartjs-Displaying JSON data into a pie chart using chart.js

by

0👍

✅

I got this solved, well sadly, with no magic at all to brag about. There was nothing wrong with the code initially, however, it was a problem with the DOM rendering performance. Thank you @alwaysVBNET and @Aniko Litvanyi for your inputs as well.

This link helped me out, hopefully it does to someone out there.

0👍

maybe it is because of the jquery each, it fills DataArray async and the array is not ready, when you want to use it as chart data.
Change the $.each to a simple js for loop

for(var i = 0; i < result.standing; i++){
   var name = "Manchester United FC";
   var team = result.standing[i];
       if (team.teamName == name) {
          DataArray.push(team.wins, team.losses, team.draws);
       }
}

0👍

try callbacks for you ajax or do the below (which is a dirty solution):

 $.ajax({
        url: 'http://api.football-data.org/v1/competitions/426/leagueTable',
        dataType: 'json',
        cache: false, //add this
        async: false, //add this
        type: 'GET',

Also
the result of your ajax could be returned using the below code instead of using an array.

jQuery.parseJSON(result);

0👍

The issue lies in your DataArray. The way it is implemented is is an array with a single entry. Which is another array itself.

[[<wins>, <losses>, <draws>]]

instead of 

[<wins>, <losses>, <draws>]

That is because you instantiate an array and then push into it an array object.

To fix this try using the following function:

(...)
$.each(result.standing, function () {
    var name = "Manchester United FC";
    if (this.teamName == name) {
        DataArray = ([this.wins, this.losses, this.draws]);
        console.log("This team name");
    }
});
(...)

Leave a comment