<!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?
