Google Charts - インターバルでの自動リフレッシュチャート

Question

私は、インターバルでGoogleのチャートをリフレッシュする方法を理解しようとしています。私が理解していることから、Googleのチャートは最初にモデルを作成し、モデルを描画します。

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); 

を行うと、ループ上でこれを実行すると考えていたが、結果として失敗しているようだ：私はあなたが次の操作を行うことができます間隔にAJAXクエリの設定について理解して何からグラフは表示されません。どんなアイデアを進めるか？

Answer 1

Googleの図表ライブラリを使用してPHPファイルを設定し、Ajaxコール経由でWebサイトから呼び出します。以下のファイルを見てください。 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>