const form = document.getElementById('healthForm');
const dataTable = document.getElementById('dataTable');
const healthChart = document.getElementById('healthChart').getContext('2d');
let dataRecords = [];
// Menangani Submit Form
form.addEventListener('submit', function (e) {
e.preventDefault();
const sistolik = parseInt(document.getElementById('sistolik').value);
const diastolik = parseInt(document.getElementById('diastolik').value);
const kolesterol = parseInt(document.getElementById('kolesterol').value);
const tanggal = new Date().toLocaleDateString();
const newData = { tanggal, sistolik, diastolik, kolesterol };
dataRecords.push(newData);
updateTable();
updateChart();
form.reset();
});
// Update Tabel
function updateTable() {
dataTable.innerHTML = '';
dataRecords.forEach(record => {
const row = `
| ${record.tanggal} |
${record.sistolik} |
${record.diastolik} |
${record.kolesterol} |
`;
dataTable.innerHTML += row;
});
}
// Update Grafik
function updateChart() {
const labels = dataRecords.map(record => record.tanggal);
const sistolikData = dataRecords.map(record => record.sistolik);
const diastolikData = dataRecords.map(record => record.diastolik);
const kolesterolData = dataRecords.map(record => record.kolesterol);
new Chart(healthChart, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Sistolik',
data: sistolikData,
borderColor: '#ff4c4c',
fill: false
},
{
label: 'Diastolik',
data: diastolikData,
borderColor: '#ffa500',
fill: false
},
{
label: 'Kolesterol',
data: kolesterolData,
borderColor: '#00aaff',
fill: false
}
]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
}