Search code examples
phpchartsraspberry-pigoogle-visualizationgauge

How to add Different Suffix at two Different google gauges

I have a Raspberry Pi 3 running a lamp server and reading data from a AM2302 sensor the data is store at mysql database and then displaying in a webpage trough php file.

the main questions is that wanna to assign different suffix at two google gauges ( one for the temperature and one for the humidity), but is not working as desire, when I refresh the page it show zero value with the suffix that I wanna for each one, but in the next second when show it the data form database It just display the same suffix in the two gauges.

And they are show it one on top the another, how can I putting side by side

here is a picture:

here is a picture:

and I wanna these results

and I wanna these result

here is the code form my index.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Medidor Temperatura, Humedad</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>

<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(drawChart);
  function drawChart() {

    var dataHumid = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Humid', 0],
      ]);

    var dataTemp = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Temp', 0]
      ]);

    var optionsHumid = {
      width: 170, height: 170,
      redFrom: 0, redTo: 33,
      yellowFrom: 33, yellowTo: 66,
      greenFrom: 66, greenTo: 100,
      majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],
      minorTicks: 10
        };
var formatter = new google.visualization.NumberFormat({
       suffix: '%',
       fractionDigits: 1
       });
       formatter.format(dataHumid, 1);

    var optionsTemp = {
      width: 170, height: 170,
      redFrom: 30, redTo: 45,
      yellowFrom:24, yellowTo: 30,
      greenFrom: 12, greenTo: 24,
      majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],
      minorTicks: 10
        };

var formatter = new google.visualization.NumberFormat({
       suffix: 'h',
       fractionDigits: 1
       });
       formatter.format(dataTemp, 1);

    var chartHumid = new google.visualization.Gauge(document.getElementById("chart_Humid"));
    var chartTemp = new google.visualization.Gauge(document.getElementById("chart_Temp"));

    chartHumid.draw(dataHumid, optionsHumid,formatter);
    chartTemp.draw(dataTemp, optionsTemp, formatter);

    setInterval(function() {
        var JSON=$.ajax({
            url:"sensores.php",
            dataType: 'json',
            async: false}).responseText;
        var Respuesta=jQuery.parseJSON(JSON);
      dataHumid.setValue(0, 1,Respuesta[0].humidity);
      formatter.format(dataHumid, 1);
      chartHumid.draw(dataHumid, optionsHumid);
    }, 1300);

 setInterval(function() {
        var JSON=$.ajax({
            url:"sensores.php",
            dataType: 'json',
            async: false}).responseText;
        var Respuesta=jQuery.parseJSON(JSON);

      dataTemp.setValue(0, 1,Respuesta[0].temperature);
      formatter.format(dataTemp, 1);
      chartTemp.draw(dataTemp, optionsTemp);
    }, 1300);

  }
</script>
</head>
<body>
       <div class="gauge" id="chart_Humid"></div>       <div class="gauge" id="chart_Temp"></div>
</body>
</html>

I edit the question to show the result I got, Now I am able to display the data from two sensors. enter image description here

thanks for the help of the user WhiteHat

Solution

  • if you add the rows to one data table and draw one chart,
    you'll get two gauge charts in row, rather than one on top of the another...

    however, after reading the question closer,
    you will need to draw two different charts,
    because the options are not the same for both.

    first, to get the two charts in a row, rather than a column,
    you can add the following css to the .gauge class... 

    .gauge {
  display: inline-block;
}

    this will cause the <div> elements to display inline with one another.

    as for the suffix, need to use unique names for the formatters.
    above, the same variable is used for both --> var formatter

    when the second is created, it overrides the suffix for the first.
    instead of... 

    var formatter = new google.visualization.NumberFormat({
  suffix: '%',
  fractionDigits: 1
});
formatter.format(dataHumid, 1);

var formatter = new google.visualization.NumberFormat({
  suffix: 'h',
  fractionDigits: 1
});
formatter.format(dataTemp, 1);

    we'll use... 

    var formatHumid = new google.visualization.NumberFormat({
  suffix: '%',
  fractionDigits: 1
});
formatHumid.format(dataHumid, 1);

var formatTemp = new google.visualization.NumberFormat({
  suffix: 'h',
  fractionDigits: 1
});
formatTemp.format(dataTemp, 1);

    see following working snippet... 

    google.charts.load('current', {
  packages: ['gauge']
}).then(function () {
  var dataHumid = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Humid', 0]
  ]);

  var dataTemp = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Temp', 0]
  ]);

  var optionsHumid = {
    width: 170, height: 170,
    redFrom: 0, redTo: 33,
    yellowFrom: 33, yellowTo: 66,
    greenFrom: 66, greenTo: 100,
    majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],
    minorTicks: 10
  };

  var formatHumid = new google.visualization.NumberFormat({
    suffix: '%',
    fractionDigits: 1
  });
  formatHumid.format(dataHumid, 1);

  var optionsTemp = {
    width: 170, height: 170,
    redFrom: 30, redTo: 45,
    yellowFrom: 24, yellowTo: 30,
    greenFrom: 12, greenTo: 24,
    majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],
    minorTicks: 10
  };

  var formatTemp = new google.visualization.NumberFormat({
    suffix: 'h',
    fractionDigits: 1
  });
  formatTemp.format(dataTemp, 1);

  var chartHumid = new google.visualization.Gauge(document.getElementById("chart_Humid"));
  var chartTemp = new google.visualization.Gauge(document.getElementById("chart_Temp"));

  chartHumid.draw(dataHumid, optionsHumid);
  chartTemp.draw(dataTemp, optionsTemp);

  setInterval(function() {
    /*
    var JSON=$.ajax({
      url:"sensores.php",
      dataType: 'json',
      async: false}).responseText;
    var Respuesta=jQuery.parseJSON(JSON);
    dataHumid.setValue(0, 1, Respuesta[0].humidity);
    */
    dataHumid.setValue(0, 1, 74.9);
    formatHumid.format(dataHumid, 1);
    chartHumid.draw(dataHumid, optionsHumid);
  }, 1300);

  setInterval(function() {
    /*
    var JSON=$.ajax({
      url:"sensores.php",
      dataType: 'json',
      async: false}).responseText;
    var Respuesta=jQuery.parseJSON(JSON);
    dataTemp.setValue(0, 1, Respuesta[0].temperature);
    */
    dataTemp.setValue(0, 1, 27.5);
    formatTemp.format(dataTemp, 1);
    chartTemp.draw(dataTemp, optionsTemp);
  }, 1300);
});
    .gauge {
  display: inline-block;
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="gauge" id="chart_Humid"></div>
<div class="gauge" id="chart_Temp"></div>