File: /var/www/html/elms/assets/js/pages/dashboard.js
$(document).ready(function() {
setTimeout(function() { Materialize.toast('Welcome to Employee Leave Management System', 4000, 'light-blue lighten-3 rounded black-text text-darken-2') }, 2000);
// CounterUp Plugin
$('.counter').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3500,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
$(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
}
});
});
// Peity Chart
$.fn.peity.defaults.pie = {
delimiter: null,
fill: ["#26A69A", "#e0e0e0", "#b2dfdb"],
height: null,
radius: 8,
width: null
};
$("span.pie").peity("pie")
// Radar Chart
var ctx3 = document.getElementById("radar-chart").getContext("2d");
var data3 = {
labels: ["Eat", "Drink", "Sleep", "Work", "Code", "Cycle", "Run"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(241,202,58,0.2)",
strokeColor: "#F1CA3A",
pointColor: "#F1CA3A",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(83,168,251,0.2)",
strokeColor: "#53A8FB",
pointColor: "#53A8FB",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
var myRadarChart = new Chart(ctx3).Radar(data3, {
scaleShowLine: true,
angleShowLineOut: true,
scaleShowLabels: false,
scaleBeginAtZero: true,
angleLineColor: "rgba(0,0,0,.1)",
angleLineWidth: 1,
pointLabelFontFamily: "'Arial'",
pointLabelFontStyle: "normal",
pointLabelFontSize: 10,
pointLabelFontColor: "#666",
pointDot: false,
pointDotRadius: 3,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
responsive: true,
tooltipCornerRadius: 2,
scaleOverride: true,
scaleSteps: 6,
scaleStepWidth: 15,
scaleStartValue: 0,
});
var DrawSparkline = function() {
var linePoints = [0, 1, 3, 2, 1, 1, 4, 1, 2, 0, 3, 1, 3, 4, 1, 0, 2, 3, 6, 3, 4, 2, 7, 5, 2, 4, 1, 2, 6, 13, 4, 2];
$('#sparkline-line').sparkline(linePoints, {
type: 'line',
width: 'calc(100% + 4px)',
height: '45',
chartRangeMax: 13,
lineColor: '#ffb74d',
fillColor: 'rgba(255,183,77,0.3)',
highlightLineColor: 'rgba(0,0,0,0)',
highlightSpotColor: 'rgba(0,0,0,.2)',
tooltip: false
});
var barParent = $('#sparkline-bar').closest('.card');
var barPoints = [0, 1, 3, 2, 1, 1, 4, 1, 2, 0, 3, 1, 3, 4, 1, 0, 2, 3, 6, 3, 4, 2, 7, 5, 2, 4, 1, 2, 6, 13, 4, 2];
var barWidth = 6;
$('#sparkline-bar').sparkline(barPoints, {
type: 'bar',
height: $('#sparkline-bar').height() + 'px',
width: '100%',
barWidth: barWidth,
barSpacing: (barParent.width() - (barPoints.length * barWidth)) / barPoints.length,
barColor: 'rgba(0,0,0,.07)',
tooltipFormat: ' <span style="color: #ccc">●</span> {{value}}</span>'
});
};
DrawSparkline();
var resizeChart;
$(window).resize(function(e) {
clearTimeout(resizeChart);
resizeChart = setTimeout(function() {
DrawSparkline();
}, 300);
});
var flot1 = function() {
var data = [
[0, 50],
[1, 42],
[2, 40],
[3, 65],
[4, 48],
[5, 56],
[6, 80]
];
var data2 = [
[0, 25],
[1, 19],
[2, 20],
[3, 35],
[4, 23],
[5, 28],
[6, 45]
];
var dataset = [{
data: data,
color: "#E0E0E0",
lines: {
show: true,
fill: 0.4,
},
shadowSize: 0,
}, {
data: data,
color: "#E0E0E0",
lines: {
show: false,
},
points: {
show: true,
fill: true,
radius: 4,
fillColor: "#fff",
lineWidth: 2
},
curvedLines: {
apply: false,
},
shadowSize: 0
}, {
data: data2,
color: "#26A69A",
lines: {
show: true,
fill: 0.4,
},
shadowSize: 0,
}, {
data: data2,
color: "#26A69A",
lines: {
show: false,
},
curvedLines: {
apply: false,
},
points: {
show: true,
fill: true,
radius: 4,
fillColor: "#fff",
lineWidth: 2
},
shadowSize: 0
}];
var ticks = [
[0, "Mon"],
[1, "Tue"],
[2, "Wed"],
[3, "Thu"],
[4, "Fri"],
[5, "Sat"],
[6, "Sun"]
];
var plot1 = $.plot("#flotchart1", dataset, {
series: {
color: "#14D1BD",
lines: {
show: true,
fill: 0.2
},
shadowSize: 0,
curvedLines: {
apply: true,
active: true
}
},
xaxis: {
ticks: ticks,
},
legend: {
show: false
},
grid: {
color: "#AFAFAF",
hoverable: true,
borderWidth: 0,
backgroundColor: '#FFF'
},
tooltip: true,
tooltipOpts: {
content: "%yK",
defaultTheme: false
}
});
};
flot1();
var flotchart2 = function() {
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [],
totalPoints = 50;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 75) {
y = 75;
}
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
var plot4 = $.plot("#flotchart2", [getRandomData()], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 75
},
xaxis: {
min: 0,
max: 50
},
colors: ["#26A69A"],
legend: {
show: false
},
grid: {
color: "#AFAFAF",
hoverable: true,
borderWidth: 0,
backgroundColor: '#FFF'
},
tooltip: true,
tooltipOpts: {
content: "Y: %y",
defaultTheme: false
}
});
function update() {
plot4.setData([getRandomData()]);
plot4.draw();
setTimeout(update, 2000);
}
update();
};
flotchart2();
$(document).on("fixedSidebarClick", function() {
clearTimeout(resizeChart);
resizeChart = setTimeout(function() {
DrawSparkline();
}, 300);
});
});