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 the entire thing on one File, but this is giving some trouble I am assuming the json_encode data is not being supplied properly the code is listed below:
<!DOCTYPE html>
<html>
<head>
<title>Demo Charts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<body>
<div>
<?php
$conn = mysqli_connect("localhost","root","password","db1");
$sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
mysqli_close($conn);
$json = json_encode($data);
?>
<div>
<span><h3>Pie Chart</h3></span>
<canvas id="pieCanvas"></canvas>
</div>
<script type="text/javascript">
$(document).ready(function () {
showGraph2();
});
function showGraph2()
{
{
var data = <?php echo $json; ?>;
// $.post("api/data.php", `==>>THIS WORKS`
$.post(data,
function(data)
{
console.log(data);
var name = [];
var marks = [];
var coloR = [];
var dynamicColors = function() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};
for (var i in data) {
name.push(data[i].student_name);
marks.push(data[i].marks);
coloR.push(dynamicColors());
}
var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor: '#49e2ff',
//borderColor: '#46d5f1',
backgroundColor: coloR,
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: marks
}
]
};
var graphTarget = $("#pieCanvas");
var barGraph = new Chart(graphTarget, {
type: 'pie',
data: chartdata
});
});
}
}
showGraph2();
</script>
</div>
</body>
</html>
