CODEWITHSUNDEEP
javascriptchart.js
Sahil Chabria ramchandani
Sahil Chabria ramchandani

Reputation: 53

Problem creating scatter graph using chart.js

I have been trying to create a scatter graph using chart.js, and using data from a JSON object I am fetching from a public api, however my graph is not being created but I am not getting any errors on my console therefore I am unsure as to where the problem is.

This is the structure of my JSON object

0:{
first_name: "Shkodran"
form: "2.3"
points_per_game: "3.2"
now_cost: 51
second_name: "Mustafi"
web_name: "Mustafi"
minutes: 620
goals_scored: 0
assists: 2
clean_sheets: 2
goals_conceded: 9
}

Each entry is a different player and there are 628 entries.

Below is the code I am using

Fetching the public api and parsing the response

var request = new XMLHttpRequest()

var json;

request.open('GET','https://cors- anywhere.herokuapp.com/https://fantasy.premierleague.com/api/bootstrap-static/' , true)

request.onload = function() {

if (request.status >= 200 && request.status < 400) {
json = JSON.parse(this.response);
}
console.log(json);
}
request.send();

Generating the datasets for the scatter graph as I want my graph to be x:now_cost and y:points_per_game. Creating the chart using chart.js

if (document.readyState === 'complete') { 

function generateData() {
var data=[];
json.elements.forEach(elements => {
    data.push({
        x: elements.now_cost,
        y: points_per_game
    });

});
return data;
}

var ctx = document.getElementById('chart1').getContext('2d');

var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
    dataset: [{
        data: generateData()
    }]
},
options: {
    title: {
        display: true,
        text: 'Cost vs Points Per Game Chart'
    },
    scales: {
        xAxes: [{
            title:{
                display:true,
                text: 'Cost'
            },
            type: 'linear',
            position: 'bottom'
        }],
    yAxes: [{
        title:{
            display:true,
            text: 'Points Per Game'
        },
        type: 'linear',
        position: 'bottom'
    }]
    }
}
});
}

Upvotes: 1

Views: 410

Answers (1)

uminder
uminder

Reputation: 26190

Your data is not of valid JSON format, individual properties need to be separated by a comma each. There's also an error inside the generateData function with the assignment to the y property. It should be rewritten as follows:

function generateData() {
  var data = [];
  json.elements.forEach(element => {
    data.push({
      x: element.now_cost,
      y: element.points_per_game
    });    
  });
  return data;
}

Or you could even get rid of this function generateData and assign data directly as follows:

dataset: [{
    data: json.elements.map(e => ({ x: e.now_cost, y: e.points_per_game }))
}]

Upvotes: 1

Related Questions