how are you 2011/6/14 d d <[email protected]>
> hi > > > 2011/6/14 asgallant <[email protected]> > >> Let me see if I got this straight: you want a column chart with three >> bars, where each one is a different color, and each has it's own axis label? >> Unfortunately, this is not explicitly supported by the API. You can either >> give each bar its own color (like your example 1) or give each its own axis >> label. This is because colors are assigned by series, and axis labels are >> assigned by row, so you can either have 3 series (each a different color) or >> 3 rows (each the same color, but with different axis labels). >> >> Fortunately, depending on how you want to use your chart and the >> underlying dataTable, you can cheat around the problem: >> >> function drawChart() { >> var data = new google.visualization.dataTable(); >> // create 4 columns >> data.addColumn('string', 'Label'); >> data.addColumn('number', 'Your Data'); >> data.addColumn('number', 'Your Industry'); >> data.addColumn('number', 'All Organization'); >> >> // add 3 rows >> data.addRows(3); >> >> // populate row 0 with "Your Data" >> data.setValue(0, 0, 'Your Data'); >> data.setValue(0, 1, 22); >> // fill the rest of the row with zero's >> data.setValue(0, 2, 0); >> data.setValue(0, 3, 0); >> >> // repeat in row 1 with "Your Industry" >> data.setValue(1, 0, 'Your Industry'); >> data.setValue(1, 1, 0); >> data.setValue(1, 2, 33); >> data.setValue(1, 3, 0); >> >> // repeat in row 2 with "All Organization" >> data.setValue(2, 0, 'All Organization'); >> data.setValue(2, 1, 0); >> data.setValue(2, 2, 0); >> data.setValue(2, 3, 55); >> >> var chart = new >> google.visualization.ColumnChart(document.getElementById('chart')); >> chart.draw(data, { >> width: 500, >> height: 350, >> titlePosition: 'none', >> legend: 'bottom', >> colors:['c7dcf2','0082c8','377aba'], >> vAxis: { >> title: 'Percentage (%)', >> titleTextStyle: {color: >> 'black',fontName:'Arial',fontSize:18}, >> maxValue: 100, >> minValue: 0 >> }, >> // make it a stacked chart, so the empty bars don't take up >> space >> isStacked: true >> }); >> } >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Visualization API" group. >> To view this discussion on the web visit >> https://groups.google.com/d/msg/google-visualization-api/-/Tr1sbWZ7a8EJ. >> >> 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. >> > > -- 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.
