Excellent Roni!! Thank you very much.. Now atleast i got some clue/hint on how to handle this.. I got the logic of changing the colors depending on the color you are assigning to the main chart,..
Actually what i want is to change the color depending on the values which are set for the bars.. Any hint Pl? On Nov 21, 11:59 pm, Roni Biran <[email protected]> wrote: > i wrote you a nice hack that will do the trick. > > I think that it's self explanatory, but if you'll have any questions feel > free to ask: > > here is the JavaScript for it: > > function drawVisualization() { > var data = new google.visualization.DataTable(); > data.addColumn('string', 'Year'); > data.addColumn('number', 'Sales'); > data.addColumn('number', 'Expenses'); > data.addRows(4); > data.setValue(0, 0, '2004'); > data.setValue(0, 1, 1000); > data.setValue(0, 2, 400); > data.setValue(1, 0, '2005'); > data.setValue(1, 1, 1170); > data.setValue(1, 2, 460); > data.setValue(2, 0, '2006'); > data.setValue(2, 1, 660); > data.setValue(2, 2, 1120); > data.setValue(3, 0, '2007'); > data.setValue(3, 1, 1030); > data.setValue(3, 2, 540); > > var chart = new google.visualization.ColumnChart(document.getElementById( > 'visualization')); > chart.draw(data, { width: 640, height: 480, title: 'Company Performance', > vAxis: { title: 'Year', titleTextStyle: { color: 'red'} > }, > > legend: 'none', colors: ['#cc00cc', '#ccffcc'] > }); > > changeColors(); > > } > > function changeColors() { > var chartArea = document.getElementsByTagName('iframe')[0].contentDocument > .getElementById('chartArea'); > var nodes = chartArea.getElementsByTagName('rect'); > > // finding all <rect> elements with #cc00cc fill color and replacing them > with 'blue','red','green','blue' > for (var i = 0; i < nodes.length; i++) { > var node = nodes[i]; > if (node.getAttribute('fill') && node.getAttribute('fill') == '#cc00cc' > ) { > switch (i % 4) { > case 0: > node.setAttribute('fill', 'blue'); > break; > case 1: > node.setAttribute('fill', 'red'); > break; > case 2: > node.setAttribute('fill', 'green'); > break; > case 3: > node.setAttribute('fill', 'red'); > break; > } > } > } > > // finding all <rect> elements with #ccffcc fill color and replacing them > with 'blue','red','green','blue' > for (var i = 0; i < nodes.length; i++) { > var node = nodes[i]; > if (node.getAttribute('fill') && node.getAttribute('fill') == '#ccffcc' > ) { > switch (i % 4) { > case 0: > node.setAttribute('fill', 'blue'); > break; > case 1: > node.setAttribute('fill', 'red'); > break; > case 2: > node.setAttribute('fill', 'green'); > break; > case 3: > node.setAttribute('fill', 'red'); > break; > } > } > } > > } > > good luck :-) > > On Mon, Nov 21, 2011 at 8:49 PM, asgallant <[email protected]>wrote: > > > > > > > > > There is a way to hack around the problem which has been discussed > > extensively on this forum (search for 'bar colors'), ex: > >https://groups.google.com/d/msg/google-visualization-api/BPNbQ3GKCdg/... > > > -- > > 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/-/AikF9KPEcS4J. > > > 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.
