Do not allow the Google Timeline to have a height of 200 pixels unless height is specified

Question

google.load("visualization", "1", { packages: ["timeline"] }); google.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'JobType' }); dataTable.addColumn({ type: 'string', id: 'WorkType' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ ['Excavation', 'Compaction', new Date(2015, 1, 1), new Date(2015, 1, 4)], ['Excavation', 'Step Push', new Date(2015, 1, 1), new Date(2015, 1, 2)], ['Excavation', 'Clean Road', new Date(2015, 1, 4), new Date(2015, 1, 5)], ['Back Fill', 'Load Fill', new Date(2015, 1, 16), new Date(2015, 1, 16)], ['Back Fill', 'Bob Cat', new Date(2015, 1, 16), new Date(2015, 1, 16)], ['Back Fill', 'Backfill', new Date(2015, 1, 17), new Date(2015, 1, 20)], ['Back Fill', 'Clean Road', new Date(2015, 1, 20), new Date(2015, 1, 20)], ['Pre Grade', 'Level Dump', new Date(2015, 2, 23), new Date(2015, 2, 23)], ['Pre Grade', 'Compaction', new Date(2015, 2, 23), new Date(2015, 2, 23)], ['Pre Grade', 'Labourer Work', new Date(2015, 2, 23), new Date(2015, 2, 26)], ['Pre Grade', 'Labourer Work', new Date(2015, 2, 28), new Date(2015, 2, 28)], ['Loaming', 'Load Loam', new Date(2015, 3, 15), new Date(2015, 3, 15)], ['Loaming', 'Level Dump', new Date(2015, 3, 15), new Date(2015, 3, 15)], ['Loaming', 'Compaction', new Date(2015, 3, 15), new Date(2015, 3, 15)], ['Loaming', 'Loam', new Date(2015, 3, 16), new Date(2015, 3, 18)] ]); var options = { timeline: { groupByRowLabel: true } }; chart.draw(dataTable, options); } 

 <div id="timeline"></div> 

I have this diagram here: http://jsfiddle.net/ywsgmagc/ (Please just go to the actual jsfiddle.net website since this widget in stackoverflow does not allow loading external js files without extension)

As you can see, height is not specified. According to the Google Charts documentation, the default height should be "the height of the containing element." This is not true.

If you look at the html created, it will declare a container around the chart and set the height to 200px.

All SVG elements in the container have the specified height. How is this possible just to make it occupy as much height as needed without adding a scroll bar?

Calculating the height with an estimate of the height of the line makes no sense. I see how through SVG elements after rendering in the browser and finding all the RECT elements and getting the height of each of these elements will work ... but this seems like a lot of extra work. Did I miss something?

Thanks Nick

Answer 1

There is a solution (not a smart solution, but it works :):

1) Draw your timeline for the first time: chart.draw (dataTable, options);

2) Get the timeline height: var realheight = parseInt ($ ("# yourtimelinecontainer div: first-child div: first-child div: first-child div svg"). Attr ("height")) + 70;

3) set the real timeline height in the parameters: options.height = realheight;

4) redraw: chart.draw (dataTable, options);

Regards