// ================================ Bars Up Down (Earning Statistics) chart Start ================================
var options = {
series: [
{
name: "Income",
data: [44, 42, 57, 86, 58, 55, 70, 44, 42, 57, 86, 58, 55, 70],
},
{
name: "Expenses",
data: [-34, -22, -37, -56, -21, -35, -60, -34, -22, -37, -56, -21, -35, -60],
},
],
chart: {
stacked: true,
type: "bar",
height: 263,
fontFamily: "Poppins, sans-serif",
toolbar: {
show: false,
},
},
colors: ["#487FFF", "#EF4A00"],
plotOptions: {
bar: {
columnWidth: "8",
borderRadius: [2],
borderRadiusWhenStacked: "all",
},
},
stroke: {
width: [5, 5]
},
dataLabels: {
enabled: false,
},
legend: {
show: true,
position: "top",
},
yaxis: {
show: false,
title: {
text: undefined,
},
labels: {
formatter: function (y)
{
return y.toFixed(0) + "";
},
},
},
xaxis: {
show: false,
type: "week",
categories: [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun",
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: true,
style: {
colors: "#d4d7d9",
fontSize: "10px",
fontWeight: 500,
},
},
},
tooltip: {
enabled: true,
shared: true,
intersect: false,
theme: "dark",
x: {
show: false,
},
},
};
var chart = new ApexCharts(document.querySelector("#upDownBarchart"), options);
chart.render();
// ================================ Bars Up Down (Earning Statistics) chart End ================================
// ================================ Semi Circle Gauge (Daily Conversion) chart Start ================================
var options = {
series: [75],
chart: {
height: 165,
width: 120,
type: 'radialBar',
sparkline: {
enabled: false // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: -32,
right: -32,
top: -32,
bottom: -32
},
margin: {
left: -32,
right: -32,
top: -32,
bottom: -32
}
},
plotOptions: {
radialBar: {
offsetY: -24,
offsetX: -14,
startAngle: -90,
endAngle: 90,
track: {
background: "#E3E6E9",
// strokeWidth: 32,
dropShadow: {
enabled: false,
top: 2,
left: 0,
color: '#999',
opacity: 1,
blur: 2
}
},
dataLabels: {
show: false,
name: {
show: false
},
value: {
offsetY: -2,
fontSize: '22px'
}
}
}
},
fill: {
type: 'gradient',
colors: ['#9DBAFF'],
gradient: {
shade: 'dark',
type: 'horizontal',
shadeIntensity: 0.5,
gradientToColors: ['#487FFF'],
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
stroke: {
lineCap: 'round',
},
labels: ['Percent'],
};
var chart = new ApexCharts(document.querySelector("#semiCircleGauge"), options);
chart.render();
// ================================ Semi Circle Gauge (Daily Conversion) chart End ================================
// ================================ Area chart Start ================================
function createChart(chartId, chartColor) {
let currentYear = new Date().getFullYear();
var options = {
series: [
{
name: 'series1',
data: [0, 10, 8, 25, 15, 26, 13, 35, 15, 39, 16, 46, 42],
},
],
chart: {
type: 'area',
width: 164,
height: 72,
sparkline: {
enabled: true // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: 'transparent',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: -3,
right: 0,
bottom: 0,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // 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: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .8, // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 2,
size: 0,
hover: {
size: 8
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan ${currentYear}`, `Feb ${currentYear}`, `Mar ${currentYear}`, `Apr ${currentYear}`, `May ${currentYear}`, `Jun ${currentYear}`, `Jul ${currentYear}`, `Aug ${currentYear}`, `Sep ${currentYear}`, `Oct ${currentYear}`, `Nov ${currentYear}`, `Dec ${currentYear}`],
tooltip: {
enabled: false,
},
},
yaxis: {
labels: {
show: false
}
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
// Call the function for each chart with the desired ID and color
createChart('areaChart', '#FF9F29');
// ================================ Area chart End ================================
// ================================ Bar chart (Today Income0 Start ================================
var options = {
series: [{
name: "Sales",
data: [{
x: 'Mon',
y: 20,
}, {
x: 'Tue',
y: 40,
}, {
x: 'Wed',
y: 20,
}, {
x: 'Thur',
y: 30,
}, {
x: 'Fri',
y: 40,
}, {
x: 'Sat',
y: 35,
}]
}],
chart: {
type: 'bar',
width: 164,
height: 80,
sparkline: {
enabled: true // Remove whitespace
},
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 6,
horizontal: false,
columnWidth: 14,
}
},
dataLabels: {
enabled: false
},
states: {
hover: {
filter: {
type: 'none'
}
}
},
fill: {
type: 'gradient',
colors: ['#E3E6E9'], // 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: ['#E3E6E9'], // 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: 1, // Use a number for dashed style
position: 'back',
},
xaxis: {
labels: {
show: false // Hide y-axis labels
},
type: 'category',
categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat']
},
yaxis: {
labels: {
show: false,
formatter: function (value) {
return (value / 1000).toFixed(0) + 'k';
}
}
},
tooltip: {
y: {
formatter: function (value) {
return value / 1000 + 'k';
}
}
}
};
var chart = new ApexCharts(document.querySelector("#dailyIconBarChart"), options);
chart.render();
// ================================ Bar chart (Today Income0 End ================================
// ================================ My Portfolio Donut chart Start ================================
var options = {
series: [70, 30],
colors: ['#FF9F29', '#487FFF'],
labels: ['Female', 'Male'] ,
legend: {
show: false
},
chart: {
type: 'donut',
height: 230,
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("#statisticsDonutChart"), options);
chart.render();
// ================================ My Portfolio Donut 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 ================================
// ================================ Total Transaction line chart Start ================================
var options = {
series: [{
name: "This month",
data: [4, 16, 12, 28, 22, 38, 23]
}],
chart: {
height: 290,
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',
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: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
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: '#B1B9C4',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
}
}
}
};
var chart = new ApexCharts(document.querySelector("#transactionLineChart"), options);
chart.render();
// ================================ Total Transaction line chart End ================================