谷歌图表 - 间隔自动刷新图表答案

【问题标题】：Google Charts - Auto refresh chart on interval谷歌图表 - 间隔自动刷新图表
【发布时间】：2016-04-01 02:49:37
【问题描述】：

我想弄清楚如何定期刷新我的 Google 图表。据我了解，谷歌图表首先创建一个模型，然后绘制模型。根据我对间隔设置 AJAX 查询的了解，您可以执行以下操作：

setInterval(function() {
    //call $.ajax here
}, 5000); //5 seconds

所以我认为我可以做到这一点

setInterval(function(), {
var processor_usage = $.ajax({
              url:'/getProcessorData/'+$("#host_id").val(),
              dataType:'json',
              async: false
           }).responseText;

           var p_options = {
              title: 'Processor Usage',
              width: 800,
              height: 400,
              hAxis: {
                 title: 'Time'
              } 
          };

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

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.LineChart(document.getElementById('p_chart_div'));
          chart.draw(data, p_options);
}, 5000);

并在循环中执行此操作，但似乎失败导致没有显示图表。知道如何进行吗？

【问题讨论】：

标签： jquery ajax charts google-visualization

【解决方案1】：

使用 google 图表库设置一个 PHP 文件，然后通过 Ajax 调用从您的网站调用它。看看下面的文件。如果您使用的数据库与 MySQL 不同，他们需要更改和修改查询的数据库详细信息。

如果您需要更多帮助，请在 cmets 中发布问题。

chart.php

<?php

$con = mysqli_connect('localhost','user','pass','DataBaseToConnect');

if (!$con) {

  die('Could not connect: ' . mysqli_error($con));

}

$query = "SELECT table.Customer,sum(table.cashpaid) AS cash FROM table 
WHERE 
table.cashpaid >5000 
GROUP BY table.Customer ORDER BY table.Customer ASC ";

$result = mysqli_query($con,$query);

mysqli_close($con);

$table = array();

//Labels for the chart, these represent the column titles

$table['cols'] = array(

    array('id' => '', 'label' => 'Customer','pattern'=>'','type' => 'string'),

    array('id' => '', 'label' => 'cash','pattern'=>'','type' => 'number')

    ); 

$rows = array();

foreach($result as $row){

    $temp = array();

    //Values

    $temp[] = array('v' => (string) $row['Customer']);

    $temp[] = array('v' => (integer) $row['cash']); 

    $rows[] = array('c' => $temp);

    }

$result->free();

$table['rows'] = $rows;

$jsonTable = json_encode($table, true);

//--------------------------------------------- -----------------------------------------------------------

?>

    <!--Load the AJAX API-->

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">


      // Load the Visualization API and the corechart package.

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



      // Set a callback to run when the Google Visualization API is loaded.

      google.charts.setOnLoadCallback(drawChart);


      // Callback that creates and populates a data table,

      // instantiates the pie chart, passes in the data and

      // draws it.


function drawChart() {

            // Create our data table out of JSON data loaded from server.

            var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);



        // Set chart options

        var options = {'title':'       Time allocated per customer today',

                       'width':600,

                       'height':400};



        // Instantiate and draw our chart, passing in some options.

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      }



    </script>


    <!--Div that will hold the pie chart-->

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

your_website.php

<div id="box"></div>
 <script src="jquery-1.11.3.min.js"></script>
 <script>
    $(document).ready(function(){
        setInterval(function(){
            $('#box').load('chart.php')
        },5000); //every 5 sec
});


    </script>
    </div>

【讨论】：