Comment utiliser l’API GoogleCharts

Comment utiliser l’API GoogleCharts

  1. Objectifs

    • Être capable de créer des graphiques avec l’API google chart.
  2. Présentation

    • Google Charts est un service Web interactif qui crée des graphiques à partir d’informations fournies par l’utilisateur. L’utilisateur fournit des données et un formatage en JavaScript intégré dans une page Web ; en réponse, le service envoie une image du graphique.
    • Comment utiliser l’API GoogleCharts

    • GoogleCharts est une API qui offre de nombreuses primitives graphiques pour la visualisation interactive de données, prêtes à être intégrées sur des sites web : nuages de points, graphiques en barres, histogrammes, cartes…
    • 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.
    • Google Charts permet d’afficher des visualisations de données (diagrammes/graphiques) sur un site Web. Ces graphiques peuvent être alimentés avec des données statiques ou peuvent être alimentés par des données provenant d’une base de données.

  3. Types de graphiques fournis avec Google Charts

    • Les graphiques ont une apparence par défaut et nous pouvons modifier l’apparence du graphique. Les graphiques sont hautement interactifs et exposent des événements qui nous permettent de les connecter pour créer des structures complexes.
    • Les graphiques sont rendus à l’aide de la technologie HTML5/SVG pour assurer la compatibilité entre navigateurs et entre plates-formes (y compris les iPhones, iPads et Android).
    • Le tableau suivant illustre les différents graphiques disponibles avec Google Charts
    • Type de graphique
      Valeur du paramètre cht (chart type)
      Aperçu
      1 ligne cht=lc
      Multiligne cht=lxy
      Barres horizontale cht=bhs
      Barres verticale cht=bvs
      Camembert 2D cht=p
      Camembert 3D cht=p3
      Diagramme venn cht=v
      Points cht=s
      Radar 1 cht=r
      Carte cht=t
      Compteur cht=gom
      QR code (terrible) cht=qr
  4. Tableau de données

    • Les graphiques sont remplis avec la classe DataTable. Il s’agit d’une table de valeurs bidimensionnelle mutable. Il a des méthodes pour trier, modifier et filtrer les données. Il peut être rempli directement à partir d’une page Web, d’une base de données ou de tout fournisseur de données prenant en charge le protocole Chart Tools Datasource.
    • DataTable est une collection structurée de table spéciale qui contient les données du graphique. Les colonnes du tableau de données représentent les légendes et les lignes représentent les données correspondantes.
    • La méthode addColumn() est utilisée pour ajouter une colonne où le premier paramètre représente le type de données et le second paramètre représente la légende.
    • La méthode addRows() est utilisée pour ajouter des lignes en conséquence.
  5. Utiliser l’API GoogleCharts

    • Pour utiliser l’API GoogleCharts, trois étapes sont nécessaires :
      1. Charger la bibliothèque GoogleCharts (en spécifiant quels modules vont être utilisés)
        • Google dispose actuellement de deux méthodes pour charger la bibliothèque JS pour Google Visualization (alias Google Charts), gstatic loader ( https://www.gstatic.com/charts/loader.js ) et jsapi ( https://www.google.com/jsapi ).
        • Le chargeur gstatic est recommandé car Google passe de jsapi au chargeur gstatic.
        • Donc, vous devez d’abord inclure l’un des chargeurs avec une balise de script , généralement dans la balise <head> de votre document, comme ceci:
          • <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        • Puis appeler la fonction load qui permet de charger la dernière version de l’API (“current“), et de charger les graphiques standard ([“corechart”]).
          • google.charts.load('current', {packages: ['corechart']});
        • Appeler la fonction setOnLoadCallback: qui indique à l’API d’appeler la fonction donnée en argument (drawChart) lorsque l’API est prête à être utilisée.
          •  google.charts.setOnLoadCallback(drawChart);
      2. Définir les données utilisées par le graphique
        • Pour la définition des données il faut paramétrer la fonction drawChart. Ici, on définit des données d’exemple à l’aide d’un tableau 2D, que l’on transforme en type de données data utilisable par GoogleCharts à l’aide de la fonction arrayToDataTable.
        • Exemple:
          • function drawChart() { 
            var data = google.visualization.arrayToDataTable(
                [
                    ['Cours', 'Heures par semaine'],
                    ['Data Mining', 4],
                    ['Anglais',     2],
                    ['Projets',     4],
                    ['BD avancées', 4],
                    ['Autres',     10],
                ]);
            var options = {title: 'Cours de la semaine'};
            
          • Création d’une variable chart correspondant à l’objet graphique piechart (un PieChart) et affichage de celui-ci avec les données exemple data et les options (chart.draw(data, options)).
            • var chart = new
              google.visualization.PieChart(document.getElementById('piechart'));
              chart.draw(data, options);
              
      3. Créer le graphique et démarrer le rendu.
        • Créer le conteneur div qui sera est utilisé pour contenir le graphique dessiné à l’aide de la bibliothèque Google Chart.
          • <div id="barchart" style="width: 900px; height: 500px;"></div>
            
      4. Exemple complet
        • <!DOCTYPE html>
          <html>
          <head>
              <meta charset="utf-8">
              <script type="text/javascript"
              src="https://www.gstatic.com/charts/loader.js"></script>
              <script type="text/javascript"> 
              google.charts.load("current", {packages: ["corechart"]});
              google.charts.setOnLoadCallback(drawChart);
              
              function drawChart() { 
              var data = google.visualization.arrayToDataTable(
                  [
                      ['Cours', 'Heures par semaine'],
                      ['Data Mining', 4],
                      ['Anglais',     2],
                      ['Projets',     4],
                      ['BD avancées', 4],
                      ['Autres',     10],
                  ]);
              var options = {title: 'Cours de la semaine'};
              var chart = new
              google.visualization.PieChart(document.getElementById('piechart'));
              chart.draw(data, options);
              }
              </script>
              </head>
              <body>
              <div id="piechart" style="width: 900px; height: 500px;"></div>
              </body>
              </html>
          

  6. Application: 01

    • Modifiez le code précédent pour afficher les mêmes données que précédemment, mais sous la forme d’un graphique en barres. Vous devez pour cela :
    • Créer un nouvel objet graphique de type BarChart et dessiner le graphe correspondant
      • var chart2 = new
        google.visualization.BarChart(document.getElementById('barchart'));
        chart2.draw(data, options);
    • Ajouter un nouvel élément dans lequel dessiner le graphique en barres :
      • <br /> <!-- Après le piechart --></p> <div id="barchart" style="width: 900px; height: 500px;"></div> <p>
  7. Les Modèles (Models)