Google Chart Tools und WordPress Teil 2

Im Beitrag Google Chart Tools und WordPress konnten Sie sehen, wie einfach es ist mit Hilfe der „Google Image Charts“ Diagramme zu erstellen. Leider sind die Image Charts von Google ein Auslaufmodell. Sie werden nur noch bis April 2015 unterstützt.

Es gibt jedoch mit den „Google Charts“ einen äußerst mächtigen Nachfolger mit
vielen Diagrammtypen und Optionen. Die erzeugten Diagramme werden mit Hilfe von HTML5 und SVG (Skalierbare Vektor Grafiken) gerendert.

Das „Hallo Welt“-Beispiel wieder als Tortendiagramm sieht dann mit Google Charts generiert folgendermaßen aus:

Hier nun der dafür nötige Programmcode:

    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // Laden der Visualisierungs-API und dem Diagrammpaket
      google.load('visualization', '1.0', {'packages':['corechart']});
      // Aufruf der Callback-Funktion drawChart, sobald die
      // API geladen wurde
      google.setOnLoadCallback(drawChart);
      // Die Callback-Funktion
      function drawChart() {
        // Datentabelle
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Text');
        data.addColumn('number', 'Wert');
        data.addRows([
          ['Hallo', 60],
          ['Welt', 40]
        ]);
        // Optionen
        var options = {title: 'Beispiel Hallo Welt',
                       width: 400,
                       height: 200,
                       is3D: true,
                       pieStartAngle: 90,
                       colors: ['orange', '#FFDF89']
        };
        // Erzeugen des Tortendiagramms
        var chart_div = document.getElementById('chart_div');
        var chart = new google.visualization.PieChart(chart_div);
        // Zeichnen des Diagramms
        chart.draw(data, options);
      }
    </script>

<div id='chart_div'></div>

Ganz wichtig ist, dass sich in dem Programmcode keine Leerzeilen befinden.

Weitere Informationen zu den Google Charts finden Sie auf den entsprechenden
Entwickler-Seiten von Google.

[of_autor]