Trying to create independent colors for the columns in my graph. I
know I can pass in a color parameter, in fact the code below I already
am.
If I set up my datatable as follows, I only get 1 color. Currently the
API only gives me multiple colors if I send the data through as a
column group.
source | size
x 20
y 40
z 60
I would have 3 columns, all would be the same color.
Here is a column group example:
source | size | price
x 20 100
y 40 80
z 60 20
This would give me three column GROUPS, and they would be labeled x,
y, and z. Each column group would have 2 bars represented on the
graph, for a total of 6 bars. All 3 of the size bars (1 in each of x y
and z groups) would be one color. All 3 of price bars would be another
color.
What I want is to have 5 columns that are 5 colors. Currently, I have
to do this with a group that looks like this:
Sov | nike | adidas | puma | NB | reebok
nike 30
adidas 20
puma 15
NB 25
reebok 10
The result of this is a graph that has 5 bars displayed in 5 different
colors. Sweet! Oh, yeah. Except for the fact that each of the bars are
now VERY skinny, because the graph is set up to accept 25 columns
(5x5, which is the 5 column groups multiplied by the 5 columns per
group).
Is there a better way?
Code below (dataTable obviously accepts variables that aren't shown.
Results are similar to the 5x5 chart above)
function drawSoV(sov1, sov2, sov3, sov4, sov5) {
// Create our data table.
var gdata = new google.visualization.DataTable();
gdata.addColumn('string','SoV');
gdata.addColumn('number', kws[0]);
gdata.addColumn('number', kws[1]);
gdata.addColumn('number', kws[2]);
gdata.addColumn('number', kws[3]);
gdata.addColumn('number', kws[4]);
gdata.addRows(5);
//Set Column 1 for tooltips & hAxis
gdata.setCell(0,0,kws[0]);
gdata.setCell(1,0,kws[1]);
gdata.setCell(2,0,kws[2]);
gdata.setCell(3,0,kws[3]);
gdata.setCell(4,0,kws[4]);
gdata.setCell(0,1,sov1); // col1 value
gdata.setCell(1,2,sov2); // col2 value
gdata.setCell(2,3,sov3); // col3 value
gdata.setCell(3,4,sov4); // col4 value
gdata.setCell(4,5,sov5); // col5 value
SoVChart = new
google.visualization.ColumnChart(document.getElementById('sov'));
SoVChart.draw(gdata, {
chartArea: {width:300,height:200,top:20,left:30},
hAxis: {textStyle:{fontName: 'Trebuchet MS',
fontSize:'13'}},
width: 360,
height: 350,
colors:
['#FFCC00','#1E88C8','#33CC00','#990066','#A61E1E'],
legend: 'none'
});
google.visualization.events.addListener(SoVChart,
'onmouseover',
barMouseOver);
google.visualization.events.addListener(SoVChart,
'onmouseout',
barMouseOut);
google.visualization.events.addListener(SoVChart,
'select',
selectHandler);
}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
