Chartjs Data via json request not populating - php

Question

I'm using PHP and SQL to produce an array which counts data with the same values and how many of those value there are which outputs a json_encode to:
{"05":4,"09":4,"19":4}
Chart.js file: (trimmed down)
// Chart
var ctx = document.getElementById("monthAbuseChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1", "2", "3"],
datasets: [{
label: "Offences",
//data: [0, 7, 5] This works
data: offences // This doesn't
}],
}
}
});
// Grab the data for offences:
var offences = []
$.ajax({
method: "POST",
url: "sql/monthabuse.php",
dataType : 'json',
success: function (result) {
//offences = result;
var offences = result;
console.log(result);
},
});
The console.log outputs {19: 4, 05: 4, 09: 4}
However, if I put offences into the data section data: offences it doesn't work?

Answer 1

Assuming that you want to populate the response of AJAX Call in offences variable.
There are 2 issues with your current code:
Your code to create chart is running before the AJAX Call has run. In your code you are referencing offences variable but it is not yet populated.
You have defined offences as a global Variable, which is ok. But inside the AJAX Call you are again defining a new Local Variable offences by prefixing it with var. You need to use the below code which is commented in your question to populate the Global offences var.
offences = result
One way of fixing this would be to encompass your Chart Code in a New Function and inside the success callback of AJAX, call this New Function.
//Global Variable
var offences = [];
function createMonthAbuseChart() {
var ctx = document.getElementById("monthAbuseChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1", "2", "3"],
datasets: [{
label: "Offences",
//data: [0, 7, 5] This works
data: offences // This doesn't
}],
}
}
});
}
// Grab the data for offences:
$.ajax({
method: "POST",
url: "sql/monthabuse.php",
dataType : 'json',
success: function (result) {
offences = result;
console.log(result);
createMonthAbuseChart(); //Call the Chart Create Method Here.
},
});
You must make sure that data returned by AJAX Call has the same format as the data required for chart which is [0, 7, 5]. From your question it looks your AJAX Call is returning {19: 4, 05: 4, 09: 4}. You can use the following code to convert it into [4, 4, 4]
offences = Object.values(result);
Use the above line instead of following in your AJAX Callback
offences = result;