Google Chart Tools

Googles Chart Tools ist eine JavaScript API, mit deren Hilfe man Daten auf Webseiten Visualisieren kann. Googles Chart Tools darf man auf keinen Fall verwechseln mit den Google Image Charts. Letztere werden von Google als Deprecated eingestuft.

Grundlagen

Als Erstes muss die JS Api von Google eingebunden werden. Das geschieht mit:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Dann folgt das eigentliche Script. hier wird zunächst die Visualisierungsbibliothek geladen:

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

Dann wird die auszuführende Funktion festgelegt:

google.setOnLoadCallback(drawChart1);

Diese Funktion drawChart1 beinhaltet

• die eigentlichen Daten einschließlich einer Überschrift
• die Festlegung der Visualisierungsform (PieChart)
• die Festlegung, wo die Grafik angezeigt werden soll (chart_div1)
• am Ende den Befehl zum Zeichnen

Der gesamte JavaScript-Code sieht dann so aus:

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart1);
  function drawChart1() {
    //Die Daten
    var data = google.visualization.arrayToDataTable([
     ['Task', 'Stunden am Tag'],
     ['Arbeiten',     11],
     ['Essen',      2],
     ['Verkehrsmittel',  2],
     ['Fernsehen', 2],
     ['Schlafen',    7]
   ]);
    // Die Überschrift
    var options = {
      title: 'Was ich am Tag so tue'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
    chart.draw(data, options);
  }
</script>

Schließlich benötigt man noch einen Platzhalter für die Anzeige der Grafik:

<div id="chart_div1" style="width: 700px; height: 350px;"></div>

Das fertige Beispiel:

Wenn man an Stelle von PieChart BarChart aufruft wird die Grafik so angezeigt:

Charttypen

In diesen kleinen Beispiele wurden Grafiken vom Typ Pie Chart (Torten Grafik) und vom Typ Bar Chart (Balkengrafik) verwendet. In Googles Chart Gallery werden insgesamt 12 unterschiedliche Charttypen demonstriert:

• Pie Chart - Tortengrafik - Visualisierung mit PieChart
• Scatter Chart - Streudiagramm - Visualisierung mit ScatterChart
• Gauge - Anzeige, ähnliche einem Tachometer
• Geo Chart - Darstellung von Daten auf einer Landkarte
• Table - Tabellendarstellung, also keine Visualisierung im eigentlichen Sinn
• Treemap - "Baumkarte" zur Visualisierung grafischer Strukturen
• Combo Chart - Kombination aus Säulen und Linien
• Line Chart - Liniengrafik
• Bar Chart - Balkengrafik
• Column Chart - Säulengrafik
• Area Chart - Flächengrafik - Visualisierung mit AreaChart
• Candlestick Chart - Kerzengrafik (bekannt aus der Darstellung von Aktienkursen mit Höchst - und Tiefstwerten)
• Bubble Chart -Blasendiagramm
• Stepped Area Chart - Gestufte Flächengrafik

Diese Charts basieren auf der fortgeschrittenen SVG/HTML5-Technologie. In den alten Microsoft-Browsern wird zur Darstellung VML genutzt. Außerdem gibt es weitere Charte-Varianten die nicht von Google stammen und nur bedingt unterstützt werden, teilweise auch solche, die von Google als veraltet eingestuft wurden und nur noch für einen begrenzten Zeitraum unterstützt werden

Alternative Form der Dateneingabe

Im Einführungsbeispiel wurden alle Daten direkt an ein Array übergeben. Diese Methode sah so aus:

//Die Daten
var data = google.visualization.arrayToDataTable([
  ['Task', 'Stunden am Tag'],
  ['Arbeiten',     11],
  ['Essen',      2],
  ['Verkehrsmittel',  2],
  ['Fernsehen', 2],
  ['Schlafen',    7]
]);

Alternativ zu dieser Form ist es auch möglich, schrittweise vorzugehen:

//Die Daten
//Leere Variable definieren
var data = new google.visualization.DataTable();
//Spalten definieren
data.addColumn('string', 'Task');
data.addColumn('number', 'Stunden am Tag');
//Datenzeilen hinzufügen
data.addRows([
  ['Arbeiten',     11],
  ['Essen',      2],
  ['Verkehrsmittel',  2],
  ['Fernsehen', 2],
  ['Schlafen',    7]
]);

Außerdem hab ich im options-Abschnitt noch is3D:true hinzugefügt, so dass die angezeigte Grafik auch noch einen 3D-Effekt hat:

Weitere Möglichkeiten

Google Charts sind bei weitem nicht die einzige Möglichkeit, Daten zu Visualisieren. So gibt es beispielsweise auch von JpGraph eine sehr umfangreiche kostenlose Variante. Während Google die Charts als SVG ausgibt erzeugt JpGraph echte Pixelgrafiken.

Ganz und gar auf PHP-Code setzt LibChart. Auch hier werden reine Pixelgrafiken erzeugt.

Mit Hilfe einer Flash-Datei erzeugt XML/SWF-Charts die Charts.