Gauge

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
https://code.google.com/apis/ajax/playground/?type=visualization&hl=fr#gauge_interaction
-->
  <body style="font-family: Arial;border: 0 none;">
    <?php 
    $Ch = file_get_contents('ConsigneH.txt');
    $Cb = file_get_contents('ConsigneB.txt');
    ?>
    
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['gauge']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
                
        var data1 = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp. C',<?php echo $t;?>]
        ]);
        
         var data2 = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Hr en %', <?php echo $h;?>]
        ]);
          gaugeOptions1 = {
          min: 0,
          max:30,
          greenFrom:<?php echo $Cb ?> , greenTo: <?php echo $Ch ?>,
          minorTicks: 5       
        };
         gaugeOptions2 = {
          min: 0,
          max:100,
          greenFrom:40 , greenTo: 60,
          minorTicks: 5       
        };
        // Create and draw the visualization.
        new google.visualization.Gauge(document.getElementById('visualization1')).
            draw(data1,gaugeOptions1);
        new google.visualization.Gauge(document.getElementById('visualization2')).
            draw(data2,gaugeOptions2);
      }
    
      google.setOnLoadCallback(drawVisualization);
    </script>

    <table style="width: 60%">
        <tr>
            <td id="visualization1" style="width: 250px; height: 250px;float: left;"> <br></td>
            <td id="visualization2" style="width: 250px; height: 250px;float: left;"> <br></td>
        </tr>
    </table>
  </body>