264 lines
6.2 KiB
JavaScript
264 lines
6.2 KiB
JavaScript
/**
|
|
* 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); |