Google charts: timeline: dynamic height with a position of the scale

Question

Thanks for watching and responding. I use Google Chart (TimeLine) to display information from a database. But in the Google Chart help system, only the installation height for the chart is indicated. While I would like to change the height of the chart depending on the number of rows that I get from the 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 does not have a vertical scrollbar, and I am satisfied. But I found that the scale bar, which shows the timeline scale, is missing. (She actually hides under the chart, and does not appear at the bottom of the chart).

So, I changed the position of the scale to absolute and set it at the bottom of the chart. Then it is ugly because it has a height of 200 pixels and the scale is at the bottom of this 200px, leaving a huge gap between my chart and the scale.

Is there a fix for this? Thanks.

Answer 1

Instead of messing around 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 options set the height:

 height: chartHeight 

Answer 2

I tried to answer, but it didn’t work for me. The way I earned from me was as follows:

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

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

Answer 3

 $.ajax({ ... success: function(jsonData){ ... var options = { height: (jsonData.length * 40) + 80, timeline: { colorByRowLabel: true } }; chart.draw(dataTable, options); } }); 

Answer 4

As far as I can tell:

• 30 pixels high for each bar
• 10px padding for each group.
• 60px for the series.

So, for 9 bar, Group = (30 * 9) + 10 = 280 pixels. Chart height = 280px + 60px

If you are grouping strings, you will need to determine if your date ranges are the same as any other in this group.

Google does this:

 Getting the Group items IN START DATE ORDER Creating an empty array of Group Display Rows For each Group Item: For each Display Row If Item fits in Row... Add it to existing Display Row Next If No existing Display row found Add New Display Row Next