Réaliser des graphiques dynamiques

 

On utilise Chartjs pour générer des graphiques dynamiques. Il existe d’autres bibliothèques.

 

frebourg-ninja-diagramme

 

 

  • Réaliser une page statistiques.html et afficher les deux charts suivants :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

<div class="container"> 
   <div class="row justify-content-md-center">
          <div class="col-10">
<canvas id="myChart" ></canvas>
<canvas id="myChart2" ></canvas>
</div>
</div>
</div>
<script>
var backgroundColor=[
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ];
var borderColor=[
               'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ];

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: backgroundColor,
            borderColor: borderColor,
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

var ctx2 = document.getElementById("myChart2").getContext('2d');
var myDoughnutChart = new Chart(ctx2, {
    type: 'doughnut',
    data : {
    datasets: [{
        data: [10, 20, 30],
        backgroundColor: backgroundColor,
            borderColor: borderColor,
            borderWidth: 1
    }],   
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ],    
}    
});
</script>

 

  • Réaliser la route qui permet d’obtenir le nombre de personnages supérieur à 10 par maison.
  • Afficher sous forme de diagramme ce résultat.
  • Réaliser la route qui permet d’obtenir le nombre de villes par type.
  • Afficher sous forme de diagramme ce résultat.
  • Réaliser une procédure stockée qui permet d’obtenir le nombre de personnages par tranche de 500 ans.
  • Réaliser la route correspondante.
  • Afficher sous forme de diagramme ce résultat.

 

Déploiement

  • Déployer le projet dans une instance.
  • Enregistrer les fichiers dans un répertoire got7  sous Gitlab.