Morris.js http://morrisjs.github.io/morris.js

Morris.js is a very simple API for drawing line, bar, area and donut charts.

Graph

Bars

Area

Donut

Usage


require(['px-libs/morris'], function(Morris) {
  ...
});
      

Usage

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-* directives

morris-* directives require data 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.

Options

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',
  };
});