Le service gratuit Google Charts comble la plupart des besoins de création et de personnalisation de graphiques (au format SVG) pour permettre de visualiser des données dans une page Web.
L'exemple de démarrage rapide est assez explicite dans ce sens :
- On insère l'API "charts" dans la balise "head"
- On charge l'API avec des paramètres de chargement, comme :
- le package graphique à utiliser pour le rendu ("corechart" pour les graphiques, "table" pour les tableau, etc)
- le script à exécuter lorsque l'API est téléchargée (fonction "callback")
- On créée une visualisation graphique dans un conteneur HTML en précisant le type de graphique que l'on souhaite afficher
- On formate quelques options à appliquer au graphique (titre, tailles, etc)
- On formate les séries de données à visualiser
- Et on dessine le graphique en appliquant les données et les options
On obtient rapidement le code suivant :
<html>
<head>
<meta charset="utf-8">
<!-- Insertion de l'API Charts dans la page -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
// Chargement de l'API Google Charts
google.charts.load('current', {
// Définition du package pour le graphique
packages: ['corechart'],
// Fonction à exécuter lorsque l'API est téléchargée
callback: function() {
// Création de la visualisation "PieChart"
var chart = new google.visualization.PieChart(document.getElementById('ma_div'));
// Formatage des options du graphique
var options = {
title : 'Titre du graphique',
width : 400,
height: 300
};
// Formatage des données
var data = new google.visualization.DataTable();
data.addColumn('string', 'Libellé de série');
data.addColumn('number', 'Valeurs de série 1');
data.addColumn('number', 'Valeurs de série 2');
data.addRows([
['Valeur 1', 1, 2],
['Valeur 2', 2, 3],
['Valeur 3', 3, 4],
['Valeur 4', 4, 5],
['Valeur 5', 5, 6],
]);
// Dessin du graphique avec les données et les options
chart.draw(data, options);
}
});
</script>
</head>
<body>
<div id="ma_div"></div>
</body>
</html>Optimiser le chargement de la librairie Google Charts
Avec le code vu précédemment, on peut tout de suite noter que le script est téléchargé avant le contenu de la page, et que la création du graphique est dépendante du chargement effectif (synchrone) de la librairie Google Charts pour fonctionner.
Si on souhaite optimiser le chargement du contenu principal, il faut donc pouvoir insérer la librairie sans bloquer l'exécution du reste du code de la page (chargement asynchrone) et sans générer une erreur JavaScript lors de l'exécution du script qui en dépend.
Uncaught ReferenceError: google is not defined
Le plugin "Chart" pour utiliser l'API Google Charts
Le plugin "Chart" permet d'utiliser la librairie Google Charts à n'importe quel moment sans se soucier du chargement de la librairie qu'il va gérer lui même : il ne téléchargera la librairie que lorsque la première création de graphique sera demandée.
La méthodologie de création d'un graphique Google Charts au travers du plugin "Chart" est sensiblement la même qu'auparavant, sauf qu'on va utiliser à présent le pugin pour charger les options de chargement et la fonction de callback à exécuter pour traiter et visualiser les données.
- On insère le plugin "Chart" dans la balise "head"
- On utilise le plugin avec la méthode "Chart" et les paramètres de chargement, comme :
- le package graphique à utiliser pour le rendu ("corechart" pour les graphiques, "table" pour les tableau, etc)
- le script à exécuter lorsque l'API est téléchargée (fonction "callback")
- On englobe le script utilisant le plugin dans un écouteur d'évènement qui attend que la page soit chargée complètement avant d'exécuter le script
Voici à quoi ressemble le code adapté :
<html>
<head>
<meta charset="utf-8">
<!-- Insertion asynchrone du plugin "Chart" dans la page -->
<script src="./Chart.js" async></script>
<!-- Création du graphique -->
<script>
// Attente du chargement complet de la page
window.addEventListener('load', function() {
// Utilisation du plugin Chart
Chart({
// Définition du package pour le graphique
packages: ['corechart'],
// Fonction à exécuter lorsque l'API est téléchargée
callback: function() {
// ...
}
});
});
</script>
</head>
...Exemple complet et téléchargement
C'est la fin de cet article, voici un exemple d'affichage de graphique avec l'utilisation du plugin :)
Cet article vous a-t-il été utile ?
Super :)
Merci d'avoir donné votre avis !
Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !