google charts: timeline: dynamic height with scalebar position

Question

Thanks for viewing and answering. I am using Google Charts (TimeLine) to display information from database. But the Google Chart reference only provide setting fix height for the chart. Whereas I would like to change chart height based on the number of rows I get from data. So I made the code:

    var graph = $('#chart_timeLine').children()[0].children[0].children[1];
    $(graph).css('height',graph.scrollHeight);
    $(graph).css('overflow-y','auto');

Now the chart don't have a vertical scrollbar and I am satisfied. But I found that the scalebar, which shows the the scale of timeline chart is missing.(It is actually hiding under the chart, instead of showing up at the bottom of the chart).

So then I changed scalebar's position to absolute and set it to the bottom of my chart. Then it is ugly because it has a height of 200px, while the scale is at the bottom of that 200px, leaving a huge blank between my chart and the scale.

Is there a fix for that? Thank you.

Answer 1

Instead of messing with the internal workings of the chart, set the height based on the number of rows of data in the DataTable:

// set a padding value to cover the height of title and axis values
var paddingHeight = 40;
// set the height to be covered by the rows
var rowHeight = data.getNumberOfRows() * 15;
// set the total chart height
var chartHeight = rowHeight + paddingHeight;

and then in the Timeline's options, set the height:

height: chartHeight

Answer 2

I tried the answer, but it did not work for me. The way I got it to work for me was this:

    // Calculate height
    var rowHeight = 41;
    var chartHeight = dataTable.getNumberOfRows() * rowHeight + 50;

    var options = {
        height: chartHeight
    }

The + 1 to the getNumberOfRows() is for the X-axis text.