Hey all,
I'm using the material bar charts (or trying to at least) as they are
described
here https://developers.google.com/chart/interactive/docs/gallery/barchart.
When I call .draw(material, options), everything works great (more
importantly, the colors work great), except that the segments don't stack
and the labels for the axes are wrong, the solution to which is to use
convertOptions.
However, when I call .draw(material,
google.charts.Bar.convertOptions(options)), the colors of the bar segments
are no longer correct, everything instead being some shade of the first
color in my colors array (green, in this instance).
What happened? I've tried assigning the colors as styles in the data table
(which never worked at all) and setting options.colors to my color array.
Many thanks.
Here's the code:
function drawGoogleBarChart(parentID, width, height, json, isHoriz) {
var bcd = JSON.parse(json);
var bars = bcd.Bars;
var colors = [];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
for (var i = 0; i < bars[0].Segments.length; ++i) {
data.addColumn('number', bars[0].Segments[i].Name);
data.addColumn({ type: 'string', role: 'style' });
colors.push(rgbToHex(bars[0].Segments[i].Color.R,
bars[0].Segments[i].Color.G, bars[0].Segments[i].Color.B));
}
for (var i = 0; i < bars.length; ++i) {
var row = [];
row.push(bars[i].Label);
for (var j = 0; j < bars[i].Segments.length; ++j) {
row.push(bars[i].Segments[j].Count);
row.push(rgbToHex(bars[i].Segments[j].Color.R,
bars[i].Segments[j].Color.G, bars[i].Segments[j].Color.B));
}
data.addRow(row);
}
var xTitle = bcd.XAxis != null ? bcd.XAxis.Title : "";
var yTitle = bcd.YAxis != null ? bcd.YAxis.Title : "";
var barDirection = isHoriz ? "horizontal" : "vertical";
var options = {
isStacked: true,
animation: {
startUp: true,
duration: 500,
easing: 'out'
},
hAxis: {
title: xTitle,
minValue: 0,
},
vAxis: {
title: yTitle
},
colors: colors,
bars: barDirection,
width: width,
height: height
};
var material = new google.charts.Bar(document.getElementById(parentID));
// material.draw(data, options);
material.draw(data, google.charts.Bar.convertOptions(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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/9e246eb2-e0db-446b-9e07-90589c6430a0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
