Event does not fire on click of 'Max' zoom

[Sandhya K]

Hi,

I am using 'AnnotatedTimeLine' chart and I have two series of data
which I will hide or show based on the zoomrange selected.

For ex: I have minutes data as one series. I have hourly data as
second series.

When the user clicks on a zoom button, if the range is greater than 4
hours, I will show the hourly data and hide minutes data.

The issue I am facing is, when the user is in minutes data format(ex:
1hr zoom), and clicks on Max, since no event is fired, my logic does
not get triggered. My logic of hiding minutes data and displaying
hourly data.

Any ideas how to fix this?

Thanks,
Sandhya.

[asgallant]

You can hook the 'rangechange' event to capture changes in zoom level.  Something like this should work:

google.visualization.events.addListener(chart, 'rangechange', function () {
    if (chart.getVisibleRange().end - chart.getVisibleRange().start > 3600000) {
        // if the zoom range is > 1 hour (3.6 million microseconds), hide minutes and show hours
    }
    else {
        // if the zoom range is < 1 hour, hide hours and show minutes
    }
});

[Sandhya K]

I have used the rangechange event like you suggested. Here is the
code:

google.visualization.events.addListener(chart, 'rangechange',
function(event) {
var range = chart.getVisibleChartRange();
var start = range['start'];
var end = range['end'];
var rangeDiff = end - start;
if( rangeDiff > 3600000 ) {
data1.setColumns([0,4,5,6]);
} else {
data1.setColumns([0,1,2,3]);
}
chart.draw(data1,{'zoomStartTime' : start,
'zoomEndTime' : end});
});

Let me give the scenario which has the problem. If I clicked on '1h' ,
data1 now has columns set as [0,1,2,3] which is the minutes data. And
now, if I click on 'Max', within the minutes data, it zooms out to the
maximum and the chart displays lots of data points. What I am
expecting is that it fires the 'rangechange' event and picks up the
hourly data and displays less number of data points.

The reason I am switching between mins vs hourly data is to achieve
something similar to google finance's behavior of changing the volume
from '2min' to '30min', '1d', etc depending on the zoom range
selected(1d, 1m, 3m)..If you know a better way to achieve this
behavior I would appreciate it.

Thanks.

[asgallant]

Every column in your data set will have the same number of rows, so changing columns won't change the number of data points.  You can approach the problem two ways that I can see:

1).  Make two DataTables (1 for minutes, 1 for hours) and change the data table when the zoom range changes

2).  Use 1 column with a string value of 'minutes' or 'hours' and then filter a DataView on the string value when the range changes; DataTable would be set up something like this:

Time |  unit   | data1 | data2 | data3

---------------------------------------

  1  | minutes |  <1>  |  <2>  |  <3>

  2  | minutes |  <1>  |  <2>  |  <3>

  3  | minutes |  <1>  |  <2>  |  <3>

  4  |  hours  |  <1>  |  <2>  |  <3>

  5  |  hours  |  <1>  |  <2>  |  <3>