CODEWITHSUNDEEP
javascriptasp.netchartsgoogle-visualization
Nk88
Nk88

Reputation: 65

Google API : Google Chart Gauge Animation not working with Ajax Call

setInterval(function () {
    drawGuage();
}, 5000);

   var chart1 = null;
  function drawGuage() {

        $.ajax({
            type: "POST",
            url: "Default.aspx/GetGuageData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data;

                var options = {
                            title: 'Run-rate',
                            width: 500, height: 500,
                            min: 0, max: 120,
                            redFrom: 0, redTo: 80,
                            yellowFrom: 101, yellowTo: 120,
                            greenFrom: 81, greenTo: 100,
                            minorTicks: 5,
                            majorTicks: ['0', '30', '60', '90', '120'],
                            animation: {
                                duration: 1000,
                                easing: 'inAndOut'
                            },
                        };
                if (chart1 === null) {
                    chart1 = new google.visualization.Gauge($("#guageChart")[0]);
                     data = google.visualization.arrayToDataTable([
                        ['Label', 'Value'],
                        ['Production', 0]
                    ]);
                    chart1.draw(data, options);
                    google.visualization.events.addOneTimeListener(chart1, 'ready', function () {
                              data = google.visualization.arrayToDataTable(r.d);
                              chart1.draw(data, options);
                            });
                }
                else {
                    data = google.visualization.arrayToDataTable(r.d); 
                }
                chart1.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
}

Above is my code for Google Gauge chart. Animation is not working. Its just fixed to one value always. Guage needle is not moving on interval set. when the data is refreshed, the Gauge lines are not animated, but instead they are redrawn from new. I would like to see the cool animation

Upvotes: 1

Views: 191

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

looks like you're drawing the chart with the data,
before the 'ready' event has time to react.

move the last draw statement, inside the if statement, see comments below... 

            if (chart1 === null) {
                chart1 = new google.visualization.Gauge($("#guageChart")[0]);
                 data = google.visualization.arrayToDataTable([
                    ['Label', 'Value'],
                    ['Production', 0]
                ]);
                chart1.draw(data, options);
                google.visualization.events.addOneTimeListener(chart1, 'ready', function () {
                          data = google.visualization.arrayToDataTable(r.d);
                          chart1.draw(data, options);
                        });
            }
            else {
                data = google.visualization.arrayToDataTable(r.d); 
            }
            chart1.draw(data, options);  // <-- move this up one line

            if (chart1 === null) {
                chart1 = new google.visualization.Gauge($("#guageChart")[0]);
                 data = google.visualization.arrayToDataTable([
                    ['Label', 'Value'],
                    ['Production', 0]
                ]);
                chart1.draw(data, options);
                google.visualization.events.addOneTimeListener(chart1, 'ready', function () {
                          data = google.visualization.arrayToDataTable(r.d);
                          chart1.draw(data, options);
                        });
            }
            else {
                data = google.visualization.arrayToDataTable(r.d); 
                chart1.draw(data, options);  // <-- to here
            }

Upvotes: 1

Related Questions