Re: Google Visualization API, send backend call in java script time intervals and update chart automatically (Jquery)

365 views
Skip to first unread message

asgallant

unread,
Nov 7, 2012, 10:59:59 AM11/7/12
to google-visua...@googlegroups.com
If you rearrange the drawing function a bit, you can use a setTimeout call to do the work for you:

function drawChart() {
    // Instantiate our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    
    google.visualization.events.addListener(chart, 'ready', function () {
        setTimeout(updateChart, /* time in ms */);
    });
    
    updateChart();
    
    function updateChart () {
        var jsonData = $.ajax({
            url: "dataFetch/packageRenewals_WSC_AvaBill_Data.php",
            dataType: "json",
            async: false
        }).responseText;
        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);
        
        // draw the chart
        chart.draw(data, {
            width: 400,
            height: 240
        });
    }
}

Putting the setTimeout call in the "ready" event handler of the chart insures that the chart finishes drawing before another data pull is made.

On Wednesday, November 7, 2012 12:27:52 AM UTC-5, Gayan Dissanayake wrote:

Dear Team

I am very glad to say that, I was able to create a Pie chart successfully, with serverside data (PHP). This part is working fine.

My problem is. How do I send a ajax command after "n" seconds to backend and automatically update the chart. (using jquery), without refreshing the entire page.

So where should I put java script time interval segment to re call the server side page. Please assist me to solve this

My code is as follows

<head>
    <!--Load the AJAX API-->
      <script type="text/javascript" src="jsapi.js"></script>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
   
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
     
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
     
    function drawChart() {
      var jsonData = $.ajax({
          url: "dataFetch/packageRenewals_WSC_AvaBill_Data.php",
          dataType:"json",
          async: false
          }).responseText;
         
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }
       
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>

Thanks In advance
Gayan
Reply all
Reply to author
Forward
0 new messages