perling/public/assets/js/homeOneChart.js

927 lines
21 KiB
JavaScript

// =========================== 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;
},
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-pertek"), options);
chart.render();
// =========================== Sales Statistic Line Chart End ===============================
// =========================== 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;
},
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-rintek"), options);
chart.render();
// =========================== Sales Statistic Line Chart End ===============================
// =========================== 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;
},
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-amdal"), 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,
},
};
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 ================================
// ================================ Pertek Distribusi Chart Start ================================
var options = {
series: [
{
name: "Usaha Perdagangan dan Jasa",
data: [
20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000,
48000, 18000, 22000,
],
},
{
name: "Property",
data: [
15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000,
38000, 14000, 16000,
],
},
{
name: "Manufaktur",
data: [
12000, 14000, 16000, 18000, 25000, 15000, 20000, 9000, 15000,
28000, 12000, 14000,
],
},
{
name: "Lainnya",
data: [
8000, 10000, 11000, 12000, 18000, 10000, 14000, 7000, 11000,
20000, 9000, 10000,
],
},
],
colors: ["#487FFF", "#FF9F29", "#10B981", "#EF4444"],
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-pertek"),
options
);
chart.render();
// ================================ Pertek Distribusi Chart End ================================
// ================================ Rintek Distribusi Chart Start ================================
var options = {
series: [
{
name: "Usaha Perdagangan dan Jasa",
data: [
20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000,
48000, 18000, 22000,
],
},
{
name: "Property",
data: [
15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000,
38000, 14000, 16000,
],
},
{
name: "Manufaktur",
data: [
12000, 14000, 16000, 18000, 25000, 15000, 20000, 9000, 15000,
28000, 12000, 14000,
],
},
{
name: "Lainnya",
data: [
8000, 10000, 11000, 12000, 18000, 10000, 14000, 7000, 11000,
20000, 9000, 10000,
],
},
],
colors: ["#487FFF", "#FF9F29", "#10B981", "#EF4444"],
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-rintek"),
options
);
chart.render();
// ================================ Rintek Distribusi Chart End ================================
// ================================ Amdal Distribusi Chart Start ================================
var options = {
series: [
{
name: "Usaha Perdagangan dan Jasa",
data: [
20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000,
48000, 18000, 22000,
],
},
{
name: "Property",
data: [
15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000,
38000, 14000, 16000,
],
},
{
name: "Manufaktur",
data: [
12000, 14000, 16000, 18000, 25000, 15000, 20000, 9000, 15000,
28000, 12000, 14000,
],
},
{
name: "Lainnya",
data: [
8000, 10000, 11000, 12000, 18000, 10000, 14000, 7000, 11000,
20000, 9000, 10000,
],
},
],
colors: ["#487FFF", "#FF9F29", "#10B981", "#EF4444"],
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-amdal"),
options
);
chart.render();
// ================================ Amdal Distribusi 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.2, 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 ================================