require(['px-libs/morris'], function(Morris) {
...
});
To use Morris.js plugin, you need to include the next scripts:
<script src="path/to/js/libs/raphael.js"></script>
<script src="path/to/js/libs/morris.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-morris.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['angular-morris']);
Alternatively, you can include Morris.js plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
serie: true,
name: 'angular-morris',
files: [
'path/to/js/libs/raphael.js',
'path/to/js/libs/morris.js',
'path/to/js/pixeladmin/directives/angular-morris.js',
],
},
]);
morris-*
directivesdata
attribute to be on the element.
data
attribute have an angular $watch listener applied to it.
You can use morris-*
directives where you want.
And when the scope is destroyed the directives will be destroyed.
morris-line
morris-bar
morris-area
morris-donut
options
attribute have an angular $watch listener applied to it.
Morris.js' options can be specified using options
attribute
(see the
plugin's documentation).
<div morris-donut data="chartData"
options="ctrl.donutOptions"></div>
function SomeController() {
this.donutOptions = {
colors: ['#009688', '#4CAF50', '#D32F2F', '#795548'],
resize: true,
labelColor: '#888',
};
});