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

app.controller('MainCtrl', function($scope) {

  $scope.dataSwitch = {
    data: [{
      selected: true
    }, {
      selected: false
    }, {
      selected: false
    }],
    durations: [{
      label: "7 days",
      value: 7
    }, {
      label: "14 days",
      value: 14
    }, {
      label: "28 days",
      value: 28
    }],
    duration: 7,
    compare: false
  };

  $scope.setDuration = function(value) {
    $scope.dataSwitch.duration = value;
  };

  $scope.prepareData = function(dataSet) {
    var newDataSet = [];
    $scope.dataSwitch.data.forEach(function(data, index) {
      if (data.selected) {
        var dataToPush = {
          key: dataSet[index * 2].key,
          color: dataSet[index * 2].color,
          values: dataSet[index * 2].values.slice(0)
        };
        newDataSet.push(dataToPush);
        if ($scope.dataSwitch.compare) {
          var dataToPush2 = {
            key: dataSet[(index * 2) + 1].key,
            color: dataSet[(index * 2) + 1].color,
            values: dataSet[(index * 2) + 1].values.slice(0)
          };
          newDataSet.push(dataToPush2); 
        }
      }
    });
    newDataSet.forEach(function(data, index) {
      var shifts = data.values.length - parseInt($scope.dataSwitch.duration);
      for (var s = 0; s < shifts; s++) {
        data.values.shift();
      }
    });
    computeDataRange(newDataSet);
    return newDataSet;
  };

  $scope.getMaxMinRangeDate = function(dataSet) {
    var minMax = [Number.MAX_SAFE_INTEGER, -Number.MAX_SAFE_INTEGER];
    var maxDifference = ($scope.dataSwitch.duration) * 24 * 60 * 60 * 1000;
    var msMax = 0;
    dataSet.forEach(function(object) {
      object.values.forEach(function(value) {
        msMax = Math.max(msMax, value[0]);
      });
    });

    dataSet.forEach(function(record) {
      record.values.forEach(function(value) {
        if ((msMax - value[0]) < maxDifference) {
          minMax[0] = Math.min(minMax[0], value[0]);
          minMax[1] = Math.max(minMax[1], value[0]);
        }
      });
    });
    return minMax;
  };
  
  $scope.getMaxMinValues = function(dataSet){
    var minMax = [Number.MAX_SAFE_INTEGER, -Number.MAX_SAFE_INTEGER]; 
    dataSet.forEach(function(object) {
      object.values.forEach(function(value) {
        minMax[0] = Math.min(minMax[0], value[1]);
        minMax[1] = Math.max(minMax[1], value[1]);
      });
    });
    return minMax;
  }
  
  computeDataRange = function(dataSet) {
    var minMaxDate = $scope.getMaxMinRangeDate(dataSet);
    minMaxDate[0] = minMaxDate[0] - 43200000;
    minMaxDate[1] = minMaxDate[1] + 43200000;
    $scope.options.chart.xDomain = minMaxDate;
  };

  $scope.$watchGroup(['dataSwitch.compare', 'dataSwitch.duration', 'dataSwitch.data[0].selected', 'dataSwitch.data[1].selected', 'dataSwitch.data[2].selected'], function(newValue, oldValue) {
    $scope.setData();
  });

  $scope.config = {
    refreshDataOnly: true,
    extended: true
  };

  $scope.options = {
    chart: {
      type: 'lineChart',
      height: 450,
      margin: {
        top: 60,
        right: 60,
        bottom: 60,
        left: 60
      },
      clipEdge: true,
      showLegend: false,
      x: function(d) {
        return d[0];
      },
      y: function(d) {
        return d[1];
      },
      
      interactiveLayer:{
        tooltip:{
          valueFormatter: function (d,i){
            return 'Anything';
          }
        }
      },
      
      dispatch: {
        stateChange: function(e){ console.log('stateChange') },
        changeState: function(e){ console.log('changeState') },
        tooltipShow: function(e){ console.log('tooltipShow') },
        tooltipHide: function(e){ console.log('tooltipHide') },
        renderEnd: function(e){ console.log('renderEnd') }
      },
      
      lines: {
        dispatch: {
            elementClick: function(e){ console.log('click') },
            elementMouseover: function(e){ console.log('mouseover') },
            elementMouseout: function(e){ console.log('mouseout') },
            renderEnd: function(e){ console.log('renderEnd') }
          }
      },

      color: function(d) {
        return d.color;
      },
      duration: 500,
      useInteractiveGuideline: true,
      clipVoronoi: false,

      xAxis: {
        //axisLabel: 'X Axis',
        tickFormat: function(d) { 
          var da = new moment(d);
          return da.format("DD MMM ");
        },
        showMaxMin: false,
        tickValues: function() {
          var ticks = [];
          $scope.data[0].values.forEach(function(record) {
            ticks.push(record[0]);
          });
          return ticks; 
        }
      },


      yAxis: {
        //axisLabel: 'Y Axis',
        tickFormat: function(d) { 
          if (d > 1000) {
            var d2 = d / 1000 + "K";
          } else {
            d2 = d;
          }
          return d2;
        },
        ticks: 5,

        axisLabelDistance: 200,
        showMaxMin: false
      },
      forceY: [-1000]
    }
  };

  $scope.receivedData = [{
    key: "This week 1",
    color: "rgba(238,79,64,1)",
    values: [
      [1474585200000, 2000],
      [1474671600000, 0],
      [1474758000000, 4000],
      [1474844400000, 7000],
      [1474930800000, 7000],
      [1475017200000, 20000],
      [1475103600000, 20000],
      [1475190000000, 22000],
      [1475276400000, 2000],
      [1475362800000, 1000],
      [1475449200000, 4000],
      [1475535600000, 7000],
      [1475622000000, 7000],
      [1475708400000, 20000],
      [1475794800000, 20000],
      [1475881200000, 22000],
      [1475967600000, 2000],
      [1476054000000, 1000],
      [1476140400000, 87345],
      [1476226800000, 4000],
      [1476226800000, 7000],
      [1476313200000, 7000],
      [1476399600000, 20000],
      [1476486000000, 20000],
      [1476572400000, 22000],
      [1476658800000, 2000],
      [1476745200000, 1000],
      [1476831600000, 4000],
      [1476918000000, 7000],
      [1477004400000, 7000],
      [1477090800000, 20000],
      [1477177200000, 20000],
      [1477263600000, 22000],
      [1477350000000, 2000],
      [1477436400000, 1000],
      [1477522800000, 4000],
      [1477609200000, 7000],
      [1477695600000, 7000],
      [1477782000000, 20000],
      [1477868400000, 20000],
      [1477954800000, 22345]
    ]
  }, {
    key: "Last week 1",
    color: "rgba(238,79,64,.3)",
    values: [
      [1474585200000, 0],
      [1474671600000, 1000],
      [1474758000000, 5000],
      [1474844400000, 4000],
      [1474930800000, 3000],
      [1475017200000, 6000],
      [1475103600000, 6000],
      [1475190000000, 35000],
      [1475276400000, 0],
      [1475362800000, 1000],
      [1475449200000, 5000],
      [1475535600000, 4000],
      [1475622000000, 3000],
      [1475708400000, 6000],
      [1475794800000, 6000],
      [1475881200000, 35000],
      [1475967600000, 0],
      [1476054000000, 1000],
      [1476140400000, 87345],
      [1476226800000, 5000],
      [1476226800000, 4000],
      [1476313200000, 3000],
      [1476399600000, 6000],
      [1476486000000, 6000],
      [1476572400000, 35000],
      [1476658800000, 0],
      [1476745200000, 1000],
      [1476831600000, 5000],
      [1476918000000, 4000],
      [1477004400000, 3000],
      [1477090800000, 6000],
      [1477177200000, 6000],
      [1477263600000, 35000],
      [1477350000000, 0],
      [1477436400000, 1000],
      [1477522800000, 5000],
      [1477609200000, 4000],
      [1477695600000, 3000],
      [1477782000000, 6000],
      [1477868400000, 6000],
      [1477954800000, 35345]
    ]
  }, {
    key: "This week 2",
    color: "rgba(228,175,21,1)",
    values: [
      [1476831600000, 40000],
      [1476918000000, 2000],
      [1477004400000, 3000],
      [1477090800000, 13000],
      [1477177200000, 13000],
      [1477263600000, 13000],
      [1477350000000, 3000],
      [1477436400000, 3000],
      [1477522800000, 0],
      [1477609200000, 2000],
      [1477695600000, 3000],
      [1477782000000, 13000],
      [1477868400000, 13000],
      [1477954800000, 13345]
    ]
  }, {
    key: "Last week 2",
    color: "rgba(228,175,21,0.3)",
    values: [
      [1474585200000, 1000],
      [1474671600000, 0],
      [1474758000000, 1000],
      [1474844400000, 1000],
      [1474930800000, 1000],
      [1475017200000, 0],
      [1475103600000, 0],
      [1475190000000, 5000],
      [1475276400000, 1000],
      [1475362800000, 0],
      [1475449200000, 1000],
      [1475535600000, 1000],
      [1475622000000, 1000],
      [1475708400000, 0],
      [1475794800000, 0],
      [1475881200000, 5000],
      [1475967600000, 1000],
      [1476054000000, 0],
      [1476140400000, 87345],
      [1476226800000, 1000],
      [1476226800000, 1000],
      [1476313200000, 1000],
      [1476399600000, 0],
      [1476486000000, 0],
      [1476572400000, 5000],
      [1476658800000, 1000],
      [1476745200000, 0],
      [1476831600000, 1000],
      [1476918000000, 1000],
      [1477004400000, 1000],
      [1477090800000, 0],
      [1477177200000, 0],
      [1477263600000, 5000],
      [1477350000000, 1000],
      [1477436400000, 0],
      [1477522800000, 1000],
      [1477609200000, 1000],
      [1477695600000, 0],
      [1477782000000, 0],
      [1477868400000, 0],
      [1477954800000, 5354]
    ]
  }, {
    key: "This week 3",
    color: "rgba(199,102,172,1)",
    values: [
      [1474585200000, 24000],
      [1474671600000, 23000],
      [1474758000000, 0],
      [1474844400000, 2000],
      [1474930800000, 3000],
      [1475017200000, 13000],
      [1475103600000, 13000],
      [1475190000000, 43000],
      [1475276400000, 24000],
      [1475362800000, 23000],
      [1475449200000, 0],
      [1475535600000, 2000],
      [1475622000000, 3000],
      [1475708400000, 13000],
      [1475794800000, 13000],
      [1475881200000, 43000],
      [1475967600000, 24000],
      [1476054000000, 23000],
      [1476140400000, 87345],
      [1476226800000, 0],
      [1476226800000, 2000],
      [1476313200000, 3000],
      [1476399600000, 13000],
      [1476486000000, 13000],
      [1476572400000, 43000],
      [1476658800000, 24000],
      [1476745200000, 23000],
      [1476831600000, 0],
      [1476918000000, 2000],
      [1477004400000, 3000],
      [1477090800000, 13000],
      [1477177200000, 13000],
      [1477263600000, 43000],
      [1477350000000, 24000],
      [1477436400000, 23000],
      [1477522800000, 0],
      [1477609200000, 2000],
      [1477695600000, 3000],
      [1477782000000, 13000],
      [1477868400000, 13000],
      [1477954800000, 43345]
    ]
  }, {
    key: "Last week 3",
    color: "rgba(199,102,172,0.3)",
    values: [
      [1474585200000, 12000],
      [1474671600000, 43000],
      [1474758000000, 1000],
      [1474844400000, 1000],
      [1474930800000, 1000],
      [1475017200000, 0],
      [1475103600000, 0],
      [1475190000000, 5000],
      [1475276400000, 12000],
      [1475362800000, 43000],
      [1475449200000, 1000],
      [1475535600000, 1000],
      [1475622000000, 1000],
      [1475708400000, 0],
      [1475794800000, 0],
      [1475881200000, 5000],
      [1475967600000, 12000],
      [1476054000000, 43000],
      [1476140400000, 87345],
      [1476226800000, 1000],
      [1476226800000, 1000],
      [1476313200000, 1000],
      [1476399600000, 0],
      [1476486000000, 0],
      [1476572400000, 5000],
      [1476658800000, 12000],
      [1476745200000, 43000],
      [1476831600000, 1000],
      [1476918000000, 1000],
      [1477004400000, 0],
      [1477090800000, 0],
      [1477177200000, 0],
      [1477263600000, 5000],
      [1477350000000, 12000],
      [1477436400000, 43000],
      [1477522800000, 1000],
      [1477609200000, 1000],
      [1477695600000, 1000],
      [1477782000000, 0],
      [1477868400000, 0],
      [1477954800000, 5543]
    ]
  }];

  $scope.setData = function() {
    $scope.data = $scope.prepareData($scope.receivedData);
  };

  $scope.setData();

});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Cumulative Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
    <link rel="stylesheet" href="style.css" />
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.7/dist/angular-nvd3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
    <script src="app.js"></script>
    
  </head>

  <body ng-controller="MainCtrl">
    
    
    
    <button ng-repeat="item in dataSwitch.durations" 
            ng-bind="item.label" 
            ng-click="setDuration(item.value)"></button>
    
    <!--<select ng-model="dataSwitch.duration" 
            ng-disabled="!dataSwitch.compare" 
            ng-options="item as item.label for item in dataSwitch.durations" 
            ng-model="selected"></select>-->

    <!--</select>-->
    
    <label><input type="checkbox" ng-model="dataSwitch.compare" > Compare to old Data </label> 
     
    <nvd3 options="options" data="data" config="config" class="graph-wrapper" data-duration="{{dataSwitch.duration}}"></nvd3>  
    
    <label><input type="checkbox" ng-model="dataSwitch.data[0].selected"> 1 enable/ disable </label><br/>
    <label><input type="checkbox" ng-model="dataSwitch.data[1].selected"> 2 enable/ disable </label><br/>
    <label><input type="checkbox" ng-model="dataSwitch.data[2].selected"> 3 enable/ disable </label>
    
    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
  </body>

</html>

body{
  font-family: 'Lato', sans-serif;
}

.nvd3 g.nv-groups path.nv-line {
  stroke-width: 5px;
}

.nvd3 .nv-x.nv-axis .tick:nth-child(odd) line {
  stroke: rgba(245,245,245,0.5);
  opacity: 1;
}

.graph-wrapper[data-duration="7"] .nvd3 .nv-x.nv-axis .tick:nth-child(odd) line {
  stroke-width: 14.28%;
}

.graph-wrapper[data-duration="14"] .nvd3 .nv-x.nv-axis .tick:nth-child(odd) line {
  stroke-width: 7.14%;
}

.graph-wrapper[data-duration="28"] .nvd3 .nv-x.nv-axis .tick:nth-child(odd) line {
  stroke-width: 3.5714%;
}

.graph-wrapper[data-duration="14"] .nvd3 .nv-x.nv-axis .tick:nth-child(odd) text {
  display: none;
}

.graph-wrapper[data-duration="28"] .nvd3 .nv-x.nv-axis .tick text {
  display: none;
}

.graph-wrapper[data-duration="28"] .nvd3 .nv-x.nv-axis .tick:nth-child(4n) text {
  display: block;
}

.nvd3 .nv-x.nv-axis .tick:nth-child(even) line { 
  opacity: 0;
  stroke: rgba(245,245,245,0.5);
}

.nvd3 .nv-axis path.domain{
  display:none;
}

.nvtooltip{
  border: 0px solid white;
  border-radius: 0px;
  box-shadow: 0px 0px 5px 0px silver;
  background: rgba(255,255,255,0.9);
}

.nvtooltip table td.legend-color-guide div{
  border: 0px solid white;
}

Read more about Angular-nvD3:
http://krispo.github.io/angular-nvd3/