Hi all,
I’m very new to canvasjs and I was hoping to implement two nice canvasjs charts with data pulled from a SQL query.
When I create the two charts and use static data they display perfectly, however once i try to use database data (converted to JSON array) nothing gets displayed. I have been at this for 2 days now and I just don’t get what is happening so any advice would be much appreciated.
I tried to follow the following tutorial but it is not working for me.
https://canvasjs.com/forums/topic/how-can-i-use-php-mysql-dynamic-data/
I have the following files saved in localhost/canvasjs/
-canvasjs.js
-canvasjs.min.js
-excanvas.js
-jquery.canvasjs.js
-jquery.canvasjs.min.js
-jquery-1.3.js
So I have created a php page called data.php very similar to the tutorials.
<?php
require(“config.php”); //connection to database
header(‘Content-Type: application/json’);
$data_points = array();
$salessql = “SELECT products.name, sum(orderitems.quantity) as items_sold,
FROM products INNER JOIN orderitems
ON products.id=orderitems.product_id
GROUP BY orderitems.product_id ORDER BY items_sold desc LIMIT 10″;
$result = mysqli_query($db, $salessql);
while($row = mysqli_fetch_array($result))
{
$point = array(“label” => $row[‘product’] , “y” => $row[‘items_sold’]);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
?>
Then my html looks like this.
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title></title>
<script src=”jquery.js”></script>
<script src=”canvasjs.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$.getJSON(“data.php”, function (result) {
var chart = new CanvasJS.Chart(“chartContainer”, {
data: [
{
dataPoints: result
}
]
});
chart.render();
});
});
</script>
</head>
<body>
<div id=”chartContainer” style=”width: 800px; height: 380px;”></div>
</body>
</html>
I have tinkered with the script src so that it is ./canvasjs/canvasjs.js, I’ve changed it to jquery-1.3.js etc. but it makes no difference.
Thanks.
.
