Premiers pas avec la visualisation Google

Chargement et exécution

Google a actuellement deux façons de charger la bibliothèque JS pour Google Visualization (a.k.a 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 est en train de passer de jsapi au chargeur gstatic. [Voir référence de transition][1]

Dans les deux cas, vous devez d’abord inclure l’un des chargeurs avec une balise script, généralement dans le head de votre document, comme ceci :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Une fois que vous avez inclus le chargeur dans votre page Web, vous pouvez l’utiliser pour charger les packages de bibliothèque souhaités en appelant une fonction load.

Pour Loader.js

google.charts.load('current', {packages: ['corechart']});

Pour JSAPI

google.load('visualization', '1', {'packages':['corechart']});

Mais après avoir chargé les packages de bibliothèque, vous devez attendre la fin de leur chargement avant de continuer à les utiliser. La façon d’attendre est de configurer un rappel en appelant une fonction setOnLoadCallback.

Exemple de code (pour le chargeur gstatic) :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 google.charts.load('current', {packages: ['corechart']});
 google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Group');
        data.addColumn('number', 'Gender');
        data.addRows([
          ['Males', 10],
          ['Females', 5]
        ]);

        var options = {
            'title':'Gender distribution',
            'width':300,
            'height':300};
        var chart = new google.visualization.PieChart(
            document.getElementById('gender_chart'));
        chart.draw(data, options);
      }
    </script>

HTML :

<div id="gender_chart"></div>

[JSFIDDLE][2]

[1] : https://developers.google.com/chart/interactive/docs/basic_load_libs#frozen-versions [2] : https://jsfiddle.net/_pirateX/ue88hus0/