200 lines
3.7 KiB
JavaScript
Executable File
200 lines
3.7 KiB
JavaScript
Executable File
/*
|
|
Template Name: Ubold - Responsive Bootstrap 4 Admin Dashboard
|
|
Author: CoderThemes
|
|
Website: https://coderthemes.com/
|
|
Contact: support@coderthemes.com
|
|
File: CRM Dashboard init
|
|
*/
|
|
|
|
|
|
//
|
|
// Candlestick Chart - 1
|
|
//
|
|
var colors = ['#6658dd','#1abc9c'];
|
|
var dataColors = $("#sales-analytics").data('colors');
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 385,
|
|
type: 'candlestick',
|
|
},
|
|
plotOptions: {
|
|
candlestick: {
|
|
colors: {
|
|
upward: colors[0],
|
|
downward: colors[1]
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
data: seriesData
|
|
}],
|
|
|
|
stroke: {
|
|
show: true,
|
|
colors: '#f1f3fa',
|
|
width: [1, 4]
|
|
},
|
|
xaxis: {
|
|
type: 'datetime'
|
|
},
|
|
grid: {
|
|
borderColor: '#f1f3fa'
|
|
}
|
|
}
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#sales-analytics"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Sales Analytics
|
|
//
|
|
var colors = ['#1abc9c', '#4a81d4'];
|
|
var dataColors = $("#deal-analytics").data('colors');
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
|
|
var options = {
|
|
series: [{
|
|
name: 'Won',
|
|
type: 'column',
|
|
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
|
|
}, {
|
|
name: 'Loss',
|
|
type: 'line',
|
|
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
|
|
}],
|
|
chart: {
|
|
height: 370,
|
|
type: 'line',
|
|
},
|
|
stroke: {
|
|
width: [2, 3]
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%'
|
|
}
|
|
},
|
|
colors: colors,
|
|
dataLabels: {
|
|
enabled: true,
|
|
enabledOnSeries: [1]
|
|
},
|
|
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
|
|
xaxis: {
|
|
type: 'datetime'
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
grid: {
|
|
padding: {
|
|
bottom: 20
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "horizontal",
|
|
shadeIntensity: 0.25,
|
|
gradientToColors: undefined,
|
|
inverseColors: true,
|
|
opacityFrom: 0.75,
|
|
opacityTo: 0.75,
|
|
stops: [0, 0, 0]
|
|
},
|
|
},
|
|
yaxis: [{
|
|
title: {
|
|
text: 'Net Revenue',
|
|
},
|
|
|
|
}, {
|
|
opposite: true,
|
|
title: {
|
|
text: 'Number of Sales'
|
|
}
|
|
}]
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#deal-analytics"), options);
|
|
chart.render();
|
|
|
|
|
|
|
|
//
|
|
// Radialbar Chart - 3
|
|
//
|
|
var colors = ['#f1556c'];
|
|
var dataColors = $("#campaigns-ratio-chart").data('colors');
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 310,
|
|
type: 'radialBar',
|
|
},
|
|
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: {
|
|
gradient: {
|
|
enabled: true,
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 4
|
|
},
|
|
colors: colors,
|
|
series: [67],
|
|
labels: ['Campaigns Ratio'],
|
|
responsive: [{
|
|
breakpoint: 380,
|
|
options: {
|
|
chart: {
|
|
height: 180
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#campaigns-ratio-chart"),
|
|
options
|
|
);
|
|
|
|
chart.render(); |