<h1>AngularJS Data Visualisation Tutorial Examples - Dot Chart</h1>
<hr>
<div ng-app="graphApp">
  <div ng-controller="graphController as graph">
    
    <!--dot chart-->
    <h2>Dot 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="dot in data" class="dot" style="bottom:{{dot.value / max * height}}px; left:{{($index + 0.5) / data.length * width}}px;"><span>{{dot.label}} - {{dot.value}}</span></li>
    </div>
    </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;
}

// Dot chart

.dot {
  background:blue;
  width:10px;
  height:10px;
  border-radius:50%;
  position:absolute;
  
  span {
    display:none;
    position:absolute;
    top:-10px;
    left:20px;
    background:red;
    color:white;
    border-radius:3px;
    padding:5px;
    white-space:nowrap;
    z-index:9999;
  }
  
  &:hover {
    span {
      display:block;
    }
  }
}

(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  
	});

})();