Thanks for the explanation asgallant. I wonder why they don't allow
percentages for the overall height.
On Friday, March 14, 2014 12:22:25 PM UTC-4, asgallant wrote:
>
> 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.
