angular-charts

The piechart directive uses a default radius of 10, this can be overridden using the radius attribute.

The piechart-slice directive supports ng-repeat.

                                 
<piechart radius="100">
   <piechart-slice ng-repeat="slice in slices" value="{{slice.value}}" fill="{{slice.colour}}" stroke="white" />
</piechart>

                                 
function PiechartDemoCtrl($scope) {
   var colours = {
      0: '#428bca',
      1: '#5cb85c',
      2: '#5bc0de',
      3: '#f0ad4e',
      4: '#d9534f'
   };

   var slices = $scope.slices = [];

   var Slice = function(val) {
      this.value = val;
      this.colour = colours[slices.length];
   ;

   $scope.slices.push(new Slice(50));
   $scope.slices.push(new Slice(200));

   $scope.addSlice = function() {
      $scope.slices.push(new Slice(10));
   };
};

The linechart directive uses a default height and width of 200 and 300 respectively, this can be overridden using the h and w attributes.

The linechart-series directive supports ng-repeat.

                                 
<linechart h="200" w="300">
   <linechart-series ng-repeat="s in series" values="{{s.values}}" stroke="{{s.colour}}" stroke-width="2" fill="none"></linechart-series>
</linechart>

                                 
function LinechartDemoCtrl($scope) {
   var colours = {
      0: '#428bca',
      1: '#5cb85c',
      2: '#5bc0de',
      3: '#f0ad4e',
      4: '#d9534f'
   };

   var series = $scope.series = [];

   var Series = function(vals) {
      this.values = vals;
      this.colour = colours[series.length];
   };

   $scope.addSeries = function() {
      var len = series.length + 1;
      series.push(new Series([12 * len, 15 * len, 9 * len, 22 * len]));
   };

   $scope.addSeries();
   $scope.addSeries();
};

angular-charts

by @crudbetter (http://crudbetter.com/)

Pie Chart

Line Chart