Créer des graphiques avec Google Charts en asynchrone

Le service gratuit Google Charts comble la plupart des besoins de création et de personnalisation de graphiques pour permettre de visualiser des données dans une page Web.

Néanmoins, l'exemple de démarrage rapide met en avant une utilisation de la bibliothèque "google" supposant qu'elle est chargée et rendue disponible au préalable de l'exécution d'un script personnalisé (exécution synchrone). En intégrant cet exemple en l'état, on peut se retrouver avec l'erreur "Uncaught ReferenceError: google is not defined", lorsque le script est exécuté avant que la bibliothèque ne soit effectivement chargée.

La fonction gChart() permet de créer des graphiques Google Charts en asynchrone, sans impacter le chargement de la page.

gChart()

Exécute une configuration de graphique Google Charts après le chargement effectif de la librairie "google".

Syntaxe

gChart(options);

Paramètre

options(Object)

Le paramètre options de la fonction gChart() définit la configuration d'un graphique à construire.

packages(Array)

La propriété packages du paramètre options définit le ou les package(s) à charger pour créer les visualisations.
Si ce paramètre est omis, le package "corechart" sera utilisé par défaut.

language(String

La propriété language du paramètre options définit une langue à prendre en compte lors de la construction des graphiques (exemple: "fr").

callback(Function)

La propriété callback du paramètre options définit une fonction de rappel à exécuter lorsque le graphique a été créé.

var container = document.getElementById('graphique');

var options = {
  packages: ['corechart'],
  callback: function() {

    var chart = new google.visualization.PieChart(container);
    // ...

  }
};

gChart(options);

window.gChart=(function(c,h,a,r,t){"use strict";a=[];r=!1;t=!1;
return function(x){x.packages=x.packages||['corechart'];a.push(x);
if(t){t();}else if(!r&&!t){r=c.createElement('SCRIPT');
r.src='https://www.gstatic.com/charts/loader.js';r.onload=function(){
t=function(){while(a.length>0){google.charts.load('current',a.shift())}
};t();};c.getElementsByTagName(h)[0].appendChild(r)}}})(document,'body');