Unable to display google charts

55 views

Skip to first unread message

Charles87

unread,

Mar 1, 2018, 3:51:56 AM3/1/18

to Google Visualization API

Hi, I am trying to create a webpage which shows google charts where I will get real time data from mysql database. I put the .php file into htdocs in xampp to view the webpage. However, the webpage is blank. There are no errors. Below is my code, would appreciate some help here.

<html>
<head>
<meta http-equiv="refresh" content="10">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'Power');
data.addRows([
<?php

$db="temp";
$link = mysql_connect("localhost", "root", "password");
mysql_query('SET NAMES utf8');
mysql_select_db($db , $link) or die ("Couldn't open $db: ".mysql_error ());
$result = mysql_query("SELECT TIMESTAMPDIFF (MINUTE, Time, now ()) as Timel, Power FROM temp WHERE TIMESTAMPDIFF (MINUTE, Time, now()) < 60 Order By Time");

if ($result !== false) {
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {

$Time=mysql_result ($result, $i, "Timel");
$Power=mysql_result ($result, $i, "Power");

echo "['";
echo "$Time";
echo "',";
echo "$Power";
echo "]";
if ($i < ($num - 1))
{
echo ",";
}
$i++;
}
}
?>
]);

var options = {
width: 1000, height: 300,
hAxis: {title: 'Minute ago'},
vAxis: {title: 'Power(W)', maxValue: 3000, minValue: 0}
};

var chart = new google.visualization.ColumnChart (document.getElementById("chartl"));
chart.draw (data, options);
}

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn (string', 'Time);
data.addColumn('number', 'Energy');
data.addRows ([

<?php

$db="temp";
$link = mysql_connect("localhost", "root", "password");
mysql_query('SET NAMES utf8');
mysql_select_db($db , $link) or die ("Couldn't open $db: ".mysql_error ());
$result = mysql_query("SELECT now() as Timel, sum(Power) as Energy FROM temp WHERE TIMESTAMPDIFF (MINUTE, Time, now()) < 60 Order By Time");
if ($result !== false) {
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {

$Time=mysql_result ($result, $i, "Timel");
$Energy=mysql_result ($result, $i, "Energy") / 1000;

echo "['";
echo "$Time";
echo "',";
echo "$Energy";
echo"]";
if ($i < ($num - 1))
{
echo ",";
}
$i++;
}
}
?>
]);

var options = {
width: 1000, height: 300,
hAxis: {title: 'Current Time'},
vAxis: {title: 'Energy(kWh)', maxValue: 10, minValue: 0}
};

var chart = new google.visualization.ColumnChart (document.getElementById("chart2"));
chart.draw (data, options);
}

</head>
<body>
<div align="center">
<H1 align="center">Real-Time Energy Consumption Chart</H1>
<div align="center">
<table width="900" border="1">
<tr>
<td><div align="center">
<table width="1000" border="0">
<tr>
<td width="141"> </td>
<td width="10"> </td>
<td width="432"><div id="chart1"></div></td>
<td width="141"> </td>
<td width="144"> </td>
</tr>
<tr>
<td width="141"> </td>
<td width="10"> </td>
<td width="432"><div id="chart2"></div></td>
<td width="141"> </td>
<td width="144"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><div align="center">

<?php

$db="temp";
$link=mysql_connect ("localhost", "root", "password");
mysql_query('SET NAMES utf8');
mysql_select_db($db, $link) or die ("Couldn't open $db: ".mysql_error());
$result = mysqli_query ("SELECT Time, Power FROM temp Order By time desc limit 1");

if ($result !== false) {
$num=mysql_numrows($result);
$Time=mysql_result($result, 0, "Time");
$Power=mysql_result($result, 0, "Power");
}

?>

</div></td>
<td> </td>
<td> </td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
</body>
</html>

Reply all

Reply to author

Forward

0 new messages