how to combine google charts with ngTable

Question

I am trying to combine googlecharts with ngTable.

This is my chart: http://plnkr.co/edit/RB2G4zjwaTKrrrRVdyFz?p=preview. The data for the chart, I want to get them from this table: http://bazalt-cms.com/ng-table/example/21

To explain it better, in plnkr I've manually entered the data of the chart based to the example of ngTable (grouping by role: admin 4, user 12, moderator 7).

• (a) group.data.length -> provides me each 4, 12, 7
• (b) group.value -> provides me each admin, user, moderator

The big question is: how can I pass this data to the chart? how can I explain chart.draw($scope.data, options); it should take my data from (a) and (b) to create the chart.

Answer 1

I think you should pass the data through a service.. here's my version of what you are doing: http://plnkr.co/edit/56TAdPTMt5nwnMwhErQM?p=preview

app.controller('MyCtrl', function($scope,data) {
      var columns = [{ 'string' :'Topping' }, {'number' : 'Slices'}],
          rows = [[ 'User', 12 ], ['Administrator', 4], ['Moderator', 7]];

      $scope.data = data.get(columns,rows);
    });

    app.service('data',function() {
      return {
        get : function(_columns,_rows) {
          var _data = new google.visualization.DataTable();
          for(var i=0;i < _columns.length;i++){
        for(k in _columns[i]) {
            _data.addColumn(k,_columns[i][k]);
        }
          }
          _data.addRows(_rows);
          return _data;
        }
      }
    });

    app.directive('chart', function() {
        return {
          restrict: 'A',
          link: function($scope, $elm, $attrs) {
            var chart,data,
              // Set chart options
              options = {'title':'ROLE',
                           'width':400,
                           'height':300};
            $scope.$watch(function() {
              return JSON.stringify($scope[$attrs.chart]);
            },
            function(_d) {
              if(typeof _d !== 'undefined') {
                data = $scope[$attrs.chart]
                // Instantiate and draw our chart, passing in some options.
                chart = new google.visualization.PieChart($elm[0]);
                chart.draw(data, options);
              }
            });
          }
      }
    });