CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
user2763261
user2763261

Reputation: 33

Google Charts Bar Graph

I'm trying to create a graph that has the animation but also alternating colours I am able to make the graph show alternating colours, but the second colour doesn't animate, it just appears after everything has loaded

my code:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      function drawChart() {
          // Create and populate the data table.
        var option = {title:"Some Graph that doesn't actually show anything",
                     width:900, height:500,
                     animation: {duration: 2000, easing: 'out',},
                     vAxis: {title: "Yearly Spending"},
                     isStacked:true,
                     hAxis: {title: "Some Amount", minValue:0, maxValue:100},
                     series: [{color: '#5B6770', visibleInLegend: true}, {color: '#CF4520', visibleInLegend: true}]     
                     };
        var data = new google.visualization.DataTable();    
        data.addColumn('string', 'N');
        data.addColumn('number', 'Percent');
        data.addRow(['2003', 0]);
        data.addRow(['2004', 0]);
        data.addRow(['2005', 0]);
        data.addRow(['2006', 0]);
        data.addRow(['2007', 0]);
        data.addRow(['2008', 0]);
        data.addRow(['2009', 0]);
        data.addRow(['2010', 0]);
        data.addRow(['2011', 0]);
        data.addRow(['2012', 0]);
        data.addRow(['2013', 0]);
        data.addColumn('number', 'Other');

        // Create and draw the visualization.
        var chart = new google.visualization.BarChart(document.getElementById('chart'));
        chart.draw(data, option);
        data.setValue(0, 1, 75);
        data.setValue(1, 2, 55);
        data.setValue(2, 1, 30);
        data.setValue(3, 2, 75);
        data.setValue(4, 1, 65);
        data.setValue(5, 2, 20);
        data.setValue(6, 1, 56);
        data.setValue(7, 2, 75);
        data.setValue(8, 1, 55);
        data.setValue(9, 2, 63);
        data.setValue(10, 1, 48);
        chart.draw(data, option);
      }

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

    </script>
  </head>
  <body>
    <div id="chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

how can I make it so all the bars animate?

Upvotes: 2

Views: 2170

Answers (1)

jmac
jmac

Reputation: 7128

When you originally initialize the graph, you have null values in column 3 (since you add the graph but no row values). As a result, I don't think the API is animating those values. If you change your code as follows, it animates all the bars for me:

function drawChart() {
  // Create and populate the data table.
  var option = {title:"Some Graph that doesn't actually show anything",
                width:900, height:500,
                animation: {duration: 2000, easing: 'out',},
                vAxis: {title: "Yearly Spending"},
                isStacked:true,
                hAxis: {title: "Some Amount", minValue:0, maxValue:100},
                series: [{color: '#5B6770', visibleInLegend: true}, {color: '#CF4520', visibleInLegend: true}]     
               };
  var data = new google.visualization.DataTable();    
  data.addColumn('string', 'N');
  data.addColumn('number', 'Percent');
  data.addColumn('number', 'Other');
  data.addRows([
    ['2003', 0, 0],
    ['2004', 0, 0],
    ['2005', 0, 0],
    ['2006', 0, 0],
    ['2007', 0, 0],
    ['2008', 0, 0],
    ['2009', 0, 0],
    ['2010', 0, 0],
    ['2011', 0, 0],
    ['2012', 0, 0],
    ['2013', 0, 0]
  ]);

  // Create and draw the visualization.
  var chart = new google.visualization.BarChart(document.getElementById('chart'));
  chart.draw(data, option);
  data.setValue(0, 1, 75);
  data.setValue(1, 2, 55);
  data.setValue(2, 1, 30);
  data.setValue(3, 2, 75);
  data.setValue(4, 1, 65);
  data.setValue(5, 2, 20);
  data.setValue(6, 1, 56);
  data.setValue(7, 2, 75);
  data.setValue(8, 1, 55);
  data.setValue(9, 2, 63);
  data.setValue(10, 1, 48);
  chart.draw(data, option);
}

I cleaned up the code a bit to make it easier to see what you are doing when defining the data, using the addRows method, and adding all the column assignments first. Otherwise the code is identical to yours.

Upvotes: 2

Related Questions