How to change bar color and legends in ColumnChart

Question

I am using Google Chart to display Column Chart for 2 things :

1) Success

2) Failed

For Success : Color = Green

For Failed : Color = Red

But problem is ColumnChart always display bar in blue color and also i want legends as :

Success
Failed

But it displays Legends as "values" as shown below :

Code :

 angular.module("google-chart-sample", ["googlechart"])
.controller("GenericChartCtrl", function ($scope) {
    var data = { "data": { "graphResponse": { "cols": [{ "label": "Types", "type": "string" }, { "label": "values", "type": "number" }], "rows": [{ "c": [{ "v": "success" }, { "v": 11 }] }, { "c": [{ "v": "failed" }, { "v": 0 }] }] } } };
    $scope.myChartObject = {};
    $scope.myChartObject.type = "ColumnChart";
    $scope.myChartObject.data = data.data.graphResponse;
    $scope.myChartObject.options = {
        slices: {
            0: { color: '#50ce68' },
            1: { color: '#ff7b7b' },
        },
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<ul ng-app="google-chart-sample" ng-controller="GenericChartCtrl">
    <div google-chart chart="myChartObject" style="height:600px; width:100%;"></div>
    </ul>

I want Success bar as Green and Failed as Red and i also want 2 Legends(Success -Green and Failed-Red)

I will appreciate any help :)

Answer 1

To achieve expected result, use below option of using role and give color green for success and red for failed

{"role": "style", "type": "string"}

  var data = { "data": 
                { "graphResponse": 
                 { "cols": [{ "label": "Types", "type": "string" }, 
                            { "label": "values", "type": "number" },
                            {"role": "style", "type": "string"}], 
                  "rows": [{ "c": [{ "v": "success" }, { "v": 11 },{"v":"green"}] }, 
                           { "c": [{ "v": "failed" }, { "v": 0 },{"v":"red"}] }] 
                 } } };

Issue with legend is that it takes the label:"values" as legend by default and one way to customize is to make legend:none and customize with below code

HTML:

<div class="legend">
    <div ng-repeat="item in myChartObject.data.rows">
    <div class="{{item.c[2].v}}"></div>{{item.c[0].v}}
    </div>
  </div>

CSS:

 .legend{
  position:absolute;
  right:100px;
  top:30px;
}

.red{
  background:red;
  width:30px;
  height:10px;
  display:inline-block;
}

.green{
  background:green;
  width:30px;
  height:10px;
  display:inline-block;
}

JS: In JS add legend :none to chart options

$scope.myChartObject.options = {
        slices: {
            0: { color: '#50ce68' },
            1: { color: '#ff7b7b' },
        },
       legend:'none'
    };

updated code sample for reference - https://codepen.io/nagasai/pen/qYdpaE

Answer 2

You can achieve the data plot selecting functionality by mouse over in legend using setSelection method of google chart. To use this method, at first get chart instance on agc-on-ready directive. Then on mouse over handler of legend, call setSelection method of chart instance.

 $scope.highLight = function(arg){
     if(arg == "red"){
    ChartInstance.setSelection([{row:1,column:1}])
     }
     if(arg=="green"){
       ChartInstance.setSelection([{row:0,column:1}])
     }
   };

Code is given in this link.