Chart.js With Json Data On Same Page Not Displaying
I am having a slight issue rendering a chart using chart.js, pulling data from a MySQL db. It works when I am using an external file, to pull the data, However I am trying to code
Solution 1:
Here's the relevant JavaScript part:
const useAJAX = false;
$(document).ready(function () {
if (useAJAX) $.getJSON('api/data.php').then(showGraph);
elseshowGraph(<?= $json ?>);
});
functionshowGraph(data) {
console.log(data);
var name = [];
var marks = [];
var coloR = [];
// etc, etc
}
I have completely separated a) obtaining the data and b) processing the data. This way you can nicely switch between the two.
I have directly inserted the JSON into the script, like you did. Not super clean or good practice, but will work fine for now.
I have rewritten the AJAX part slightly, I'm using $.getJSON instead, assuming that the file doesn't require any POST parameters anyway. And I used .then(), taking advantage of the fact that jQuery AJAX methods return Promises.
Final tip: don't mix PHP and HTML/JS like that. Move all your PHP stuff to the very top, set all your variables before your first echo / plain text. Then use ?><!DOCTYPE html> to move to HTML.
Post a Comment for "Chart.js With Json Data On Same Page Not Displaying"