谷歌折线图-自动刷新数据库

Google Line Chart - Refresh database automatically

本文关键字：刷新 数据库 折线图 谷歌      更新时间：2023-09-26

我正在一个界面上工作，该界面显示从我的数据库检索到的数据，这要归功于谷歌折线图。但是，我的数据库每10秒存储一次新数据，我不能自动刷新图表。

我需要一些非常基本的东西，我已经在网上找过了。我读了一些关于Javascript/AJAX/JQuery…但我更喜欢硬件:D 这是我的文件编辑:Chart_get和主文件已根据@Michel answer修改。

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" data

    <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 script with load function

<!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的教程，但如果你知道如何解决我的问题，这将是伟大的帮助我:)谢谢!

解决方案相机会

我找到答案了! 

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

首先去掉chart_get.php中的<!DOCTYPE>, <html>, <head>, <meta>, <title>标签。
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>
相关文章：