<script>
RGraph.CSV('../csv/result.csv', function (csv) //on récupère le fichier result
{
var row = csv.getRow(1, 0); // on enregistre les ligne du csv dans des variables
var row1 = csv.getRow(1, 1);
var row2 = csv.getRow(2, 0);
var row3 = csv.getRow(2, 1);
var gauge = new RGraph.Gauge({
id: 'cvs', // l id du canvas
min: 0,
max: 100,
value: row[0], // nos variable
options: {
titleTop: 'point froid',
titleBottom: '%',
colorsRanges: [[0, 25, '#DC3912'], [25, 35,'#FF9900'], [35, 60, '#00FF00'], [60, 70, '#FF9900'], [70,100,'#DC3912']] ,
} // ci dessus on personnalise les zones rouge verte orange .
}).draw();
var gauge1 = new RGraph.Gauge({
id: 'cvs1',
min: 0,
max: 60,
value: row1[0], // nos variable
options: {
titleTop: 'point froid',
titleBottom: '°C',
colorsRanges: [[0, 10, '#DC3912'], [10, 15,'#FF9900'], [15, 27, '#00FF00'], [27, 32, '#FF9900'], [32,60,'#DC3912']] ,
} // ci dessus on personnalise les zones rouge verte orange .
}).draw();
var gauge2 = new RGraph.Gauge({
id: 'cvs2',
min: 0,
max: 100,
value: row2[0], // nos variable
options: {
titleTop: 'point chaud',
titleBottom: '%',
colorsRanges: [[0, 15, '#DC3912'], [15, 25,'#FF9900'], [25, 45, '#00FF00'], [45, 55, '#FF9900'], [55,100,'#DC3912']] ,
} // ci dessus on personnalise les zones rouge verte orange .
}).draw();
var gauge3 = new RGraph.Gauge({
id: 'cvs3',
min: 0,
max: 60,
value: row3[0], // nos variable
options: {
titleTop: 'point chaud',
titleBottom: '°C',
colorsRanges: [[0, 15, '#DC3912'], [15, 20,'#FF9900'], [20, 35, '#00FF00'], [35, 40, '#FF9900'], [40,60,'#DC3912']] ,
} // ci dessus on personnalise les zones rouge verte orange .
}).draw();
});
</script>
<div id="titre">
<div class="element">température</div>
<div class="element">humidité</div>
</div>
<div id="canvas">
<canvas class="element" id="cvs1" width="250" height="250" > <!-- les canvas -->
[No canvas support]
</canvas>
<canvas class="element" id="cvs3" width="250" height="250" >
[No canvas support]
</canvas>
<canvas class="element" id="cvs" width="250" height="250" >
[No canvas support]
</canvas>
<canvas class="element" id="cvs2" width="250" height="250" >
[No canvas support]
</canvas>
</div>