Google Charts Transition Animation: How to change axis labels upon redrawing the chart?

Question

Using Google Charts Transition Animation, I have created a chart that can be redrawn upon clicking on the button below the chart (the full functioning code can be found below). Once the button is clicked, the chart displays new values and a new title.

I change the title in the function drawChart using the following piece of code:

options['title'] = 'Monthly ' + (current ? 'Test A' : 'Test B') + ' Production by Country';

Now to my problem: I would also like to change the title of the horizontal axis upon clicking on the button. Without a button (in a static version), this can be achieved by adding the following code to the options:

hAxis: {title: 'Axis Title'}

When I add the following piece of code to my function (behind the title adjustment shown above), however, nothing changes:

options['hAxis.title'] = 'Title ' + (current ? 'Test A' : 'Test B');

Does anyone know how I need to change the code above to get the axis title to change?

Here is my complete code:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80]
      // Treat first row as data as well.
    ], true);

    var data2 = google.visualization.arrayToDataTable([
      ['Mon', 23, 23, 39, 42],
      ['Tue', 34, 34, 59, 64],
      ['Wed', 55, 52, 79, 80]
      // Treat first row as data as well.
    ], true);

    // Create and populate the data tables.
    var data = [];
    data[0] = data1;
    data[1] = data2;

    var options = {
      legend:'none'
    };

    var current = 0;
    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
    var button = document.getElementById('b1');

    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 = 'Switch to ' + (current ? 'Test A' : 'Test B');
          });
      options['title'] = 'Monthly ' + (current ? 'Test A' : 'Test B') + ' Production by Country';

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

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

}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    <input type="button" value="Next day" id="b1" />
  </body>
</html>

Thanks a lot!!

options['hAxis.title'] may not be the same as options.hAxis.title. I haven't tested this, but what you typed may be more like this object literal: {'hAxis.title': 'Title'} — nbering

DDrake DDrake · Accepted Answer · 2015-05-04T21:52:31

The easiest way I found to do it is first define hAxis in options:

var options = {
 hAxis: {title: "Axis Title"},      
 legend:'none'    
};

And then you add this line of code below your addListener function:

options.hAxis.title = (current ? 'Test A' : 'Test B')

Google Charts Transition Animation: How to change axis labels upon redrawing the chart?

1 Answers