Create Interactive Charts with ui-grid and AngularJS

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"/>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css"/>
    
    <script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    <script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
    
    <script src="tutorial.module.js"></script>
    <script src="tutorial.ctrl.js"></script>
  </head>

  <body ng-app="tutorial" ng-controller="tutorialCtrl as vm">
    <div ui-grid="vm.gridOptions" 
         ui-grid-edit
         class="ui-grid-custom-class">
    </div>
    
    <canvas class="chart chart-line chart-custom-class"
            chart-labels="vm.chartLabels"
            chart-data="vm.chartData"
            chart-legend="true"
            chart-series="vm.chartSeries">
    </canvas>
    
    <canvas class="chart chart-bar chart-custom-class"
        chart-labels="vm.chartLabels"
        chart-data="vm.chartData"
        chart-lengend="true"
        chart-series="vm.chartSeries">
    </canvas>
  </body>

</html>

/* Styles go here */

.ui-grid-custom-class {
  height: 170px;
}

.chart-custom-class {
  width: 100%;
  height: 250px;
}

(function mainModuleIIFE() {
  'use strict';

  angular.module('tutorial', [
    'ui.grid',
    'chart.js',
    'ui.grid.edit'
  ]);
})();

(function tutorialCtrlIIFE() {
  'use strict';

  angular
    .module('tutorial')
    .controller('tutorialCtrl', tutorialCtrlFunc);
  
  function tutorialCtrlFunc($log, uiGridConstants) {
    var vm = this;
    
    // define the grid columns
    vm.columnDefs = [{
      field: 'Jan',
      name: 'January'
    }, {
      field: 'Feb',
      name: 'February'
    }, {
      field: 'Mar',
      name: 'March'
    }, {
      field: 'Apr',
      name: 'April'
    }];
    
    // fill the data for each row just like in the example table
    vm.gridData = [{
      Jan: 5,
      Feb: 20,
      Mar: 50,
      Apr: 15
    }, {
      Jan: 15,
      Feb: 30,
      Mar: 20,
      Apr: 5
    }, {
      Jan: 1,
      Feb: 5,
      Mar: 50
    }, {
      Jan: 90,
      Feb: 30,
      Apr: 90
    }];
    
    vm.gridOptions = {
      data: 'vm.gridData',
      columnDefs: vm.columnDefs,
      onRegisterApi: function (gridApi) {
        gridApi.grid.registerDataChangeCallback(
          function() {
            convertGridDataIntoChart(vm.columnDefs, vm.gridData)
          },
          [uiGridConstants.dataChange.ALL]
        );
      }
    };
    
    function convertGridDataIntoChart(columns, rows) {
      var sums = [];
      var labels = [];
      var series = ['My reactive chart'];
      
      // for each column
      for (var i = 0, colsCnt = columns.length; i < colsCnt; i++) {
        var column = columns[i];
        // calculate sum on column
        sums[i] = getColumnSum(column, rows);
        // save the column name as chart label
        labels.push(column.name);
      }
      
      var chart = {
        data: [sums],
        labels: labels,
        series: series
      }
      
      applyChart(chart);
    }
    
    function getColumnSum(column, rows) {
      var sum = 0;
      
      for (var i = 0, rowsCnt = rows.length; i < rowsCnt; i++) {
          var row = rows[i];
          var fieldName = column.field;
          
          if (row.hasOwnProperty(fieldName)) {
            sum += row[fieldName];
          }
      }
      
      return sum; 
    }
    
    function applyChart(chart) {
      vm.chartData = chart.data;
      vm.chartLabels = chart.labels;
      vm.chartSeries = chart.series;
    }
    
    return vm;
  }
})();