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/-/tcCA7CNuUSIJ. 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.
