Timeline min/max viewable range

[Adam C]

If I have a timeline chart, how do I limit the viewable range to view only a portion?

For example:

Timeline data stretches from  Jan 1 2000 9:00:00.0 to Jan 1 2000 10:00:00.0am but I want to change both the min and max bounds of what is displayed, i.e. zoom in between 9:30:00.0am and 9:31:00.0am

Ideally I'd like to be able to scroll and/or expand the view window.

I initially thought of using an annotated chart where the chart is timeline and the bottom range selector moves the viewable portion of the timeline but I couldnt get it to work.

Any help is most appreciated!

Adam

[Adam C]

I also tried creating a dashboard with a ChartRangeFilter but I was getting an error saying one of the components could not draw.

If anyone has a recent sample or example that would be great

[Andrian Fathurohman Permana]

Me Too. I have the same problem. Maybe view window would help i guess

[Ray Thomas]

This thread is over a year old but I recently came across the same problem and eventually got it to work the way I wanted. What I had was a list of people and their start and end dates of working the the university college I work for. What I wanted was to show everyone who worked between user selectable years regardless of the start and end dates in the dataTable.

The standard dashboard controls - https://developers.google.com/chart/interactive/docs/gallery/controls - will not work because those use a single column to get the min and max values, but Timeline's use two - the start and end dates.

I had the dumb idea of using the control but not binding it to anything. A complete failure as nothing drew at all.

Another idea I had was to use a HTML 5 slider control - <input type="range"> - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range - but those only have one slider handle. There are some double sliders around such as https://refreshless.com/nouislider/ or http://www.simple.gy/blog/range-slider-two-handles/ or https://codepen.io/ChrisSargent/pen/meMMye but those turned out to be more trouble for me than they were worth. The original idea was to get the min and max values from the sliders and then filter the two date columns of a Timeline dataTable based on those values. This method will work, but I was spending more time getting the sliders to work than drawing the Timeline.

What I eventually did seems a bit long-winded but it works and as far as I can see works with no loss of speed. 

I created a hidden div to hold a dataTable made from the original dataTable which I emptied using the views option

view: {

        rows: [] // remove all rows from the view so it doesn't waste time rendering them

    }

I  then added an event listener to the slider control and got the min and max values and used that to filter another view of the data on both date columns and drew that to another div.

google.visualization.events.addListener(yearUserSlider, 'statechange', function () {

     var state  = yearUserSlider.getState();

     var userLow = state.lowValue.getFullYear();

     var userHigh =  state.highValue.getFullYear()

     var viewUserControls = new google.visualization.DataView(dataUserControls);

     viewUserControls.setRows(viewUserControls.getFilteredRows([

          {column: 3, maxValue: new Date(userHigh,0,0,)},

          {column: 4, minValue: new Date(userLow,0,0,)}

         ]));

     var userControlTimeline = new google.visualization.Timeline(document.getElementById('timelineUserControls_div'));

     userControlTimeline.draw(viewUserControls, timelineOptions);

The complete code can be found at http://brisray.com/test/faculty-timeline.htm

The Google Sheet it comes from is at https://docs.google.com/spreadsheets/d/1MFDuFhqJGkEBSgbZd5t4KBcz06LPrRVVRykIom2LZzs/edit#gid=0 - it looks a bit odd because I  also use it for a Timeline JS timeline - http://timeline.knightlab.com/ and that is fussy about how it accepts the data. I just use a query and rearrange it for the Google Visualization Timeline.

If anyone is interested in what the production page looks like, that's at https://www.indstate.edu/business/history/faculty 
The Timeline JS timeline is at the top of the page and the Google Visualization one is at the very bottom.

[Adam C]

Thanks @Ray, I appreciate your effort here

Cheers,

Adam