Discrete Bar Chart with Angular-nvD3

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

app.controller('MainCtrl', function($scope, $timeout, $interval) {
  
  $scope.config = {
    refreshDataOnly: true,
    deepWatchData  : true  
  };
  
  $scope.options = {
    chart: {
        type: 'multiBarChart',
        height: 450,
        margin : {
            top: 20,
            right: 20,
            bottom: 60,
            left: 55
        },
        x: function(d){return d[0];},
        y: function(d){return d[1];},
        showValues: true,
        valueFormat: function(d){
            return d3.format(',.4f')(d);
        },
        transitionDuration: 1,
        xAxis: {
            axisLabel: 'X Axis'
        },
        yAxis: {
            axisLabel: 'Y Axis',
            axisLabelDistance: 30
        }
    }
};
  

$scope.dataset1 = [
  {
    key: "Dataset 1",
    values: [
        [1, 38],
        [2, 98],
        [3, 12],
        [4, -98],
        [5, 70],
        [6, 45],
        [7, -65],
        [8, 150]
    ]
  }
];

$scope.dataset2 = [
  {
    key: "Dataset 2",
    values: [
        [1, 29],
        [2, -98],
        [3, 12],
        [4, 26],
        [5, 70],
        [6, 28],
        [7, 150],
        [8, -75]
    ]
  }
];



$scope.data = angular.copy($scope.dataset1);

//$scope.x = 9;

$scope.loadDataset = function(datasetName){
  $scope.data = $scope[datasetName];
  //$scope.data[0].values.push([$scope.x, Math.random() * 25]);
  
  $scope.x++;
  
  //$scope.api.update();
};

$scope.currentValuesFrom = 1;
console.log($scope.data[0]);


$scope.toggleValues = function(){
  
  if ($scope.currentValuesFrom == 1)
  {
      $scope.data[0].key = $scope.dataset2[0].key;
      $scope.data[0].values = $scope.dataset2[0].values;
      
      //$scope.data = angular.copy($scope.dataset2);
      
      console.log($scope.data[0]);
      
      //$scope.api.update();
      
      $scope.currentValuesFrom = 2;
      console.log('^ current values from: ' + $scope.currentValuesFrom);
  }
  else if ($scope.currentValuesFrom == 2)
  {
      $scope.data[0].key = $scope.dataset1[0].key;  
      $scope.data[0].values = $scope.dataset1[0].values;  
      //$scope.data = angular.copy($scope.dataset1);
      
      console.log($scope.data[0]);
      
      //$scope.api.update();
      
      $scope.currentValuesFrom = 1;
      console.log('^ current values from: ' + $scope.currentValuesFrom);

  }
  else {
    console.warn('some other thing happened!!');
  }
  
};

//$scope.data = $scope.dataset1;

        //$scope.run = true;
        
        /*var x = 0;
        setInterval(function()
        {
  	      if (!$scope.run) return;
  	      $scope.data[0].values.push([x,	Math.random() - 0.5]);
          if ($scope.data[0].values.length > 8) $scope.data[0].values.shift();
  	      x++;
          $scope.api.update();
        }, 1000);*/
});

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

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3  Discrete Bar Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.css"/>
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.4.7/angular.js" data-semver="1.2.16"></script>
    <script src="https://rawgit.com/mbostock/d3/v3.5.6/d3.min.js"></script>
    <script src="https://rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.2/dist/angular-nvd3.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <nvd3 config="config" options="options" data="data" api="api"></nvd3>
    
    <button ng-click="loadDataset('dataset1')">Load dataset 1</button>
    <button ng-click="loadDataset('dataset2')">Load dataset 2</button>
    
    <button ng-click="toggleValues()">Toggle Values</button>
    
    </body>

</html>

/* Put your css in here */

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