Angular Morris Bar Chart - xaxis by $scope

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">
<div
bar-chart 
bar-data="data"
bar-x='{{xaxis}}'
bar-y='yaxis'
bar-labels='["Series A", "Series B"]'
bar-colors='["#31C0BE", "#c7254e"]'
bar-hide-hover="'always'">
</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: 75 },
    { y: "2012", a: 100 }
	];
  $scope.xaxis = 'y';
  $scope.yaxis = '["a"]';
  
});