graph.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <form id="registerForm">
        <label for="register1">Register 1:</label>
        <input type="checkbox" id="register1" name="registers[]" value="0">
        <label for="register2">Register 2:</label>
        <input type="checkbox" id="register2" name="registers[]" value="1">
        <!-- Add more registers as needed -->
        <button type="submit">Update Graph</button>
    </form>

    <canvas id="chartCanvas"></canvas>

    <script>
    document.getElementById('registerForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const formData = new FormData(event.target);
        const selectedRegisters = formData.getAll('registers[]').map(Number);

        fetch('fetch_data.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            const chartData = data.map(row => {
                const registerData = JSON.parse(row.register_data);
                return selectedRegisters.map(registerIndex => registerData[registerIndex]);
            });

            const chartLabels = selectedRegisters.map(registerIndex => 'Register ' + (registerIndex + 1));

            const datasets = chartLabels.map((label, index) => {
                return {
                    label: label,
                    data: chartData.map(row => row[index]),
                    borderColor: `hsl(${index * 45}, 100%, 50%)`,
                    backgroundColor: `hsla(${index * 45}, 100%, 50%, 0.1)`,
                    borderWidth: 1
                };
            });

            const ctx = document.getElementById('chartCanvas').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.map(row => row.created_at),
                    datasets: datasets
                },
                options: {
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'minute'
                            }
                        }
                    }
                }
            });
        });
    });
    </script>
</body>
</html>