1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
| <html>
<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(drawGauge);
var chart_gauge ;
var data_gauge ;
var options_gauge ;
function lireTemperatureCapteur()
{
var fichierBrut = new XMLHttpRequest(); //On lance la requête pour récupérer le fichier
fichierBrut.open('GET', 'text.xml');// on ouvre le fichier il s'apelle test.xml
fichierBrut.onreadystatechange = function () // on lit le fichier
{
if(fichierBrut.readyState === 4) // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
{
if(fichierBrut.status === 200 || fichierBrut.status == 0)
{
try
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(fichierBrut.responseText,"text/xml");
}catch
(e) {alert(e.message)}
var temp_cuve_1 = xmlDoc.getElementsByTagName("TEMPERATURE_1")[0].childNodes[0].nodeValue ;
data_gauge.setValue(0, 1, temp_cuve_1);
var temp_cuve_2 = xmlDoc.getElementsByTagName("TEMPERATURE_2")[0].childNodes[0].nodeValue ;
data_gauge.setValue(1, 1, temp_cuve_2);
}
}
}
fichierBrut.send(null);
}
function changeTemp()
{
lireTemperatureCapteur();
chart_gauge.draw(data_gauge, options_gauge);
}
function drawGauge() {
data_gauge = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Cuve N°1',0],
['Cuve N°2',0]
]);
options_gauge = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
chart_gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
chart_gauge.draw(data_gauge, options_gauge);
setInterval(changeTemp , 5000); // rafraichit les gauges toutes les x millis
}
</script>
</head>
<body>
<div id="gauge_div" style="width:280px; height: 140px;"></div>
</body>
</html> |
Partager