D3JS line chart with Angular - v2

by Rishabh Sharma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div ng-controller="MyCtrl as vm">

  <input type="button" ng-repeat="control in vm.controls1" value="{{control}}" ng-click="vm.toggle(vm.lines1, control)" />
  <line-chart data="vm.data1" lines="vm.lines1"></line-chart>

  <input type="button" ng-repeat="control in vm.controls2" value="{{control}}" ng-click="vm.toggle(vm.lines2, control)" />
  <line-chart data="vm.data2" lines="vm.lines2"></line-chart>

</div>

CSS

body {
  font: 12px Arial;
}

path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

JavaScript

angular.module('myApp', [])
  .controller('MyCtrl', function($scope) {
    var vm = this;
    vm.controls1 = ["primary", "secondary"];
    vm.lines1 = ["primary", "secondary"];
    vm.data1 = [{
      "date": "1-Apr-11",
      "primary": 58.13,
      "secondary": 28.13
    }, {
      "date": "1-May-11",
      "primary": 53.98,
      "secondary": 35.13
    }, {
      "date": "1-Jun-11",
      "primary": 67,
      "secondary": 32.11
    }, {
      "date": "1-Jul-11",
      "primary": 89.7,
      "secondary": 32.11
    }];
    vm.controls2 = ["primary", "secondary"];
    vm.lines2 = ["primary", "secondary"];
    vm.data2 = [{
      "date": "1-Apr-11",
      "primary": 20.13,
      "secondary": 25.13
    }, {
      "date": "1-May-11",
      "primary": 25.98,
      "secondary": 30.13
    }, {
      "date": "1-Jun-11",
      "primary": 30,
      "secondary": 35.11
    }, {
      "date": "1-Jul-11",
      "primary": 35.7,
      "secondary": 40.11
    }];    
    vm.toggle = function(lines, control) {
      var index = lines.indexOf(control);
      if (index === -1) {
        lines.push(control);
      } else {
        lines.splice(index, 1);
      }
    }
  })
  .directive('lineChart', function($window) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        data: '=',
        lines: '='
      },
      template: '<div id="chart"></div>',
      link: function(scope, element, attrs, fn) {

        var d3 = $window.d3;

        var lineChart = (function() {

          var rawData, chartData, filteredData;

          var object = {};

          // Set the dimensions of the canvas / graph
          var margin = {
              top: 30,
              right: 80,
              bottom: 50,
              left: 30
            },
            width = 600 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

          // Adds the svg canvas
          var svg = d3.select(element[0])
            .append("svg")
           ...