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
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/5FislavN0rgJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
