Your IP : 216.73.216.145
// Dashbord1 Chat 01
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.getElementById("revenueChart"), {
series: [
{
name: "Last Year (2022)",
data: [31, 40, 28, 51, 42, 82, 56],
},
],
chart: {
height: 150,
type: "area",
toolbar: {
show: false,
},
},
markers: {
size: 5,
},
colors: ["#16a00d"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.3,
opacityTo: 0.4,
stops: [0, 90, 100],
},
},
dataLabels: {
enabled: false,
},
grid: {
show: false, // you can either change hear to disable all grids
},
yaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
stroke: {
curve: "smooth",
width: 3,
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
}).render();
});
// Dashbord1 Chat 01 End
// Dashbord1 Chat 01
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.getElementById("revenueChart1"), {
series: [
{
name: "Last Year (2022)",
data: [31, 40, 28, 51, 42, 82, 56],
},
],
chart: {
height: 120,
type: "area",
toolbar: {
show: false,
},
},
markers: {
size: 5,
},
colors: ["#16a00d"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.3,
opacityTo: 0.4,
stops: [0, 90, 100],
},
},
dataLabels: {
enabled: false,
},
grid: {
show: false, // you can either change hear to disable all grids
},
yaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
stroke: {
curve: "smooth",
width: 3,
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
}).render();
});
// Dashbord1 Chat 01 End
// Dashbord1 Chat 02
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#totalCustomers"), {
series: [
{
name: "Last Year (2022)",
data: [31, 40, 28, 51, 42, 82, 56],
},
],
chart: {
height: 150,
type: "area",
toolbar: {
show: false,
},
},
markers: {
size: 5,
},
colors: ["#ffc10d"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.3,
opacityTo: 0.4,
stops: [0, 90, 100],
},
},
dataLabels: {
enabled: false,
},
grid: {
show: false, // you can either change hear to disable all grids
},
yaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
stroke: {
curve: "smooth",
width: 3,
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
}).render();
});
// Dashbord1 Chat 02 End
// Dashbord1 Chat 02
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#totalCustomers1"), {
series: [
{
name: "Last Year (2022)",
data: [31, 40, 28, 51, 42, 82, 56],
},
],
chart: {
height: 120,
type: "area",
toolbar: {
show: false,
},
},
markers: {
size: 5,
},
colors: ["#ffc10d"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.3,
opacityTo: 0.4,
stops: [0, 90, 100],
},
},
dataLabels: {
enabled: false,
},
grid: {
show: false, // you can either change hear to disable all grids
},
yaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
stroke: {
curve: "smooth",
width: 3,
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
}).render();
});
// Dashbord1 Chat 02 End
// Dashbord1 Chat 03
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#storeVisitors"), {
series: [
{
name: "Last Year (2022)",
data: [31, 40, 28, 51, 42, 82, 56],
},
],
chart: {
height: 150,
type: "area",
toolbar: {
show: false,
},
},
markers: {
size: 5,
},
colors: ["#0d6efd"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.3,
opacityTo: 0.4,
stops: [0, 90, 100],
},
},
dataLabels: {
enabled: false,
},
grid: {
show: false, // you can either change hear to disable all grids
},
yaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
stroke: {
curve: "smooth",
width: 3,
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
}).render();
});
// Dashbord1 Chat 03 End
// Dashbord1 Chat 03
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#storeVisitors1"), {
series: [
{
name: "Last Year (2022)",
data: [31, 40, 28, 51, 42, 82, 56],
},
],
chart: {
height: 120,
type: "area",
toolbar: {
show: false,
},
},
markers: {
size: 5,
},
colors: ["#0d6efd"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.9,
opacityTo: 0.5,
stops: [0, 90, 100],
},
},
dataLabels: {
enabled: false,
},
grid: {
show: false, // you can either change hear to disable all grids
},
yaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
stroke: {
curve: "smooth",
width: 3,
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
}).render();
});
// Dashbord1 Chat 03 End
// Dashbord1 Chart 4
var options = {
series: [
{
name: "Website Blog",
type: "column",
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160],
},
{
name: "Social Media",
type: "line",
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16],
},
],
chart: {
height: 350,
type: "line",
},
stroke: {
width: [0, 4],
},
title: {
text: "Traffic Sources",
},
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",
},
yaxis: [
{
title: {
text: "Website Blog",
},
},
{
opposite: true,
title: {
text: "Social Media",
},
},
],
};
var chart = new ApexCharts(
document.querySelector("#lastmonthRevenue"),
options
);
chart.render();
// Dashbord1 Chat 05
var options = {
series: [
{
name: "series2",
data: [11, 32, 45, 32, 34, 52, 41],
},
],
chart: {
height: 80,
type: "area",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
show: false, // you can either change hear to disable all grids
},
yaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
stroke: {
curve: "smooth",
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
};
var chart = new ApexCharts(document.getElementById("shortChart"), options);
chart.render();
var chart = new ApexCharts(document.getElementById("shortChart2"), options);
chart.render();
var chart = new ApexCharts(document.getElementById("shortChart3"), options);
chart.render();
// Circle-Chart1
var options = {
series: [76, 6, 61, 90],
chart: {
height: 250,
type: "radialBar",
},
plotOptions: {
radialBar: {
offsetY: 0,
startAngle: 0,
endAngle: 270,
hollow: {
margin: 5,
size: "30%",
background: "transparent",
image: undefined,
},
dataLabels: {
name: {
show: false,
},
value: {
show: false,
},
},
},
},
colors: ["#1ab7ea", "#0084ff", "#39539E", "#0077B5"],
labels: ["Vimeo", "Messenger", "Facebook", "LinkedIn"],
legend: {
show: true,
floating: true,
fontSize: "12px",
position: "right",
offsetX: 70,
offsetY: 0,
labels: {
useSeriesColors: true,
},
markers: {
size: 0,
},
formatter: function (seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];
},
itemMargin: {
vertical: 2,
},
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
show: false,
},
},
},
],
};
var chart = new ApexCharts(document.querySelector("#circleChirt1"), options);
chart.render();
// Ciecle Chart2
var options = {
series: [67],
chart: {
height: 250,
type: "radialBar",
offsetY: -10,
},
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: {
type: "gradient",
gradient: {
shade: "dark",
shadeIntensity: 0.15,
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 65, 91],
},
},
stroke: {
dashArray: 4,
},
labels: ["Median Ratio"],
};
var chart = new ApexCharts(document.querySelector("#circleChart2"), options);
chart.render();
// circle Chart3
var options = {
series: [44, 55, 67, 83],
chart: {
height: 250,
type: "radialBar",
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: "22px",
},
value: {
fontSize: "16px",
},
total: {
show: true,
label: "Total",
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 249;
},
},
},
},
},
labels: ["Apples", "Oranges", "Bananas", "Berries"],
};
var chart = new ApexCharts(document.querySelector("#circlrChirt3"), options);
chart.render();
// orderChart
var options = {
series: [
{
name: "Website Blog",
type: "column",
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160],
},
{
name: "Social Media",
type: "line",
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16],
},
],
chart: {
height: 350,
type: "line",
toolbar: {
show: false,
},
},
stroke: {
width: [0, 4],
},
title: {
text: "Traffic Sources",
},
dataLabels: {
enabled: true,
enabledOnSeries: [1],
},
grid: {
show: true, // you can either change hear to disable all grids
},
yaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
yaxis: [
{
title: {
text: "Website Blog",
},
},
{
opposite: true,
title: {
text: "Social Media",
},
},
],
};
var chart = new ApexCharts(document.querySelector("#orderChart"), options);
chart.render();
// Dashbord-02 Clart-1
var options = {
series: [
{
name: "TEAM A",
type: "column",
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
},
{
name: "TEAM B",
type: "area",
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
},
{
name: "TEAM C",
type: "line",
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
},
],
chart: {
height: 315,
type: "line",
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: "smooth",
},
plotOptions: {
bar: {
columnWidth: "50%",
},
},
fill: {
opacity: [0.85, 0.25, 1],
gradient: {
inverseColors: false,
shade: "light",
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100],
},
},
labels: [
"01/01/2003",
"02/01/2003",
"03/01/2003",
"04/01/2003",
"05/01/2003",
"06/01/2003",
"07/01/2003",
"08/01/2003",
"09/01/2003",
"10/01/2003",
"11/01/2003",
],
markers: {
size: 0,
},
yaxis: {
labels: {
show: true, //or just here to disable only y axis
},
},
xaxis: {
labels: {
show: false, //or just here to disable only y axis
},
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
},
},
},
};
var chart = new ApexCharts(
document.querySelector("#laineColumnChart"),
options
);
chart.render();
// Dashbord-02 Clart-2
var options = {
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}],
chart: {
height: 350,
type: 'area'
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
type: 'datetime',
categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector("#twoLineChart"), options);
chart.render();
// Dashbord-02 Chart-3
var options = {
series: [25, 15, 44, 55, 41, 17],
chart: {
width: '100%',
type: 'pie',
},
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
theme: {
monochrome: {
enabled: true
}
},
plotOptions: {
pie: {
dataLabels: {
offset: -5
}
}
},
title: {
text: "Monochrome Pie"
},
dataLabels: {
formatter(val, opts) {
const name = opts.w.globals.labels[opts.seriesIndex]
return [name, val.toFixed(1) + '%']
}
},
legend: {
show: false
}
};
var chart = new ApexCharts(document.querySelector("#worldrevenueChart"), options);
chart.render();
// Dashbord-02 Chart-4
var options = {
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
chart: {
type: 'bar',
height: 380
},
plotOptions: {
bar: {
barHeight: '100%',
distributed: true,
horizontal: true,
dataLabels: {
position: 'bottom'
},
}
},
colors: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e',
'#f48024', '#69d2e7'
],
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'India'
],
},
yaxis: {
labels: {
show: false
}
},
title: {
text: 'Custom DataLabels',
align: 'center',
floating: true
},
subtitle: {
text: 'Category Names as DataLabels inside bars',
align: 'center',
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function () {
return ''
}
}
}
}
};
var chart = new ApexCharts(document.querySelector("#onlineRevenue"), options);
chart.render();
// Dashbord-02 chart-05
var options = {
series: [44, 55, 13, 43, 22],
chart: {
width: 380,
type: 'pie',
},
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#offlinechart"), options);
chart.render();