title: How to add a style role column to a google charts aggregated datatable
body: <p>I have a datatable created from database data that gets aggregated by google.visualization.data.group, then fed into a columnChart.</p>
  
  <p>By default, the resulting chart's bars are all the same color but i would like to make the bars different colors (by iterating through the datatable and assigning a different color to each row in the datable).For now, i'll just try to assign the colour 'gold' to each bar, for simplicity.</p>
  
  <p>This is the <a href="https://developers.google.com/chart/interactive/docs/gallery/columnchart" rel="nofollow noreferrer">documentation</a> for a columnChart and is the <a href="https://developers.google.com/chart/interactive/docs/roles#stylerole" rel="nofollow noreferrer">documentation</a> for style roles.</p>
  
  <p>I don't think my code can be far wrong:</p>
  
  <pre><code>var groupedCategoryData = new google.visualization.data.group(
          stacked01Data, // arg 1 is the array of input data
          [{ // arg 2 is the key (An array of numbers/objects being columns to group by)
              column: 0, type: 'string' 
          }], 
          [{ 'column': 1, 'aggregation': google.visualization.data.avg, 'type': 'number' }]
      );//group. col 1 = score
  
      //*****************         
      groupedCategoryData.addColumn({ type: 'string', role: 'style' });
      for (var i = 0; i &lt; groupedCategoryData.length; i++) {
          groupedCategoryData[i][2] = 'color: gold';
      }//for
      //*****************
  
      var stacked01_options = {
          width: 500,
          height: 300
      };//options
  
      var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div'));
      stacked01.draw(groupedCategoryData, stacked01_options);
  </code></pre>
  
  <p>The result is a chart whose bars are all default blue. I admit this is my first foray into javascript. any help would be appreciated.</p>