Ausgehend von dem auf der Startseite gezeigten Beispiel Interactive Charts Einführung möchte ich die Grundlagen des Einbaus darlegen.
Diese erfolgt durch mit
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Die Ajax Api ist in erste Linie dafür zuständig, die eigentlichen Chart-Bibliotheken nachzuladen und einige Grundfunktionalitäten bereitzustellen.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Hier wird jetzt das Paket corechart aus der Visualisierung-Api geladen und die Callback-Funktion drawChart initialisiert.
An Stelle von corechart werden, je nach verwendetem Charttyp, andere Pakete geladen. Die callback-Funktion wird im Folgenden weiter erklärt.
Zunächst wird die Variable data initialisiert. Sie enthält die Wertetabelle und die Bezeichner zu den Werten.
var data = new google.visualization.DataTable();
Dann werden Spalten und Zeilen festgelegt:
data.addColumn('string', 'Monat');
data.addColumn('number', 'Seitenaufrufe');
data.addRows(12);
Danach folgende dann wie einzelnen Werte, wobei bei jedem Wert festgelgt wird, welcher Zeile und Spalte er zuzuordnen ist. verkürzt sieht das so aus:
data.setValue(0, 0, 'Januar');
data.setValue(0, 1, 11378);
data.setValue(1, 0, 'Februar');
data.setValue(1, 1, 9647);
Danach wird die Variable chart initialisiert, wobei auch festgelegt wird, in welchem HTML-Element die Grafik gezeichnet werden soll.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
Schließlich wird die draw-Methode des Chart-Objektes aufgerufen. Dabei werden die data-Variable sowie zusätzliche Optionen zur Anzeigegröße der Grafik, zum Grafiktitel und zur Achsenbezeichnung übergeben.
chart.draw(data, {
width: 700,
height: 240,
title: 'Google Adsense Seitenaufrufe 2010 nach Monaten',
hAxis: {
title: 'Monat',
titleColor:'blue'
}
});
Der komplette Code der drwaChart-Funktion sieht dann so aus.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Monat');
data.addColumn('number', 'Seitenaufrufe');
data.addRows(12);
data.setValue(0, 0, 'Januar');
data.setValue(0, 1, 11378);
data.setValue(1, 0, 'Februar');
data.setValue(1, 1, 9647);
data.setValue(2, 0, 'März');
data.setValue(2, 1, 9253);
data.setValue(3, 0, 'April');
data.setValue(3, 1, 11559);
data.setValue(4, 0, 'Mai');
data.setValue(4, 1, 13272);
data.setValue(5, 0, 'Juni');
data.setValue(5, 1, 11427);
data.setValue(6, 0, 'Juli');
data.setValue(6, 1, 10661);
data.setValue(7, 0, 'August');
data.setValue(7, 1, 16409);
data.setValue(8, 0, 'September');
data.setValue(8, 1, 14854);
data.setValue(9, 0, 'Oktober');
data.setValue(9, 1, 15556);
data.setValue(10, 0, 'November');
data.setValue(10, 1, 16112);
data.setValue(11, 0, 'Dezember');
data.setValue(11, 1, 15329);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 700,
height: 240,
title: 'Google Adsense Seitenaufrufe 2010 nach Monaten',
hAxis: {
title: 'Monat',
titleColor:'blue'
}
});
}
Abschließend erwähnt werden muss natürlich noch, dass im HTML-Code der Platzhalter für die Grafik nicht fehlen darf.
<div id="chart_div"></div>
Die hier beschriebene Methode des Einbaus 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 im Abschnitt Alternative Methode eingehen werde.