Alternative Einbaumethode

Die zuerst im Abschnitt Einbauanleitung Grundlagen erscheint wegen der unübersichtlichen Zuweisung der Chartwerte umständlich und in der Tat hat man mit den Interactive Charts noch eine andere Methode des Einbaus, auf die ich hier eingehen werde.

Ajax API laden sowie Visualisierungs-Api laden und initialisieren

Die ersten beiden Schritte sind mit

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

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

google.setOnLoadCallback(drawChart);

identisch. Der Unterschied liegt in der Funktion drawchart.

Die callback-Funktion drawChart

Zunächst wird eine Variable data mit google.visualization.arrayToDataTable initialisiert. Diese Methode ermöglich es, dass die Daten wesentlich kompakter zugewiesen werden:

  var data = google.visualization.arrayToDataTable([

    ['Monat',   '2010', '2011'],

    ['Januar',   11378,  18222],

    ['Februar',   9647,  16344],

    ['März',      9253,  17200],

    ['April',    11559,  15582],

    ['Mai',      13272,  16981],

    ['Juni',     11427,  16104],

    ['Juli',     10661,  16466],

    ['August',   16409,  16380],

    ['September',14854,  14319],

    ['Oktober',  15556,  15992],

    ['November', 16112,  16775],

    ['Dezember', 15329,  18338]

  ]);

Wie man unschwer erkennen kann, habe ich gegenüber dem Ausgangsbeispiel noch eine zweite Zeitreihe mit den Angaben zu den Google Adsense Seitenaufrufe 2011 nach Monaten hinzugefügt. Außerdem wird eine Variable options mit den Einstellungen belegt.

  var options = {

    title: 'Google Adsense Seitenaufrufe 2010 und 2011 nach Monaten',

    hAxis: {title: 'Monat', titleTextStyle: {color: 'red'}}

  };

Schließlich wird die Variable chart initialisiert und mit den Daten- und Optionsvariablen aufgerufen:

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

chart.draw(data, options);

Die Chartgrafik mit diesen Parametern sieht dann so aus: