Mkalafut
Mkalafut

Reputation: 741

How to set Google Chart height based on number of rows?

I have a Google stacked bar chart that pulls data from a database and draws charts based on said data. I was able to search around and find a way to dynamically set the height based on the number of rows - but for one of my search filters, the charts look way off.

The code is below and works for 4 out of 5 of my filters, but in the 5th filter the number of rows becomes much larger (around 40-50).

Code:

            var paddingHeight = 40;
            var rowHeight = data.getNumberOfRows() * 50;
            var chartHeight = rowHeight + paddingHeight;

            var options = {
                titlePosition: 'none',
                width: 1400,
                height: chartHeight,
                legend: { position: 'top', maxLines: 3 },
                bar: { groupWidth: '50%' },
                isStacked: true,
                hAxis: {
                    title: 'Business Hours (excluding weekends & holidays)'
                },
                colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
                annotations: {
                    alwaysOutside: true,
                    textStyle: {
                        color: '#000000'
                    }
                }
            }

Produces the following results. This first image is what 4 of my 5 filters looks like.

Image 1

The second image is the one in question that shows I'm clearly doing something wrong.

Image 2

What is the cause of this and how can I resolve it?

Edit: I suspect my issue is one of the following: Either my data rows are not being counted correctly as I refresh the page with the latest search parameters or I have a problem with how my divs are set up and interacting with each other. I've tried adjusting the math behind the chartHeight and removing the padding and it seems to have the same effect either way. Am I on the right track or is there something else I'm missing?

Upvotes: 4

Views: 4269

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

need to set options for both height and chartArea.height

here, recommend using rowHeight for chartArea.height

        var paddingHeight = 40;
        var rowHeight = data.getNumberOfRows() * 50;
        var chartHeight = rowHeight + paddingHeight;

        var options = {
            titlePosition: 'none',
            width: 1400,

            height: chartHeight,
            chartArea: {
              height: rowHeight,
            },

            legend: { position: 'top', maxLines: 3 },
            bar: { groupWidth: '50%' },
            isStacked: true,
            hAxis: {
                title: 'Business Hours (excluding weekends & holidays)'
            },
            colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
            annotations: {
                alwaysOutside: true,
                textStyle: {
                    color: '#000000'
                }
            }
        }

you'll want to leave some room for the legend, y-axis, etc...

chartArea has the following properties

top
left
height
width

you'll want to set top to 20 or something if legend is on top

Upvotes: 7

Related Questions