Réaliser des graphiques dynamiques
On utilise Chartjs pour générer des graphiques dynamiques. Il existe d’autres bibliothèques.
- 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.