64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
var yearSelect = document.getElementById("year-select");
|
|
|
|
var chartOptions = {
|
|
chart: {
|
|
height: 510,
|
|
type: 'line',
|
|
fontFamily: 'Plus Jakarta Sans, sans-serif',
|
|
foreColor: '#6E729B',
|
|
toolbar: { show: false },
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2,
|
|
},
|
|
colors: ['#2A8F47'],
|
|
series: [{
|
|
name: 'Pengajuan Surat',
|
|
data: Array(12).fill(0)
|
|
}],
|
|
markers: {
|
|
size: 6,
|
|
strokeWidth: 0,
|
|
hover: { size: 9 },
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: '#D9DBF3',
|
|
padding: { bottom: 0 },
|
|
lines: { show: true },
|
|
},
|
|
labels: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
|
|
xaxis: {
|
|
tooltip: { enabled: false },
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'right',
|
|
offsetY: -10,
|
|
labels: { colors: '#373d3f' },
|
|
},
|
|
};
|
|
|
|
var lineChart = new ApexCharts(document.querySelector("#line-chart"), chartOptions);
|
|
lineChart.render();
|
|
|
|
function fetchMonthlyData(year) {
|
|
fetch(`/getMonthlyData?year=${year}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
lineChart.updateSeries([{ name: 'Pengajuan Surat', data: data }]);
|
|
})
|
|
.catch(error => console.error("Error fetching data:", error));
|
|
}
|
|
|
|
yearSelect.addEventListener("change", function () {
|
|
var selectedYear = this.value;
|
|
fetchMonthlyData(selectedYear);
|
|
});
|
|
|
|
if (yearSelect.value) {
|
|
fetchMonthlyData(yearSelect.value);
|
|
}
|
|
}); |