My attempt to create a line chart using chart.js with AJAX seems to be failing when the data comes from the server. The chart displays correctly when the window loads, but fails to render properly with AJAX. What could be causing this issue? Here is my code:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX JSON Chart</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript">
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: false
});
}
// ajax part of chart //
$(document).ready(function(e) {
$("#frm1").submit(function(){
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
var btnchart = $("#btnchart").attr("name") + "=" + $("#btnchart").val();
$.ajax({
//beforeSend: function(){ sendRequest("canvas"); },
cache: false,
type: "POST",
dataType: "json",
url: "ajax/chart.php",
data: $(this).serialize() + "&" + btnchart,
success: function(data){
//alert(data.labels);
//alert(data.points);
renderGraph(data.labels, data.points, ctx);
},
});
return false;
});
});
var renderGraph = function (labels, points, ctx) {
var lineChartData = {
labels: "[" + labels + "]",
datasets: [
{
label: "Recent Orders",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
...
</script>
</head>
<body>
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="960"></canvas>
</div>
</div>
<form id="frm1" name="frm1" method="post" action="">
<input type="submit" name="btnchart" id="btnchart" value="Draw Chart" />
</form>
</body>
</html>
chart.php:
<?php
$labels = array('29 April 2015', '30 April 2015', '1 May 2015', '2 May 2015', '3 May 2015', '4 May 2015', '5 May 2015');
$points = array('100', '250', '10', '35', '73', '0', '25');
echo json_encode(array('labels' => $labels, 'points' => $points));
?>
The initial output when the page loads for the first time is:
After clicking the "Draw Chart" button, the output received through AJAX is:
However, oddly enough, hovering over the image causes it to revert back to the correct graph that was initially displayed on window load. Strange!