Independent Gauge visualizations

[Wael S]

Hi,

I am creating guages for temperature, humidity and calculated humidex. The provided examples work great except that in my case the ranges are different for each gauge.
For example appropriate values for humidity are 0-100%, but appropriate values for temperature are -40C to +40C (or something in that range). How can I modify the examples for that purpose?

I would like to do this in one database loop, i mean while I am looping for values for temperature, i would like to also load the values for humidity. I tried to create a different procedure for humidity, but it didn't work.

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart_div" style="width:550px; height:120px;"></div>
    <script type="text/javascript">
        // Load google charts
        google.charts.load('current', {'packages':['gauge']});
        google.charts.setOnLoadCallback(drawChart);

        // Draw the chart and set the chart values
        function drawChart() {
          var data = google.visualization.arrayToDataTable([

          <?php
              echo  "['Label', 'Value']";
              if ($num_rows > 0) {
             while($row = $result->fetch_assoc()) {
                 if($current_row <= $result->num_rows) {
                echo ", ";
                 }

                 if (($row["temp"] > 24) && ($row["humidity"] > 60)) {
                $dewPoint = $row["temp"] - ((100 - $row["humidity"])/5);
                $e = 6.11 * exp(5417.7530 * ((1/273.16) - (1/$dewPoint)));
                $h = 0.5555 * ($e-10);
                $humidex = $row["temp"] + abs($h);
                 } else {
                $humidex = $row["temp"];
                 }

                 echo "['Temperature',". $row["temp"]. "], ['Humidity'," . $row["humidity"] . "], ['Humidex', " . $humidex ."]";
                 $last_update_time = $row["entry_time"];
                 }
              }
              echo "]);";
//              $conn->close();
          ?>



          // Optional; add a title and set the width and height of the chart
          var options = {
             width:400, height:150,
             redFrom:30, redTo: 50,
             yellowFrom:-50, yellowTo: -10,
             minorTicks:5,
             min:-40,
             max:40
          };

          // Display the chart inside the <div> element with id="chart_div"
          var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
        </script>