<!-- code javascript qui dessine les jauges -->

<script>                                                
RGraph.CSV('data.csv', function(csv)  {                 // on récupère le fichier data.csv par la fonction csv
    
    var Temp = csv.getRow(1, 0);                        // on récupère la température dans une variable
    var Humi = csv.getRow(1, 1);                        // on récupère l' humidité dans une variable
    
    RGraph.reset(document.getElementById('cvs1'));      // on efface la jauge précédente de la température ID : cvs1
    RGraph.reset(document.getElementById('cvs2'));      // on efface la jauge précédente de l' humidité ID : cvs2
         
    gauge1 = new RGraph.Gauge({                         // on construit la jauge température
        id: 'cvs1',                                     // son ID : cvs1, correspond à la div ou elle sera dessinée
        min: -20,                                       // le min
        max: 60,                                        // le max
        value: Temp[0],                                 // température : récupérée dans le csv
        options: {                                      // le cosmétique
            textColor: 'white',                         
            labelsValue: true, 
            labelsValueDecimals: 1,
            labelsValueBounding: false,
            labelsValueYPos: 0.75,
            labelsValueBold: true,
            labelsValueUnitsPost: ' °C',
            titleTop: 'DHT',
            titleBottom: 'Température', 
            backgroundColor: 'black',
            borderOuter:     'grey',
            borderInner:     'black',
            borderOutline:   'black',
            shadow:           true,
            shadowColor:     'grey',
            centerpinColor:  'black',                          
            colorsRanges: [[-20, 0, '#0000FF'], [0, 15,'#00FFFF'], [15, 30, '#00FF47'], [30, 40, '#FFFF00'], [40,60,'#FF4A00']] ,                
            adjustable: false,
            textSize: 11
        }
    }).draw()                                           // on la dessine
    
    gauge2 = new RGraph.Gauge({                         // on construit la jauge humidité
        id: 'cvs2',                                     // son ID : cvs2, correspond à la div ou elle sera dessinée
        min: 0,                                         // le min
        max: 100,                                       // le max
        value: Humi[0],                                 // humidité : récupérée dans le csv
        options: {                                      // le cosmétique
            textColor: 'white',
            backgroundColor: 'black',
            borderOuter:     'grey',
            borderInner:     'black',
            borderOutline:   'black',
            shadow:           true,
            shadowColor:     'grey',
            centerpinColor:  'black',
            labelsValue: true, 
            labelsValueDecimals: 1,
            labelsValueBounding: false,
            labelsValueYPos: 0.75,
            labelsValueBold: true,
            labelsValueUnitsPost: ' %',
            titleTop: 'DHT',
            titleBottom: 'Humidité',                
            colorsRanges: [[0, 30, '#DC3912'], [30, 45,'#FF9900'], [45, 75, '#00FF00'], [75, 85, '#FF9900'], [85,100,'#DC3912']] ,
            adjustable: false,
            textSize: 11
        }
    }).draw()                                           // on la dessine
});
</script>

<!-- code html ou sera dessiner les jauges -->

<div class="conteneur">
    <canvas class="element" id="cvs1" width="300" height="300" >        <!-- le canvas  ID cvs1 -->
        [No canvas support]
    </canvas>
    <canvas class="element" id="cvs2" width="300" height="300" >        <!-- le canvas  ID cvs2 -->
        [No canvas support]
    </canvas>
</div>