Angular Morris Chart - dateFormat and postUnits

by Stewan Pacheco

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>
  <h3 align="center"><font face="Arial">dateFormat and postUnits</font></h3>
  <div
  line-chart
  line-post-units="'%'"  
  line-data='data'
  line-xkey='y'
  line-ykeys='["a", "b"]'
  line-labels='["Serie A", "Serie B"]'
  line-colors='["#31C0BE", "#c7254e"]'
  line-x-label-format="xLabelFormat"
  line-date-format="dateFormat">
  </div>
</div>

CSS

body {
  padding: 20px;
}

JavaScript

angular.module('my.app',['angular.morris-chart']).controller('MyCtrl', function($scope){
	var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

  $scope.xaxis = 'y';
  $scope.yaxis = '["a,b"]';
  
 	$scope.data = [
    { y: "2006-07", a: 100, b: 90 },
    { y: "2007-06", a: 75,  b: 65 },
    { y: "2008-05", a: 50,  b: 40 },
    { y: "2009-04", a: 75,  b: 65 },
    { y: "2010-03", a: 50,  b: 40 },
    { y: "2011-02", a: 75,  b: 65 },
    { y: "2012-01", a: 100, b: 90 }
	];
  
  $scope.xLabelFormat = function(x) { // <--- x.getMonth() returns valid index
    var month = months[x.getMonth()];
    return month;
  }
  
  $scope.dateFormat = function(x) {
    var month = months[new Date(x).getMonth()];
    return month;
  }
    
});