SimpleMorris

simpleMorris.js

'use strict';

angular.module('simpleMorris', []);

var morrisTypes = {
	lineChart: Morris.Line,
	areaChart: Morris.Area,
	barChart: Morris.Bar,
	donutChart: Morris.Donut
};

angular.forEach(morrisTypes, function(mType, dirName) {
	angular.module('simpleMorris')
	.directive(dirName, function(){
		return {
			restrict: 'A',
			scope: {
				chartData: '=',
				chartOptions: '='
			},
			link: function (scope, elem, attrs){
				scope.$watch('chartData', function(){
					if(scope.chartData){
						if (scope.chart) {
							scope.chart.setData(scope.chartData);
						} else {
							var options = scope.chartOptions;
							options.element = elem;
							options.data = scope.chartData;
							scope.chart = new mType(options);
						}
					}
				});
			}
		}
	});
});

usage.html

<div area-chart
    chart-data='series'
    chart-options='chart_options'></div>

usage.js

    $scope.chart_options = {
      xkey: 'time',
      ykeys: ['value'],
      labels: ['Value'],
      hideHover: true
    };
    $scope.series = [
      {time: 11111111, value: 123},
      {time: 11111112, value: 125},
      {time: 11111113, value: 126},
      {time: 11111114, value: 133},
      ];