This repository was archived by the owner on Jan 3, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 62
Examples
Stewan Pacheco edited this page Aug 21, 2016
·
6 revisions
Add angular.morris as module dependency for your project then use it
angular.module('my.app', [
'angular.morris'
])<div
bar-chart
bar-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 }
]'
bar-x='y'
bar-y='["a", "b"]'
bar-labels='["Series A", "Series B"]'
bar-colors='["#31C0BE", "#c7254e"]'>
</div><div
donut-chart
donut-data='[
{label: "Download Sales", value: 12},
{label: "In-Store Sales",value: 30},
{label: "Mail-Order Sales", value: 20}
]'
donut-label-color='"#000000"'
donut-background-color='"#ffffff"'
donut-colors='["#31C0BE","#c7254e","#98a0d3"]'
donut-formatter='"currency"'>
</div>`donut-formatter` can either be a string for a filter name (eg. 'currency') or a reference to a scope function. [example in plunker](http://plnkr.co/edit/AsxnDG?p=preview)
<iframe width="100%" height="300" src="//jsfiddle.net/st1s/m2y6grao/embedded/result,js,html,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe><div
line-chart
line-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 }
]'
line-xkey='y'
line-ykeys='["a", "b"]'
line-labels='["Serie A", "Serie B"]'
line-colors='["#31C0BE", "#c7254e"]'>
</div><div
area-chart
area-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 }
]'
area-xkey='y'
area-ykeys='["a", "b"]'
area-labels='["Serie A", "Serie B"]'
line-colors='["#31C0BE", "#c7254e"]'>
</div>