Re: Can I use 2 Tranistion Animations on 1 Column Chart?

[asgallant]

Skimming over your code, it looks like you should just be able to set options.animation to whatever you want prior to redrawing the chart.

It is possible, however, that the relevant animation setting is the one which was previously used to draw the chart, not the one passed with the current draw call.  I have not tested this, so I don't know which is correct, but if it turns out this way, the solution should be to change only the animation option, redraw the chart, set the rest of the options/data and redraw again.

On Friday, July 6, 2012 11:56:53 AM UTC-4, nebands wrote:

Is it possible to do this? I want to be able to change values and change the view window on the same chart with different buttons. The scripts I am using for each function look like this:

To change Data Values:

 <script type="text/javascript">

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

      google.setOnLoadCallback(drawChart1);

      function drawChart1() {

      var rowData3 = [['Month', 'Offering1', 'Offering2', 'Offering3'],
      ['Oct 11', 0, 1, 0],
      ['Nov 11', 1, 2, 1],
      ['Dec 11', 0, 0, 0],
      ['Jan 12', 0, 1, 0],
      ['Feb 12', 0, 1, 1],
      ['Mar 12', 0, 5, 0],
      ['Apr 12', 4, 1, 0],
      ['May 12', 3, 0, 1] ];


      var rowData4 = [['Month', 'Dollars'],
      ['Oct 11', 10000],
      ['Nov 11', 5000],
      ['Dec 11', 600],
      ['Jan 12', 7000],
      ['Feb 12', 1000],
      ['Mar 12', 0],
      ['Apr 12', 8000],
      ['May 12', 15000] ];

      // Create and populate the data tables.
      var data = [];
      data[0] = google.visualization.arrayToDataTable(rowData3);
      data[1] = google.visualization.arrayToDataTable(rowData4);

      var options = {
      width: 600,
      height: 400,
      vAxis: {title: "Contracts"},
      hAxis: {title: "Month",  slantedText:true, slantedTextAngle:45 },
      series: [{color:'#4682B4', visibleInLegend: true}, {color:'#C0C0C0', visibleInLegend:true},{color:'#2A4C6A', visibleInLegend:true}],
      animation:{
      duration: 1000,
      easing: 'out'
      }
      };
      var current = 0;
      // Create and draw the visualization.
      var chart = new google.visualization.ColumnChart(document.getElementById('Chart1'));
      var button = document.getElementById('Chart1Button');
      function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
      function() {
      button.disabled = false;
      button.value = 'Change to Value';
      });
      options['title'] = 'Monthly ' +  (current ? 'Dollars' : ' Number') ;

      chart.draw(data[current], options);
      }
      drawChart();

      button.onclick = function() {
      current = 1 - current;
      drawChart();
      }
      }

    </script>

To Change View Window:
 <script type='text/javascript'>
      google.load('visualization', '1.1', {packages: ['corechart']});
      google.setOnLoadCallback(drawExample5);

      function drawExample5() {
      var options = {
      width: 600,
      height: 400,
      animation: {
      duration: 1000,
      easing: 'in'},
      title: 'Monthly Revenue',
      vAxis: {title: "$ in 000s"},
      series: [{color:'#4682B4', visibleInLegend: true}, {color:'#C0C0C0', visibleInLegend:true}],
      hAxis: {title: 'Month', slantedText:true, slantedTextAngle:45,  viewWindow:{min:12, max:20}}};

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

      var data = google.visualization.arrayToDataTable([
      ['Month', 'Revenue', 'Budgeted Revenue'],

  [DATA]


      var MAX = 20;
      for (var i = 0; i < MAX; ++i) {
  
  var changeZoomButton = document.getElementById('Chart');
  function drawChart() {
    // Disabling the button while the chart is drawing.
  
    changeZoomButton.disabled = true;
    google.visualization.events.addListener(chart, 'ready',
        function() {
         
          changeZoomButton.disabled = false;
        });
    chart.draw(data, options);
  }}

 
  var zoomed = false;
  changeZoomButton.onclick = function() {
    if (zoomed) {
      options.hAxis.viewWindow.min = 12;
      options.hAxis.viewWindow.max = 20;
    } else {
      options.hAxis.viewWindow.min = 0;
      options.hAxis.viewWindow.max = 20;
    }
    zoomed = !zoomed;
    drawChart();
  }
  drawChart();
}
    </script>

[Jinji]

I didn't look at the code, but in general, the 'animation' option refers to animation between the previous draw() call and this draw() call.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/EQKE8jHjbR8J.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

In that case, it looks like you can ignore the second half of my reply.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.