UI Grid with Sparkline Column

var app = angular.module('app', ['ui.grid', 'nvd3']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
  };

  $scope.gridOptions.columnDefs = [
    { field:'name' },
    { field:'gender' },
    { field: 'spark', cellTemplate: 'sparkline-cell.html', width: 100 }
  ];

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      data.forEach(function (d) {
        d.spark = {
          options: {
            chart: {
              type: 'sparklinePlus',
              height: 20,
              width: 100,
              x: function(xd, i) { return i; }
            }
          },
          data: []
        };
        
        // Generate random X values
        for (i=0; i<10; i++) {
          d.spark.data.push({ x: i, y: Math.floor(Math.random()*(100-1+1)+1) });
        }
      });
      
      $scope.gridOptions.data = data;
    });
}]);

.grid {
  width: 100%;
  height: 250px;
}

.nv-sparklineplus text {
  display: none;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script data-require="d3@*" data-semver="3.3.11" src="//d3js.org/d3.v3.min.js"></script>
    <script data-require="d3@3.3.11" data-semver="3.3.11" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
    <link data-require="nvd3@*" data-semver="1.1.14-beta" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" />
    <script data-require="nvd3@*" data-semver="1.1.14-beta" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//cdn.rawgit.com/krispo/angular-nvd3/v0.1.0/dist/angular-nvd3.js"></script>
    <script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
    <link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

<div class="ui-grid-cell-contents">
  <nvd3 options="row.entity.spark.options" data="row.entity.spark.data"></nvd3>
</div>