Angular Morris Line Chart - postUnits Example

by bigwelly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-morris-chart/1.2.0/angular-morris-chart.min.js"></script>
<div ng-app="my.app" ng-controller="MyCtrl">
  <h1 align="center">
    <font face="Arial">Angular Morris Chart</font>
  </h1>
  <h2 align="center">
    <font face="Arial">postUnits Example</font>
  </h2>
 <div
  class="line-chart"
  line-chart
  line-post-units="'%'"  
  line-data='data'
  line-xkey='y'
  line-ykeys='["a"]'
  line-labels='["Serie A"]'
  line-colors='["#31C0BE"]'>
 </div>
</div>

CSS

body { padding: 20px; }

JavaScript

angular.module('my.app',['angular.morris-chart']).controller('MyCtrl', function($scope){
	$scope.data = [
    { y: "2006", a: 100 },
    { y: "2007", a: 75 },
    { y: "2008", a: 50 },
    { y: "2009", a: 75 },
    { y: "2010", a: 50 },
    { y: "2011", a: 755 },
    { y: "2012", a: 100 },
    { y: "2013", a: 5 },
    { y: "2014", a: 85 },
    { y: "2015", a: 23 },
    { y: "2016", a: 67 },
    { y: "2017", a: 59 },
    { y: "2018", a: 8 },
    { y: "2019", a: 15 }
	];
});