(Why it's not displaying anything) Ajax to update gauge chart realtime (also connected to database).

27 views
Skip to first unread message

Corbin Jones

unread,
Nov 27, 2021, 4:43:38 AM11/27/21
to Google Visualization API
It doesn't have any error in the console.log so I can't find out what's the problem...


Mainpage
<!doctype html>
<html>

<head>
  <meta charset="utf8" />
  <title>Gauge</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      callback: function() {

        drawChart();
        setInterval(drawChart, 10000);

        function drawChart() {
          $.ajax({
            url: 'gaugechart.php',
            type: 'POST',
            datatype: 'JSON',
            success: function(json) {
              var data = new google.visualization.DataTable(json);
              var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
              chart.draw(data, {
                width: 500,
                height: 200,
                minorTicks: 5
              });
            },
            error: function(jqXHR, textStatus, errorThrown) {
              console.log(errorThrown + ': ' + textStatus);
            }
          });
        }
      },
      packages: ['gauge']
    });
  </script>
</head>

<body>
  <div id="gauge_div" style="width: 100%; height: 400px;" class="d-flex align-items-center justify-content-center mt-3"></div>
</body>

</html>

Gaugechart.php

<?php
$con = mysqli_connect('localhost', 'root', '', 'adminpanel');
$sql = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_array($result); // assuming ONE result

$temperature = $row["temperature"];
$pH = $row["pH"];
$DO = $row["DO"];
$turbidity = $row["Turbidity"];

echo <<<EOT
[
["Label", "Value"],
["Temperature", $temperature],
["pH", $pH ],
["DO", $DO ],
["Turbidity", $turbidity ]
]
EOT
?>



Reply all
Reply to author
Forward
0 new messages