Google Chart Area не отображает базу данных MySQL

Обратите внимание, что это может случиться, если вы случайно забудете закрыть свое соединение:

Connection connection;
try {
  Statement statement = connection.createStatement();
  ResultSet resultSet = statement.executeQuery(QUERY);
  if (resultSet.next()) { /* do something */ }
catch (SQLException e) { /* handle exception */ }
finally {
  if (connection != null) {
    try {
      connection.close(); // <-- This is important
    } catch (SQLException e) {
      /* handle exception */
    }
  }
}

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

1
задан Elvy Collado 11 March 2019 в 14:30
поделиться

2 ответа

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

переместить код рисования диаграммы в обратный вызов 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 Chart ...

<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>
0
ответ дан WhiteHat 11 March 2019 в 14:30
поделиться

Вы должны попробовать использовать опцию complete вместо готового, для 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 . [ 1116]

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

Например:

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

Удачи.

0
ответ дан LogicalBranch 11 March 2019 в 14:30
поделиться
Другие вопросы по тегам:

Похожие вопросы: