raspberry-pi-absensi/assets/scripts/chart.morris.init.js

/**
 * Theme: Ninja Admin Template
 * Author: NinjaTeam
 * Module/App: Morris-Chart
 */

(function($) {
	"use strict";

	var MorrisChart = {},
		graph;

	$(document).ready(function(){
		if ($("#area-morris-chart").length) MorrisChart.area.init();
		if ($("#bar-morris-chart").length) MorrisChart.bar.init();
		if ($("#donut-morris-chart").length) MorrisChart.donut.init();
		if ($("#lines-morris-chart").length) MorrisChart.lines.init();
		if ($("#realtime-morris-chart").length) MorrisChart.realtime.init();
		if ($("#stack-morris-chart").length) MorrisChart.stack.init();
		if ($("#realtime-morris-chart").length) {
			setInterval(function updateRandom() {
				MorrisChart.realtime.update();
			}, 500); 
		}
		return false;
	});

	$(window).on("resize",function(){
		if ($("#area-morris-chart").length) MorrisChart.area.update();
		if ($("#bar-morris-chart").length) MorrisChart.bar.update();
		if ($("#donut-morris-chart").length) MorrisChart.donut.update();
		if ($("#lines-morris-chart").length) MorrisChart.lines.update();
		if ($("#stack-morris-chart").length) MorrisChart.stack.update();
		return false;
	});

	MorrisChart = {
		area : {
			graph : null,
			data : [
				{x: '2010', y: 10, z: 10},
				{x: '2011', y: 9, z: 8},
				{x: '2012', y: 9, z: 11},
				{x: '2013', y: 13, z: 10},
				{x: '2014', y: 15, z: 13},
				{x: '2015', y: 12, z: 14},
				{x: '2016', y: 13, z: 18}
			],
			init: function(){
				MorrisChart.area.graph = Morris.Area({
					element: 'area-morris-chart',
					behaveLikeLine: true,
					data: MorrisChart.area.data,
					xkey: 'x',
					ykeys: ['y', 'z'],
					labels: ['Sales', 'Salary'],
					pointSize: 0,
					pointStrokeColors:['#fcb03b', '#ea65a2'],
					behaveLikeLine: true,
					gridLineColor: '#eee',
					lineWidth: 0,
					smooth: true,
					hideHover: 'auto',
					lineColors: ['#fcb03b', '#ea65a2'],
					resize: true,
					gridTextColor:'#2f2c2c',
				});
				return false;
			},
			update: function(){
				MorrisChart.area.graph.setData(MorrisChart.area.data);
				return false;
			}
		},
		bar : {
			graph : null,
			data: [
				{x: '2010', y: 10, z: 17, a: 9},
				{x: '2011', y: 5, z: 14, a: 13},
				{x: '2012', y: 5, z: 13, a: 12},
				{x: '2013', y: 6, z: 12, a: 5},
				{x: '2014', y: 17, z: 8, a: 8},
				{x: '2015', y: 10, z: 14, a: 18},
				{x: '2016', y: 8, z: 17, a: 14}
			],
			init: function(){
				Morris.Bar({
					element: 'bar-morris-chart',
					behaveLikeLine: true,
					data: MorrisChart.bar.data,
					barColors: [
						'#fcb03b',
						'#ea65a2',
						'#566FC9'
					],
					xkey: 'x',
					ykeys: ['y', 'z','a'],
					labels: ['Series A', 'Series B','Series C']
				});
				return false;
			},
			update: function(){
				MorrisChart.bar.graph.setData(MorrisChart.bar.data);
				return false;
			}
		},
		donut : {
			graph : null,
			data : [
				{value: 40, label: 'Series A'},
				{value: 20, label: 'Series B'},
				{value: 30, label: 'Series C'}
			],
			init: function(){
				Morris.Donut({
					element: 'donut-morris-chart',
					data: MorrisChart.donut.data,
					colors: [
						'#fcb03b',
						'#ea65a2',
						'#566FC9'
					],
					resize: true,
					labelColor: '#2f2c2c',
					formatter: function (x) { return x + "%"}
				});
				return false;
			},
			update: function(){
				MorrisChart.donut.graph.setData(MorrisChart.donut.data);
				return false;
			}
		},
		lines : {
			graph : null,
			data : [
				{x: '2010', y: 10, z: 17},
				{x: '2011', y: 5, z: 14},
				{x: '2012', y: 5, z: 13},
				{x: '2013', y: 6, z: 12},
				{x: '2014', y: 17, z: 8},
				{x: '2015', y: 10, z: 14},
				{x: '2016', y: 8, z: 17}
			],
			init: function(){
				Morris.Line({
					element: 'lines-morris-chart',
					behaveLikeLine: true,
					data: MorrisChart.lines.data,
					xkey: 'x',
					ykeys: ['y', 'z'],
					labels: ['Upload', 'Download'],
					lineColors: [
						'#fcb03b',
						'#ea65a2'
					],
					pointSize: 1,
					pointStrokeColors:['#fcb03b'],
					behaveLikeLine: true,
					gridLineColor: '#eee',
					gridTextColor:'#2f2c2c',
					lineWidth: 2,
					smooth: true,
					hideHover: 'auto',
					resize: true,
				});
				return false;
			},
			update: function(){
				MorrisChart.lines.graph.setData(MorrisChart.lines.data);
				return false;
			}
		},
		realtime :{
			data: [
				{x: '0', y: 10},
				{x: '1', y: 5},
				{x: '2', y: 5},
				{x: '3', y: 6},
				{x: '4', y: 17},
				{x: '5', y: 10},
				{x: '6', y: 12},
				{x: '7', y: 15},
				{x: '8', y: 9},
				{x: '9', y: 6},
				{x: '10', y: 15},
				{x: '11', y: 14},
				{x: '12', y: 5},
				{x: '13', y: 12},
				{x: '14', y: 16},
				{x: '15', y: 5},
				{x: '16', y: 10},
				{x: '17', y: 8},
				{x: '18', y: 8},
				{x: '19', y: 8},
				{x: '20', y: 6},
			],
			init : function(){
				graph = Morris.Line({
					element: 'realtime-morris-chart',
					data: MorrisChart.realtime.data,
					xkey: 'x',
					ykeys: ['y'],
					axes: 'y',
					labels: ['Visitors Online'],
					parseTime: false,
					pointSize: 1,
					pointStrokeColors:['#fcb03b'],
					behaveLikeLine: true,
					gridLineColor: '#eee',
					gridTextColor:'#2f2c2c',
					lineWidth: 2,
					smooth: true,
					hideHover: 'auto',
					lineColors: ['#fcb03b'],
					resize: true,
				});
				return false;
			},
			update: function(){
				var random = Math.floor((Math.random() * 20) + 1),
					i;
				for (i = 0; i < MorrisChart.realtime.data.length - 1; i++){
					MorrisChart.realtime.data[i].y = MorrisChart.realtime.data[i + 1].y;
				}
				MorrisChart.realtime.data[MorrisChart.realtime.data.length - 1].y = random;
				graph.setData(MorrisChart.realtime.data);
				return false;
			}
		},
		stack : {
			graph : null,
			data: [
				{x: '2010', y: 10, z: 17},
				{x: '2011', y: 5, z: 14},
				{x: '2012', y: 5, z: 13},
				{x: '2013', y: 6, z: 12},
				{x: '2014', y: 17, z: 8},
				{x: '2015', y: 10, z: 14},
				{x: '2016', y: 8, z: 17}
			],
			init : function(){
				Morris.Bar({
					element: 'stack-morris-chart',
					behaveLikeLine: true,
					data: MorrisChart.stack.data,
					xkey: 'x',
					ykeys: ['y', 'z'],
					labels: ['Series A', 'Series B'],
					stacked: true,
					barColors: [
						'#ea65a2',
						'#566FC9'
					],
				});
				return false;
			},
			update: function(){
				MorrisChart.stack.graph.setData(MorrisChart.stack.data);
				return false;
			}
		},
	}
})(jQuery);