Google Grafikler - Aralık'ta otomatik yenileme grafiği

Question

Google grafiğimi bir aralıkta nasıl yenilemeyi bulmaya çalışıyorum. Anladığım kadarıyla, Google grafikleri önce bir model oluşturur ve sonra modeli çizer. Bir aralığına AJAX sorguları ayarlama hakkında anladığım aşağıdakileri yapabilirsiniz Gönderen: Böylece

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

Ben bu

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

yapmak Ve bir döngü bu yürütebilir düşündük ama çıkan başarısız görünüyor hiçbir grafikte gösterilmiyor. Nasıl devam edeceğine dair bir fikrin var mı?

Answer 1

Bir PHP dosyasını google grafik kitaplığı ile ayarlayın ve Ajax çağrısı aracılığıyla web sitenizden arayın. Aşağıdaki dosyalara bakınız. MySQL'den farklı bir veritabanı kullanıyorsanız, veritabanı ayrıntılarının değişmesi ve sorguda değişiklik yapılması gerekir.

Daha fazla yardıma ihtiyacınız varsa, yorumlarda bir soru gönderin.

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>