Question

我想弄清楚如何在一段时间内刷新我的Google图表。根据我的理解，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);

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

Answer 1

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

如果您需要更多帮助，请在评论中发帖提问。

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>

Google图表 - 间隔自动刷新图表

1 个答案: