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. -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/78d6ef2e-ac16-4707-8b53-04d748f61fb6%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
