709 lines
13 KiB
JavaScript
709 lines
13 KiB
JavaScript
/*=========================================================================================
|
|
File Name: card-statistics.js
|
|
Description: Card-statistics 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 $barColor = '#f3f3f3';
|
|
var $trackBgColor = '#EBEBEB';
|
|
var $primary_light = '#A9A2F6';
|
|
var $success_light = '#55DD92';
|
|
var $warning_light = '#ffc085';
|
|
|
|
var statisticsBarChartOptions;
|
|
var statisticsLineChartOptions;
|
|
var gainedChartOptions;
|
|
var revenueChartOptions;
|
|
var salesChartOptions;
|
|
var orderChartOptions;
|
|
var trafficChartOptions;
|
|
var userChartOptions;
|
|
var newsletterChartOptions;
|
|
|
|
var statisticsBarChart = document.querySelector('#statistics-bar-chart');
|
|
var statisticsLineChart = document.querySelector('#statistics-line-chart');
|
|
var lineAreaChart1 = document.querySelector('#line-area-chart-1');
|
|
var lineAreaChart2 = document.querySelector('#line-area-chart-2');
|
|
var lineAreaChart3 = document.querySelector('#line-area-chart-3');
|
|
var lineAreaChart4 = document.querySelector('#line-area-chart-4');
|
|
var lineAreaChart5 = document.querySelector('#line-area-chart-5');
|
|
var lineAreaChart6 = document.querySelector('#line-area-chart-6');
|
|
var lineAreaChart7 = document.querySelector('#line-area-chart-7');
|
|
|
|
var statisticsBar;
|
|
var statisticsLine;
|
|
var gainedChart;
|
|
var revenueChart;
|
|
var salesChart;
|
|
var orderChart;
|
|
var trafficChart;
|
|
var userChart;
|
|
var newsletterChart;
|
|
|
|
//------------ Statistics Bar Chart ------------
|
|
//----------------------------------------------
|
|
|
|
statisticsBarChartOptions = {
|
|
chart: {
|
|
height: 70,
|
|
type: 'bar',
|
|
stacked: true,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: -15,
|
|
bottom: -15
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '20%',
|
|
startingShape: 'rounded',
|
|
colors: {
|
|
backgroundBarColors: [$barColor, $barColor, $barColor, $barColor, $barColor],
|
|
backgroundBarRadius: 5
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
colors: [window.colors.solid.warning],
|
|
series: [
|
|
{
|
|
name: '2020',
|
|
data: [45, 85, 65, 45, 65]
|
|
}
|
|
],
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
|
|
statisticsBar = new ApexCharts(statisticsBarChart, statisticsBarChartOptions);
|
|
statisticsBar.render();
|
|
|
|
//------------ Statistics Line Chart ------------
|
|
//-----------------------------------------------
|
|
|
|
statisticsLineChartOptions = {
|
|
chart: {
|
|
height: 70,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: $trackBgColor,
|
|
strokeDashArray: 5,
|
|
xaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
padding: {
|
|
top: -30,
|
|
bottom: -10
|
|
}
|
|
},
|
|
stroke: {
|
|
width: 3
|
|
},
|
|
colors: [window.colors.solid.info],
|
|
series: [
|
|
{
|
|
data: [0, 20, 5, 30, 15, 45]
|
|
}
|
|
],
|
|
markers: {
|
|
size: 2,
|
|
colors: window.colors.solid.info,
|
|
strokeColors: window.colors.solid.info,
|
|
strokeWidth: 2,
|
|
strokeOpacity: 1,
|
|
strokeDashArray: 0,
|
|
fillOpacity: 1,
|
|
discrete: [
|
|
{
|
|
seriesIndex: 0,
|
|
dataPointIndex: 5,
|
|
fillColor: '#ffffff',
|
|
strokeColor: window.colors.solid.info,
|
|
size: 5
|
|
}
|
|
],
|
|
shape: 'circle',
|
|
radius: 2,
|
|
hover: {
|
|
size: 3
|
|
}
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
fontSize: '0px'
|
|
}
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
|
|
statisticsLine = new ApexCharts(statisticsLineChart, statisticsLineChartOptions);
|
|
statisticsLine.render();
|
|
|
|
// Subscribed Gained Chart
|
|
// ----------------------------------
|
|
|
|
gainedChartOptions = {
|
|
chart: {
|
|
height: 100,
|
|
type: 'area',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colors.solid.primary],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2.5
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 0.9,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.5,
|
|
stops: [0, 80, 100]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Subscribers',
|
|
data: [28, 40, 36, 52, 38, 60, 55]
|
|
}
|
|
],
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: [
|
|
{
|
|
y: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
padding: { left: 0, right: 0 }
|
|
}
|
|
],
|
|
tooltip: {
|
|
x: { show: false }
|
|
}
|
|
};
|
|
|
|
gainedChart = new ApexCharts(lineAreaChart1, gainedChartOptions);
|
|
gainedChart.render();
|
|
|
|
// Revenue Generated Chart
|
|
// ----------------------------------
|
|
|
|
revenueChartOptions = {
|
|
chart: {
|
|
height: 100,
|
|
type: 'area',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colors.solid.success],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2.5
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 0.9,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.5,
|
|
stops: [0, 80, 100]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Revenue',
|
|
data: [350, 275, 400, 300, 350, 300, 450]
|
|
}
|
|
],
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: [
|
|
{
|
|
y: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
padding: { left: 0, right: 0 }
|
|
}
|
|
],
|
|
tooltip: {
|
|
x: { show: false }
|
|
}
|
|
};
|
|
|
|
revenueChart = new ApexCharts(lineAreaChart2, revenueChartOptions);
|
|
revenueChart.render();
|
|
|
|
// Quaterly Sales Chart
|
|
// ----------------------------------
|
|
|
|
salesChartOptions = {
|
|
chart: {
|
|
height: 100,
|
|
type: 'area',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colors.solid.danger],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2.5
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 0.9,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.5,
|
|
stops: [0, 80, 100]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Sales',
|
|
data: [10, 15, 7, 12, 3, 16]
|
|
}
|
|
],
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: [
|
|
{
|
|
y: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
padding: { left: 0, right: 0 }
|
|
}
|
|
],
|
|
tooltip: {
|
|
x: { show: false }
|
|
}
|
|
};
|
|
|
|
salesChart = new ApexCharts(lineAreaChart3, salesChartOptions);
|
|
salesChart.render();
|
|
|
|
// Order Received Chart
|
|
// ----------------------------------
|
|
|
|
orderChartOptions = {
|
|
chart: {
|
|
height: 100,
|
|
type: 'area',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colors.solid.warning],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2.5
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 0.9,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.5,
|
|
stops: [0, 80, 100]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Orders',
|
|
data: [10, 15, 8, 15, 7, 12, 8]
|
|
}
|
|
],
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: [
|
|
{
|
|
y: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
padding: { left: 0, right: 0 }
|
|
}
|
|
],
|
|
tooltip: {
|
|
x: { show: false }
|
|
}
|
|
};
|
|
|
|
orderChart = new ApexCharts(lineAreaChart4, orderChartOptions);
|
|
orderChart.render();
|
|
|
|
// Site Traffic Chart
|
|
// ----------------------------------
|
|
|
|
trafficChartOptions = {
|
|
chart: {
|
|
height: 100,
|
|
type: 'line',
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 5,
|
|
left: 0,
|
|
blur: 4,
|
|
opacity: 0.1
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colors.solid.primary],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 5
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
gradientToColors: [$primary_light],
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 100, 100, 100]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Traffic Rate',
|
|
data: [150, 200, 125, 225, 200, 250]
|
|
}
|
|
],
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: [
|
|
{
|
|
y: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
padding: { left: 0, right: 0 }
|
|
}
|
|
],
|
|
tooltip: {
|
|
x: { show: false }
|
|
}
|
|
};
|
|
|
|
trafficChart = new ApexCharts(lineAreaChart5, trafficChartOptions);
|
|
trafficChart.render();
|
|
|
|
// Active Users Chart
|
|
// ----------------------------------
|
|
|
|
userChartOptions = {
|
|
chart: {
|
|
height: 100,
|
|
type: 'line',
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 5,
|
|
left: 0,
|
|
blur: 4,
|
|
opacity: 0.1
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colors.solid.success],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 5
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
gradientToColors: [$success_light],
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 100, 100, 100]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Active Users',
|
|
data: [750, 1000, 900, 1250, 1000, 1200, 1100]
|
|
}
|
|
],
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: [
|
|
{
|
|
y: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
padding: { left: 0, right: 0 }
|
|
}
|
|
],
|
|
tooltip: {
|
|
x: { show: false }
|
|
}
|
|
};
|
|
|
|
userChart = new ApexCharts(lineAreaChart6, userChartOptions);
|
|
userChart.render();
|
|
|
|
// News Letter Chart
|
|
// ----------------------------------
|
|
|
|
newsletterChartOptions = {
|
|
chart: {
|
|
height: 100,
|
|
type: 'line',
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 5,
|
|
left: 0,
|
|
blur: 4,
|
|
opacity: 0.1
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
}
|
|
},
|
|
colors: [window.colors.solid.warning],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 5
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
gradientToColors: [$warning_light],
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 100, 100, 100]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Newsletter',
|
|
data: [365, 390, 365, 400, 375, 400]
|
|
}
|
|
],
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: [
|
|
{
|
|
y: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
padding: { left: 0, right: 0 }
|
|
}
|
|
],
|
|
tooltip: {
|
|
x: { show: false }
|
|
}
|
|
};
|
|
|
|
newsletterChart = new ApexCharts(lineAreaChart7, newsletterChartOptions);
|
|
newsletterChart.render();
|
|
});
|