Créé en 2020 et modifié le 18 May 2021

Créé en 2020 et modifié le 18 May 2021

Logs et graphiques dynamiques

Intro

  • créer le diagramme des cas d’utilisation de votre application

Partie 1

Livrable gitlab : finder/mission8/…

  • réaliser une base de données sqlite choix.db contenant une table choix avec un libelle catégorie, et un timestamp.
    https://docs.djangoproject.com/en/3.0/intro/tutorial02/
  • enregistrer les catégories sélectionnées lors du clic de l’utilisateur, la date et l’heure dans la base.
  • afficher ces catégories sur une page choix.html

 

Partie 2

Livrable gitlab : finder/mission8/…

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>

Partie 3

Livrable gitlab : finder/mission8/…

  • Afficher sous forme de diagramme les catégories choisies lors des recherches (camembert) sur choix.html.