Блог

Главная - Вопросы по программированию - Область диаграммы Google не отображает базу данных mysql

Область диаграммы Google не отображает базу данных mysql

#php #python #mysql #charts #google-visualization

#php #python #mysql #Диаграммы #google-визуализация

Вопрос:

Я работаю с сервером lamp raspberry pi3 для отображения данных с одного датчика AM2302. У меня есть один php-файл, который считывает значение с датчика и отображает его в формате json.

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

вот файл, который считывает данные, вызывается: read_sensors.php (та, которая собирает данные с датчика).

 <?php
// Settings
// host, user and password settings
$host = "localhost";
$user = "logger";
$password = "password";
$database = "temperatures";

// make connection to database
$connectdb = mysqli_connect($host,$user,$password)
or die ("Cannot reach database");

// select db
mysqli_select_db($connectdb,$database)
or die ("Cannot select database");

// sql command that selects all entires from current time and X hours backward
$sql= "SELECT temperature, humidity, sensor, dateandtime FROM temperaturedata where sensor = 'Exterior' order by dateandtime desc LIMIT 10";

// set query to variable
$temperatures = mysqli_query($connectdb,$sql);

// create content to web page
?>

<?php
// loop all the results that were read from database and "draw" to web page

$temps = [];
while($temperature = mysqli_fetch_assoc($temperatures)) {
    $temps[] = $temperature;
}

echo json_encode($temps);;
?>

Это показывает мне следующий результат:

 [
    {"temperature":"26.8","humidity":"82.2","sensor":"Exterior","dateandtime":"2019-03-11 09:21:02"},
    {"temperature":"26.8","humidity":"83.7","sensor":"Exterior","dateandtime":"2019-03-11 09:20:01"},
    {"temperature":"26.8","humidity":"82.8","sensor":"Exterior","dateandtime":"2019-03-11 09:19:01"},
    {"temperature":"26.8","humidity":"82.7","sensor":"Exterior","dateandtime":"2019-03-11 09:18:01"},
    {"temperature":"27","humidity":"82.6","sensor":"Exterior","dateandtime":"2019-03-11 09:17:01"},
    {"temperature":"27.2","humidity":"83","sensor":"Exterior","dateandtime":"2019-03-11 09:16:02"},
    {"temperature":"27.2","humidity":"83.1","sensor":"Exterior","dateandtime":"2019-03-11 09:15:01"},
    {"temperature":"27.1","humidity":"82.8","sensor":"Exterior","dateandtime":"2019-03-11 09:14:02"},
    {"temperature":"27.1","humidity":"82.9","sensor":"Exterior","dateandtime":"2019-03-11 09:13:01"},
    {"temperature":"27","humidity":"82.8","sensor":"Exterior","dateandtime":"2019-03-11 09:12:01"}
]

вот код для моего index.php файл:

 <html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src =
"https://www.gstatic.com/charts/loader.js">
      </script>

      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.

var dataArea = new google.visualization.DataTable();
dataArea.addColumn('string', 'Date');
dataArea.addColumn('number', 'Temperature');
dataArea.addColumn('number', 'Humidity');

var options = {title: 'Company Performance',
               hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };

$.ajax({
  url: "read_sensors.php",
  dataType: 'json'
}).done(function (data) {
  $.each(data, function (index, row) {
    dataArea.addRow([
      row.dateandtime,
      parseFloat(row.temperature),
      parseFloat(row.humidity)
    ]);
  });
});


var chartArea = new
google.visualization.AreaChart(document.getElementById("chart_area"));

chartArea.draw(dataArea);

}
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

В этот момент, когда я обращаюсь к index.php страница отображается пустой (ничего)

вот код с модом.:

 <html>
   <head>
      <title>Google Charts Tutorial</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://www.gstatic.com/charts/loader.js"></script>
      </script>
      <script type = "text/javascript">
      </script>
   </head>

   <body>
      <div id = "chart_area" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.

var dataArea = new google.visualization.DataTable();
dataArea.addColumn('string', 'Date');
dataArea.addColumn('number', 'Temperature');
dataArea.addColumn('number', 'Humidity');

var options = {title: 'Company Performance',
               hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };


$.ajax({
  url: "read_sensors.php",
  dataType: 'json',
}).done(function (data) {
  complete: function(data) {
    $.each(data, function(index, row) {
      dataArea.addRow([
        row.dateandtime,
        parseFloat(row.temperature),
        parseFloat(row.humidity)
      ]);
    });
    var chartArea = new google.visualization.AreaChart(document.getElementById("chart_area"));
    chartArea.draw(dataArea);
  }
});

}
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Ответ №1:

диаграмма рисуется до добавления данных.

переместите код рисования диаграммы в обратный вызов ajax done… 

 $.ajax({
  url: "read_sensors.php",
  dataType: 'json'
}).done(function (data) {
  $.each(data, function (index, row) {
    dataArea.addRow([
      row.dateandtime,
      parseFloat(row.temperature),
      parseFloat(row.humidity)
    ]);
  });

  var chartArea = new
  google.visualization.AreaChart(document.getElementById("chart_area"));

  chartArea.draw(dataArea, options);
});

кроме того, идентификатор <div> элемента должен совпадать с идентификатором, присвоенным диаграмме.

измените идентификатор на "chart_area" , здесь… 

   <div id="chart_area" style="width: 550px; height: 400px; margin: 0 auto">
  </div>

вам также может потребоваться переместить load инструкцию в тот же раздел, что и обратный вызов… 

 google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);

также необходимо добавить jquery на страницу, вы можете добавить выше библиотеку диаграмм Google… 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

ниже приведены предлагаемые изменения… 

 <html>
   <head>
      <title>Google Charts Tutorial</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://www.gstatic.com/charts/loader.js"></script>
   </head>

   <body>
      <div id="chart_area" style="width: 550px; height: 400px; margin: 0 auto"></div>
      <script>
        function drawChart() {
          var dataArea = new google.visualization.DataTable();
          dataArea.addColumn('string', 'Date');
          dataArea.addColumn('number', 'Temperature');
          dataArea.addColumn('number', 'Humidity');

          var options = {
            title: 'Company Performance',
            hAxis: {
              title: 'Year',
              titleTextStyle: {color: '#333'}
            },
            vAxis: {minValue: 0}
          };

          $.ajax({
            url: "read_sensors.php",
            dataType: 'json',
          }).done(function (data) {
            $.each(data, function(index, row) {
              dataArea.addRow([
                row.dateandtime,
                parseFloat(row.temperature),
                parseFloat(row.humidity)
              ]);
            });
            var chartArea = new google.visualization.AreaChart(document.getElementById("chart_area"));
            chartArea.draw(dataArea);
          });
        }
        google.charts.load('current', {packages: ['corechart']});
        google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Комментарии:

1. Я сделал это, но страница по-прежнему пуста, я отредактировал запрос, чтобы показать вам, как я модифицирую код с вашей помощью

2. Я тоже это сделал, посмотрите, я снова отредактировал свой вопрос с помощью полного модифицированного кода

3. извините, что я ошибаюсь, ошибки показывают мне следующее: 1.php: 30 неперехваченный (в обещании) Ошибка ссылки: $ не определен в drawChart (1.php:30)

4. Я потерялся, братан, это сводит меня с ума, мне действительно нравится этим заниматься, я не очень разбираюсь в этом (новичок), потому что я архитектор и мне нравятся материалы pi3. большое спасибо за ваши усилия

5. Я повторно отредактировал вопрос, чтобы показать вам мой фактический index.php файл, не могли бы вы, пожалуйста, поделиться со мной модом, который вы рассмотрели в pastebin?

Ответ №2:

Вам следует попробовать использовать complete опцию вместо done, для jQuery.ajax :

 $.ajax({
  url: "read_sensors.php",
  dataType: 'json',
  // NOTE: callback for $.ajax.done(...) goes here
  complete: function(data) {
    $.each(data, function(index, row) {
      dataArea.addRow([
        row.dateandtime,
        parseFloat(row.temperature),
        parseFloat(row.humidity)
      ]);
    });
    var chartArea = new google.visualization.AreaChart(document.getElementById("chart_area"));
    chartArea.draw(dataArea);
  }
});

Если это не работает, вам следует проверить свой CSS (встроенный или иной) на наличие любого display: none или, возможно, ваш JavaScript на наличие hide / fadeOut / slideDown .

Если это не работает, и вы используете jQuery 2 (или 3), вам следует использовать jQuery.when .

Например:

 $.when(function() {
  // code that you need to wait for
}).done(function() {
  // code that runs after code above is done
});

Удачи.