Re: How to set different color for each column of a column chart

237 views

Skip to first unread message

asgallant

unread,

Nov 14, 2012, 6:14:13 PM11/14/12

to google-visua...@googlegroups.com

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/

Reply all

Reply to author

Forward

0 new messages