<h1>AngularJS Data Visualisation Tutorial Examples - Bar Chart</h1>
<hr>
<div ng-app="graphApp">
  <div ng-controller="graphController as graph">
    <!--bar chart-->
    <h2>Bar Chart</h2>
    <ul class="chart" style="width:{{width}}px; height:{{height}}px;">
      <!-- Labels -->
      <div class="y" style="width:{{height}}px;">{{yAxis}}</div>
      <div class="x">{{xAxis}}</div>
      <!-- Data -->
       <li ng-repeat="bar in data" class="bar" style="height:{{bar.value / max * height}}px; width:{{width / data.length - 5}}px; left:{{$index / data.length * width}}px;"><span>{{bar.label}}:{{bar.value}}</span></li>
    </ul>
    
  </div>
</div>

body {
  text-align:center;
}

// Chart set up

.chart {
  border-left:1px solid black;
  border-bottom:1px solid black;
  margin:60px auto;
  position:relative;
  list-style:none;
  padding:0;
}

.y {
  position:absolute;
  transform:rotate(-90deg);
  transform-origin: bottom left;
  bottom:0;
  padding:5px;
}

.x {
  position:absolute;
  top:100%;
  width:100%;
  padding:5px;
}

// Bar Chart

.bar  {
  background:blue;
  position:absolute;
  bottom:0;
  
  &:nth-of-type(even) {
    background:red;
  }
  span {
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:rotate(-90deg) translateY(-50%);
    transform-origin: left top;
    font-weight:bold;
    opacity:0;
    transition:0.3s;
    white-space:nowrap;
  }
  
  &:hover {
    
    span {
      opacity:1;
    }
  }
}

(function(){

  var app = angular.module('graphApp',[]);
  
  app.controller('graphController', function($scope){
    
    // Options
    
    $scope.width = 600;
    $scope.height = 350;
    $scope.yAxis = 'Sales';
    $scope.xAxis = '2014';
    
    // Data 

    $scope.data = [
      {
      label: 'January',
      value: 36
      },
      {
      label: 'February',
      value: 54
      },
      {
      label: 'March',
      value: 62
      },
      {
      label: 'April',
      value: 82
      },
      {
      label: 'May',
      value: 96
      },
      {
      label: 'June',
      value: 104
      },
      {
      label: 'July',
      value: 122
      },
      {
      label: 'August',
      value: 152
      },
      {
      label: 'September',
      value: 176
      },
      {
      label: 'October',
      value: 180
      },
      {
      label: 'November',
      value: 252
      },
      {
      label: 'December',
      value: 342
      }
    ];
    
    // Find Maximum X & Y Axis Values - this is used to position the data as a percentage of the maximum
    $scope.max = 0;
    
    var arrLength = $scope.data.length;
    for (var i = 0; i < arrLength; i++) {
        // Find Maximum X Axis Value
      	if ($scope.data[i].value > $scope.max)
        $scope.max = $scope.data[i].value;
    }
   
  // End Controller  
	});

})();