Google Charts - Auto refresh chart on interval

Question

I am trying to figure out how to refresh my Google chart on an interval. From what I understand Google charts first creates a model and then draws the model. From what I understand about setting AJAX queries on an interval you can do the following:

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

Thus I thought I could do this

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

And execute this on a loop but it seems to fail resulting in no chart being displayed. Any idea how to proceed?

Answer 1

Set a PHP file with the google chart library and than call it from your website via Ajax call. Have a look on the files below. They need database details changing and amending the query if you are using a different database than MySQL.

If you need more help on that just post a question in comments.

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>