how to make a div match a dynamically created google chart height

Question

I have a page that dynamically loads a google timeline chart onto a div. The timeline increases in height as you add items on to it. If the chart is smaller than the div, it will be visible with empty space at the bottom. If the chart is larger, it will show scrollbars on the side.

What I would like is for the container div to always show the full chart or, another way, I would like the container div height to dynamically match the height of the chart.

I have tried to approximate the average size of each chart line and then adjust the div height when I load the chart with:

$("#gantt_chart").height(data['num_contents']*46);

But, although that somehow works, it's far from perfect because the approximation on height starts to accumulate with each additional line and the empty space at the bottom of the div increases which is not an elegant solution at all.

How would I ensure that the container div always shows the full chart?

I hope this is clear enough.

Many thanks.

Answer 1

The chart determines its height by either checking the height option passed into the draw call, or by checking the container height if the height option is not specified. I would suggest using the option instead of changing the div height via jQuery. I find the best method for dynamically calculating the chart height is to take the height of a row (typically 41px) times the number of rows, plus some padding for the top and bottom:

var height = data.getNumberOfRows() * 41 + 30;

Answer 2

Though in the doc they have shown to adjust height of div from where we are specifying the id of timeline but I recommend you to have set the height from the internal method.

// set the height for padding(padding height)
var pH = 40;

// get total height of rows (row height)
var rH = dataTable.getNumberOfRows() * 15;

// total chart height (chart height)
var cH = rH + pH;

// Now set this chart height to the timeline via option object
// apart from height, other attributes are just optional
var options = {
   height: chartHeight,
   colors: ['#339900', '#e6e600', '#B00000'],
   tooltip: {
        isHtml: true
   },
   timeline: {
        colorByRowLabel: false
   },
   avoidOverlappingGridLines: true
};