FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › How can I use PHP MySQL Dynamic data › Reply To: How can I use PHP MySQL Dynamic data

June 20, 2013 at 6:36 pm #4751

photon77

I am an EE Prof., enjoying this package. Thanks for a great site with lots of examples. I am looking to take data from mysql which is generated via sensor enabled Arduinos sending info (temp, humidity, ect) regularly to the mysql. I have the Arduino to mysql working, and can extract the data from mysql and plot with another package, but can’t render the data in canvasjs. To get comfortable with canvasjs I have made a couple of simple files to test, and am stuck. For simplicity, have made a table with just three ints: id, x, and y. The following PHP seems to work. The table “testing” just has three columns: id, x, and y which are all set to int, and id is set to autoincrement (using phpmyadmin).
<?php
header(‘Content-Type: application/json’);
$con=mysqli_connect(“localhost”, “cjsuser”, “temp2013”, “canvasjsdb”);
// Check connection
if (mysqli_connect_errno($con))
{
echo “Failed to connect to DataBase: ” . mysqli_connect_error();
}else
{
$data_points = array();
$result = mysqli_query($con, “SELECT * FROM testing”);
while($row = mysqli_fetch_array($result))
{
$point = array(“label” => $row[‘x’] , “y” => $row[‘y’]);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>
This is live at: http://www.capegreenenergy.com/dev/sunilJSON.php
It returns: [{“label”:1,”y”:10},{“label”:2,”y”:20},{“label”:3,”y”:15}]

However, the following doesn’t render, and I think I am missing something obvious.
<html>
<head>
<title>JSON TEST</title>
<script src=”jquery.js”></script>
<script src=”/js/canvasjs.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$.getJSON(“sunilJSON.php”, function (result) {
var chart = new CanvasJS.Chart(“chartContainer”, {
data: [ { dataPoints: result } ]
});
chart.render();
});
});
</script>
</head>
<body>
<h2>OK NOW IN THE BODY</h2>
<div id=”chartContainer” style=”width: 800px; height: 380px;”></div>
<h2>OK this is after chartContainer</h2>
</body>
</html>
This is live at:
http://www.capegreenenergy.com/dev/sunilJSON.html
and as you can see it is live but the chart does not render.

I used a simple example from your site to make sure my directory structure is ok (I have /dev and /js at the same level of hierarchy). This one works fine:
http://www.capegreenenergy.com/dev/simpleChart.html

<html>
<head>
<script type=”text/javascript”>
window.onload = function () {
//function () {

var chart = new CanvasJS.Chart(“chartContainer”, {

title:{
text: “Fruits sold in First Quarter”
},
data: [//array of dataSeries
{ //dataSeries object

/*** Change type “column” to “bar”, “area”, “line” or “pie”***/
type: “column”,
dataPoints: [
{ label: “banana”, y: 18 },
{ label: “orange”, y: 29 },
{ label: “apple”, y: 40 },
{ label: “mango”, y: 34 },
{ label: “grape”, y: 24 }
]
}
]
});

chart.render();
}
</script>
<script type=”text/javascript” src=”/js/canvasjs.js”></script>
</head>
<body>
Thanks again for a cool package and thanks in advance for helping me get unstuck :)

  • This reply was modified 11 years, 2 months ago by photon77.