Einfache Grafiken mit Google Chart Tools

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Die Google Chart Tools bieten verschiedene Möglichkeiten, um jeder Webseite auf einfache Weise Diagramme hinzuzufügen. Diagramme können statisch oder interaktiv sein. In diesem Lernprogramm erfahren Sie, wie Sie beide verwenden.

Statische und interaktive Diagramme

Es gibt zwei verschiedene Arten von Diagrammen, die Diagrammwerkzeuge generieren können: Bilddiagramme (statische Diagramme) und interaktive Diagramme.

Bilddiagramme.- Verwenden Sie die Google Chart API.
Interaktive Diagramme. - Verwenden Sie die Google Visualization API.

Bilddiagramme sind recht einfach zu verwenden, interaktive Diagramme sind jedoch weitaus flexibler, da sie Ereignisse auslösen können, mit denen wir mit anderen Elementen auf der Seite interagieren können.

Erstens der supereinfache Weg

Ja, es gibt eine super einfache Möglichkeit, ein Diagramm in Ihre Seite aufzunehmen - so einfach wie das Schreiben einer URL, wie dieser:

1	http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones\|Computers\|Services\|Other&chtt=Company%20Sales&chco=ff0000

Wenn Sie diese URL kopieren und in Ihren Browser einfügen, wird Folgendes angezeigt:

Sie können das Bild an einer beliebigen Stelle auf Ihrer Seite platzieren, indem Sie die URL als src-Attribut eines Bild-Tags verwenden:

1	<img src='http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones\|Computers\|Services\|Other&chtt=Company%20Sales&chco=ff0000'>

Das ist die Google Charts-API. Anforderungen werden als GET- oder POST-URLs gesendet, und der Google Charts-Server gibt als Antwort ein PNG-Bild zurück. Der Diagrammtyp, die Daten und die Optionen werden alle im Abfragering der URL angegeben. Die API definiert, wie das geht. Lassen Sie uns die verschiedenen Optionen überprüfen.

http://chart.apis.google.com/chart?

Dies ist die Basis-URL. Wir werden es für alle Forderungen von den Bilddiagrammanen verwenden. Der Rest sind Parameter in der Form name=value, die durch und getrennt sind.

Obligatorische Parameter

Es gibt nur drei obligatorische Parameter: cht, chs und chd. Der Rest ist optional.

cht=p3

Dies ist der Diagrammtyp. Wir verwenden ein 3D-Kreisdiagramm, das p3 ist. Sie können die Diagrammgalerie für alle verfügbaren Diagrammtypen besuchen.

chs=450x200

Dies ist die Diagrammgröße in Pixel (Breite x Höhe).

chd=t:2,4,3,1

Das sind die Daten, die im Diagramm angezeigt werden sollen. Der erste Buchstabe (t) gibt das Datenformat an. In diesem Fall verwenden wir das grundlegende Textformat, bei dem es sich um eine Liste von durch Kommas getrennten Werten handelt.

Optionale Parameter

Jeder Diagrammtyp verfügt über einige optionale Parameter zum Konfigurieren einiger Aspekte Ihres Diagramms: Titel, Beschriftungen, Schriftarten, Farben, Verläufe usw. Folgendes haben wir aufgenommen:

chl=Phones|Computers|Services|Other

Diagrammbeschriftungen für jedes Tortenstück.

chtt=Company%20Sales

Diagrammtitel.

chco=ff0000

Diagrammfarbe im hexadezimalen Format rrggbb.

Wenn Sie eine einzelne Farbe angeben, haben die Slices unterschiedliche Abstufungen. Sie können auch einen Farbverlauf mit zwei Farben (chco=ff0000,00ff00) oder eine Farbe für jede Schicht (chco=ff0000|3355aa|8322c2|112233) angeben.

Das ist es für Bilddiagramme. Da ist nicht viel dran! Es gibt viele verschiedene Diagrammtypen, und wenn Sie mit den Parametern spielen, können Sie einige wirklich schöne Ergebnisse erzielen. Der Google Live Chart Playground ist hierfür ein hervorragendes Tool. Sie spielen mit Parametern und sehen die Änderungen im generierten Bild - eine einfache Möglichkeit, die URL für Ihr Diagramm zu optimieren!

Interaktive Diagramme

Um interaktive Diagramme in Ihre Webseiten aufzunehmen, müssen Sie eine andere API verwenden: die Google Visualization API. In diesem Fall ist die Schnittstelle keine URL. Sie müssen eine JavaScript-Bibliothek verwenden und ein paar Codezeilen schreiben - aber nichts Schwieriges.

Es gibt eine Galerie mit vorgefertigten Visualisierungen(Grafiken), die Sie verwenden können. Sie können auch ein eigenes Diagramm erstellen und freigeben, aber die Visualisierungen in der Galerie decken wahrscheinlich den größten Teil Ihres Bedarfs für die Anzeige von Daten ab.

Der Grad der Interaktivität hängt von den jeweiligen Visualisierungen ab, die Sie verwenden. Normalerweise reagiert das Diagramm beim Klicken auf eine bestimmte Weise (mit einem Tooltip oder einer Animation). Die wirklich leistungsstarke Funktion besteht jedoch darin, dass Ereignisse ausgelöst werden können und Sie Rückrufe registrieren können, um alle mit diesem Ereignis verbundenen Aktionen auszuführen. Beispiele für Ereignisse können die Auswahl eines Balkens oder eines Tortenstücks, mouseOver, mouseOut usw. sein.

Wir verwenden lokale Daten, um die Visualisierungen in unseren Beispielen zu füttern, aber Sie können Ihre Daten auf andere Weise erhalten. Eine übliche Option wäre das Abrufen der Daten aus einer Datenbank mit AJAX. Sie können sogar die Visualisierungs-API verwenden. Es definiert auch eine Möglichkeit, Daten (für Server) in einem Format anzufordern und anzubieten, das in jeder Visualisierung sofort verwendet werden kann. Wir werden dies hier jedoch nicht behandeln.

Formatierung der Daten

Es spielt keine Rolle, wie wir unsere Daten erhalten, aber alle Visualisierungen müssen sie in einem DataTable-Objekt empfangen. Es ist im Grunde eine Tabelle mit Zeilen und Spalten. Jede Spalte wird mit einem bestimmten Datentyp definiert (und einer ID und einer Bezeichnung, die optional sind).

Um auf eine bestimmte Zelle in der Tabelle zu verweisen, verwenden Sie das Paar (Zeile, Spalte). Zeile ist immer eine Zahl, beginnend mit einer Null. Die Spalte kann auch eine auf Null basierende Zahl oder eine optionale ID sein.

Wenn wir die Ergebnisse unseres Unternehmens im Jahr 2009 in einem Säulendiagramm darstellen möchten, müssen wir die Daten folgendermaßen aufbereiten:

Quartale 2009	Verdienste
Q1	308
Q2	257
Q3	375
Q4	123

Zwei Spalten: Die erste (mit dem Typ 'string') ist die Bezeichnung für jeden Balken im Diagramm und die zweite (mit dem Typ 'number') ist der Wert für diesen Balken. Wir haben vier Zeilen, was bedeutet, dass vier Balken angezeigt werden müssen.

Wie fügen wir das in ein DataTable-Objekt ein? Dies ist der Code dafür - jede Zeile wird später erklärt:

//create data table object
var dataTable = new google.visualization.DataTable();

//define columns
dataTable.addColumn('string','Quarters 2009');
dataTable.addColumn('number', 'Earnings');

//define rows of data
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

Zuerst erstellen wir unser DataTable-Objekt mit:

1	var dataTable = new google.visualization.DataTable();

Dann definieren wir die beiden Spalten in unserer Tabelle mit der Methode addColumn(). Der erste Wert ist der Typ und der zweite Wert ist die optionale Bezeichnung.

1	dataTable.addColumn('string','Quarters 2009');
2	dataTable.addColumn('number', 'Earnings');

Und schließlich definieren wir die Datenzeilen mit der Methode addRows().

1	dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

Jede Zeile ist ein Array, und alle Daten sind auch in einem anderen Array enthalten.

Zeilen können auch zeilenweise definiert werden:

1	dataTable.addRow(['Q1',308]);

oder sogar eine Zelle gleichzeitig:

1	data.setValue(0, 0, 'Q1');

Hier sind die ersten beiden Zahlen die Zeile bzw. Spalte.

Auf diese Weise können Sie DataTable-Objekte erstellen. Jede Visualisierung muss mit Daten in diesem Format geladen werden. Das bedeutet nicht, dass die Tabelle für jede Visualisierung gleich ist. Die jeweilige Anzahl und Art der Spalten und Zeilen muss in der Dokumentation für jedes Diagramm überprüft werden.

Visualisierung unserer Daten als Säulendiagramm

In diesem ersten Beispiel verwenden wir ein Säulendiagramm, um unsere Daten darzustellen. In der Google Visualization Gallery können wir auf einen beliebigen Diagrammtyp klicken, um Dokumentation und Beispiele anzuzeigen.

Um eine Visualisierung verwenden zu können, müssen wir zuvor die Google AJAX-API laden. Es bietet die Kernfunktionalität, die in vielen anderen Google-APIs benötigt wird.

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

Jetzt können wir die Visualisierungs-API mit der Funktion google.load() (von der AJAX-API) laden:

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

Der zweite Parameter '1' bezieht sich auf die zu ladende Version der API ('1' bedeutet die aktuelle Version). 'packages' ist ein Array mit allen Visualisierungen, die wir verwenden werden. In diesem Fall verwenden wir nur eines: das Säulendiagramm.

Zu diesem Zeitpunkt verfügen wir über die erforderlichen Bibliotheken, um unser DataTable-Objekt zu erstellen und unser Diagramm anzuzeigen. Wir müssen jedoch sicherstellen, dass die Visualisierung vollständig geladen ist, da sonst JavaScript-Fehler auftreten und unser Diagramm nicht angezeigt wird.

Der Weg besteht darin, einen Rückruf zu registrieren. Die Funktion wird aufgerufen, wenn die Visualisierung (API und Paket) geladen wird.

1	//set callback
2	google.setOnLoadCallback (createChart);

In der Funktion createChart erstellen wir unsere Datentabelle und unser Diagramm. Der endgültige, vollständige Code lautet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Google Charts Tutorial</title>

        <!-- load Google AJAX API -->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load the Google Visualization API and the chart
            google.load('visualization', '1', {'packages': ['columnchart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','Quarters 2009');
                dataTable.addColumn('number', 'Earnings');

                //define rows of data
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //instantiate our chart object
                var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

                //draw our chart
                chart.draw(dataTable, options);

            }
        </script>

    </head>

    <body>

        <!--Div for our chart -->
        <div id="chart"></div>

    </body>
</html>

Das Diagrammobjekt wird mit folgender Zeile erstellt:

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

Das Argument ist die DOM-Referenz auf das Element, das die Visualisierung enthält. In diesem Fall haben wir ein <div id="chart"></div>.

Dann definieren wir die gewünschten Optionen und zeichnen das Diagramm:

1	var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
2	chart.draw(dataTable, options);

Unsere Grafik sieht folgendermaßen aus:

Hinweis: Alle Bilder hier sind statisch, um das Lernprogramm unabhängig von Ihrem Browser oder Ihren JavaScript-Einstellungen verfügbar zu machen. Überprüfen Sie die Live-Demo für die interaktive Version.

Und ein Tortendiagramm auch

Der Vorteil eines klar definierten Datenformats besteht darin, dass Sie, sobald Sie wissen, wie ein DataTable-Objekt erstellt und gefüllt wird, wissen, wie Sie eine Visualisierung einspeisen. Sie müssen nur die Dokumentation überprüfen, um die bestimmte Tabelle (Anzahl und Art der Spalten) zu sehen, die Sie erstellen müssen.

Für ein Kreisdiagramm können wir genau dieselbe Tabelle verwenden, die wir jetzt haben. Fügen wir auf derselben Seite ein Kreisdiagramm hinzu.

Wir müssen unser neues Paket in die Zeile google.load() einfügen:

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

und erweitern Sie unsere createChart-Funktion mit diesen beiden Zeilen:

1	var secondChart = new google.visualization.PieChart (document.getElementById('secondChart'));
2	secondChart.draw(dataTable, options);

Der vollständige Code lautet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Google Charts Tutorial</title>

        <!-- load Google AJAX API -->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load the Google Visualization API and the chart
            google.load('visualization', '1', {'packages':['columnchart','piechart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','Quarters 2009');
                dataTable.addColumn('number', 'Earnings');

                //define rows of data
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //instantiate our chart objects
                var chart = new google.visualization.ColumnChart (document.getElementById('chart'));
                var secondChart = new google.visualization.PieChart (document.getElementById('Chart2'));

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

                //draw our chart
                chart.draw(dataTable, options);
                secondChart.draw(dataTable, options);

            }
        </script>

    </head>

    <body>

        <!--Divs for our charts -->
        <div id="chart"></div>
        <div id="Chart2"></div>


    </body>
</html>

Und die generierten Diagramme:

Hinweis: Überprüfen Sie die Live-Demo auf die interaktive Version.

Das war in diesem Fall einfach, da beide Visualisierungen dieselben Tabellenspalten und -zeilen verwendeten. Es gibt jedoch Visualisierungen, die mehr Spalten oder Spalten unterschiedlichen Typs benötigen, und Sie können die Datentabelle nicht direkt verwenden. Sie können dies jedoch lösen, indem Sie eine andere Ansicht der Originaltabelle generieren, um eine Visualisierung zu erstellen. Wir werden das in Kürze überprüfen.

Weitere Spalten für unser Säulendiagramm!

Die Datentabelle für ein Säulendiagramm muss nicht so einfach sein wie im vorherigen Beispiel. Wir können zum Beispiel Balken haben, die das Ergebnis für jedes Quartal in den letzten drei Jahren darstellen. In diesem Fall die Daten Tisch würde so aussehen:

Viertel	Ergebnis 2009	Ergebnis 2008	Ergebnis 2007
Q1	308	417	500
Q2	257	300	420
Q3	375	350	235
Q4	123	100	387

Der einzige Code, den wir gegenüber unserem ersten Beispiel ändern müssen, ist das DataTable-Objekt, um zwei weitere Spalten und mehr Daten in jede Zeile einzufügen:

//create data table object
var dataTable = new google.visualization.DataTable();

//define columns
dataTable.addColumn('string','Quarters');
dataTable.addColumn('number', 'Earnings 2009');
dataTable.addColumn('number', 'Earnings 2008');
dataTable.addColumn('number', 'Earnings 2007');

//define rows of data
dataTable.addRows([['Q1',308,417,500], ['Q2',257,300,420],['Q3',375,350,235],['Q4', 123,100,387]]);

Der Rest des Codes ändert sich nicht. Das generierte Diagramm lautet:

Was aber, wenn wir jetzt ein Kreisdiagramm verwenden möchten, um einen Teil dieser Daten darzustellen? Wir können nicht dieselbe Datentabelle wie zuvor verwenden, da Kreisdiagramme eine zweispaltige Tabelle (Slice-Bezeichnung und Wert) benötigen. Es gibt eine einfache Möglichkeit, eine andere Tabelle als ein vorhandenes DataTable-Objekt abzurufen und damit ein Diagramm zu füttern: Datenansichten.

Datenansichten verwenden

Ansichten sind eine Möglichkeit, unsere Tabelle für eine andere Visualisierung anzupassen. Wenn wir jetzt auf derselben Seite ein Kreisdiagramm mit der vierteljährlichen Gewinnverteilung für das letzte Jahr anzeigen möchten, benötigen wir nur folgende Tabelle:

Viertel	Ergebnis 2009
Q1	308
Q2	257
Q3	375
Q4	123

In einer Datenansicht (DataView-Objekt) können Sie nur eine Teilmenge der Originaldaten verwenden. Sie können Spalten und Zeilen neu anordnen oder duplizieren oder Spalten mit berechneten Werten einfügen.

Erstellen Sie zunächst das View-Objekt:

1	var view = new google.visualization.DataView(dataTable);

Eine Datenansicht wird mit der Originaltabelle initialisiert. Anschließend verwenden wir die DataView-Methoden, um Spalten oder Zeilen (setColumns(), hideColumns(), setRows(), hideRows(), getFilteredRows, getColumnRange usw.) auszublenden, anzuzeigen oder zu filtern.

Mit setColumns() können wir die ursprüngliche Tabelle filtern, um nur die ersten beiden Spalten (Spalten 0 und 1) abzurufen:

1	view.setColumns([0, 1]);

Jetzt können wir das Kreisdiagramm mit dieser Ansicht als Datentabelle zeichnen:

1	secondChart.draw(view, options);

Denken Sie daran, dass wir das piechart-Paket in google.load() einschließen und das pieChart-Objekt erstellen müssen mit:

1	var secondChart = new google.visualization.PieChart

Jetzt können wir beide Diagramme sehen, die mit derselben Datentabelle erstellt wurden:

Ereignisse vorstellen

Ereignisse bieten eine einfache Möglichkeit, Ihre Visualisierungen mit anderen Elementen auf Ihrer Seite zu verbinden. Visualisierungen können einige Ereignisse auslösen, und Sie können einen Listener registrieren, um auf dieses Ereignis zu reagieren und eine Aktion auszuführen. Das Ereignismodell ähnelt dem Browser-Ereignismodell. Wir müssen uns noch einmal die Dokumentation ansehen, um die Ereignisse zu überprüfen, die für jede Visualisierung ausgelöst wurden.

Um zu zeigen, wie Ereignisse funktionieren, kehren wir zu unserem ersten Beispiel zurück, dem einfachsten Säulendiagramm:

Dieses Diagramm löst Ereignisse beim Mouseover, beim Mouseout und bei der Auswahl aus. Das heißt, wir können es viel interaktiver gestalten als es standardmäßig ist.

Da diese Grafik die Einnahmen eines Unternehmens zeigt, kann es interessant sein, eine Nachricht mit einer kurzen Erläuterung der wichtigsten Erfolge oder Verkäufe für jedes Quartal anzuzeigen, wenn der Benutzer den Zeiger über eine Spalte setzt (Ereignis onmouseover).

Unser Rückruf lautet showDetails() und wir registrieren ihn für das Ereignis onmouseover:

1	google.visualization.events.addListener(chart, 'onmouseover', showDetails);

Der erste Parameter ist die Variable, die unser Diagrammobjekt enthält.

Wir müssen die Nachricht auch ausblenden, wenn der Zeiger die Spalte verlässt, damit eine andere Funktion aufgerufen werden kann, wenn ein onmouseout Ereignis ausgelöst wird:

1	google.visualization.events.addListener(chart, 'onmouseout', hideDetails);

Innerhalb des <body> oder unserer HTML-Seite müssen wir vier Divs mit den Nachrichten definieren:

    <body>

        <!--Div for our chart -->
        <div id="chart"></div>

        <!--Divs for our messages -->
        <div id="details0">These are the details for Q1...</div>
        <div id="details1">Here you have the numbers for Q2...</div>
        <div id="details2">Explanations for the third quarter...</div>
        <div id="details3">Q4 was as expected...</div>

    </body>

Und dann zeigen die Rückruffunktionen einfach die entsprechende Nachricht an oder verbergen sie:

    function showDetails(e) {
        switch (e['row']) {
            case 0: document.getElementById('details0').style.visibility='visible';
                break;
            case 1: document.getElementById('details1').style.visibility='visible';
                break;
            case 2: document.getElementById('details2').style.visibility='visible';
                break;
            case 3: document.getElementById('details3').style.visibility='visible';
                break;
        }
    }

    function hideDetails(e) {
        switch (e['row']) {
            case 0: document.getElementById('details0').style.visibility='hidden';
                break;
            case 1: document.getElementById('details1').style.visibility='hidden';
                break;
            case 2: document.getElementById('details2').style.visibility='hidden';
                break;
            case 3: document.getElementById('details3').style.visibility='hidden';
                break;
        }
    }

Unsere Funktionen akzeptieren einen einzigen Parameter: das ausgelöste Ereignis. Dieses Objekt verfügt über alle verfügbaren Informationen zu den Ereignisdetails.

Um zu wissen, über welcher Leiste wir uns befinden, überprüfen wir die Eigenschaft 'row' des Ereignisobjekts. Diese Informationen beziehen sich auf die Zeilen und Spalten des DataTable-Objekts, aber wir wissen, dass Zeile 0 Q1, der ersten Spalte usw. entspricht.

Hinweis: Nicht alle Ereignisse übergeben das Ereignisobjekt. Manchmal müssen Sie Methoden verwenden, um die benötigten Informationen abzurufen. Lesen Sie die Visualisierungsdokumentation, um zu erfahren, wie Sie die Informationen zum ausgelösten Ereignis abrufen können.

Die folgende Auflistung enthält den vollständigen Code für dieses Beispiel. Ich habe ein kurzes internes CSS-Snippet eingefügt, um die Nachrichtendivs auszublenden und eine minimale Formatierung bereitzustellen.

<html>
    <head>
        <title>Google Chart Tools Tutorial</title>

        <style type="text/css">

            #details0, #details1, #details2, #details3 {
                visibility:hidden;
                background: #FFFF7F;
                border: solid 1px;
                width: 350px;
                padding: 5px;
                font-size:smaller;
                position:absolute;
                top: 250px;

            }

        </style>

        <!-- load Google AJAX API -->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load thee Google Visualization API and the chart
            google.load('visualization', '1', {'packages': ['columnchart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','Quarters 2009');
                dataTable.addColumn('number', 'Earnings');

                //define rows of data
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //instantiate our chart objects
                var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

                //draw our chart
                chart.draw(dataTable, options);

                //register callbacks
                google.visualization.events.addListener(chart, 'onmouseover', showDetails);
                google.visualization.events.addListener(chart, 'onmouseout', hideDetails);
            }

            function showDetails(e) {
                switch (e['row']) {
                    case 0: document.getElementById('details0').style.visibility='visible';
                        break;
                    case 1: document.getElementById('details1').style.visibility='visible';
                        break;
                    case 2: document.getElementById('details2').style.visibility='visible';
                        break;
                    case 3: document.getElementById('details3').style.visibility='visible';
                        break;
                }
            }

            function hideDetails(e) {
                switch (e['row']) {
                    case 0: document.getElementById('details0').style.visibility='hidden';
                        break;
                    case 1: document.getElementById('details1').style.visibility='hidden';
                        break;
                    case 2: document.getElementById('details2').style.visibility='hidden';
                        break;
                    case 3: document.getElementById('details3').style.visibility='hidden';
                        break;
                }
            }

        </script>
    </head>

    <body>

        <!--Div for our chart -->
        <div id="chart"></div>

        <!--Divs for our messages -->
        <div id="details0">These are the details for Q1...</div>
        <div id="details1">Here you have the numbers for Q2...</div>
        <div id="details2">Explanations for the third quarter...</div>
        <div id="details3">Q4 was as expected...</div>

    </body>

</html>

Und das ist das Ergebnis:

Überprüfen Sie erneut die Live-Demo, um die Interaktivität zu sehen.

Der Spielplatz

Wie bei den statischen Bildern gibt es einen Google Code Playground, auf dem Sie mit Ihren Visualisierungen und Parametern spielen und die Ergebnisse anzeigen können:

Abschluss

Hoffentlich reicht diese Information aus, um mit Google Chart Tools arbeiten zu beginnen. Sobald Sie sich damit vertraut gemacht haben, werden Sie feststellen, dass Ihre Webanwendungen sehr flexibel sind. Danke fürs Lesen!