/*=========================================================================================
File Name: card-analytics.js
Description: Card Analytics page content with Apexchart Examples
----------------------------------------------------------------------------------------
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
$(window).on('load', function () {
'use strict';
var $textHeadingColor = '#5e5873';
var $strokeColor = '#ebe9f1';
var $labelColor = '#e7eef7';
var $avgSessionStrokeColor2 = '#ebf0f7';
var $budgetStrokeColor2 = '#dcdae3';
var $goalStrokeColor2 = '#51e5a8';
var $revenueStrokeColor2 = '#d0ccff';
var $textMutedColor = '#b9b9c3';
var $salesStrokeColor2 = '#df87f2';
var $white = '#fff';
var $earningsStrokeColor2 = '#28c76f66';
var $earningsStrokeColor3 = '#28c76f33';
var supportChartOptions;
var avgSessionChartOptions;
var revenueReportChartOptions;
var budgetChartOptions;
var goalChartOptions;
var revenueChartOptions;
var salesChartOptions;
var salesLineChartOptions;
var sessionChartOptions;
var customerChartOptions;
var orderChartOptions;
var earningsChartOptions;
var supportChart;
var avgSessionChart;
var revenueReportChart;
var budgetChart;
var goalChart;
var revenueChart;
var salesChart;
var salesLineChart;
var sessionChart;
var customerChart;
var orderChart;
var earningsChart;
var $supportTrackerChart = document.querySelector('#support-tracker-chart');
var $avgSessionChart = document.querySelector('#avg-session-chart');
var $revenueReportChart = document.querySelector('#revenue-report-chart');
var $budgetChart = document.querySelector('#budget-chart');
var $goalOverviewChart = document.querySelector('#goal-overview-chart');
var $revenueChart = document.querySelector('#revenue-chart');
var $salesChart = document.querySelector('#sales-chart');
var $salesLineChart = document.querySelector('#sales-line-chart');
var $sessionChart = document.querySelector('#session-chart');
var $customerChart = document.querySelector('#customer-chart');
var $productOrderChart = document.querySelector('#product-order-chart');
var $earningsChart = document.querySelector('#earnings-donut-chart');
// Support Tracker Chart
// -----------------------------
supportChartOptions = {
chart: {
height: 270,
type: 'radialBar'
},
plotOptions: {
radialBar: {
size: 150,
offsetY: 20,
startAngle: -150,
endAngle: 150,
hollow: {
size: '65%'
},
track: {
background: $white,
strokeWidth: '100%'
},
dataLabels: {
name: {
offsetY: -5,
color: $textHeadingColor,
fontSize: '1rem'
},
value: {
offsetY: 15,
color: $textHeadingColor,
fontSize: '1.714rem'
}
}
}
},
colors: [window.colors.solid.danger],
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: 'horizontal',
shadeIntensity: 0.5,
gradientToColors: [window.colors.solid.primary],
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
stroke: {
dashArray: 8
},
series: [83],
labels: ['Completed Tickets']
};
supportChart = new ApexCharts($supportTrackerChart, supportChartOptions);
supportChart.render();
// Average Session Chart
// ----------------------------------
avgSessionChartOptions = {
chart: {
type: 'bar',
height: 200,
sparkline: { enabled: true },
toolbar: { show: false }
},
states: {
hover: {
filter: 'none'
}
},
colors: [
$avgSessionStrokeColor2,
$avgSessionStrokeColor2,
window.colors.solid.primary,
$avgSessionStrokeColor2,
$avgSessionStrokeColor2,
$avgSessionStrokeColor2
],
series: [
{
name: 'Sessions',
data: [75, 125, 225, 175, 125, 75, 25]
}
],
grid: {
show: false,
padding: {
left: 0,
right: 0
}
},
plotOptions: {
bar: {
columnWidth: '45%',
distributed: true,
endingShape: 'rounded'
}
},
tooltip: {
x: { show: false }
},
xaxis: {
type: 'numeric'
}
};
avgSessionChart = new ApexCharts($avgSessionChart, avgSessionChartOptions);
avgSessionChart.render();
// Revenue Report Chart
// ----------------------------------
revenueReportChartOptions = {
chart: {
height: 230,
stacked: true,
type: 'bar',
toolbar: { show: false }
},
plotOptions: {
bar: {
columnWidth: '17%',
endingShape: 'rounded'
},
distributed: true
},
colors: [window.colors.solid.primary, window.colors.solid.warning],
series: [
{
name: 'Earning',
data: [95, 177, 284, 256, 105, 63, 168, 218, 72]
},
{
name: 'Expense',
data: [-145, -80, -60, -180, -100, -60, -85, -75, -100]
}
],
dataLabels: {
enabled: false
},
legend: {
show: false
},
grid: {
padding: {
top: -20,
bottom: -10
},
yaxis: {
lines: { show: false }
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
labels: {
style: {
colors: $textMutedColor,
fontSize: '0.86rem'
}
},
axisTicks: {
show: false
},
axisBorder: {
show: false
}
},
yaxis: {
labels: {
style: {
colors: $textMutedColor,
fontSize: '0.86rem'
}
}
}
};
revenueReportChart = new ApexCharts($revenueReportChart, revenueReportChartOptions);
revenueReportChart.render();
// Budget Chart
// ----------------------------------
budgetChartOptions = {
chart: {
height: 80,
toolbar: { show: false },
zoom: { enabled: false },
type: 'line',
sparkline: { enabled: true }
},
stroke: {
curve: 'smooth',
dashArray: [0, 5],
width: [2]
},
colors: [window.colors.solid.primary, $budgetStrokeColor2],
series: [
{
data: [61, 48, 69, 52, 60, 40, 79, 60, 59, 43, 62]
},
{
data: [20, 10, 30, 15, 23, 0, 25, 15, 20, 5, 27]
}
],
tooltip: {
enabled: false
}
};
budgetChart = new ApexCharts($budgetChart, budgetChartOptions);
budgetChart.render();
// Goal Overview Chart
// -----------------------------
goalChartOptions = {
chart: {
height: 245,
type: 'radialBar',
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
blur: 3,
left: 1,
top: 1,
opacity: 0.1
}
},
colors: [$goalStrokeColor2],
plotOptions: {
radialBar: {
offsetY: -10,
startAngle: -150,
endAngle: 150,
hollow: {
size: '77%'
},
track: {
background: $strokeColor,
strokeWidth: '50%'
},
dataLabels: {
name: {
show: false
},
value: {
color: $textHeadingColor,
fontSize: '2.86rem',
fontWeight: '600'
}
}
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: 'horizontal',
shadeIntensity: 0.5,
gradientToColors: [window.colors.solid.success],
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
series: [83],
stroke: {
lineCap: 'round'
},
grid: {
padding: {
bottom: 30
}
}
};
goalChart = new ApexCharts($goalOverviewChart, goalChartOptions);
goalChart.render();
// Revenue Chart
// -----------------------------
revenueChartOptions = {
chart: {
height: 240,
toolbar: { show: false },
zoom: { enabled: false },
type: 'line',
offsetX: -10
},
stroke: {
curve: 'smooth',
dashArray: [0, 12],
width: [4, 3]
},
grid: {
borderColor: $labelColor
},
legend: {
show: false
},
colors: [$revenueStrokeColor2, $strokeColor],
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
inverseColors: false,
gradientToColors: [window.colors.solid.primary, $strokeColor],
shadeIntensity: 1,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
}
},
markers: {
size: 0,
hover: {
size: 5
}
},
xaxis: {
labels: {
style: {
colors: $textMutedColor,
fontSize: '1rem'
}
},
axisTicks: {
show: false
},
categories: ['01', '05', '09', '13', '17', '21', '26', '31'],
axisBorder: {
show: false
},
tickPlacement: 'on'
},
yaxis: {
tickAmount: 5,
labels: {
style: {
colors: $textMutedColor,
fontSize: '1rem'
},
formatter: function (val) {
return val > 999 ? (val / 1000).toFixed(0) + 'k' : val;
}
}
},
grid: {
padding: {
top: -20,
bottom: -10,
left: 20
}
},
tooltip: {
x: { show: false }
},
series: [
{
name: 'This Month',
data: [45000, 47000, 44800, 47500, 45500, 48000, 46500, 48600]
},
{
name: 'Last Month',
data: [46000, 48000, 45500, 46600, 44500, 46500, 45000, 47000]
}
]
};
revenueChart = new ApexCharts($revenueChart, revenueChartOptions);
revenueChart.render();
// Sales Chart
// -----------------------------
salesChartOptions = {
chart: {
height: 300,
type: 'radar',
dropShadow: {
enabled: true,
blur: 8,
left: 1,
top: 1,
opacity: 0.2
},
toolbar: {
show: false
},
offsetY: 5
},
series: [
{
name: 'Sales',
data: [90, 50, 86, 40, 100, 20]
},
{
name: 'Visit',
data: [70, 75, 70, 76, 20, 85]
}
],
stroke: {
width: 0
},
colors: [window.colors.solid.primary, window.colors.solid.info],
plotOptions: {
radar: {
polygons: {
strokeColors: [$strokeColor, 'transparent', 'transparent', 'transparent', 'transparent', 'transparent'],
connectorColors: 'transparent'
}
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
gradientToColors: [window.colors.solid.primary, window.colors.solid.info],
shadeIntensity: 1,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
}
},
markers: {
size: 0
},
legend: {
show: false
},
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
dataLabels: {
background: {
foreColor: [$strokeColor, $strokeColor, $strokeColor, $strokeColor, $strokeColor, $strokeColor]
}
},
yaxis: {
show: false
},
grid: {
show: false,
padding: {
bottom: -27
}
}
};
salesChart = new ApexCharts($salesChart, salesChartOptions);
salesChart.render();
// Sales Line Chart
// -----------------------------
salesLineChartOptions = {
chart: {
height: 240,
toolbar: { show: false },
zoom: { enabled: false },
type: 'line',
dropShadow: {
enabled: true,
top: 18,
left: 2,
blur: 5,
opacity: 0.2
},
offsetX: -10
},
stroke: {
curve: 'smooth',
width: 4
},
grid: {
borderColor: $strokeColor,
padding: {
top: -20,
bottom: 5,
left: 20
}
},
legend: {
show: false
},
colors: [$salesStrokeColor2],
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
inverseColors: false,
gradientToColors: [window.colors.solid.primary],
shadeIntensity: 1,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
}
},
markers: {
size: 0,
hover: {
size: 5
}
},
xaxis: {
labels: {
offsetY: 5,
style: {
colors: $textMutedColor,
fontSize: '0.857rem'
}
},
axisTicks: {
show: false
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
show: false
},
tickPlacement: 'on'
},
yaxis: {
tickAmount: 5,
labels: {
style: {
colors: $textMutedColor,
fontSize: '0.857rem'
},
formatter: function (val) {
return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
}
}
},
tooltip: {
x: { show: false }
},
series: [
{
name: 'Sales',
data: [140, 180, 150, 205, 160, 295, 125, 255, 205, 305, 240, 295]
}
]
};
salesLineChart = new ApexCharts($salesLineChart, salesLineChartOptions);
salesLineChart.render();
// Session Chart
// ----------------------------------
sessionChartOptions = {
chart: {
type: 'donut',
height: 300,
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
series: [58.6, 34.9, 6.5],
legend: { show: false },
comparedResult: [2, -3, 8],
labels: ['Desktop', 'Mobile', 'Tablet'],
stroke: { width: 0 },
colors: [window.colors.solid.primary, window.colors.solid.warning, window.colors.solid.danger]
};
sessionChart = new ApexCharts($sessionChart, sessionChartOptions);
sessionChart.render();
// Customer Chart
// -----------------------------
customerChartOptions = {
chart: {
type: 'pie',
height: 325,
toolbar: {
show: false
}
},
labels: ['New', 'Returning', 'Referrals'],
series: [690, 258, 149],
dataLabels: {
enabled: false
},
legend: { show: false },
stroke: {
width: 4
},
colors: [window.colors.solid.primary, window.colors.solid.warning, window.colors.solid.danger]
};
customerChart = new ApexCharts($customerChart, customerChartOptions);
customerChart.render();
// Product Order Chart
// -----------------------------
orderChartOptions = {
chart: {
height: 325,
type: 'radialBar'
},
colors: [window.colors.solid.primary, window.colors.solid.warning, window.colors.solid.danger],
stroke: {
lineCap: 'round'
},
plotOptions: {
radialBar: {
size: 150,
hollow: {
size: '20%'
},
track: {
strokeWidth: '100%',
margin: 15
},
dataLabels: {
value: {
fontSize: '1rem',
colors: $textHeadingColor,
fontWeight: '500',
offsetY: 5
},
total: {
show: true,
label: 'Total',
fontSize: '1.286rem',
colors: $textHeadingColor,
fontWeight: '500',
formatter: function (w) {
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
return 42459;
}
}
}
}
},
series: [70, 52, 26],
labels: ['Finished', 'Pending', 'Rejected']
};
orderChart = new ApexCharts($productOrderChart, orderChartOptions);
orderChart.render();
// Earnings Chart
// -----------------------------
earningsChartOptions = {
chart: {
type: 'donut',
height: 120,
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
series: [53, 16, 31],
legend: { show: false },
comparedResult: [2, -3, 8],
labels: ['App', 'Service', 'Product'],
stroke: { width: 0 },
colors: [$earningsStrokeColor2, $earningsStrokeColor3, window.colors.solid.success],
grid: {
padding: {
right: -20,
bottom: -8,
left: -20
}
},
plotOptions: {
pie: {
startAngle: -10,
donut: {
labels: {
show: true,
name: {
offsetY: 15
},
value: {
offsetY: -15,
formatter: function (val) {
return parseInt(val) + '%';
}
},
total: {
show: true,
offsetY: 15,
label: 'App',
formatter: function (w) {
return '53%';
}
}
}
}
}
},
responsive: [
{
breakpoint: 1325,
options: {
chart: {
height: 100
}
}
},
{
breakpoint: 1200,
options: {
chart: {
height: 120
}
}
},
{
breakpoint: 1065,
options: {
chart: {
height: 100
}
}
},
{
breakpoint: 992,
options: {
chart: {
height: 120
}
}
}
]
};
earningsChart = new ApexCharts($earningsChart, earningsChartOptions);
earningsChart.render();
});