Cannot get the graph to show my data

[bambinou]

Hello,

I have this code:
[php]
<?php
$query = “SELECT
SUM(cust_order_total) AS label,
due_date AS y
FROM orders
WHERE YEAR(due_date) = YEAR(CURDATE())
AND MONTH(due_date) = MONTH(CURDATE())
GROUP BY due_date
ORDER BY label”;
$rows = [];
$result = mysqli_query($connection,$query);
$rows = mysqli_fetch_all($result, MYSQLI_ASSOC);
?>

<!–Graph1 Daily Chart —>
<script type=”text/javascript”>
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”,
{
theme: “theme2”,
title:{
text: “Earthquakes – per month”
},
animationEnabled: true,
axisX: {
valueFormatString: “MMM”,
interval:1,
intervalType: “month”

},
axisY:{
includeZero: false

},
data: [
{
type: “line”,
//lineThickness: 3,
dataPoints: <?php echo json_encode($rows); ?>
}

]
});

chart.render();
}
</script>
[/php]

My json encode output is:
[{“label”:”95.00″,”y”:”2015-09-01″},{“label”:”112.50″,”y”:”2015-09-10″},{“label”:”150.00″,”y”:”2015-09-23″}]

I am not understanding how to put the date on the X axis and the prices on the y Axis.

The graph is showing correctly as a demo on my page but as soon as I pass my json encode output, the graphs is blank.

Please help,

Thank you,

Ben

[Naveen Venugopal]

bambinou,

You have to parse the json before assigning to dataPoints. Here is the code to do the same.

<script type=”text/javascript”>
	window.onload = function () {
		var jsonData = <?php echo json_encode($rows); ?>;
		
		var dataPoints = [];

		for (var i = 0; i <= jsonData.length - 1; i++) {
			dataPoints.push({ x: new Date(jsonData[i].y), y: Number(jsonData[i].label) });
		}

		var chart = new CanvasJS.Chart("chartContainer", {
			theme: "theme2",
			title:{
				text: "Earthquakes – per month"
			},
			animationEnabled: true,
			axisX: {
				//valueFormatString: "MMM",
				interval:1,
				intervalType: "week"
			},
			axisY:{
				includeZero: false
			},
			data: [
			{
				type: "line",
				lineThickness: 3,
				dataPoints: dataPoints
				}
			]
		});

		chart.render();
	}
</script>

[bambinou]

Hi,

Thank you for your help,
Unfortunately I am not getting any graphs showing up with the below code, there is an error somewhere:
[php]
<?php
$query = “SELECT
SUM(cust_order_total) AS label,
due_date AS y
FROM orders
WHERE YEAR(due_date) = YEAR(CURDATE())
AND MONTH(due_date) = MONTH(CURDATE())
GROUP BY due_date
ORDER BY label”;
$rows = [];
$result = mysqli_query($connection,$query);
$rows = mysqli_fetch_all($result, MYSQLI_ASSOC);
?>

<!–Graph1 Daily Chart —>
<script type=”text/javascript”>
window.onload = function () {
var jsonData = <?php echo json_encode($rows); ?>;

var dataPoints = [];

for (var i = 0; i <= jsonData.length – 1; i++) {
dataPoints.push({ x: new Date(jsonData[i].y), y: Number(jsonData[i].label) });
}

var chart = new CanvasJS.Chart(“chartContainer”, {
theme: “theme2”,
title:{
text: “Earthquakes – per month”
},
animationEnabled: true,
axisX: {
//valueFormatString: “MMM”,
interval:1,
intervalType: “week”
},
axisY:{
includeZero: false
},
data: [
{
type: “line”,
lineThickness: 3,
dataPoints: dataPoints
}
]
});

chart.render();
}
</script>
<div id=”chartContainer” style=”height: 300px; width: 100%;”></div>
[/php]

[Naveen Venugopal]

bambinou,

Can you please post the complete JSON returned to jsonData or provide a link to the page if it can be publicly accessible.

[bambinou]

Thank you, I think the easy solution for me is to get a library where I can directly parse from php into json format witout reparsing it again and again which i think really complicates things when not needed. I was looking at canvasjs and the data can be parsed directly from php and dropped in the js code,much much easier….

I cannot give you a publicly available link as this is on my local computer.

Thanks again for your help,

[bambinou]

sorry not cancasjs…but other libraries I meant…Also canvasjs has a problem with the dates, we cannot get dd/mm/yyyy which is a real problem.