title: Google Bar-Chart( Having Filter) With Different Colors in Bars for each column
body: <p>Below is my javascript for google-chart</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      google.load('visualization', '1.1', {packages: ['controls']});
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function drawVisualization() {
          // Prepare the data
          var data = google.visualization.arrayToDataTable([
                   ['Country', 'Position', 'Prosthethis type', 'Units'],
                   ['Europe', 'Aortic',  'Mechanical',  5007],
                   ['Europe', 'Aortic',  'Biological',  15434],
                   ['Europe', 'Mitral',  'Mechanical',  1974],
                   ['Europe', 'Mitral',  'Biological',  3550],
                   ['France', 'Aortic',  'Mechanical',  803],
                   ['France', 'Aortic',  'Biological',  2277],
                   ['France', 'Mitral',  'Mechanical',  229],
                   ['France', 'Mitral',  'Biological',  436]
                 ]);
  
          var countryPicker = new google.visualization.ControlWrapper({
                                  'controlType': 'CategoryFilter',
                                  'containerId': 'control4',
                                  'options': {
                                      'filterColumnLabel': 'Country',
                                      'ui': {
                                          'labelStacking': 'vertical',
                                          'allowTyping': false,
                                          'allowMultiple': false
                                      }
                                  },
                                  'state': {'selectedValues': ['Europe']}
                              });
  
          var regionPicker = new google.visualization.ControlWrapper({
                                  'controlType': 'CategoryFilter',
                                  'containerId': 'control5',
                                  'options': {
                                      'filterColumnLabel': 'Position',
                                      'ui': {
                                          'labelStacking': 'vertical',
                                          'allowTyping': false,
                                          'allowMultiple': false
                                      }
                                  }
                              });
  
          var cityPicker = new google.visualization.ControlWrapper({
                                  'controlType': 'CategoryFilter',
                                  'containerId': 'control6',
                                  'options': {
                                      'filterColumnLabel': 'Prosthethis type',
                                      'ui': {
                                          'labelStacking': 'vertical',
                                          'allowTyping': false,
                                          'allowMultiple': false
                                      },
                                  }
                              });
  
          var barChart = new google.visualization.ChartWrapper({
                                  'chartType': 'BarChart',
                                  'containerId': 'chart3',
                                  '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': [2, 3]}
  
  
                              });
  
                              new google.visualization.Dashboard(document.getElementById('visualization2')).
                                  // Configure the controls so that:
                              // - the 'Country' selection drives the 'Region' one,
                              // - the 'Region' selection drives the 'City' one,
                              // - and finally the 'City' output drives the chart
                              bind(countryPicker, regionPicker).
                                  bind(regionPicker, cityPicker).
                                  bind(cityPicker, barChart).
                                  // Draw the dashboard
                              draw(data);
      }
  
      google.setOnLoadCallback(drawVisualization);
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my Html page....</p>
  
  <pre><code> &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Untitled Document&lt;/title&gt;
          &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              google.load('visualization', '1', {packages: ['corechart']});
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;               
          &lt;table width="100%" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333"&gt;
              &lt;tr&gt;
                  &lt;td bgcolor="#333333" class="heading-text"&gt;TEST&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td bgcolor="#FFFFFF" class="text" align="center" id="visualization2"&gt;&lt;br/&gt;&lt;br/&gt;
                      &lt;table&gt;
                          &lt;tr style='vertical-align: top'&gt;
                              &lt;td style='width: 300px; font-size: 0.9em;'&gt;
                                  &lt;div id="control4"&gt;&lt;/div&gt;
                                  &lt;div id="control5"&gt;&lt;/div&gt;
                                  &lt;div id="control6"&gt;&lt;/div&gt;
                              &lt;/td&gt;
                              &lt;td style='width: 600px'&gt;
                                  &lt;div style="float: left;" id="chart3"&gt;&lt;/div&gt;
                                  &lt;div style="float: left;" id="chart4"&gt;&lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;*
  </code></pre>
  
  <p>I want only one thing To do in this graph: I want 'Biological' column in RED and 'Mechanical' in Blue color.</p>
  
  <p>Currently all columns are in Blue.</p>
  
  <p>I found many sites for different color column.....but they don't work for me.</p>
  
  <p>Please help me.</p>
  
  <p>Thanks....</p>