TD 1 - Premiers graphiques

Retour sur les maquettes

• N'hésitez pas à ajouter de la couleur, faire un travail sur le choix des polices, travail sur les typographies, ...

• Des mises en avant de chiffres, de phrases, ... (animées ou non), peuvent être pertinentes pour casser une routine de lecture sur les pages.

• Des photos et illustrations peuvent être utilisées

• Une icônographie peut être utilisée

Questions/réponses

• Pas de responsive imposé

• Librairies CSS autorisées

• Icône, images existantes autorisées

Création de graphiques en JavaScript

Pour générer des graphiques sur le web il existe plusieurs solutions

• Méthodes statiques

  • L'image et le graphique sont construits avec un logiciel de création graphique classique, ou excel, ou équivalent. L'image est enregistrée et on la dépose sur le serveur web pour l'afficher comme une image classique.

• Méthodes "dynamique"

  • On peut générer en back en créant une image, à partir de données en PHP (avec la librairie GD ou d'autres (http://www.pchart.net/ par exemple), et l'afficher comme une image. Cette solution est intéressante, mais ne permet pas forcément une grande interactivité avec le graphique produit

  • Le générer avec un langage front, comme JavaScript. Dans ce cas il existe de nombreuses librairies (une liste non exhaustive ici : https://geekflare.com/fr/charting-libraries/). Cette solution permet une grande interactivité avec les données et le résultat produit.

Librairies JS

Pour ce premier exemple on va utiliser Chart.js (mais toutes les autres fonctionnent sur une logique similaire).

ChartJs, va générer du Canvas qui est intégré directement dans votre page HTML à partir d'une source de données JavaScript.

Mise en place

Partie HTML

Intégration du graphique dans votre page HTML

// Some code
<div>
  <canvas id="myChart"></canvas>
</div>

Il faut définir un objet "canvas" avec un id, dans lequel le graphique sera inséré. Vous pouvez ajouter autant de zone de graphique que vous le souhaitez.

Il faut ensuite ajouter la dépendance à ChartJs

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Soit en CDN (comme ci-dessus) ou en intégrant les fichiers que vous auriez téléchargé.

Partie JavaScript

Soit directement dans le fichier HTML, soit en incluant un fichier js.

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    {
    type: 'line',
    data: {
      labels: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
      ],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],
      }]
    },
    options: {}
  }
  );
</script>

Le code ci-dessus permet de construire un objet Chart, avec deux paramètres :

• L'id (lien avec le canva) où sera mis en place le graphique

• Un objet JSON qui contient la construction du graphique.

Cette seconde partie de code va permettre de définir les éléments du graphique.

• Le type (line, pie, plot, ...)

• Les "data" (la forme de cette partie peut varier selon le type de graphique)

Les "data" sont souvent composées d'un nom (label), de données (data), et souvent de paramètres de couleurs ou d'option. Consulter la documentation pour chaque type de graphique.

Exercice

• Mettre en place votre premier graphique avec ChartJS (ou une librairie de votre choix)

Gestion des données

Comme vous le constatez les données sont inscrites directement dans la configuration. Ce qui peut être bien, mais n'est pas forcément optimal si les données doivent changer régulièrement.

Elles peuvent donc provenir d'un fichier JSON qui serait récupéré depuis une API par exemple, ou d'un appel API directement, ...

Ci-dessous un exemple se basant sur un fichier JSON.

Import d'un fichier JSON

fetch('./data.json')
            .then(response => response.json())
            .then(dataJson => {
            
            })
.catch(error => console.error('Erreur lors du chargement des données JSON:', error));

Soit si c'est un fichier JavaScript importé

<script src="assets/js/graphiques.js" defer type="module"></script>

Modification

Le code du graphique doit donc manipuler les données du fichier Json

Exemple de fichier JSON

{
    "mmi1": {
        "h":73,
        "f": 44
    },
    "mmi2": {
       "crea": {
            "h": 17,
            "f": 13
        },
        "comm": {
            "h": 11,
            "f": 4
        },
        "devFi": {
            "h": 18,
            "f": 7
        },
        "devFc": {
            "h": 74,
            "f": 28
        }
    }
}

Exemple d'utilisation dans le javascript

fetch('./data.json')
            .then(response => response.json())
            .then(dataJson => {

        const chartGenreComm = new Chart(
            document.getElementById('chartGenreComm'),
            {
                type: 'pie',
                data: {
                    labels: [
                        'Homme',
                        'Femme'
                    ],
                    datasets: [{
                        label: 'Répartition des genres Parcours Communication',
                        backgroundColor: [
                            'rgb(255, 99, 132)',
                            'rgb(54, 162, 235)',
                        ],
                        hoverOffset: 4,
                        data: [dataJson.mmi2.comm.h, dataJson.mmi2.comm.f],
                    }]
                },
                options: {
                    plugins: {
                        title: {
                            text: 'Répartition des genres Parcours Communication',
                            display: true
                        }
                    }
                }
            }
        );
        })
        .catch(error => console.error('Erreur lors du chargement des données JSON:', error));

Ajouter des données

Il est possible d'ajouter ou de retirer des données en lien avec un graphique existant.

Exemple de code javascript, à associer sur un bouton avec un id "bouton", et un chart nommé charteGenreMMI2. Les données sont fixées par le code ici, elles peuvent venir de sources, de formulaires, ...

const charte2 = new Chart(
            document.getElementById('charte2'),
            {
                type: 'bar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            }
        );

        //un clic sur le bouton avec l'id bouton doit ajouter un élément au charte2
        document.getElementById('bouton').addEventListener('click', () => {
            charte2.data.labels.push('New');
            charte2.data.datasets[0].data.push(10);
            charte2.update();
        });

Documentation associée :

https://www.chartjs.org/docs/latest/developers/updates.html