google-visualizationAan de slag met Google-visualisatie


Opmerkingen

Google Visualization biedt een flexibel op JavaScript gebaseerd framework voor het maken van een breed scala aan interactieve grafieken die kunnen worden ingesloten op webpagina's. Die grafiektypen zijn onder meer:

Grafieken die zijn gemaakt met Google Visualization kunnen gegevens uit verschillende bronnen bevatten, waaronder JSON, Google Spreadsheets, evenals hardcoded arrays geschreven in Javascript.

Met de Google Visualization API kunt u ook de gegevens filteren en meerdere grafieken koppelen aan een enkele gegevensbron om interactieve dashboards te maken met verschillende dimensies van dezelfde gegevens.

versies

Versie Syntaxis voor het selecteren van deze versie Publicatiedatum
Huidige google.charts.load('current', {packages: ['corechart']}); 2016/02/23
44 google.charts.load('44', {packages: ['corechart']}); 2016/02/23
43 google.charts.load('43', {packages: ['corechart']}); 2015/10/02
42 google.charts.load('42', {packages: ['corechart']}); 2015/04/30
41 google.charts.load('41', {packages: ['corechart']}); 2015/02/23

Volledige lijst met eerdere releases hier .

Bezig met laden en uitvoeren

Google heeft momenteel twee manieren om de JS-bibliotheek voor Google Visualization (ook bekend als Google Charts), gstatic loader ( https://www.gstatic.com/charts/loader.js ) en jsapi ( https://www.google.com/jsapi ).

De gstatic loader wordt aanbevolen omdat Google overstapt van jsapi naar de gstatic loader. Zie overgangsreferentie

In beide gevallen moet u eerst een van de laders met een script , meestal in de head van uw document, als volgt:

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

Nadat u de lader in uw webpagina hebt opgenomen, kunt u deze gebruiken om de gewenste bibliotheekpakketten te laden door een load aan te roepen.

Voor Loader.js

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

Voor JSAPI

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

Maar nadat u de bibliotheekpakketten hebt geladen, moet u wachten tot ze klaar zijn met laden voordat u verdergaat met het gebruik ervan. De manier om te wachten is om een callback in te stellen door de functie setOnLoadCallback aan te roepen.

Voorbeeldcode (voor de gstatic-lader):

<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