toorshia/justgage

Refresh Value from database don't work !

oussama415 opened this issue · 1 comments

oussama415 commented

Hi,
please I need your help, I am working on a project where there are gauges for display with justGage js, the data to display comes from the database in mysql, it displays the latest value is good, but the problem that I encountered is that when I make modifications on the last recordings or I insert a new line, the gauges don't update despite having used the function: refresh ();

I want to refresh data gauge automatically without pressing the refresh button

Thank you

this is my code :

<?php

$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'database_name';
$mysqli = new mysqli($host, $user, $pass, $db) or die($mysqli->error);


$sql1 = "SELECT * FROM counter_active_energy ORDER BY id DESC LIMIT 1"; // DAY
$result1 = mysqli_query($mysqli, $sql1);


while ($row1 = mysqli_fetch_array($result1)) {

  $activeenergy1 = $row1['activeenergy1'];
  $activeenergy2 = $row1['activeenergy2'];
  $activeenergy3 = $row1['activeenergy3'];
}

?>


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Gauge</title>
</head>

<body>
  <div id="g1" class="gauge"></div>
  <div id="g2" class="gauge"></div>
  <div id="g3" class="gauge"></div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>
  <script>
    window.onload = function() {


      var g1 = new JustGage({
        id: "g1",
        value: [<?php echo $activeenergy1; ?>],
        min: 0,
        max: 1000,
        donut: true,
        gaugeWidthScale: 0.6,
        counter: true,
        hideInnerShadow: true
      });
      var g2 = new JustGage({
        id: "g2",
        value: [<?php echo $activeenergy2; ?>],
        min: 0,
        max: 4000,
        donut: true,
        gaugeWidthScale: 0.6,
        counter: true,
        hideInnerShadow: true
      });
      var g3 = new JustGage({
        id: "g3",
        value: [<?php echo $activeenergy3; ?>],
        min: 0,
        max: 1000,
        donut: true,
        gaugeWidthScale: 0.6,
        counter: true,
        hideInnerShadow: true
      });

      setInterval(() => {
        g1.refresh([<?php echo $activeenergy1; ?>]);
        g2.refresh([<?php echo $activeenergy2; ?>]);
        g3.refresh([<?php echo $activeenergy3; ?>]);
      }, 2000);
    };
  </script>


</body>

</html>
robertsLando commented

g1.refresh([]);

Remove []

g1.refresh(<?php echo $activeenergy1; ?>);