[visualization-api] Unable to display google charts

Thu, 01 Mar 2018 00:46:18 -0800 

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="fyp";
   $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="fyp";
   $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">&nbsp;</td>
            <td width="10">&nbsp;</td>
            <td width="432"><div id="chart1"></div></td>
            <td width="141">&nbsp;</td>
            <td width="144">&nbsp;</td>
        </tr>
        <tr>
            <td width="141">&nbsp;</td>
            <td width="10">&nbsp;</td>
            <td width="432"><div id="chart2"></div></td>
            <td width="141">&nbsp;</td>
            <td width="144">&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><div align="center">

<?php

   $db="fyp";
   $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>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </div></td>
    </tr>
    </table>
    </div>
</body>
</html>



-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/72d3541e-5847-479c-b775-7eada7eb952c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to