Customizing Bar Chart using ng-google-chart

Question

I am using Angular google chart (ng-google-chart) for drawing the graph. I drew the Bar graph using the sample provided in http://bouil.github.io/angular-google-chart/#/generic/ColumnChart.

I am able the draw the Bar Chart. But I would like to dynamically add the colors to the Bar based on the values. I am not able to achieve this using https://github.com/bouil/angular-google-chart.

Below is my code sample :

$scope.arrVal2 = [22,31,90,50,80,25,15];
$scope.chartObj1 = [];
$scope.chartObj2 = [];

$scope.createChartObj = function()
{

    for(var m=0; m < $scope.arrVal2.length; m++)
    {
        console.log('val of m ----- '+m);
        $scope.chartObj2.push({c:[{v:m+1},{v:$scope.arrVal2[m]}
            ]})
    }

}

$scope.chartObject2.data = {"cols": [
  {id: "day", label: "Day", type: "string"},
  {id: "events", label: "Event", type: "number"}
  ], "rows": $scope.chartObj2
};


$scope.chartObject2.type = 'ColumnChart';
$scope.chartObject2.options = {
  'title': 'PREVIOUS 7 WEEKS',
  'titleTextStyle': {color: '#FFFFFF', fontSize: 13,bold: false},
  'backgroundColor': '#555555',
  legend: 'none',
  series: {
    0: { color: '#e2431e' },
    1: { color: '#e7711b' },
    2: { color: '#f1ca3a' },
    3: { color: '#6f9654' },
    4: { color: '#1c91c0' },
    5: { color: '#43459d' },
    6: { color: '#43459d' }
  },
  colors: ['#6EAF19', '#E2B400', '#DF0000','#DF0000','#DF0000','#DF0000','#DF0000'],
  is3D:true,
  animation:{
      duration: 3000,
      easing: 'out',
    },
    hAxis: { 
            gridlines: {color: 'transparent'},
            textPosition: 'none'
    },
    vAxis:{
        minValue:0,
        maxValue:100,
        baselineColor: 'none',
        gridlineColor: 'none',
        gridlines: {color: 'transparent'},
        textPosition: 'none'
 }
}

Have tried adding using Series, tried adding colors: ['black','blue','white','blue','blue','blue','blue'] in options :( Only the first color in the series is getting applied.

Can any one please help me in this.

Thanks IN ADVANCE:)

asgallant asgallant · Accepted Answer · 2014-07-16T23:04:16

Normally, the charts color data by data series (that is, DataTable column); if you want to color individual bars, you need to use a "style" role column to set the colors:

$scope.chartObject2.data = {
    "cols": [
        {id: "day", label: "Day", type: "string"},
        {id: "events", label: "Event", type: "number"},
        {role: "style", type: "string"}
    ],
    "rows": $scope.chartObj2
};

when building your rows, add in the color:

$scope.chartObj2.push({c:[{v:m+1},{v:$scope.arrVal2[m]},{v:'#e2431e'}]});

Customizing Bar Chart using ng-google-chart

1 Answers