The two different heights represent different things. The "height" option
controls the height of the entire chart - title, legend, labels, etc
included - you can think of this as the outer height of the chart. Put
another way, you can leave this option out and set the height of the
container div instead, which gives an equivalent result (ignoring possible
adjustments from margins/padding on div elements). Why the height option
does not allow percents is a mystery to me.
The "chartArea.height" option pertains to the interior height of the chart
in the region where data is plotted. Setting this to a % value sets the
height of the chartArea to a percent of the outer height of the chart. You
can see the difference between the two regions by setting the
backgroundColor and chartArea.backgroundColor options:
backgroundColor: 'red',
chartArea: {
backgroundColor: 'blue'
}
Be aware that even if you set the container div's dimensions as percents,
the chart will not be responsive. You will have to set up an event
listener for window resizing that redraws the chart on resize (search these
forums for example code to do this).
On Friday, March 14, 2014 10:35:38 AM UTC-4, Captain Gordon Freeman wrote:
>
> Can someone please explain why the bar chart has two different height
> variables? Additionally, why is it that the chartArea.height can be
> declared using a set pixel number or percentage but the plain height can
> only be a set pixel number? I am attempting to make a responsive bar chart
> but it seems like the chart will never be the correct size without a set
> pixel number. Why is this?
>
> Here's the code I'm working with so you can see what I'm talking about a
> bit better:
>
> var data = google.visualization.arrayToDataTable([
> ["Section", "Number1", { role: 'style', type: 'string' },
> "Number2", { role: 'style', type: 'string' }],
> ["Section 1", 3, '#391cb0', 5, '#c70063'],
> ["Section 2", 30.00, '#593cf0', 50.00, '#e72083'],
> ["Section 3", 23.00, '#593cf0', 25.00, '#e72083'],
> ["Section 4", 34.00, '#593cf0', 32.00, '#e72083'],
> ["Section 5", 3, '#391cb0', 5, '#c70063'],
> ["Section 1", 3, '#391cb0', 5, '#c70063'],
> ["Section 2", 30.00, '#593cf0', 50.00, '#e72083'],
> ["Section 3", 23.00, '#593cf0', 25.00, '#e72083'],
> ["Section 4", 34.00, '#593cf0', 32.00, '#e72083'],
> ["Section 5", 3, '#391cb0', 5, '#c70063'],
> ["Section 1", 3, '#391cb0', 5, '#c70063'],
> ["Section 2", 30.00, '#593cf0', 50.00, '#e72083'],
> ["Section 3", 23.00, '#593cf0', 25.00, '#e72083'],
> ["Section 4", 34.00, '#593cf0', 32.00, '#e72083'],
> ["Section 5", 3, '#391cb0', 5, '#c70063'],
> ["Section 1", 3, '#391cb0', 5, '#c70063'],
> ["Section 2", 30.00, '#593cf0', 50.00, '#e72083'],
> ["Section 3", 23.00, '#593cf0', 25.00, '#e72083'],
> ["Section 4", 34.00, '#593cf0', 32.00, '#e72083'],
> ["Section 5", 3, '#391cb0', 5, '#c70063'],
> ["Section 1", 3, '#391cb0', 5, '#c70063'],
> ["Section 2", 30.00, '#593cf0', 50.00, '#e72083'],
> ["Section 3", 23.00, '#593cf0', 25.00, '#e72083'],
> ["Section 4", 34.00, '#593cf0', 32.00, '#e72083'],
> ["Section 5", 3, '#391cb0', 5, '#c70063'],
> ]);
>
> var view = new google.visualization.DataView(data);
> view.setColumns([0, 1, 2, {
> calc: "stringify",
> sourceColumn: 1,
> type: "string",
> role: "annotation"
> }, 3, 4, {
> calc: "stringify",
> sourceColumn: 3,
> type: "string",
> role: "annotation"
> }]);
>
> var options = {
> title: "TEST CHART",
> legend: { position: "none" },
> hAxis: {
> ticks: "none",
> textPosition: "none",
> },
> enableInteractivity: false,
> chartArea: {
> height: '100%',
> },
> height: '100%', //This is wrong because this height cannot be a %
> };
>
> var chart = new
> google.visualization.BarChart(document.getElementById('homescreenDetailChart'));
> chart.draw(view, options);
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
