javascriptsqlasp.netgoogle-visualizationpygooglechart

Auto refresh Google Chart


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>

Solution

  • 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>