TRF Certest first commit
This commit is contained in:
@@ -0,0 +1,155 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
new PerfectScrollbar(".app-container"),
|
||||
new PerfectScrollbar(".header-message-list"),
|
||||
new PerfectScrollbar(".header-notifications-list"),
|
||||
|
||||
|
||||
$(".mobile-search-icon").on("click", function() {
|
||||
$(".search-bar").addClass("full-search-bar")
|
||||
}),
|
||||
|
||||
$(".search-close").on("click", function() {
|
||||
$(".search-bar").removeClass("full-search-bar")
|
||||
}),
|
||||
|
||||
$(".mobile-toggle-menu").on("click", function() {
|
||||
$(".wrapper").addClass("toggled")
|
||||
}),
|
||||
|
||||
|
||||
|
||||
|
||||
$(".dark-mode").on("click", function() {
|
||||
|
||||
if($(".dark-mode-icon i").attr("class") == 'bx bx-sun') {
|
||||
$(".dark-mode-icon i").attr("class", "bx bx-moon");
|
||||
$("html").attr("class", "light-theme")
|
||||
} else {
|
||||
$(".dark-mode-icon i").attr("class", "bx bx-sun");
|
||||
$("html").attr("class", "dark-theme")
|
||||
}
|
||||
|
||||
}),
|
||||
|
||||
|
||||
$(".toggle-icon").click(function() {
|
||||
$(".wrapper").hasClass("toggled") ? ($(".wrapper").removeClass("toggled"), $(".sidebar-wrapper").unbind("hover")) : ($(".wrapper").addClass("toggled"), $(".sidebar-wrapper").hover(function() {
|
||||
$(".wrapper").addClass("sidebar-hovered")
|
||||
}, function() {
|
||||
$(".wrapper").removeClass("sidebar-hovered")
|
||||
}))
|
||||
}),
|
||||
$(document).ready(function() {
|
||||
$(window).on("scroll", function() {
|
||||
$(this).scrollTop() > 300 ? $(".back-to-top").fadeIn() : $(".back-to-top").fadeOut()
|
||||
}), $(".back-to-top").on("click", function() {
|
||||
return $("html, body").animate({
|
||||
scrollTop: 0
|
||||
}, 600), !1
|
||||
})
|
||||
}),
|
||||
|
||||
$(function() {
|
||||
for (var e = window.location, o = $(".metismenu li a").filter(function() {
|
||||
return this.href == e
|
||||
}).addClass("").parent().addClass("mm-active"); o.is("li");) o = o.parent("").addClass("mm-show").parent("").addClass("mm-active")
|
||||
}),
|
||||
|
||||
|
||||
$(function() {
|
||||
$("#menu").metisMenu()
|
||||
}),
|
||||
|
||||
$(".chat-toggle-btn").on("click", function() {
|
||||
$(".chat-wrapper").toggleClass("chat-toggled")
|
||||
}), $(".chat-toggle-btn-mobile").on("click", function() {
|
||||
$(".chat-wrapper").removeClass("chat-toggled")
|
||||
}),
|
||||
|
||||
|
||||
$(".email-toggle-btn").on("click", function() {
|
||||
$(".email-wrapper").toggleClass("email-toggled")
|
||||
}), $(".email-toggle-btn-mobile").on("click", function() {
|
||||
$(".email-wrapper").removeClass("email-toggled")
|
||||
}), $(".compose-mail-btn").on("click", function() {
|
||||
$(".compose-mail-popup").show()
|
||||
}), $(".compose-mail-close").on("click", function() {
|
||||
$(".compose-mail-popup").hide()
|
||||
}),
|
||||
|
||||
|
||||
$(".switcher-btn").on("click", function() {
|
||||
$(".switcher-wrapper").toggleClass("switcher-toggled")
|
||||
}), $(".close-switcher").on("click", function() {
|
||||
$(".switcher-wrapper").removeClass("switcher-toggled")
|
||||
}), $("#lightmode").on("click", function() {
|
||||
$("html").attr("class", "light-theme")
|
||||
}), $("#darkmode").on("click", function() {
|
||||
$("html").attr("class", "dark-theme")
|
||||
}), $("#semidark").on("click", function() {
|
||||
$("html").attr("class", "semi-dark")
|
||||
}), $("#minimaltheme").on("click", function() {
|
||||
$("html").attr("class", "minimal-theme")
|
||||
}), $("#headercolor1").on("click", function() {
|
||||
$("html").addClass("color-header headercolor1"), $("html").removeClass("headercolor2 headercolor3 headercolor4 headercolor5 headercolor6 headercolor7 headercolor8")
|
||||
}), $("#headercolor2").on("click", function() {
|
||||
$("html").addClass("color-header headercolor2"), $("html").removeClass("headercolor1 headercolor3 headercolor4 headercolor5 headercolor6 headercolor7 headercolor8")
|
||||
}), $("#headercolor3").on("click", function() {
|
||||
$("html").addClass("color-header headercolor3"), $("html").removeClass("headercolor1 headercolor2 headercolor4 headercolor5 headercolor6 headercolor7 headercolor8")
|
||||
}), $("#headercolor4").on("click", function() {
|
||||
$("html").addClass("color-header headercolor4"), $("html").removeClass("headercolor1 headercolor2 headercolor3 headercolor5 headercolor6 headercolor7 headercolor8")
|
||||
}), $("#headercolor5").on("click", function() {
|
||||
$("html").addClass("color-header headercolor5"), $("html").removeClass("headercolor1 headercolor2 headercolor4 headercolor3 headercolor6 headercolor7 headercolor8")
|
||||
}), $("#headercolor6").on("click", function() {
|
||||
$("html").addClass("color-header headercolor6"), $("html").removeClass("headercolor1 headercolor2 headercolor4 headercolor5 headercolor3 headercolor7 headercolor8")
|
||||
}), $("#headercolor7").on("click", function() {
|
||||
$("html").addClass("color-header headercolor7"), $("html").removeClass("headercolor1 headercolor2 headercolor4 headercolor5 headercolor6 headercolor3 headercolor8")
|
||||
}), $("#headercolor8").on("click", function() {
|
||||
$("html").addClass("color-header headercolor8"), $("html").removeClass("headercolor1 headercolor2 headercolor4 headercolor5 headercolor6 headercolor7 headercolor3")
|
||||
})
|
||||
|
||||
// sidebar colors
|
||||
$('#sidebarcolor1').click(theme1);
|
||||
$('#sidebarcolor2').click(theme2);
|
||||
$('#sidebarcolor3').click(theme3);
|
||||
$('#sidebarcolor4').click(theme4);
|
||||
$('#sidebarcolor5').click(theme5);
|
||||
$('#sidebarcolor6').click(theme6);
|
||||
$('#sidebarcolor7').click(theme7);
|
||||
$('#sidebarcolor8').click(theme8);
|
||||
|
||||
function theme1() {
|
||||
$('html').attr('class', 'color-sidebar sidebarcolor1');
|
||||
}
|
||||
|
||||
function theme2() {
|
||||
$('html').attr('class', 'color-sidebar sidebarcolor2');
|
||||
}
|
||||
|
||||
function theme3() {
|
||||
$('html').attr('class', 'color-sidebar sidebarcolor3');
|
||||
}
|
||||
|
||||
function theme4() {
|
||||
$('html').attr('class', 'color-sidebar sidebarcolor4');
|
||||
}
|
||||
|
||||
function theme5() {
|
||||
$('html').attr('class', 'color-sidebar sidebarcolor5');
|
||||
}
|
||||
|
||||
function theme6() {
|
||||
$('html').attr('class', 'color-sidebar sidebarcolor6');
|
||||
}
|
||||
|
||||
function theme7() {
|
||||
$('html').attr('class', 'color-sidebar sidebarcolor7');
|
||||
}
|
||||
|
||||
function theme8() {
|
||||
$('html').attr('class', 'color-sidebar sidebarcolor8');
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,317 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
|
||||
// chart 1
|
||||
|
||||
var ctx = document.getElementById("chart1").getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#6078ea');
|
||||
gradientStroke1.addColorStop(1, '#17c5ea');
|
||||
|
||||
var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#ff8359');
|
||||
gradientStroke2.addColorStop(1, '#ffdf40');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
datasets: [{
|
||||
label: 'Laptops',
|
||||
data: [65, 59, 80, 81,65, 59, 80, 81,59, 80, 81,65],
|
||||
borderColor: gradientStroke1,
|
||||
backgroundColor: gradientStroke1,
|
||||
hoverBackgroundColor: gradientStroke1,
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
borderRadius: 20,
|
||||
borderWidth: 0
|
||||
}, {
|
||||
label: 'Mobiles',
|
||||
data: [28, 48, 40, 19,28, 48, 40, 19,40, 19,28, 48],
|
||||
borderColor: gradientStroke2,
|
||||
backgroundColor: gradientStroke2,
|
||||
hoverBackgroundColor: gradientStroke2,
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
borderRadius: 20,
|
||||
borderWidth: 0
|
||||
}]
|
||||
},
|
||||
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.8,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// chart 2
|
||||
|
||||
var ctx = document.getElementById("chart2").getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#fc4a1a');
|
||||
gradientStroke1.addColorStop(1, '#f7b733');
|
||||
|
||||
var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#4776e6');
|
||||
gradientStroke2.addColorStop(1, '#8e54e9');
|
||||
|
||||
|
||||
var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke3.addColorStop(0, '#ee0979');
|
||||
gradientStroke3.addColorStop(1, '#ff6a00');
|
||||
|
||||
var gradientStroke4 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke4.addColorStop(0, '#42e695');
|
||||
gradientStroke4.addColorStop(1, '#3bb2b8');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ["Jeans", "T-Shirts", "Shoes", "Lingerie"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke1,
|
||||
gradientStroke2,
|
||||
gradientStroke3,
|
||||
gradientStroke4
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke1,
|
||||
gradientStroke2,
|
||||
gradientStroke3,
|
||||
gradientStroke4
|
||||
],
|
||||
data: [25, 80, 25, 25],
|
||||
borderWidth: [1, 1, 1, 1]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
cutout: 82,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// worl map
|
||||
|
||||
jQuery('#geographic-map-2').vectorMap(
|
||||
{
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#818181',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 1,
|
||||
zoomOnScroll: false,
|
||||
color: '#009efb',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#008cff'
|
||||
}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 9,
|
||||
'fill': '#fff',
|
||||
'fill-opacity':1,
|
||||
'stroke': '#000',
|
||||
'stroke-width' : 5,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
},
|
||||
enableZoom: true,
|
||||
hoverColor: '#009efb',
|
||||
markers : [{
|
||||
latLng : [21.00, 78.00],
|
||||
name : 'Lorem Ipsum Dollar'
|
||||
|
||||
}],
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
scaleColors: ['#b6d6ff', '#005ace'],
|
||||
selectedColor: '#c9dfaf',
|
||||
selectedRegions: [],
|
||||
showTooltip: true,
|
||||
});
|
||||
|
||||
|
||||
// chart 3
|
||||
|
||||
var ctx = document.getElementById('chart3').getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#00b09b');
|
||||
gradientStroke1.addColorStop(1, '#96c93d');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Facebook',
|
||||
data: [5, 30, 16, 23, 8, 14, 2],
|
||||
backgroundColor: [
|
||||
gradientStroke1
|
||||
],
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: 'rgb(21 202 32 / 15%)', // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
tension: 0.4,
|
||||
borderColor: [
|
||||
gradientStroke1
|
||||
],
|
||||
borderWidth: 3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// chart 4
|
||||
|
||||
var ctx = document.getElementById("chart4").getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#ee0979');
|
||||
gradientStroke1.addColorStop(1, '#ff6a00');
|
||||
|
||||
var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#283c86');
|
||||
gradientStroke2.addColorStop(1, '#39bd3c');
|
||||
|
||||
var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke3.addColorStop(0, '#7f00ff');
|
||||
gradientStroke3.addColorStop(1, '#e100ff');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ["Completed", "Pending", "Process"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke1,
|
||||
gradientStroke2,
|
||||
gradientStroke3
|
||||
],
|
||||
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke1,
|
||||
gradientStroke2,
|
||||
gradientStroke3
|
||||
],
|
||||
|
||||
data: [50, 50, 50],
|
||||
borderWidth: [1, 1, 1]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
cutout: 95,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 5
|
||||
|
||||
var ctx = document.getElementById("chart5").getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#f54ea2');
|
||||
gradientStroke1.addColorStop(1, '#ff7676');
|
||||
|
||||
var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#42e695');
|
||||
gradientStroke2.addColorStop(1, '#3bb2b8');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5],
|
||||
datasets: [{
|
||||
label: 'Clothing',
|
||||
data: [40, 30, 60, 35, 60],
|
||||
borderColor: gradientStroke1,
|
||||
backgroundColor: gradientStroke1,
|
||||
hoverBackgroundColor: gradientStroke1,
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
borderWidth: 1
|
||||
}, {
|
||||
label: 'Electronic',
|
||||
data: [50, 60, 40, 70, 35],
|
||||
borderColor: gradientStroke2,
|
||||
backgroundColor: gradientStroke2,
|
||||
hoverBackgroundColor: gradientStroke2,
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.8,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
@@ -0,0 +1,474 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
|
||||
// chart 1
|
||||
var ctx = document.getElementById('chart1').getContext('2d');
|
||||
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, 'rgba(255, 255, 0, 0.5)');
|
||||
gradientStroke1.addColorStop(1, 'rgba(233, 30, 99, 0.0)');
|
||||
|
||||
var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#ffff00');
|
||||
gradientStroke2.addColorStop(1, '#e91e63');
|
||||
|
||||
|
||||
var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke3.addColorStop(0, 'rgba(0, 114, 255, 0.5)');
|
||||
gradientStroke3.addColorStop(1, 'rgba(0, 200, 255, 0.0)');
|
||||
|
||||
var gradientStroke4 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke4.addColorStop(0, '#0072ff');
|
||||
gradientStroke4.addColorStop(1, '#00c8ff');
|
||||
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
|
||||
datasets: [{
|
||||
label: 'Visits',
|
||||
data: [6, 20, 14, 12, 17, 8, 10],
|
||||
borderColor: gradientStroke2,
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: gradientStroke1, // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
pointRadius :"0",
|
||||
pointHoverRadius:"0",
|
||||
tension: 0.4,
|
||||
borderWidth: 3
|
||||
}, {
|
||||
label: 'Sales',
|
||||
data: [5, 30, 16, 23, 8, 14, 11],
|
||||
borderColor: gradientStroke4,
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: gradientStroke3, // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
pointRadius :"0",
|
||||
pointHoverRadius:"0",
|
||||
tension: 0.4,
|
||||
borderWidth: 3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
fontColor: '#585757',
|
||||
boxWidth: 40
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: '#585757'
|
||||
},
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "rgba(0, 0, 0, 0.07)"
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: '#585757'
|
||||
},
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "rgba(0, 0, 0, 0.07)"
|
||||
},
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 2
|
||||
|
||||
var ctx = document.getElementById('chart2').getContext('2d');
|
||||
|
||||
var gradientStroke = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke.addColorStop(0, '#ee0979');
|
||||
gradientStroke.addColorStop(1, '#ff6a00');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
|
||||
datasets: [{
|
||||
label: 'Sales',
|
||||
data: [9, 7, 14, 10, 12, 8],
|
||||
backgroundColor: gradientStroke,
|
||||
hoverBackgroundColor: gradientStroke,
|
||||
borderColor: "#fff",
|
||||
pointRadius :6,
|
||||
pointHoverRadius :6,
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
borderWidth: 2,
|
||||
borderRadius: 20,
|
||||
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.7,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// chart 3
|
||||
|
||||
Morris.Donut({
|
||||
element: 'chart3',
|
||||
data: [{
|
||||
label: "Samsung",
|
||||
value: 15,
|
||||
|
||||
}, {
|
||||
label: "Nokia",
|
||||
value: 30
|
||||
}, {
|
||||
label: "Apple",
|
||||
value: 20
|
||||
}],
|
||||
resize: true,
|
||||
colors:['#008cff', '#15ca20', '#fd3550']
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 4
|
||||
|
||||
$('#chart4').sparkline([5,8,7,10,9,10,8,6,4,6,8,7,6,8,9,10,8,6,4,5,8,7,10,9,5,8,7,9,5,4,8,7,10,9,5,8,7,9,5,4], {
|
||||
type: 'bar',
|
||||
height: '25',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '2',
|
||||
barColor: '#008cff'
|
||||
});
|
||||
|
||||
|
||||
// chart 5
|
||||
|
||||
$('#chart5').sparkline([5,8,7,10,9,10,8,6,4,6,8,7,6,8,9,10,8,6,4,5,8,7,10,9,5,8,7,9,5,4,8,7,10,9,5,8,7,9,5,4], {
|
||||
type: 'bar',
|
||||
height: '25',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '2',
|
||||
barColor: '#fd3550'
|
||||
});
|
||||
|
||||
|
||||
// chart 6
|
||||
|
||||
$('#chart6').sparkline([5,8,7,10,9,10,8,6,4,6,8,7,6,8,9,10,8,6,4,5,8,7,10,9,5,8,7,9,5,4,8,7,10,9,5,8,7,9,5,4], {
|
||||
type: 'bar',
|
||||
height: '25',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '2',
|
||||
barColor: '#15ca20'
|
||||
});
|
||||
|
||||
// chart 7
|
||||
|
||||
$('#chart7').sparkline([5,8,7,10,9,10,8,6,4,6,8,7,6,8,9,10,8,6,4,5,8,7,10,9,5,8,7,9,5,4,8,7,10,9,5,8,7,9,5,4], {
|
||||
type: 'bar',
|
||||
height: '25',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '2',
|
||||
barColor: '#ff9700'
|
||||
});
|
||||
|
||||
// chart 8
|
||||
|
||||
$('#chart8').sparkline([5,8,7,10,9,10,8,6,4,6,8,7,6,8,9,10,8,6,4,5,8,7,10,9,5,8,7,9,5,4,8,7,10,9,5,8,7,9,5,4], {
|
||||
type: 'bar',
|
||||
height: '25',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '2',
|
||||
barColor: '#0dceec'
|
||||
});
|
||||
|
||||
// chart 9
|
||||
|
||||
$('#chart9').sparkline([5,8,7,10,9,10,8,6,4,6,8,7,6,8,9,10,8,6,4,5,8,7,10,9,5,8,7,9,5,4,8,7,10,9,5,8,7,9,5,4], {
|
||||
type: 'bar',
|
||||
height: '25',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '2',
|
||||
barColor: '#673ab7'
|
||||
});
|
||||
|
||||
|
||||
// chart 10
|
||||
|
||||
var ctx = document.getElementById('chart10').getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, 'rgb(255 65 108 / 30%)');
|
||||
gradientStroke1.addColorStop(1, 'rgba(255 75 43 / 0%)');
|
||||
|
||||
var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#ff416c');
|
||||
gradientStroke2.addColorStop(1, '#ff4b2b');
|
||||
|
||||
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Facebook',
|
||||
data: [5, 30, 16, 23, 8, 14, 2],
|
||||
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: gradientStroke1, // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
tension: 0.4,
|
||||
pointRadius :"0",
|
||||
borderColor: [
|
||||
gradientStroke2
|
||||
],
|
||||
borderWidth: 3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
barPercentage: 0.7,
|
||||
categoryPercentage: 0.45,
|
||||
plugins: {
|
||||
legend: {
|
||||
maxWidth: 20,
|
||||
boxHeight: 20,
|
||||
position:'bottom',
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: false,
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
stacked: false,
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// chart 11
|
||||
|
||||
var ctx = document.getElementById('chart11').getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, 'rgba(255, 255, 0, 0.5)');
|
||||
gradientStroke1.addColorStop(1, 'rgba(233, 30, 99, 0.0)');
|
||||
|
||||
var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#ffff00');
|
||||
gradientStroke2.addColorStop(1, '#e91e63');
|
||||
|
||||
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Facebook',
|
||||
data: [5, 30, 16, 23, 8, 14, 2],
|
||||
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: gradientStroke1, // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
tension: 0.4,
|
||||
pointRadius :"0",
|
||||
borderColor: [
|
||||
gradientStroke2
|
||||
],
|
||||
borderWidth: 3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
barPercentage: 0.7,
|
||||
categoryPercentage: 0.45,
|
||||
plugins: {
|
||||
legend: {
|
||||
maxWidth: 20,
|
||||
boxHeight: 20,
|
||||
position:'bottom',
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: false,
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
stacked: false,
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// chart 12
|
||||
|
||||
var ctx = document.getElementById('chart12').getContext('2d');
|
||||
|
||||
|
||||
var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke3.addColorStop(0, 'rgb(0 176 155 / 40%)');
|
||||
gradientStroke3.addColorStop(1, 'rgb(150 201 61 / 0%)');
|
||||
|
||||
var gradientStroke4 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke4.addColorStop(0, '#00b09b');
|
||||
gradientStroke4.addColorStop(1, '#00b09b');
|
||||
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Facebook',
|
||||
data: [5, 30, 16, 23, 8, 14, 2],
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: gradientStroke3, // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
tension: 0.4,
|
||||
pointRadius :"0",
|
||||
borderColor: [
|
||||
gradientStroke4
|
||||
],
|
||||
borderWidth: 3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
barPercentage: 0.7,
|
||||
categoryPercentage: 0.45,
|
||||
plugins: {
|
||||
legend: {
|
||||
maxWidth: 20,
|
||||
boxHeight: 20,
|
||||
position:'bottom',
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: false,
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
stacked: false,
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// worl map
|
||||
|
||||
jQuery('#dashboard-map').vectorMap(
|
||||
{
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#818181',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 1,
|
||||
zoomOnScroll: false,
|
||||
color: '#009efb',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#008cff'
|
||||
}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 9,
|
||||
'fill': '#fff',
|
||||
'fill-opacity':1,
|
||||
'stroke': '#000',
|
||||
'stroke-width' : 5,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
},
|
||||
enableZoom: true,
|
||||
hoverColor: '#009efb',
|
||||
markers : [{
|
||||
latLng : [21.00, 78.00],
|
||||
name : 'Lorem Ipsum Dollar'
|
||||
|
||||
}],
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
scaleColors: ['#b6d6ff', '#005ace'],
|
||||
selectedColor: '#c9dfaf',
|
||||
selectedRegions: [],
|
||||
showTooltip: true,
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,537 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
// chart 1
|
||||
$('#chart1').sparkline([5,8,7,10,9,10,8,6,4,6,8,7,6,8], {
|
||||
type: 'bar',
|
||||
height: '35',
|
||||
barWidth: '3',
|
||||
resize: true,
|
||||
barSpacing: '3',
|
||||
barColor: '#fff'
|
||||
});
|
||||
|
||||
|
||||
// chart 2
|
||||
$("#chart2").sparkline([0,5,3,7,5,10,3,6,5,10], {
|
||||
type: 'line',
|
||||
width: '80',
|
||||
height: '40',
|
||||
lineWidth: '2',
|
||||
lineColor: '#fff',
|
||||
fillColor: 'transparent',
|
||||
spotColor: '#fff',
|
||||
})
|
||||
|
||||
|
||||
// chart 3
|
||||
$("#chart3").sparkline([2,3,4,5,4,3,2,3,4,5,6,5,4,3,4,5], {
|
||||
type: 'discrete',
|
||||
width: '75',
|
||||
height: '40',
|
||||
lineColor: '#fff',
|
||||
lineHeight: 22
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// chart 4
|
||||
$("#chart4").sparkline([5,6,7,9,9,5,3,2,2,4,6,7], {
|
||||
type: 'line',
|
||||
width: '100',
|
||||
height: '25',
|
||||
lineWidth: '2',
|
||||
lineColor: '#ffffff',
|
||||
fillColor: 'transparent'
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// chart 5
|
||||
var ctx = document.getElementById('chart5').getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#17ead9');
|
||||
gradientStroke1.addColorStop(1, '#6078ea');
|
||||
|
||||
var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke2.addColorStop(0, '#f80759');
|
||||
gradientStroke2.addColorStop(1, '#bc4e9c');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
datasets: [{
|
||||
label: 'Downloads',
|
||||
data: [0, 30, 60, 25, 60, 25, 50, 0],
|
||||
pointBorderWidth: 2,
|
||||
pointBackgroundColor: 'transparent',
|
||||
pointHoverBackgroundColor: gradientStroke1,
|
||||
borderColor: gradientStroke1,
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: gradientStroke1, // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
tension: 0.4,
|
||||
borderWidth: 2
|
||||
}, {
|
||||
label: 'Earnings',
|
||||
data: [0, 60, 25, 80, 35, 75, 30, 0],
|
||||
pointBorderWidth: 2,
|
||||
pointBackgroundColor: 'transparent',
|
||||
pointHoverBackgroundColor: gradientStroke2,
|
||||
borderColor: gradientStroke2,
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: gradientStroke2, // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
tension: 0.4,
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: '#585757'
|
||||
},
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "rgba(0, 0, 0, 0.07)"
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: '#585757'
|
||||
},
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "rgba(0, 0, 0, 0.07)"
|
||||
},
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// chart 6
|
||||
var ctx = document.getElementById("chart6").getContext('2d');
|
||||
|
||||
var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke3.addColorStop(0, '#42e695');
|
||||
gradientStroke3.addColorStop(1, '#3bb2b8');
|
||||
|
||||
var gradientStroke4 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke4.addColorStop(0, ' #7f00ff');
|
||||
gradientStroke4.addColorStop(0.5, '#e100ff');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
datasets: [{
|
||||
label: 'Laptops',
|
||||
data: [40, 30, 60, 35, 60, 25, 50, 40],
|
||||
borderColor: gradientStroke3,
|
||||
backgroundColor: gradientStroke3,
|
||||
hoverBackgroundColor: gradientStroke3,
|
||||
pointRadius: 0,
|
||||
borderRadius: 20,
|
||||
fill: false,
|
||||
borderWidth: 1
|
||||
}, {
|
||||
label: 'Mobiles',
|
||||
data: [50, 60, 40, 70, 35, 75, 30, 20],
|
||||
borderColor: gradientStroke4,
|
||||
backgroundColor: gradientStroke4,
|
||||
hoverBackgroundColor: gradientStroke4,
|
||||
pointRadius: 0,
|
||||
borderRadius: 20,
|
||||
fill: false,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 0.8,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 7
|
||||
var ctx = document.getElementById('chart7').getContext('2d');
|
||||
|
||||
var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke1.addColorStop(0, '#ee0979');
|
||||
gradientStroke1.addColorStop(1, '#ff6a00');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7],
|
||||
datasets: [{
|
||||
label: 'Views',
|
||||
data: [3, 30, 10, 10, 22, 12, 5],
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBackgroundColor: gradientStroke1,
|
||||
fill: {
|
||||
target: 'origin',
|
||||
above: gradientStroke1, // Area will be red above the origin
|
||||
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
|
||||
},
|
||||
borderColor: gradientStroke1,
|
||||
tension: 0.4,
|
||||
pointRadius :"0",
|
||||
borderWidth: 3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// world map
|
||||
|
||||
jQuery('#dashboard-map').vectorMap(
|
||||
{
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#818181',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 1,
|
||||
zoomOnScroll: false,
|
||||
color: '#009efb',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#15ca20'
|
||||
}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 9,
|
||||
'fill': '#fff',
|
||||
'fill-opacity':1,
|
||||
'stroke': '#000',
|
||||
'stroke-width' : 5,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
},
|
||||
enableZoom: true,
|
||||
hoverColor: '#009efb',
|
||||
markers : [{
|
||||
latLng : [21.00, 78.00],
|
||||
name : 'I Love My India'
|
||||
|
||||
}],
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
scaleColors: ['#b6d6ff', '#005ace'],
|
||||
selectedColor: '#c9dfaf',
|
||||
selectedRegions: [],
|
||||
showTooltip: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
// chart 8
|
||||
$("#chart8").sparkline([3,5,3,7,5,10,3,6,5,0], {
|
||||
type: 'line',
|
||||
width: '150',
|
||||
height: '45',
|
||||
lineWidth: '2',
|
||||
lineColor: '#dd4b39',
|
||||
fillColor: 'rgba(221, 75, 57, 0.5)',
|
||||
spotColor: '#dd4b39',
|
||||
});
|
||||
|
||||
// chart 9
|
||||
$("#chart9").sparkline([3,5,3,7,5,10,3,6,5,0], {
|
||||
type: 'line',
|
||||
width: '150',
|
||||
height: '45',
|
||||
lineWidth: '2',
|
||||
lineColor: '#3b5998',
|
||||
fillColor: 'rgba(59, 89, 152, 0.5)',
|
||||
spotColor: '#3b5998',
|
||||
});
|
||||
|
||||
|
||||
// chart 10
|
||||
$("#chart10").sparkline([3,5,3,7,5,10,3,6,5,0], {
|
||||
type: 'line',
|
||||
width: '150',
|
||||
height: '45',
|
||||
lineWidth: '2',
|
||||
lineColor: '#55acee',
|
||||
fillColor: 'rgba(85, 172, 238, 0.5)',
|
||||
spotColor: '#55acee',
|
||||
});
|
||||
|
||||
|
||||
// chart 11
|
||||
$("#chart11").sparkline([3,5,3,7,5,10,3,6,5,0], {
|
||||
type: 'line',
|
||||
width: '150',
|
||||
height: '45',
|
||||
lineWidth: '2',
|
||||
lineColor: '#0976b4',
|
||||
fillColor: 'rgba(9, 118, 180, 0.5)',
|
||||
spotColor: '#0976b4',
|
||||
});
|
||||
|
||||
|
||||
// chart 12
|
||||
$("#chart12").sparkline([3,5,3,7,5,10,3,6,5,0], {
|
||||
type: 'line',
|
||||
width: '150',
|
||||
height: '45',
|
||||
lineWidth: '2',
|
||||
lineColor: '#1769ff',
|
||||
fillColor: 'rgba(23, 105, 255, 0.5)',
|
||||
spotColor: '#1769ff',
|
||||
});
|
||||
|
||||
|
||||
// chart 13
|
||||
$("#chart13").sparkline([3,5,3,7,5,10,3,6,5,0], {
|
||||
type: 'line',
|
||||
width: '150',
|
||||
height: '45',
|
||||
lineWidth: '2',
|
||||
lineColor: '#ea4c89',
|
||||
fillColor: 'rgba(234, 76, 137, 0.5)',
|
||||
spotColor: '#ea4c89',
|
||||
});
|
||||
|
||||
|
||||
// chart 14
|
||||
$("#chart14").sparkline([3,5,3,7,5,10,3,6,5,0], {
|
||||
type: 'line',
|
||||
width: '150',
|
||||
height: '45',
|
||||
lineWidth: '2',
|
||||
lineColor: '#42e695',
|
||||
fillColor: 'rgba(66 230 149 / 32%)',
|
||||
spotColor: '#42e695',
|
||||
});
|
||||
|
||||
|
||||
// chart 15
|
||||
$('#chart15').sparkline([5,8,7,10,9,10,8,6,4,6,8,7,6,8,10,8,6,0], {
|
||||
type: 'bar',
|
||||
width: '150',
|
||||
height: '45',
|
||||
barWidth: '3',
|
||||
resize: true,
|
||||
barSpacing: '5',
|
||||
barColor: '#fff'
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 16
|
||||
var ctx = document.getElementById("chart16").getContext('2d');
|
||||
|
||||
var gradientStroke5 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke5.addColorStop(0, '#7f00ff');
|
||||
gradientStroke5.addColorStop(1, '#e100ff');
|
||||
|
||||
var gradientStroke6 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke6.addColorStop(0, '#fc4a1a');
|
||||
gradientStroke6.addColorStop(1, '#f7b733');
|
||||
|
||||
|
||||
var gradientStroke7 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke7.addColorStop(0, '#283c86');
|
||||
gradientStroke7.addColorStop(1, '#45a247');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ["Samsung", "Apple", "Nokia"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke5,
|
||||
gradientStroke6,
|
||||
gradientStroke7
|
||||
],
|
||||
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke5,
|
||||
gradientStroke6,
|
||||
gradientStroke7
|
||||
],
|
||||
|
||||
data: [50, 50, 50]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// chart 17
|
||||
var ctx = document.getElementById("chart17").getContext('2d');
|
||||
|
||||
var gradientStroke8 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke8.addColorStop(0, '#42e695');
|
||||
gradientStroke8.addColorStop(1, '#3bb2b8');
|
||||
|
||||
var gradientStroke9 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke9.addColorStop(0, '#4776e6');
|
||||
gradientStroke9.addColorStop(1, '#8e54e9');
|
||||
|
||||
|
||||
var gradientStroke10 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke10.addColorStop(0, '#ee0979');
|
||||
gradientStroke10.addColorStop(1, '#ff6a00');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'polarArea',
|
||||
data: {
|
||||
labels: ["Gross Profit", "Revenue", "Expense"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke8,
|
||||
gradientStroke9,
|
||||
gradientStroke10
|
||||
],
|
||||
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke8,
|
||||
gradientStroke9,
|
||||
gradientStroke10
|
||||
],
|
||||
data: [5, 8, 7]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// chart 18
|
||||
var ctx = document.getElementById("chart18").getContext('2d');
|
||||
|
||||
var gradientStroke11 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke11.addColorStop(0, '#ba8b02');
|
||||
gradientStroke11.addColorStop(1, '#181818');
|
||||
|
||||
var gradientStroke12 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke12.addColorStop(0, '#2c3e50');
|
||||
gradientStroke12.addColorStop(1, '#fd746c');
|
||||
|
||||
|
||||
var gradientStroke13 = ctx.createLinearGradient(0, 0, 0, 300);
|
||||
gradientStroke13.addColorStop(0, '#ff0099');
|
||||
gradientStroke13.addColorStop(1, '#493240');
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ["Jeans", "T-Shirts", "Shoes"],
|
||||
datasets: [{
|
||||
backgroundColor: [
|
||||
gradientStroke11,
|
||||
gradientStroke12,
|
||||
gradientStroke13
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
gradientStroke11,
|
||||
gradientStroke12,
|
||||
gradientStroke13
|
||||
],
|
||||
data: [25, 25, 25]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Index Notification
|
||||
|
||||
function info_noti(){
|
||||
Lobibox.notify('default', {
|
||||
pauseDelayOnHover: true,
|
||||
continueDelayOnInactiveTab: false,
|
||||
size: 'mini',
|
||||
position: 'top right',
|
||||
icon: 'bx bx-info-circle',
|
||||
msg: 'This is Gradient Color Dashboard'
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,627 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
var e = {
|
||||
series: [{
|
||||
name: "Total Users",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "line",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#17a00e"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#17a00e"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#17a00e"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart1"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Page Views",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#f41127"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#f41127"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "35%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 0,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#f41127"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart2"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Avg. Session Duration",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "line",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#0d6efd"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#0d6efd"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#0d6efd"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart3"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Bounce Rate",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#ffb207"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#ffb207"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "35%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 0,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#ffb207"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart4"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Total Orders",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#f41127"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#f41127"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#f41127"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart5"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Total Income",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#0d6efd"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#0d6efd"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#0d6efd"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart6"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Total Users",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#ffb207"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#ffb207"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#ffb207"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart7"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Comments",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#17a00e"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#17a00e"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#17a00e"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart8"), e).render()
|
||||
});
|
||||
Reference in New Issue
Block a user