Try the following table: Sov | nike | adidas | puma | NB | reebok X | 30 | 20 | 15 | 25 | 10
On Thu, Dec 9, 2010 at 6:55 PM, Scott Silvi <[email protected]> wrote: > 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]<google-visualization-api%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > > -- 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.
