467 lines
6.6 KiB
JavaScript
467 lines
6.6 KiB
JavaScript
var options = {
|
|
series: [80],
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
},
|
|
chart: {
|
|
height: 100,
|
|
width: 70,
|
|
type: 'radialBar',
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: '50%',
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false,
|
|
color: '#fff'
|
|
},
|
|
value: {
|
|
show: true,
|
|
color: '#333',
|
|
offsetY: 5,
|
|
fontSize: '15px'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
colors: ['#ecf0f4'],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
type: 'diagonal1',
|
|
shadeIntensity: 0.8,
|
|
gradientToColors: ['#1b00ff'],
|
|
inverseColors: false,
|
|
opacityFrom: [1, 0.2],
|
|
opacityTo: 1,
|
|
stops: [0, 100],
|
|
}
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
}
|
|
};
|
|
|
|
var options2 = {
|
|
series: [70],
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
},
|
|
chart: {
|
|
height: 100,
|
|
width: 70,
|
|
type: 'radialBar',
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: '50%',
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false,
|
|
color: '#fff'
|
|
},
|
|
value: {
|
|
show: true,
|
|
color: '#333',
|
|
offsetY: 5,
|
|
fontSize: '15px'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
colors: ['#ecf0f4'],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
type: 'diagonal1',
|
|
shadeIntensity: 1,
|
|
gradientToColors: ['#009688'],
|
|
inverseColors: false,
|
|
opacityFrom: [1, 0.2],
|
|
opacityTo: 1,
|
|
stops: [0, 100],
|
|
}
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
}
|
|
};
|
|
|
|
var options3 = {
|
|
series: [75],
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
},
|
|
chart: {
|
|
height: 100,
|
|
width: 70,
|
|
type: 'radialBar',
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: '50%',
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false,
|
|
color: '#fff'
|
|
},
|
|
value: {
|
|
show: true,
|
|
color: '#333',
|
|
offsetY: 5,
|
|
fontSize: '15px'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
colors: ['#ecf0f4'],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
type: 'diagonal1',
|
|
shadeIntensity: 0.8,
|
|
gradientToColors: ['#f56767'],
|
|
inverseColors: false,
|
|
opacityFrom: [1, 0.2],
|
|
opacityTo: 1,
|
|
stops: [0, 100],
|
|
}
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
}
|
|
};
|
|
|
|
var options4 = {
|
|
series: [85],
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
},
|
|
chart: {
|
|
height: 100,
|
|
width: 70,
|
|
type: 'radialBar',
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: '50%',
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false,
|
|
color: '#fff'
|
|
},
|
|
value: {
|
|
show: true,
|
|
color: '#333',
|
|
offsetY: 5,
|
|
fontSize: '15px'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
colors: ['#ecf0f4'],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
type: 'diagonal1',
|
|
shadeIntensity: 0.8,
|
|
gradientToColors: ['#2979ff'],
|
|
inverseColors: false,
|
|
opacityFrom: [1, 0.5],
|
|
opacityTo: 1,
|
|
stops: [0, 100],
|
|
}
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0,
|
|
}
|
|
},
|
|
}
|
|
};
|
|
|
|
var options5 = {
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar',
|
|
parentHeightOffset: 0,
|
|
fontFamily: 'Poppins, sans-serif',
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
colors: ['#1b00ff', '#f56767'],
|
|
grid: {
|
|
borderColor: '#c7d2dd',
|
|
strokeDashArray: 5,
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '25%',
|
|
endingShape: 'rounded'
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
series: [{
|
|
name: 'In Progress',
|
|
data: [40, 28, 47, 22, 34, 25]
|
|
}, {
|
|
name: 'Complete',
|
|
data: [30, 20, 37, 10, 28, 11]
|
|
}],
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
|
labels: {
|
|
style: {
|
|
colors: ['#353535'],
|
|
fontSize: '16px',
|
|
},
|
|
},
|
|
axisBorder: {
|
|
color: '#8fa6bc',
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: ''
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: '#353535',
|
|
fontSize: '16px',
|
|
},
|
|
},
|
|
axisBorder: {
|
|
color: '#f00',
|
|
}
|
|
},
|
|
legend: {
|
|
horizontalAlign: 'right',
|
|
position: 'top',
|
|
fontSize: '16px',
|
|
offsetY: 0,
|
|
labels: {
|
|
colors: '#353535',
|
|
},
|
|
markers: {
|
|
width: 10,
|
|
height: 10,
|
|
radius: 15,
|
|
},
|
|
itemMargin: {
|
|
vertical: 0
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: '15px',
|
|
fontFamily: 'Poppins, sans-serif',
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var options6 = {
|
|
series: [73],
|
|
chart: {
|
|
height: 350,
|
|
type: 'radialBar',
|
|
offsetY: 0
|
|
},
|
|
colors: ['#0B132B', '#222222'],
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
dataLabels: {
|
|
name: {
|
|
fontSize: '16px',
|
|
color: undefined,
|
|
offsetY: 120
|
|
},
|
|
value: {
|
|
offsetY: 76,
|
|
fontSize: '22px',
|
|
color: undefined,
|
|
formatter: function (val) {
|
|
return val + "%";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 4
|
|
},
|
|
labels: ['Achieve Goals'],
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
chart.render();
|
|
|
|
var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
|
|
chart2.render();
|
|
|
|
var chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
|
|
chart3.render();
|
|
|
|
var chart4 = new ApexCharts(document.querySelector("#chart4"), options4);
|
|
chart4.render();
|
|
|
|
var chart5 = new ApexCharts(document.querySelector("#chart5"), options5);
|
|
chart5.render();
|
|
|
|
var chart6 = new ApexCharts(document.querySelector("#chart6"), options6);
|
|
chart6.render();
|
|
|
|
|
|
// datatable init
|
|
$('document').ready(function(){
|
|
$('.data-table').DataTable({
|
|
scrollCollapse: true,
|
|
autoWidth: true,
|
|
responsive: true,
|
|
searching: false,
|
|
bLengthChange: false,
|
|
bPaginate: false,
|
|
bInfo: false,
|
|
columnDefs: [{
|
|
targets: "datatable-nosort",
|
|
orderable: false,
|
|
}],
|
|
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
|
|
"language": {
|
|
"info": "_START_-_END_ of _TOTAL_ entries",
|
|
searchPlaceholder: "Search",
|
|
paginate: {
|
|
next: '<i class="ion-chevron-right"></i>',
|
|
previous: '<i class="ion-chevron-left"></i>'
|
|
}
|
|
},
|
|
});
|
|
}); |