<div class="radioButton">
     <form ng-submit="submit()" name="myForm" >
       <label>
          <input type="radio" ng-model="radioChartType" value="Absolute" id="0" ng-click="buttonClick($event)">
          Show as Absolute Numbers
        </label>
        <label>
          <input type="radio" ng-model="radioChartType" value="Percentage" id="1" ng-click="buttonClick($event)">
          Show as Percentage
        </label><br/>
     </form>
 </div>
<div class="row justify-content-around" id="bar-chart">
       <div class="col-md-12" ng-repeat="module in ocw.modules">
         <div class="panel panel-default">
           <div class="panel-heading">Rule: {{ module.ruleName}} <br>
              <p>Total Assets: 1400 &emsp;  Compliant Assets: 800  &emsp; Non-Compliant Assets: 600</p>
            </div>
           <div class="panel-body" >
            <div class="col-md-6">
             <canvas id="myChart" class="chart chart-line"
                      chart-data="module.dataC"
                      chart-labels="module.labels" chart-series="module.seriesC"
                      chart-options="options" chart-colors="colours"
                      chart-click="onClick" chart-hover="onHover"
                      chart-dataset-override="datasetOverride">
             </canvas>
           </div>
          <div class="col-md-6">
             <canvas id="bar{{$index}}" class="chart chart-line"
                      chart-data="module.dataNC"
                      chart-labels="module.labels" chart-series="module.seriesNC"
                      chart-options="options" chart-colors="colours"
                      chart-dataset-override="datasetOverride">
             </canvas>
          </div>
           </div>
         </div>
       </div>
</div>

app1.controller("ChartController", ['$scope', function($scope) {

  $scope.title = "DMV Ledger";
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Compliant'];


  $scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];

    $scope.DataSetOverride = [{ lineTension: 0
                            //    yAxisID: 'y-axis-1'
                                }]; //y-axis-1 is the ID defined in scales under options.

    $scope.options = {
          legend: { display: true },
          responsive: true,  // set to false to remove responsiveness. Default responsive value is true.
          scales: {
              yAxes: [
                  {
                    id: 'y-axis-1',
                    display: true,
                    scaleLabel: {
                        display: true,
                //        labelString: '# ',
                        fontStyle: 'bold'
                    },
                    ticks: {
                        fontStyle: 'bold'
                    }
                  }],
              xAxes: [
                  {
                    scaleLabel: {
                        display: true,
                        labelString: 'Month',
                        type: 'linear',
                        position: 'left',
                        fontColor: '#72C02C',
                        fontStyle: 'bold'
                    },
                    ticks: {
                        fontStyle: 'bold'
                    }
                  }]
          }
      };


    $scope.radioChartType = 'Absolute';

    $scope.radioChart = {
       type: 'Absolute'
     };




//variables for Json data and ng-repeat example

  var json = {
    "modules": [{
        "ruleName": "Valid-Registration",
        "seriesC": ["Compliant"],
        "seriesNC": ["Non-Compliant"],
        "dataC": [["900", "699", "780", "491", "676", "275", "660", "867"]],
        "dataPC": [["90", "99", "80", "91", "76", "75", "60", "67"]],
        "dataNC": [["10", "19", "81", "41", "26", "35", "10", "27"]],
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
      },

      {
        "ruleName": "Valid-Insurance",
        "seriesC": ["Compliant"],
        "seriesNC": ["Non-Compliant"],
        "dataC": [["10", "19", "20", "11", "26", "35", "40", "57"]],
        "dataPC": [["90", "99", "80", "91", "76", "75", "60", "67"]],
        "dataNC": [["0", "10", "12", "1", "18", "20", "10", "26"]],
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
      }, {
        "ruleName": "Valid-License",
        "seriesC": ["Compliant"],
        "seriesNC": ["Non-Compliant"],
        "dataC": [["90", "99", "80", "91", "76", "75", "60", "67"]],
        "dataPC": [["90", "99", "80", "91", "76", "75", "60", "67"]],
        "dataNC": [["23", "29", "12", "10", "16", "15", "30", "27"]],
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
      }
    ]};
  $scope.ocw = json;

 $scope.onClick = function (points, evt) {
    console.log(points, evt);
    };
}]);

$scope.ocw.modules.dataC = $scope.ocw.modules.dataC.map(function(data) {
   return ocw.modules.dataC.map(function(y) {
     return  (y / $scope.max * 100).toFixed(0) ;
    });
  });