I am trying to build some ZingCharts with weatherdata from a homemade weatherstation. Currently I am using Google Charts, but would rather use Zing as it seems a whole lot easier to work with. Except, I can't get it to pull data from my Database. Below I have the demo example from ZingChart git, all I did was change the variables concerning my sql server. But it just shows an empty page. Looking at the page source after loading reveals that it doesn't fill the arrays with any data at all.
<!DOCTYPE html>
<html>
<head>
<title>MySQL Demo</title>
<script type="text/javascript" src="http://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<script>
<?php
$host = "localhost";
$port = 3306;
$usernm = "pi";
$passwd = "";
$dbname = "weatherDB";
$query = "SELECT timestamp, temperature from bme680 ORDER BY id ASC";
$time = [];
$temperature = [];
$mysqli = new mysqli($host, $usernm, $passwd, $dbname, $port);
if($mysqli->connect_error) {
die('Connect Error (' . $mysqli->connect_errno . ')' . $mysqli->connect_error);
}
if ($result = $mysqli->query($query)) {
while( $row = $result->fetch_array(MYSQLI_NUM)){
array_push($time, $row[0]);
array_push($temperature, $row[1]);
}
$result->close();
}
?>
var dateValues = [<?php echo join($time, ',') ?>];
var seriesValues = [<?php echo join($temperature, ',') ?>];
<?php
$mysqli->close();
?>
</script>
<script>
window.onload=function(){
zingchart.render({
id:"myChart",
width:"100%",
height:400,
data:{
"type":"line",
"title":{"text":"Data Pulled from MySQL Database"},
"scale-x":{
"values": dateValues,
"transform":{
"type":"date",
"item":{
"visible":false
}
}
},
"plot":{"line-width":1},
"series":[ {"values":seriesValues}]
}
});
};
</script>
<h1>Database Data</h1>
<div id="myChart"></div>
</body>
</html>
