I have a Pie Chart
and want to auto refresh
it every 5 seconds. This is my code:
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
width: 900,
height: 500,
title: 'Partition des tickets',
legend: 'left',
is3D: true
};
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
i fixed it , if any one want to update any google chart dynamicly you just need to add update() function like you see
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
width: 900,
height: 500,
title: 'Partition des tickets',
legend: 'left',
is3D: true,
};
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
updateChart();
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
function updateChart() {
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
setTimeout(function () { updateChart() }, 1000);
};
}
</script>