Columns are always colored by data series, so you have to split your data into different series in order to get different colors for every column. Here's example code that changes the bar color according to the value of the bar, which you can adapt to whatever your particular needs are: http://jsfiddle.net/asgallant/QHJA6/
On Wednesday, November 14, 2012 4:54:19 PM UTC-5, ghanawiki wrote: > > Hi, > > Please can anyone help me on this one since I am new to Google > Visualization. > > I have a control dashboard which generates a column chart. > > What I want is to set different colours for each column. > > Thanks > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="content-type" content="text/html; charset=utf-8"/> > <title> > Google Visualization API Sample > </title> > <script type="text/javascript" src="http://www.google.com/jsapi > "></script> > <script type="text/javascript"> > google.load('visualization', '1.1', {packages: ['controls']}); > </script> > <script type="text/javascript"> > function drawVisualization() { > // Prepare the data > var data = google.visualization.arrayToDataTable([ > ['Region', 'Name', 'Total'], > ['Volta' , 'ABC' , 1], > ['Ashanti' , 'ABC' , 34], > ['Eastern' , 'ABC' , 19], > ['Central' , 'ABC' , 8], > ['Western' , 'ABC' , 10], > ['Greater Accra' , 'ABC' , 9], > ['Brong Ahafo' , 'ABC' , 16], > ['Northern' , 'ABC' , 4], > ['Upper East' , 'ABC' , 4], > ['Upper West' , 'ABC' , 3], > ['Greater Accra' , 'DEF' , 18], > ['Upper West' , 'DEF' , 6], > ['Ashanti' , 'DEF' , 3], > ['Eastern' , 'DEF' , 7], > ['Central' , 'DEF' , 11], > ['Western' , 'DEF' , 11], > ['Volta' , 'DEF' , 21], > ['Brong Ahafo' , 'DEF' , 8], > ['Northern' , 'DEF' , 20], > ['Upper East' , 'DEF' , 8], > ['Upper East' , 'OTHERS' , 1], > ['Northern' , 'OTHERS' , 1], > ['Brong Ahafo' , 'OTHERS' , 0], > ['Volta' , 'OTHERS' , 0], > ['Western' , 'OTHERS' , 1], > ['Central' , 'OTHERS' , 0], > ['Eastern' , 'OTHERS' , 1], > ['Ashanti' , 'OTHERS' , 2], > ['Greater Accra' , 'OTHERS' , 0], > ['Upper West' , 'OTHERS' , 1] > > > ]); > > > var regionPicker = new google.visualization.ControlWrapper({ > 'controlType': 'CategoryFilter', > 'containerId': 'control1', > 'options': { > 'filterColumnLabel': 'Region', > 'ui': { > 'labelStacking': 'vertical', > 'allowTyping': false, > 'allowMultiple': false, > 'caption' : 'Choose Region' > } > } > }); > > > // Define a bar chart to show 'Population' data > var barChart = new google.visualization.ChartWrapper({ > 'chartType': 'ColumnChart', > 'containerId': 'chart1', > 'options': { > 'width': 400, > 'height': 300, > 'chartArea': {top: 0, right: 0, bottom: 0} > }, > // Configure the barchart to use columns 2 (City) and 3 > (Population) > 'view': {'columns': [1, 2]} > }); > > // Create the dashboard. > new > google.visualization.Dashboard(document.getElementById('dashboard')). > bind(regionPicker, barChart). > // Draw the dashboard > draw(data); > } > > > google.setOnLoadCallback(drawVisualization); > </script> > </head> > <body style="font-family: Arial;border: 0 none;"> > <div id="dashboard"> > <table> > <tr style='vertical-align: top'> > <td style='width: 300px; font-size: 0.9em;'> > <div id="control1"></div> > <div id="control2"></div> > <div id="control3"></div> > </td> > <td style='width: 600px'> > <div style="float: left;" id="chart1"></div> > <div style="float: left;" id="chart2"></div> > <div style="float: left;" id="chart3"></div> > </td> > </tr> > </table> > </div> > </body> > </html> > > http://jsfiddle.net/ghanawiki/8SPWL/ > -- 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/-/erhfXh6td3gJ. 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.
