Bar Graph, chart.js PHP Will Not Load

Question

I have a bar graph that I'm attempting to create with chart.js that takes a PHP array and loads via ajax. I am able to load the data with ajax (verified in the console) but I cannot get the data in the graph - here is the data in the console:

I have not received any error messages so I'm perplexed at this point. Here is all of the code:

HTML

<?php
include 'connect.php';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>

<body>

</canvas><canvas id="myChart"></canvas>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="javascript/charts.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

</body>

JS

$(document).ready(function(){
	$.ajax({
		url: "prod_agg.php",
		method: "GET",
		success: function(data) {
			console.log(data);
			var date = [];
            var output = [];

			for(var i in data) {
				date.push(data[i].date);
				output.push(data[i].output);
			}

			var chartdata = {
				labels: date,
				datasets : [
					{
						label: 'Date',
						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: output
					}
				]
			};

			var ctx = $("#myChart");

			var barGraph = new Chart(ctx, {
				type: 'bar',
				data: chartdata
			});
		},
		error: function(data) {
			console.log(data);
		}
	});
});

I receive an empty graph:

Any help on this issue would be greatly valued!

do you know in what format, or exactly what the console data is supposed to look like>' — unixmiah
– unixmiah, Commented Jun 19, 2017 at 20:30
The photo of the Console output is the correct format as far as I can tell. My guess is that the issue stems from attempting to push the values into the 'date' and 'output' arrays. — pol_guy
– pol_guy, Commented Jun 19, 2017 at 20:35

ɢʀᴜɴᴛ · Accepted Answer · 2017-06-19 20:42:40Z

2

The reason it's not working is because, you are getting the response data as a JSON string not JSON object.

So, to make it work with ChartJS, you need to parse it first, using JSON.parse() method ...

$(document).ready(function() {
   $.ajax({
      url: "prod_agg.php",
      method: "GET",
      success: function(data) {
         console.log(data);

         var data = JSON.parse(data);   //parse JSON string

         var date = [];
         var output = [];
         ...

answered Jun 19, 2017 at 20:42

ɢʀᴜɴᴛ

33k15 gold badges123 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bar Graph, chart.js PHP Will Not Load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related