Angular Morris Chart - goalLineColors Example

morris chart

by sunil puvvada

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">goalLineColors </font></h2>
  
  <div
  class="line-chart"
  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-goal-line-colors='["#cc33ff", "#cc33ff"]'
  line-goals= '[60, 90]'
  >
  </div>

</div>

CSS

body {
  padding: 20px;
}

JavaScript

angular.module('my.app',['angular.morris-chart']).controller('MyCtrl', function($scope){
	$scope.data = [
    { y: "2006", a: 100, b: 90 },
    { y: "2007", a: 75,  b: 65 },
    { y: "2008", a: 50,  b: 40 },
    { y: "2009", a: 75,  b: 65 },
    { y: "2010", a: 50,  b: 40 },
    { y: "2011", a: 75,  b: 65 },
    { y: "2012", a: 100, b: 90 }
	];
});