Angular D3 Chart Directive

Install via Bower
bower install angular-graphs --save
HTML
<d3-graph-pie render="drawPie"></d3-graph-pie>
Javascript
$scope.drawPie({
  colors: {
    slices: ['#F2CFDA', '#8A8FC0'],
    amount: '#222'
  },
  start: [100, 0],
  end: [20, 80]
});
Javascript
$scope.drawPie({
  labels: ['Incomplete', 'Complete'],
  colors: {
    slices: ['#F2CFDA', '#8A8FC0'],
    amount: '#222',
    lines: '#666',
    labels: '#222'
  },
  start: [100, 0],
  end: [20, 80]
});
HTML
<d3-graph-line render="drawLine"></d3-graph-line>
Javascript
$scope.drawLine1({
  colors: {
    axes: '#222',
    labels: '#666',
    lines: '#F2CFDA'
  },
  labels: {
    y: 'Completion (%)'
  },
  max: {
    y: 100
  },
  limit: {
    x: 1382158800000
  },
  data: [
    {
      x: 1381640400000,
      y: 10
    }, {
      x: 1381986000000,
      y: 30
    }, {
      x: 1382158800000,
      y: 23
    }, {
      x: 1383368400000,
      y: 42
    }
  ]
});
HTML
<d3-graph-bar render="drawBar"></d3-graph-bar>
Javascript
$scope.drawBar({
  colors: {
    axes: '#222',
    labels: '#666',
    bars: '#F2CFDA',
    focusedBar: '#8A8FC0'
  },
  orientation: 'vertical',
  infoFormat: function(value) {
    return value.x + ' - ' + value.y;
  },
  labels: {
    y: 'Number of people'
  },
  ratioWidth: 2,
  ratioHeight: 1,
  data: [
    {
      x: 'Jacob',
      y: 273642
    }, {
      x: 'Michael',
      y: 250370
    }, {
      x: 'Joshua',
      y: 231771
    }, {
      x: 'Matthew',
      y: 221411
    }, {
      x: 'Daniel',
      y: 203569
    }, {
      x: 'Christopher',
      y: 203154
    }, {
      x: 'Andrew',
      y: 202332
    }, {
      x: 'Ethan',
      y: 201689
    }, {
      x: 'Joseph',
      y: 194535
    }, {
      x: 'William',
      y: 194199
    }, {
      x: 'Anthony',
      y: 191710
    }, {
      x: 'David',
      y: 179656
    },
  ]
});
HTML
<d3-graph-bar render="drawBar"></d3-graph-bar>
Javascript
$scope.drawBar({
  colors: {
    axes: '#222',
    labels: '#666',
    bars: '#F2CFDA',
    focusedBar: '#8A8FC0'
  },
  orientation: 'horizontal',
  infoFormat: function(value) {
    return value.x + ' - ' + value.y;
  },
  labels: {
    y: 'Number of people'
  },
  ratioWidth: 1,
  ratioHeight: 2,
  data: [
    {
      x: 'Jacob',
      y: 273642
    }, {
      x: 'Michael',
      y: 250370
    }, {
      x: 'Joshua',
      y: 231771
    }, {
      x: 'Matthew',
      y: 221411
    }, {
      x: 'Daniel',
      y: 203569
    }, {
      x: 'Christopher',
      y: 203154
    }, {
      x: 'Andrew',
      y: 202332
    }, {
      x: 'Ethan',
      y: 201689
    }, {
      x: 'Joseph',
      y: 194535
    }, {
      x: 'William',
      y: 194199
    }, {
      x: 'Anthony',
      y: 191710
    }, {
      x: 'David',
      y: 179656
    },
  ]
});