Graphical gauge do not display

36 views

Skip to first unread message

Lars

unread,

Nov 12, 2020, 2:33:49 PM11/12/20

to Google Chart API

Hi,
The following php is running in a raspberry/buster with Apache2.
It displays the first part as a table with data from mariadb with no problems.
The second part is drawing a gauge with static data, but it doesn't display anything.
A white space is created between the two dates printed.
No errors reported.
Any ideas or proposals what is wrong?
BR Lars

<html>
//Table of data
<?php
// Attempt MySQL server connection.
$link = mysqli_connect("localhost", "triss", "noriko01?/", "test");
//Check connection
if($link == false)
{ die("ERROR: Could not connect. " . mysgli_connect_error()); }
// Print host information
echo "Connect Successfully. Host info: " . mysqli_get_host_info($link);
echo ("\n<br />\n<br />");?>

<table border="1" align="left">
</tr>
        <td>Day</td>
    <td>Read at</td>
    <td>Temp Cabin</td>
    <td>Temp Battery</td>
        <td>Humid Cabin</td>
        <td>Humid Battery</td>
</tr>

<?php

$query = mysqli_query($link, "SELECT * FROM boat_status") or die (mysqli_error($link));

while ($row = mysqli_fetch_array($query)) {
    echo
    "<tr>
        <td>{$row['Day']}</td>
    <td>{$row['ReadAt']}</td>
    <td>{$row['TempCabin']}</td>
    <td>{$row['TempBattery']}</td>
        <td>{$row['HumidCabin']}</td>
        <td>{$row['HumidBattery']}</td>
    </tr>\n";
}

?>
</table>
</body>
</html>
<html>
<body>
<?php
echo date('Y-m-d H:i:s');
echo ("\n<br />\n<br />"); ?>

<?php
    error_reporting(E_ALL);
    ini_set("display_errors", 1);
?>

//Gauge charts for Current temperature and humidity
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
   google.charts.load('current', {'packages':['gauge']});
   google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
    var data = google.visualization.arrayToDataTable([
     ['Label', 'Value'],
     ['Temp Cabin', 80],
     ['Temp Battery', 80],
     ['Hum Cabin', 80]
    ]);

    var options = {
      width: 400, height: 120,
      redFrom: 40, redTo: 60,
      yellowFrom: 20, yellowTo: 40,
      minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

    chart.draw(data, options);

    setInterval(function() {
      data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
      chart.draw(data, options);
    }, 13000);
    setInterval(function() {
      data.setValue(1, 1, 40 + Math.round(60 ' Math.random()));
      chart.draw(data, options);
    }, 5000);
    setInterval(function() {
      data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
      chart.draw(data, options);
    }, 26000);
   }
</script>

};
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
<?php
echo date('Y-m-d H:i:s');
echo ("\n<br />\n<br />"); ?>

</html>

Reply all

Reply to author

Forward

0 new messages