591 lines
15 KiB
JavaScript
591 lines
15 KiB
JavaScript
// =========================== Default Line Chart Start ===============================
|
|
var options = {
|
|
series: [{
|
|
name: "This month",
|
|
data: [0, 48, 20, 24, 6, 33, 30, 48, 35, 18, 20, 5]
|
|
}],
|
|
chart: {
|
|
height: 264,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
colors: ['#487FFF'],
|
|
width: 4
|
|
},
|
|
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("#defaultLineChart"), options);
|
|
chart.render();
|
|
// =========================== Default Line Chart End ===============================
|
|
|
|
// =========================== Zoom able Line Chart End ===============================
|
|
function createChartTwo(chartId, chartColor) {
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: 'This Day',
|
|
data: [12, 18, 12, 48, 18, 30, 18, 15, 88, 40, 65, 24, 48],
|
|
},
|
|
],
|
|
chart: {
|
|
type: 'area',
|
|
width: '100%',
|
|
height: 264,
|
|
sparkline: {
|
|
enabled: false // Remove whitespace
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 4,
|
|
colors: [chartColor],
|
|
lineCap: 'round'
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: '#D1D5DB',
|
|
strokeDashArray: 3,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
row: {
|
|
colors: undefined,
|
|
opacity: 0.5
|
|
},
|
|
column: {
|
|
colors: undefined,
|
|
opacity: 0.5
|
|
},
|
|
padding: {
|
|
top: 0,
|
|
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: .6, // Starting opacity
|
|
opacityTo: 0.3, // Ending opacity
|
|
stops: [0, 100],
|
|
},
|
|
},
|
|
// Customize the circle marker color on hover
|
|
markers: {
|
|
colors: [chartColor],
|
|
strokeWidth: 3,
|
|
size: 0,
|
|
hover: {
|
|
size: 10
|
|
}
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
labels: {
|
|
formatter: function (value) {
|
|
return value;
|
|
},
|
|
style: {
|
|
fontSize: "14px"
|
|
}
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (value) {
|
|
return "$" + value + "k";
|
|
},
|
|
style: {
|
|
fontSize: "14px"
|
|
}
|
|
},
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd/MM/yy HH:mm'
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
|
|
chart.render();
|
|
}
|
|
createChartTwo('zoomAbleLineChart', '#487fff');
|
|
// =========================== Zoom able Line Chart End ===============================
|
|
|
|
// =========================== Line Chart With Data labels Start ===============================
|
|
var options = {
|
|
series: [{
|
|
name: "Desktops",
|
|
data: [5, 25, 35, 15, 21, 15, 35, 35, 51]
|
|
}],
|
|
chart: {
|
|
height: 264,
|
|
type: 'line',
|
|
colors: '#000',
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
},
|
|
colors: ['#487FFF'], // Set the color of the series
|
|
dataLabels: {
|
|
enabled: true
|
|
},
|
|
stroke: {
|
|
curve: 'straight',
|
|
width: 4,
|
|
color: "#000"
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
strokeWidth: 3,
|
|
hover: {
|
|
size: 8
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: '#D1D5DB',
|
|
strokeDashArray: 3,
|
|
row: {
|
|
colors: ['#f3f3f3', 'transparent'],
|
|
opacity: 0,
|
|
},
|
|
},
|
|
// Customize the circle marker color on hover
|
|
markers: {
|
|
colors: '#487FFF',
|
|
strokeWidth: 3,
|
|
size: 0,
|
|
hover: {
|
|
size: 10
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (value) {
|
|
return "$" + value + "k";
|
|
},
|
|
style: {
|
|
fontSize: "14px"
|
|
}
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#lineDataLabel"), options);
|
|
chart.render();
|
|
// =========================== Line Chart With Data labels End ===============================
|
|
|
|
// =========================== Double Line Chart Start ===============================
|
|
function createLineChart(chartId, chartColor) {
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: 'This Day',
|
|
data: [8, 15, 9, 20, 10, 33, 13, 22, 8, 17, 10, 15],
|
|
},
|
|
{
|
|
name: 'Example',
|
|
data: [8, 24, 18, 40, 18, 48, 22, 38, 18, 30, 20, 28],
|
|
},
|
|
],
|
|
chart: {
|
|
type: 'line',
|
|
width: '100%',
|
|
height: 264,
|
|
sparkline: {
|
|
enabled: false // Remove whitespace
|
|
},
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
colors: ['#487FFF', '#FF9F29'], // Set the color of the series
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 4,
|
|
colors: ["#FF9F29", chartColor],
|
|
lineCap: 'round',
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: '#D1D5DB',
|
|
strokeDashArray: 3,
|
|
position: 'back',
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
row: {
|
|
colors: undefined,
|
|
opacity: 0.5
|
|
},
|
|
column: {
|
|
colors: undefined,
|
|
opacity: 0.5
|
|
},
|
|
padding: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
},
|
|
// Customize the circle marker color on hover
|
|
markers: {
|
|
colors: ["#FF9F29", chartColor],
|
|
strokeWidth: 3,
|
|
size: 0,
|
|
hover: {
|
|
size: 10
|
|
}
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
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"
|
|
}
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (value) {
|
|
return "$" + value + "k";
|
|
},
|
|
style: {
|
|
fontSize: "14px"
|
|
}
|
|
},
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd/MM/yy HH:mm'
|
|
},
|
|
},
|
|
legend: {
|
|
show: false
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
|
|
chart.render();
|
|
}
|
|
createLineChart('doubleLineChart', '#487fff');
|
|
// =========================== Double Line Chart End ===============================
|
|
|
|
|
|
// =========================== Step Line Chart Start ===============================
|
|
var options = {
|
|
series: [{
|
|
data: [16, 25, 38, 50, 32, 20, 42, 18, 4, 25, 12, 12],
|
|
name: "Example",
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
height: 270,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: 'stepline',
|
|
},
|
|
colors: ['#487FFF'], // Set the color of the series
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
markers: {
|
|
hover: {
|
|
sizeOffset: 4
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: '#D1D5DB',
|
|
strokeDashArray: 3,
|
|
position: 'back',
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
},
|
|
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"
|
|
}
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (value) {
|
|
return "$" + value + "k";
|
|
},
|
|
style: {
|
|
fontSize: "14px"
|
|
}
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#stepLineChart"), options);
|
|
chart.render();
|
|
// =========================== Step Line Chart End ===============================
|
|
|
|
// =========================== Gradient Line Chart Start ===============================
|
|
var options = {
|
|
series: [{
|
|
name: "This month",
|
|
data: [12, 6, 22, 18, 38, 16, 40, 8, 35, 18, 35, 22, 50]
|
|
}],
|
|
chart: {
|
|
height: 264,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
colors: ['#FF9F29'], // Specify the line color here
|
|
width: 4
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
gradientToColors: [ '#0E53F4'],
|
|
shadeIntensity: 1,
|
|
type: 'horizontal',
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 100, 100, 100]
|
|
},
|
|
},
|
|
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
|
|
},
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#gradientLineChart"), options);
|
|
chart.render();
|
|
// =========================== Gradient Line Chart End ===============================
|
|
|