CODEWITHSUNDEEP
google-visualization
SahaNerede
SahaNerede

Reputation: 219

Google Chart - Animate not working

I'm using google chart but I want it with animate.. and animate not working what's wrong that's my codes

google.load('visualization', '1', {
    packages: ['corechart']
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Yıl', 'Toplam Satış Miktarı (Ton)'],
        ['2007', 153888],
        ['2008', 37634],
        ['2009', 21835],
        ['2010', 80929],
        ['2011', 137699],
        ['2012', 313837],
        ['2013', 1050000], ]);

    var options = {
        title: 'Ciro',
        'width': 850,
        animation: {
            duration: 1000,
            easing: 'out'
        },
        'height': 400,
        hAxis: {
            title: 'Yıl',
            titleTextStyle: {
                color: 'red'
            }
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

Upvotes: 3

Views: 8445

Answers (6)

Groom
Groom

Reputation: 11

I had a similar issue with a Gauge-chart. In my case, it was because I loaded the data asynchronous, and updated both the label and the value of the chart at the same time. When I did it separately, it worked.

So instead of this:

iVeChartData.setValue(0, 1, myValue); //Update value
iVeChartData.setValue(0, 0, myLabel); //Update label from "Loading.." to something else
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart

I did this:

iVeChartData.setValue(0, 0, myLabel); //Update label from "Loading.." to something else
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart
iVeChartData.setValue(0, 1, myValue); //Update value
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart

Upvotes: 0

SamChen
SamChen

Reputation: 405

The new version support startup animation

animation: {
   startup:true,
   duration: 1000,
   easing: 'out'
}

Upvotes: 6

PaulG
PaulG

Reputation: 7102

This is probably because you are creating a new instance of the chart everytime you draw it:

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

Try putting the above code 'outside' of the draw method and in your draw method just say:

chart.draw(data, options);

I've done this before and it works.

Upvotes: 4

asgallant
asgallant

Reputation: 26330

Try this:

// create a DataView with 0's in every row of the 'Toplam Satış Miktarı (Ton)' column
var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () {return 0;}
}]);
// create 'ready' event listener to redraw the chart (triggering the animations)
// when the chart is finished drawing
var animate = google.visualization.events.addListener(chart, 'ready', function () {
    // remove the listener so this doesn't repeat ad infinitum
    google.visualization.events.removeListener(animate);
    // draw the chart using the real data, triggering the animation
    chart.draw(data, options);
});
// draw the chart using the view
chart.draw(view, options);

Upvotes: 1

Abinaya Selvaraju
Abinaya Selvaraju

Reputation: 1292

See the below code to do animation in google charts.

        var index = 0;
        var chartData =[153888,37634,21835,80929,137699,313837,1050000];
        var drawChart = function() {
            console.log('drawChart index ' + index);
            if (index < chartData.length) {
                data.setValue(index, 1, chartData[index++]);
                chart.draw(data, options);
            }
        }

        google.visualization.events.addListener(chart, 'animationfinish', drawChart);

Take a look at jqfaq.com for the working sample. Hope this will help you.

Upvotes: 1

Jeremy Faller
Jeremy Faller

Reputation: 1394

I assume you want the animation the first time you draw the google chart. Google charts really only support animation well when you're changing the values. Try the following:

     var data = google.visualization.arrayToDataTable([
          ['Yıl', 'Toplam Satış Miktarı (Ton)'],
          ['2007', 153888],
          ['2008', 37634],
          ['2009', 21835],
          ['2010', 80929],
          ['2011', 137699],
          ['2012', 313837],
          ['2013', 1050000], ]);

      var options = {
          title: 'Ciro',
          'width': 850,
          animation: {
              duration: 1000,
              easing: 'out'
          },
          'height': 400,
          hAxis: {
              title: 'Yıl',
              titleTextStyle: {
                  color: 'red'
              }
          },
          vAxis: {minValue:0, maxValue:1200000}
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      var data1 = google.visualization.arrayToDataTable([
          ['Yıl', 'Toplam Satış Miktarı (Ton)'],
          ['2007', 0],
          ['2008', 0],
          ['2009', 0],
          ['2010', 0],
          ['2011', 0],
          ['2012', 0],
          ['2013', 0], ]);
      chart.draw(data1, options);
      chart.draw(data, options);

You can modify the code to be a bit more readable, but I was trying to be explicit.

Upvotes: 3

Related Questions