Линейная диаграмма Google - автоматическое обновление базы данных

Я работаю над интерфейсом, который отображает данные, полученные из моей базы данных, благодаря линейной диаграмме Google. Однако новые данные сохраняются в моей базе данных каждые 10 секунд, и я не могу автоматически обновлять диаграмму.

Мне нужно что-то действительно простое, и я уже посмотрел в Интернете. Я читал что-то о Javascript/AJAX/JQuery... но мне удобнее работать с оборудованием :D

Вот мои файлы РЕДАКТИРОВАТЬ: Chart_get и основной файл были изменены в соответствии с ответом @Michel.

fetch.php — получение данных и эхо

<?php // Connection and Request stuff

  $host = blablabla
  (...)
  $req = $bdd->query('SELECT id, battery FROM Station');

  while ($data = $req->fetch()){
      $id = addslashes($data['id']);
      $charge_batt = intval($data['charge_batt']);
      $result .= "['".$id."' , ".$charge_batt."],";
  }

  $result = substr($result, 0, -1); // Erase the last ","
  echo $result;

?>

Выход :

['1' , 90],['2' , 89],['3' , 80],['4' , 100],['5' , 90],['6' , 50],['7' , 67]

chart_get.php — инициализирует диаграмму и рисует ее с данными «echo $result»

    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([    
<?php   
        echo ("['Date', 'Battery'],");
        include('fetch.php');
?>    
        ]);

        var options = {
          title: 'Battery health',
          animation:{
              duration: 1000,
              easing: 'out',
          },
          curveType: 'function'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }      
    </script>


    <div id="chart_div" style="width: 900px; height: 500px;"></div>

Чтобы обновить "chart_div", я пробовал:

main.html — скрипт jQuery с функцией загрузки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>

            <title>Project - Chart</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <script type="text/javascript" src="jQuery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                // first load it once, so it display's the chart 
                $('#tableHolder').load('chart_get.php');
                // then execute the interval
                setInterval(function(){$('#tableHolder').load('chart_get.php');}, 5000);
                });
    </script>

    </head>

    <body>

        <p>Hello</p>
        <div id="tableHolder"> </div>

    </body>
</html>

Но график вообще не отображается. Я совершенно не понимаю, что я делаю неправильно. Я быстро читаю несколько руководств по javascript, но если вы знаете, как решить мою проблему, было бы здорово помочь мне :) Спасибо!


javascript php ajax google-visualization partial-page-refresh
person Bikemat    schedule 28.05.2014    source источник
comment
Что говорит консоль? Выдает какие-нибудь ошибки?   -  person Michel    schedule 28.05.2014
comment
@Мишель Привет! fetch.php правильно возвращает мой массив. Chart_get.php корректно отображает линейный график. main.html не выдает никаких ошибок, но на странице не отображается график, вызываемый в tableHolder. (Он отображает только Hello.   -  person Bikemat    schedule 28.05.2014
comment
Редактировать: сам мой chart_get содержит некоторые элементы ‹!DOCTYPE›‹html›‹head›‹meta› и ‹div›. Он может конфликтовать с main.html? Должен ли я разрешить только ‹script› в chart_get.php?   -  person Bikemat    schedule 28.05.2014
comment
Эта настройка не будет работать, потому что если вы попытаетесь загрузить API визуализации несколько раз, он загрузится и вызовет свой обратный вызов только в первый раз. Нужно ли в вашем приложении загружать скрипт графика отдельно от главной страницы?   -  person asgallant    schedule 28.05.2014
comment
@asgallant У меня нет ограничений в использовании сценария диаграммы :) Я просто хочу, чтобы диаграмма обновлялась. Должен ли я разместить google.load(визуализацию) на главной странице и обновить обратный вызов? Я постараюсь :)   -  person Bikemat    schedule 29.05.2014

Ответы (2)


arrow_upward
1
arrow_downward

Решение от OP.

Я нашел ответ!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>

            <title>Projet GreenFeed - Station de recharge a energie positive</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        function drawChart() {

//AJAX Call is compulsory !

        var jsonData = $.ajax({
          url: "chart_fetch.php",
          dataType:"json",
          async: false
          }).responseText;

          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(jsonData);

          var options = {
               title: 'Battery',
              is3D: 'true',
              width: 800,
              height: 600
            };
          // Instantiate and draw our chart, passing in some options.
          // Do not forget to check your div ID
          var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
        </script>


        <script type="text/javascript" src="jQuery.js"></script>
        <script type="text/javascript">

                $(document).ready(function(){
                    // First load the chart once 
                    drawChart();
                    // Set interval to call the drawChart again
                    setInterval(drawChart, 5000);
                    });
        </script>

    </head>

    <body>

        <div id="chart_div"> </div>

    </body>
</html>
person Community    schedule 29.07.2017

arrow_upward
0
arrow_downward

Сначала избавьтесь от тегов <!DOCTYPE>, <html>, <head>, <meta>, <title> в chart_get.php.
Данные в chart_get.php — это те же данные, которые были бы в <div id="tableHolder"></div>, если бы вы не хотели, чтобы они обновлялись.

Во-вторых, перепишите свой сценарий в main.html следующим образом:

<script type="text/javascript">
    $(document).ready(function(){
        // first load it once, so it display's the chart 
        // (otherwise you have to wait 5 seconds)
        $('#tableHolder').load('chart_get.php');
        // then execute the interval
        setInterval(function(){$('#tableHolder').load('chart_get.php');}, 5000);
    });
</script>
person Michel    schedule 28.05.2014
comment
Хорошо, Мишель, я изменил свои файлы в соответствии с вашим ответом. Однако диаграмма не появляется даже с первым $('#tableHolder').load('chart_get.php'); нагрузка. Асгаллант говорит, что google.load(визуализация) не должна помещаться в скрипт chart_get.php. Я пытался поместить его в основной скрипт, но это не работает ^^ (экспериментирую ^^) - person Bikemat; 29.05.2014
comment
Я заметил, что мой ‹p›Hello‹/p› в main.html исчезает через 5 секунд. - person Bikemat; 29.05.2014
comment
Вы пытались поместить javascript chart_get.php внутри setInterval в main.html? И изменить вывод javascript на tableHolder вместо chart_div? - person Michel; 30.05.2014
comment
Nop не работает :'( Я пробую что-то совершенно другое. 'main.hmtl' содержит как javascript для 'chart_get.php', так и 'setInterval', который вызывает функцию 'drawChart'! Тем не менее, я мне понадобится AJAX для динамического извлечения данных, не так ли? Хорошо, поехали ... :p - person Bikemat; 30.05.2014
comment
ОБНОВЛЕНИЕ: ОК, я нашел способ сделать это :) Я обновил свой вопрос с ответом. В двух словах: оба скрипта находятся в main.html, но функция drawChart() выполняет вызов AJAX к chart_fetch.php, чтобы данные обновлялись. Затем setIntervall вызывает функцию drawChart() :) - person Bikemat; 30.05.2014
comment
Похоже, вы использовали json в своем ответе. У вас есть пример json? - person Alex van Es; 22.11.2019
comment
@AlexvanEs Я не использовал JSON. chart_get.php — это файл с содержимым JavaScript, как видно из вопроса ОП. - person Michel; 11.12.2019