Thanks @Ray, I appreciate your effort here Cheers, Adam On Sunday, July 14, 2019 at 12:56:36 AM UTC-4, Ray Thomas wrote: > > 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 view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/814b0ce5-d876-48e5-9471-45ea6436684c%40googlegroups.com.
