<h1>AngularJS Data Visualisation Tutorial Examples - SVG Line Chart</h1>
<hr>
<div ng-app="graphApp">
  <div ng-controller="graphController as graph">

    
    <!--svg line chart-->
    <h2>SVG Line Chart</h2>
    <div 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 -->
      <svg style="width:{{width}}px; height:{{height}}px;">
        <line ng-repeat="line in data" x1="{{$index / data.length * width }}" y1="{{data[$index - 1].value / max * height}}" x2="{{($index + 1) / data.length * width}}" y2="{{line.value / max * height}}">
        </line>
      </svg>
    </div>

  </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;
}

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

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

// SVG line chart

svg {
  position:absolute;
  transform:rotateX(180deg);
  left:0;
}

line  {
  stroke:red;
  stroke-width:3px;
}

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

})();