You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
407 lines
12 KiB
407 lines
12 KiB
/*=========================================================================================
|
|
File Name: dashboard-analytics.js
|
|
Description: intialize advance cards
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
|
|
Version: 1.0
|
|
Author: Pixinvent
|
|
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
$(window).on('load', function() {
|
|
|
|
// Revenue - CharJS Line
|
|
Chart.defaults.derivedLine = Chart.defaults.line;
|
|
var draw = Chart.controllers.line.prototype.draw;
|
|
var custom = Chart.controllers.line.extend({
|
|
draw: function() {
|
|
draw.apply(this, arguments);
|
|
var ctx = this.chart.chart.ctx;
|
|
var _stroke = ctx.stroke;
|
|
ctx.stroke = function() {
|
|
ctx.save();
|
|
ctx.shadowColor = '#ffb6c0';
|
|
ctx.shadowBlur = 30;
|
|
ctx.shadowOffsetX = 0;
|
|
ctx.shadowOffsetY = 20;
|
|
_stroke.apply(this, arguments)
|
|
ctx.restore();
|
|
}
|
|
}
|
|
});
|
|
|
|
Chart.controllers.derivedLine = custom;
|
|
var ctx = document.querySelector("#thisYearRevenue").getContext('2d');
|
|
var thisYearRevenueChart = new Chart(ctx, {
|
|
type: 'derivedLine',
|
|
data: {
|
|
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
|
|
datasets: [{
|
|
data: [5000, 10000, 4000, 14500, 8000, 18500, 8000, 20000],
|
|
borderWidth: 4,
|
|
borderColor: '#FF4961',
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "#FF4961",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: false,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
displayColors: false,
|
|
callbacks: {
|
|
label: function(e, d) {
|
|
// return '${e.xLabel} : ${e.yLabel}'
|
|
},
|
|
title: function() {
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
display: false,
|
|
},
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
padding: 10,
|
|
stepSize: 5000,
|
|
max: 20000,
|
|
min: 0,
|
|
},
|
|
gridLines: {
|
|
display: true,
|
|
drawBorder: false,
|
|
lineWidth: 1,
|
|
zeroLineColor: '#e5e5e5',
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
var ctx2 = document.querySelector("#lastYearRevenue").getContext('2d');
|
|
var lastYearRevenueChart = new Chart(ctx2, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
|
|
datasets: [{
|
|
data: [7000, 15000, 6000, 10500, 3000, 11500, 4000, 10000],
|
|
borderWidth: 4,
|
|
borderDash: [8, 4],
|
|
borderColor: '#c3c3c3',
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderColor: "#c3c3c3",
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#c3c3c3",
|
|
pointRadius: 0,
|
|
pointHoverRadius: 6,
|
|
fill: false,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
displayColors: false,
|
|
callbacks: {
|
|
label: function(e, d) {
|
|
// return '${e.xLabel} : ${e.yLabel}'
|
|
},
|
|
title: function() {
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
display: false,
|
|
},
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
padding: 10,
|
|
stepSize: 5000,
|
|
max: 20000,
|
|
min: 0,
|
|
},
|
|
gridLines: {
|
|
display: true,
|
|
drawBorder: false,
|
|
zeroLineColor: '#e5e5e5',
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
// Hit Rate Chart - CharJS Doughnut
|
|
Chart.defaults.hitRateDoughnut = Chart.defaults.doughnut;
|
|
var draw = Chart.controllers.doughnut.prototype.draw;
|
|
var customDoughnut = Chart.controllers.doughnut.extend({
|
|
draw: function() {
|
|
draw.apply(this, arguments);
|
|
var ctx = this.chart.chart.ctx;
|
|
var _fill = ctx.fill;
|
|
var width = this.chart.width,
|
|
height = this.chart.height;
|
|
|
|
var fontSize = (height / 114).toFixed(2);
|
|
this.chart.ctx.font = fontSize + "em Verdana";
|
|
this.chart.ctx.textBaseline = "middle";
|
|
|
|
var text = "82%",
|
|
textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
|
|
textY = height / 2;
|
|
|
|
this.chart.ctx.fillText(text, textX, textY);
|
|
|
|
ctx.fill = function() {
|
|
ctx.save();
|
|
ctx.shadowColor = '#bbbbbb';
|
|
ctx.shadowBlur = 30;
|
|
ctx.shadowOffsetX = 0;
|
|
ctx.shadowOffsetY = 12;
|
|
_fill.apply(this, arguments)
|
|
ctx.restore();
|
|
}
|
|
}
|
|
});
|
|
|
|
Chart.controllers.hitRateDoughnut = customDoughnut;
|
|
var ctx = document.getElementById("hit-rate-doughnut");
|
|
var myDoughnutChart = new Chart(ctx, {
|
|
type: 'hitRateDoughnut',
|
|
data: {
|
|
labels: ["Remain", "Completed"],
|
|
datasets: [{
|
|
label: "Favourite",
|
|
backgroundColor: ["#28D094", "#FF4961"],
|
|
data: [18, 82],
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
title: {
|
|
display: false
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 16,
|
|
right: 16,
|
|
top: 16,
|
|
bottom: 16
|
|
}
|
|
},
|
|
cutoutPercentage: 92,
|
|
animation:{
|
|
animateScale : false,
|
|
duration: 2500
|
|
}
|
|
}
|
|
});
|
|
|
|
// Deals Chart - CharJS Doughnut
|
|
Chart.defaults.dealsDoughnut = Chart.defaults.doughnut;
|
|
var draw = Chart.controllers.doughnut.prototype.draw;
|
|
var customDealDoughnut = Chart.controllers.doughnut.extend({
|
|
draw: function() {
|
|
draw.apply(this, arguments);
|
|
var ctx = this.chart.chart.ctx;
|
|
var _fill = ctx.fill;
|
|
var width = this.chart.width,
|
|
height = this.chart.height;
|
|
|
|
var fontSize = (height / 114).toFixed(2);
|
|
this.chart.ctx.font = fontSize + "em Verdana";
|
|
this.chart.ctx.textBaseline = "middle";
|
|
|
|
var text = "76%",
|
|
textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
|
|
textY = height / 2;
|
|
|
|
this.chart.ctx.fillText(text, textX, textY);
|
|
|
|
ctx.fill = function() {
|
|
ctx.save();
|
|
ctx.shadowColor = '#FF4961';
|
|
ctx.shadowBlur = 30;
|
|
ctx.shadowOffsetX = 0;
|
|
ctx.shadowOffsetY = 12;
|
|
_fill.apply(this, arguments)
|
|
ctx.restore();
|
|
}
|
|
}
|
|
});
|
|
|
|
Chart.controllers.dealsDoughnut = customDealDoughnut;
|
|
var ctx = document.getElementById("deals-doughnut");
|
|
var myDoughnutChart = new Chart(ctx, {
|
|
type: 'dealsDoughnut',
|
|
data: {
|
|
labels: ["Remain", "Completed"],
|
|
datasets: [{
|
|
label: "Favourite",
|
|
borderWidth: 0,
|
|
backgroundColor: ["#ff7b8c", "#FFF"],
|
|
data: [24, 76],
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
title: {
|
|
display: false
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 16,
|
|
right: 16,
|
|
top: 16,
|
|
bottom: 16
|
|
}
|
|
},
|
|
cutoutPercentage: 94,
|
|
animation:{
|
|
animateScale : false,
|
|
duration: 5000
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//Total Earnings
|
|
|
|
var ctx3 = document.getElementById("earning-chart").getContext("2d");
|
|
|
|
// Chart Options
|
|
var earningOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
datasetStrokeWidth : 3,
|
|
pointDotStrokeWidth : 4,
|
|
tooltipFillColor: "rgba(0,0,0,0.8)",
|
|
legend: {
|
|
display: false,
|
|
position: 'bottom',
|
|
},
|
|
hover: {
|
|
mode: 'label'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false,
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
ticks: {
|
|
min: 0,
|
|
max: 70
|
|
},
|
|
}]
|
|
},
|
|
title: {
|
|
display: false,
|
|
fontColor: "#FFF",
|
|
fullWidth: false,
|
|
fontSize: 40,
|
|
text: '82%'
|
|
}
|
|
};
|
|
|
|
// Chart Data
|
|
var earningData = {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [28, 35, 36, 48, 46, 42, 60],
|
|
backgroundColor: 'rgba(255,117,136,0.12)',
|
|
borderColor: "#FF4961",
|
|
borderWidth: 3,
|
|
strokeColor : "#FF4961",
|
|
capBezierPoints: true,
|
|
pointColor : "#fff",
|
|
pointBorderColor: "#FF4961",
|
|
pointBackgroundColor: "#FFF",
|
|
pointBorderWidth: 3,
|
|
pointRadius: 5,
|
|
pointHoverBackgroundColor: "#FFF",
|
|
pointHoverBorderColor: "#FF4961",
|
|
pointHoverRadius: 7,
|
|
}]
|
|
};
|
|
|
|
var earningConfig = {
|
|
type: 'line',
|
|
|
|
// Chart Options
|
|
options : earningOptions,
|
|
|
|
// Chart Data
|
|
data : earningData
|
|
};
|
|
|
|
// Create the chart
|
|
var earningChart = new Chart(ctx3, earningConfig);
|
|
|
|
|
|
|
|
// Vector Maps
|
|
// -----------------------------------
|
|
$('#world-map-markers').vectorMap({
|
|
map: 'world_mill',
|
|
backgroundColor: '#fff',
|
|
zoomOnScroll: false,
|
|
series: {
|
|
regions: [{
|
|
values: visitorData,
|
|
scale: ['#ff7588', '#fddde1'],
|
|
normalizeFunction: 'polynomial'
|
|
}]
|
|
},
|
|
onRegionTipShow: function(e, el, code){
|
|
el.html(el.html()+' (Visitor - '+visitorData[code]+')');
|
|
}
|
|
});
|
|
|
|
|
|
//Sessions by Browser
|
|
// -----------------------------------
|
|
Morris.Donut({
|
|
element: 'sessions-browser-donut-chart',
|
|
data: [{
|
|
label: "Chrome",
|
|
value: 3500
|
|
}, {
|
|
label: "Firefox",
|
|
value: 2500
|
|
}, {
|
|
label: "Safari",
|
|
value: 2000
|
|
}, {
|
|
label: "Opera",
|
|
value: 1000
|
|
},{
|
|
label: "Internet Explorer",
|
|
value: 500
|
|
} ],
|
|
resize: true,
|
|
colors: ['#40C7CA', '#FF7588', '#2DCEE3', '#FFA87D', '#16D39A']
|
|
});
|
|
}); |