i tried to draw dynamic chart using Chart.js but no output ... i follow this video https://www.youtube.com/watch?v=mmz79gH0l6c&t=101s
and do every step in this video but NO OUTPUT So WHERE is The problem
data.php
<?php
header('Content-Type: application/json');
define('DB_HOST', '127.0.0.1');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'test');
$mysqli = new mysqli(DB_HOST,DB_USERNAME,DB_PASSWORD,DB_NAME);
if(!$mysqli){
die("Connection Failed: ".$mysqli->error);
}
$query = sprintf("SELECT playerid, score FROM score ORDER BY playerid");
$result = $mysqli->query($query);
$data = array();
foreach ($result as $row){
$data[] = $row;
}
$result->close();
$mysqli->close();
print json_encode($data);
?>
bargraph.html
<!DOCTYPE html>
<html>
<head>
<title>Bargraph</title>
<style type="text/css">
#chart-container{
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js
$(document).ready(function(){
$.ajax({
url: "http://localhost/chart/data.php",
method: "GET",
success: function(data) {
console.log(data);
var player = [];
var score = [];
for(var i in data){
player.push("player " + data[i].playerid);
score.push(data[i].score);
}
var chartdata = {
labels: player,
dataset : [
{
label: 'player score',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
