File "display.php"

Full Path: /home/analogde/www/CURL/Dev tableau/burndown/display.php
File size: 1.9 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Graphique</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        // Fonction pour récupérer les données via AJAX
        function fetchCurvePoints() {
            fetch('backend.php')
                .then(response => response.json())
                .then(data => {
                    // Extraire les valeurs x et y
                    var xValues = data.map(point => point.x);
                    var yValues = data.map(point => point.y);

                    // Créer le graphique avec Chart.js
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: xValues,
                            datasets: [{
                                label: 'Courbe',
                                data: yValues,
                                borderColor: 'rgba(75, 192, 192, 1)',
                                borderWidth: 1,
                                fill: false
                            }]
                        },
                        options: {
                            scales: {
                                x: {
                                    beginAtZero: true
                                },
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    });
                })
                .catch(error => console.error('Erreur:', error));
        }

        // Appeler la fonction pour récupérer les données et créer le graphique
        fetchCurvePoints();
    </script>
</body>
</html>