Créé en 2018 et modifié le 21 Feb 2020

Créé en 2018 et modifié le 21 Feb 2020

Créé en 2018 et modifié le 21 Feb 2020

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 100 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.