// =========================== Sales Statistic Line Chart Start ===============================
var options = {
series: [{
name: "This month",
data: [10, 20, 12, 30, 14, 35, 16, 32, 14, 25, 13, 28]
}],
chart: {
height: 264,
type: 'line',
toolbar: {
show: false
},
zoom: {
enabled: false
},
dropShadow: {
enabled: true,
top: 6,
left: 0,
blur: 4,
color: "#000",
opacity: 0.1,
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
colors: ['#487FFF'], // Specify the line color here
width: 3
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
tooltip: {
enabled: true,
x: {
show: true,
},
y: {
show: false,
},
z: {
show: false,
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
borderColor: '#D1D5DB',
strokeDashArray: 3,
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
axisBorder: {
show: false
},
crosshairs: {
show: true,
width: 20,
stroke: {
width: 0
},
fill: {
type: 'solid',
color: '#487FFF40',
// gradient: {
// colorFrom: '#D8E3F0',
// // colorTo: '#BED1E6',
// stops: [0, 100],
// opacityFrom: 0.4,
// opacityTo: 0.5,
// },
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
// =========================== Sales Statistic Line Chart End ===============================
// ================================ Total Subscriber bar chart Start ================================
var options = {
series: [{
name: "Sales",
data: [{
x: 'Sun',
y: 15,
}, {
x: 'Mon',
y: 12,
}, {
x: 'Tue',
y: 18,
}, {
x: 'Wed',
y: 20,
}, {
x: 'Thu',
y: 13,
}, {
x: 'Fri',
y: 16,
}, {
x: 'Sat',
y: 6,
}]
}],
chart: {
type: 'bar',
height: 235,
toolbar: {
show: false
},
},
plotOptions: {
bar: {
borderRadius: 6,
horizontal: false,
columnWidth: 24,
columnWidth: '52%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
fill: {
type: 'gradient',
colors: ['#dae5ff'], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: ['#dae5ff'], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: 1, // Starting opacity
opacityTo: 1, // Ending opacity
stops: [0, 100],
},
},
grid: {
show: false,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
padding: {
top: -10,
right: -10,
bottom: -10,
left: -10
}
},
xaxis: {
type: 'category',
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yaxis: {
show: false,
// labels: {
// formatter: function (value) {
// return (value / 1000).toFixed(0) + 'k';
// }
// }
},
// tooltip: {
// y: {
// formatter: function (value) {
// return value / 1000 + 'k';
// }
// }
// }
};
var chart = new ApexCharts(document.querySelector("#barChart"), options);
chart.render();
// ================================ Total Subscriber bar chart End ================================
// ================================ Users Overview Donut chart Start ================================
var options = {
series: [500, 500, 500],
colors: ['#FF9F29', '#487FFF', '#E4F1FF'],
labels: ['Active', 'New', 'Total'] ,
legend: {
show: false
},
chart: {
type: 'donut',
height: 270,
sparkline: {
enabled: true // Remove whitespace
},
margin: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
stroke: {
width: 0,
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}],
};
var chart = new ApexCharts(document.querySelector("#userOverviewDonutChart"), options);
chart.render();
// ================================ Users Overview Donut chart End ================================
// ================================ Revenue Report Chart Start ================================
var options = {
series: [{
name: 'Net Profit',
data: [20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000, 48000, 18000, 22000]
},{
name: 'Revenue',
data: [15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000, 38000, 14000, 16000]
}],
colors: ['#487FFF', '#FF9F29'],
labels: ['Active', 'New', 'Total'],
legend: {
show: false
},
chart: {
type: 'bar',
height: 250,
toolbar: {
show: false
},
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
},
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: 10,
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yaxis: {
categories: ['0', '5000', '10,000', '20,000', '30,000', '50,000', '60,000', '60,000', '70,000', '80,000', '90,000', '100,000'],
},
fill: {
opacity: 1,
width: 18,
},
};
var chart = new ApexCharts(document.querySelector("#paymentStatusChart"), options);
chart.render();
// ================================ Revenue Report Chart End ================================
// ================================ J Vector Map Start ================================
$('#world-map').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
borderColor: '#fff',
borderOpacity: 0.25,
borderWidth: 0,
color: '#000000',
regionStyle : {
initial : {
fill : '#D1D5DB'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#000',
'stroke-width' : 1,
'stroke-opacity': 0.4
},
},
markers : [{
latLng : [35.8617, 104.1954],
name : 'China : 250'
},
{
latLng : [25.2744, 133.7751],
name : 'AustrCalia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 82%'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#487FFF ',
"SA": '#487FFF',
"AU": '#487FFF',
"CN": '#487FFF',
"GB": '#487FFF',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});
// ================================ J Vector Map End ================================