Как добавить разные суффиксы в два разных датчика Google - PullRequest
Новая
       220

Как добавить разные суффиксы в два разных датчика Google

0 голосов
/ 16 февраля 2019

У меня Raspberry Pi 3, работающий с сервером ламп и считывающий данные с датчика AM2302, данные сохраняются в базе данных mysql, а затем отображаются в веб-странице через файл php.

основные вопросы - это то, что вы хотитеназначить разные суффиксы для двух датчиков Google (один для температуры и один для влажности), но не работает как желание, когда я обновляю страницу, она показывает нулевое значение с суффиксом, который я хочу для каждого, но в следующую секундуКогда он показывает это, база данных формы. Он просто отображает один и тот же суффикс в двух датчиках.

И они показывают его один над другим, как я могу поставить рядом

здеськартинка:

here is a picture:

и я хочу получить эти результаты

and I wanna these result

Вот код формы моего 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>

Я редактирую вопрос, чтобы показать полученный результат. Теперь я могу отображать данные с двух датчиков.enter image description here

спасибо за помощь пользователю WhiteHat

1 Ответ

0 голосов
/ 16 февраля 2019

если вы добавите строки в одну таблицу данных и нарисуете одну диаграмму,
вы получите две измерительные диаграммы в строке, а не одна поверх другой ...

однако, прочитав вопрос ближе,
вам нужно будет нарисовать две разные диаграммы,
, потому что варианты не одинаковы для обоих.

сначала, чтобы получить две диаграммы в строке, а не в столбце,
вы можете добавить следующий класс CSS .gauge class ... 

.gauge {
  display: inline-block;
}

thisзаставит элементы <div> отображаться рядом друг с другом.

Что касается суффикса, необходимо использовать уникальные имена для форматеров.
выше, одна и та же переменная используется для обоих -> var formatter

, когда второйсоздается, он переопределяет суффикс для первого.
вместо ... 

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);

мы будем использовать ... 

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);

см. следующую работуфрагмент ... 

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>
...