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.
