Question

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="gauge.min.js"></script>
</head>

<?php 
        //maak verbinding met MySQL server:
        $link = mysqli_connect("localhost","root","","opc") 
        or die("Kan niet verbinden met de server " . mysqli_error($link));

        //Haal waarde uit de database:
        $query = "SELECT * FROM test" 
        or die("Er is een fout opgetreden" . mysqli_error($link));

        //Sla de waarde op.
        $result = $link->query($query);

        //toon informatie:

        while($row = mysqli_fetch_array($result)) 
        {
            $waarde2 = $row["waarde2"];
        }
?>

<body>    
    <canvas id="gauge1" width="400" height="400"        
        data-type="canv-gauge"
        data-title="OPC TEST"
        data-min-value="0"
        data-max-value="100"
        data-major-ticks="0 10 20 30 40 50 60 70 80 90 100"
        data-minor-ticks="10"
        data-stroke-ticks="true"
        data-units="RPM"
        data-value-format="3.0"
        data-glow="true"
        data-animation-delay="500"
        data-animation-duration="200"
        data-animation-fn="linear"
        data-colors-needle="#f00 #00f"
        data-onready="setInterval( function() { Gauge.Collection.get('gauge1').setValue( <?= $waarde2 ?>);}, 1000);"
    ></canvas>    
</body>    
</html>

It works perfectly and shows a gauge with the value from the mysql database (which updates itself every second with another value). Unfortunately the gauge keeps displaying the same number. Does anyone know how to fix this?

Was it helpful?

Solution

Load the gauge and data pull into a DIV using AJAX and then update AJAX every **ms or seconds or whatever you need. Then it will just happen at the frequency you determine.

This is a quick and easy way to do it: Div Update

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top