Erstellen Sie mit der SVG Google Charts-API wunderschöne Datenvisualisierungen

Inhalt

• 01. Eine schöne neue Welt - „HTML5“ -Diagramme
• SVG-Diagramme - eine bevorzugte Lösung
• 02. Die Google Charts-API
• 03. Ein einfaches Diagrammbeispiel
• Daten definieren
• Diagramm rendern
• 04. Ein komplexeres Beispiel - Zeichnen von Tweets mithilfe von Flächendiagrammen
• 05. Ein zugänglicher Ansatz
• 06. Anfordern und Organisieren der Tweet-Daten
• 07. Daten aus der HTML-Tabelle ernten
• 08. Rendern des Flächendiagramms
• 09. Es gut aussehen lassen
• Reaktionsschnell - ein flexibles Diagramm
• Unser letztes Diagramm
• Mochte dies? Lese das!

• Erforderliche Kenntnisse: JavaScript, PHP und HTML
• Benötigt: Webbrowser und Texteditor
• Projektzeit: 45 min
• Support-Datei

Daten sind ein großes Geschäft im Web.Jeden Tag beim Surfen generieren wir enorme Datenmengen, mit denen Websitebesitzer und Unternehmen alles bestimmen, von der nächsten großen Neugestaltung bis hin zu Strategie- und Werbeausgaben.

Visuell können Daten jedoch sehr langweilig sein. Wenn Sie kein Statistiker sind, können große Datenmengen besonders schwer zu verdauen sein. Als Webdesigner schlägt die Semantik vor, HTML-Tabellen zur Darstellung von Daten zu verwenden, da diese die „Sprache“ darstellen, die am besten zum Markieren von Fakten und Zahlen geeignet ist. Abgesehen von ein paar schönen Rändern und mit Zebrastreifen versehenen Zeilen bieten uns Tabellen jedoch wenig Möglichkeiten für das Designpotenzial, das wir benötigen, um das Verständnis der darin enthaltenen Daten zu verbessern.

Aus diesem Grund - und auch aus anderen Gründen - haben die verfügbaren Lösungen zur Erstellung grafischer Diagramme und Diagramme stark zugenommen. Mit Tools wie der ursprünglichen Google Image Charts-API können wir ansonsten langweilige Tabellendaten in visuell reichhaltige Daten umwandeln img> basierte Diagramme, die unsere tabellarischen Daten ergänzen und das Verstehen und Verstehen für Benutzer und Kunden erleichtern.

01. Eine schöne neue Welt - „HTML5“ -Diagramme

Bis vor kurzem haben die meisten Online-Diagrammtools mithilfe der statischen Grafiken dynamisch statische Grafiken erstellt img> Tag, den Sie auf Ihrer Webseite einbetten können.

Mit dem Aufkommen von HTML5 stehen uns jedoch einige alternative Technologien zur Verfügung, mit denen wir reichhaltigere, interaktivere Diagramme erstellen können, die uns über die Grenzen statischer Grafiken und Bilder hinausführen. Am beliebtesten sind vielleicht HTML5 Canvas und SVG (Scalable Vector Graphics).

Leinwand> Diagramme

Laut dem Mozilla Developer-Netzwerk ist HTML5 Canvas ein HTML-Element, mit dem Grafiken mithilfe von Skripten gezeichnet werden können. Canvas ist schnell und kann im Gegensatz zu statischen Bildern mithilfe von Skripten dynamisch neu gezeichnet werden. Dies macht es nützlich, um schnell Diagrammvisualisierungen aus HTML-Tabellen zu generieren, und mit cleveren Skripten kann sogar eine grundlegende Interaktivität ermöglicht werden.

Es gibt einige hervorragende Canvas-Diagrammwerkzeuge. Mein besonderer Favorit ist das jQuery Visualize-Plug-In der Filament Group, das sogar die Magie des excanvas.js-Skripts von Google nutzt, um sicherzustellen, dass dynamische Diagramme bereits in Internet Explorer 6 in Browsern generiert werden können.

SVG-Diagramme - eine bevorzugte Lösung

Während Canvas hervorragende Arbeit beim Rendern dynamischer Diagramme leistet, besteht sein Hauptnachteil darin, dass es sich um eine pixelbasierte Grafik-API handelt. Mit Canvas können Sie keine Ereignishandler anhängen oder vorhandene Objekte bearbeiten. Sobald es gezeichnet ist, ist es gezeichnet.

Eine alternative Technologie ist SVG. Obwohl es nicht ausschließlich Teil der HTML5-Spezifikation ist, bietet es gegenüber Canvas mehrere Vorteile für Diagramme im Web.

Das Wichtigste dabei ist, dass SVG vektorbasiert ist und mithilfe einer XML-basierten Syntax beschrieben wird. Dies bedeutet, dass ein DOM verwaltet wird, dessen Attribute zu jedem Zeitpunkt im Lebenszyklus der Seite per Skript gelesen und dynamisch aktualisiert werden können. Obwohl mit dem DOM eine Leistungsüberlegung verbunden ist - insbesondere bei der Arbeit mit größeren Dateien - halte ich SVG normalerweise für eine geeignetere Technologie zum Erstellen von Diagrammen im Web ...

... und es scheint, dass Google mir zustimmt!

02. Die Google Charts-API

Google unterhält und entwickelt eine voll funktionsfähige Diagrammbibliothek namens Google Charts API. Es ist äußerst leistungsfähig und als Google gut unterstützt und dokumentiert. Alles in allem ist es eine ausgezeichnete Wahl für das Charting im Web.

Während die ursprüngliche Version auf Bildern beruhte, nutzt die verbesserte API jetzt die Leistung von HTML5 und SVG, um eine Reihe dynamischer Diagramme zu rendern, die anpassbar sind und komplexe Interaktivität ermöglichen.

Abwärtskompatibel über VML für ältere IE-Versionen. Diagramme lassen sich auf einer Reihe von Geräten, einschließlich iOS- und Android-Handys, gut rendern. Es sind keine Plugins erforderlich!

03. Ein einfaches Diagrammbeispiel

Es ist ziemlich einfach, mit Google Charts zu arbeiten. Diese Demo - basierend auf dem Original in den offiziellen Dokumenten - zeigt ein einfaches Kreisdiagramm in Aktion. Schauen Sie sich die Quelle an, bevor Sie fortfahren.

Zum Rendern des Diagramms benötigen wir drei Bibliotheken. Diese werden über geladen Skript> Tags, bevor ein benutzerdefinierter Code ausgeführt wird:

1. Die Google JSAPI-API
2. Die Google Visualization-Bibliothek - google.load (,"Visualisierung"’1.0’, {’Pakete’: [’Kerndiagramm’]});
3. Die Pakete für das Diagramm selbst - google.load ("Visualisierung", "1.0", {’Pakete’: [’Kerndiagramm’]});

Sobald die erforderlichen Bibliotheken verfügbar sind, verweisen wir auf eine Funktion, die als Rückruf verwendet werden kann, wenn die Bibliotheken vollständig geladen wurden. Dieser Rückruf definiert unsere Daten und zeichnet das Diagramm.

google.setOnLoadCallback (drawChart); // drawChart ist unser Rückruf

Funktion drawChart () {
// Code zum Zeichnen unseres Diagramms (siehe Artikel unten)
}

Daten definieren

In unserem drawChart () Funktion müssen wir jetzt unsere Daten definieren. Alle Daten, die für unser Diagramm verwendet werden sollen, müssen in eine JavaScript-Klasse namens aufgerufen werden google.visualization.DataTable. Dies ist im Grunde eine Darstellung einer 2D-Tabelle mit Zeilen und Spalten, ähnlich einer HTML-Tabelle.

// Erstelle die Datentabelle.
var data = new google.visualization.DataTable ();
data.addColumn ("string", "Answer");
data.addColumn ("Nummer", "Ergebnis");
data.addRows ([
[’Entwickler’, 28],
[’Web Designer’, 12],
[’Designer’, 18],
[’Web Master’, 14],
["Pixel Pusher", 5]
]);

In unserem Beispiel definieren wir eine neue Instanz der Klasse. Wir setzen dann Spalten und Zeilen mit dem addColumn () und Zeile hinzufügen() Methoden zur Verfügung gestellt.

Weitere Informationen zum Vorbereiten und Definieren von Daten finden Sie in den offiziellen Dokumenten.

Diagramm rendern

Nachdem wir unsere Daten definiert haben, legen wir einige grundlegende Konfigurationsoptionen für die Größe und einen Titel für unser Diagramm fest.

// Diagrammoptionen festlegen
var options = {
"Titel": "Berufsbezeichnungen für Personen, die im Internet arbeiten",
"Breite": 500,
"Höhe": 400
};

Google-Diagramme sind in hohem Maße konfigurierbar. Wir werden diesen Aspekt später im Lernprogramm genauer untersuchen.

// Instanziiere und zeichne unser Diagramm und übergebe einige Optionen.
var chart = new google.visualization.PieChart (document.getElementById (’chart_div’));
chart.draw (Daten, Optionen);

Als nächstes instanziieren wir eine neue Instanz der "Visualisierung", die wir erstellen möchten (in diesem Beispiel ist dies der Fall Kuchendiagramm) und nennen seine zeichnen() Methode, die einen Verweis auf das DOM-Element übergibt, in dem unser Diagramm gerendert werden soll, sowie auf die oben konfigurierten Optionen.

Das war's - unser Chart ist in Betrieb.

04. Ein komplexeres Beispiel - Zeichnen von Tweets mithilfe von Flächendiagrammen

Nachdem unser einfaches Beispiel vollständig ist, ist es jetzt an der Zeit, etwas Komplexeres auszuprobieren. Wir werden die Twitter-API verwenden, um Informationen zu meinem Twitter-Stream anzufordern und sie in einem Flächendiagramm anzuzeigen, um die Anzahl der Tweets nach Datum anzuzeigen, das ich in der letzten Woche oder so gesendet habe. Nicht die spannendsten Daten aller Zeiten, aber dennoch etwas Reales, mit dem man arbeiten kann.

Sie können die Demo hier sehen.

05. Ein zugänglicher Ansatz

In unserem einfachen Piechart-Beispiel wurden unsere Daten hergestellt, aber was noch schlimmer ist, alles wurde weggesperrt und im JavaScript definiert. Dies war nicht der am besten zugängliche Ansatz.

Wie bereits erwähnt, werden Daten am besten in einer HTML-Tabelle dargestellt, da sie Benutzern von Hilfstechnologien zur Verfügung stehen und diese wenigen Geräte von der Google Chart-API nicht unterstützt werden.

Idealerweise sollten unsere Tweet-Daten in einer Seite als HTML-Tabelle verfügbar sein, und wir sollten JavaScript verwenden, um die Informationen zu sammeln und sie zur Verwendung in dynamischen Diagrammen an die Visualisierungsbibliothek zu übergeben.

06. Anfordern und Organisieren der Tweet-Daten

An der Spitze unserer index.php Datei Wir fordern bei der Twitter-API die neuesten 40 Tweets aus meiner Benutzerzeitleiste an (Sie können diese auf Wunsch auf Ihre umstellen). Die JSON-Antwort wird in eine Zeichenfolge eingelesen und dann in ein assoziatives Array analysiert, indem true als zweiter Parameter an die übergeben wird json_decode Funktion.

$ jsonurl = "http://twitter.com/statuses/user_timeline/get_dave.json?count=40";
$ json = file_get_contents ($ jsonurl, 0, null, null);
$ json_output = json_decode ($ json, true);

Wir müssen wissen, wie viele Tweets an einem bestimmten Tag gesendet wurden, damit wir als nächstes ein Array definieren (tweet_dates) deren Schlüssel die verschiedenen sein werden hergestellt in stammt aus unserem Twitter-Stream. Anschließend durchlaufen wir unsere Tweets, vergleichen Zeitstempel und erhöhen den Wert des entsprechenden Schlüssels, um eine Reihe von Tweets zu erstellen, die an jedem Datum gesendet werden.

$ tweet_dates = array ();
$ curr_tweet_date = ’’;

// Erstellen Sie ein Array mit einer Anzahl von Tweets nach Datum für jeden ($ json_output als $ tweet) {

// Holen Sie sich einen funktionsfähigen Zeitstempel von json
$ tweet_date = date ("d / m / y", strtotime ($ tweet [’created_at’]));

// Wenn das Tweets-Datum nicht mit dem vorherigen Tweets-Datum übereinstimmt, starten Sie einen neuen Schlüssel im Array
if ($ curr_tweet_date! = $ tweet_date) {
$ tweet_dates [$ tweet_date] = 1; // füge einen neuen Schlüssel hinzu und setze den Wert auf 1
$ curr_tweet_date = $ tweet_date; // aktuelles Datum einstellen var
} else {// wenn das aktuelle Tweet-Datum mit prev übereinstimmt
$ tweet_dates [$ tweet_date] ++; // Datumsschlüsselwert erhöhen
}
} // foreach beenden

Einmal umgekehrt (mit array_reverse), dies gibt uns ein assoziatives Array, das ungefähr so ​​aussehen sollte:

Array
(
[28/03/12] => 7
[29/03/12] => 1
[30/03/12] => 4
[31/03/12] => 1
[02/04/12] => 1
[03/04/12] => 3
[04/04/12] => 2
[08/04/12] => 1
[11/04/12] => 2
[12/04/12] => 3
[13/04/12] => 11
[14/04/12] => 1
)

Im Hauptteil unserer HTML-Seite können wir jetzt dieses Array durchlaufen, um eine HTML-Tabelle mit Spalten für "Datum" und "Tweets" zu erstellen.

Mit JavaScript hätten wir fast dasselbe erreichen können, aber die Verwendung eines PHP-basierten Ansatzes stellt sicher, dass die Kerndaten den Benutzern unterstützender Technologien immer als Markup zur Verfügung stehen.

07. Daten aus der HTML-Tabelle ernten

Als nächstes müssen wir die tabellarischen Daten sammeln. Unsere functions.js Datei definiert eine Funktion namens Daten bekommen() was wiederum von der aufgerufen wird drawChart () Rückruffunktion zum Abrufen der erforderlichen Daten. Das Ziel dieser Funktion ist es, eine einfache Array-Struktur zu erzeugen, die wir an die übergeben können google.visualization.arrayToDataTable () Methode, die es in das von der Diagramm-API benötigte Format konvertiert.

Es gibt jedoch verschiedene Ansätze, um die richtigen Datenformate zu erstellen arrayToDataTable () ist für unsere Zwecke am einfachsten, da es weitgehend automatisiert ist.

Das erwartete Format ist ein Array, das eine Reihe von Arrays enthält, von denen jedes eine „Datenzeile“ darstellt. In jeder Zeile befinden sich die für jede Spalte erforderlichen Daten. Spaltenüberschriften werden automatisch als erste "Zeile" im Array angenommen, sofern nicht anders angegeben.

[
[’Datum’, ’Tweets’], // Spaltenüberschriften
[’04 / 04/2012 ’, 25], // Datenzeile
[’04 / 04/2012 ’, 25] // eine weitere Datenzeile
]

Das Daten bekommen() Funktionsschleifen durch jeden tr>, liest den Wert von jedem th> oder td> und füllt dann die Werte Array, das dem erforderlichen Format entspricht. Unsere Daten können jetzt verwendet werden.

08. Rendern des Flächendiagramms

Wir instanziieren eine neue Instanz des Flächendiagramm-Diagrammtyps und übergeben unsere Daten und einige grundlegende Optionen:

neues google.visualization.AreaChart (document.getElementById (’chart_div’));
chart.draw (Daten, Optionen);

09. Es gut aussehen lassen

Unser Grunddiagramm zeigt nun ungefähr Folgendes:

Es funktioniert jedoch persönlich, aber ich würde mich nicht freuen, wenn ich meinen Benutzern oder einem Kunden diese "out of the box" -Ansicht präsentieren würde. Zum Glück bietet uns Google Charts

eine Reihe von Optionen

die wir konfigurieren können, um das Erscheinungsbild unseres Diagramms anzupassen.

Um das Diagramm ein wenig präsentabler zu gestalten, habe ich einige Präsentationsoptionen geändert. Die vielleicht wichtigsten Verbesserungen sind:

• Ich habe die Textfarbe auf ein cremefarbenes # 666 eingestellt (mit hAxis.textStyle.color).
• Ich habe die Gitterlinien in ein subtiles #eee-Grau geändert (mit hAxis.gridlines.color).
• Ich habe die Standardlinienfarbe in Twitterblau # 08C geändert (Farbe).
• Ich habe das eingestellt Linienbreite ein schöner dicker Wert von 4 zu sein und dies durch Erhöhen der zu ergänzen pointSize (die Punkte / Knoten) eine größere 8 sein.
• Ich habe die Deckkraft des Bereichs transparenter eingestellt (mit areaOpacity).

Ich empfehle Ihnen dringend, die vollständige Liste der möglichen Konfigurationsoptionen zu lesen, damit Sie das Diagramm an Ihre eigenen Bedürfnisse anpassen können.

Mit diesen Optionen sieht unser Diagramm jetzt viel präsentabler aus:

Reaktionsschnell - ein flexibles Diagramm

Unser Diagramm sieht jetzt gut aus, hat aber immer noch eine feste Größe. Wenn wir eine reaktionsfähige Site erstellen, muss unser Diagramm skaliert werden, damit er der Größe des Containers und der Größe des Ansichtsfensters entspricht.

Ich habe festgestellt, dass der beste Weg, dies zu erreichen, darin besteht, eine Neuzeichnung des Diagramms an das zu binden window.resize Veranstaltung. Auf diese Weise wird der Chat beim Ändern der Fenstergröße schnell auf die neue Größe neu gezeichnet.

Das Hauptproblem bei diesem Ansatz ist, dass die window.resizDas Ereignis wird bei jedem Größenänderungsereignis mehrmals ausgelöst. Das wiederholte (und unnötige) Neuzeichnen des Diagramms hat eine Leistungsbeeinträchtigung zur Folge, die ich vermeiden möchte. Um dies zu vermeiden, verwende ich das hervorragende Debounce-Größenänderungs-Plug-In von Paul Irish, um sicherzustellen, dass das Größenänderungsereignis am Ende des angegebenen Zeitraums nur einmal ausgelöst wird. Dies begrenzt die Anzahl der Neuzeichnungen von Diagrammen pro window.resize.

$ (Fenster) .smartresize (Funktion () {
chart.draw (Daten, Optionen);
});

Unser letztes Diagramm

In der endgültigen Demo haben wir jetzt ein visuell ansprechendes, zugängliches, browserübergreifendes Diagramm, das auch mit dem Ansichtsfenster des Geräts skaliert werden kann.

Ich empfehle dringend, sich mit den Google Charts-API-Dokumenten vertraut zu machen, damit Sie alles, was Sie hier gelernt haben, verbessern und darauf aufbauen können, um Ihre eigenen Diagramme zu erstellen. Ich möchte Ihre Aufmerksamkeit auch auf alternative SVG-basierte Diagrammlösungen wie Morris.js lenken, die sowohl jQuery als auch Raphaël zum Zeichnen ihrer Diagramme verwenden.

Dieser Leitfaden ist keineswegs umfassend und ich bin überzeugt, dass es viele Möglichkeiten gibt, das Endergebnis zu verbessern und zu verbessern. Wenn Sie welche kennen, lassen Sie es mich bitte in den Kommentaren wissen.

Dave Smith ist Front-End-Designer in der Nähe der wunderschönen Stadt Bath in Großbritannien. Wenn er nicht gerade an neuen und aufregenden Webprojekten arbeitet, spielt er Trompete in allen Bereichen, von Big Band-Jazzgruppen bis hin zu Sinfonieorchestern. Sie können Dave auf Twitter als @get_dave einholen.

Mochte dies? Lese das!

• So erstellen Sie eine App
• Kostenlose Auswahl an Graffiti-Schriftarten
• Illustrator-Tutorials: erstaunliche Ideen, die Sie heute ausprobieren können!
• Die ultimative Anleitung zum Entwerfen der besten Logos
• Die besten kostenlosen Web-Schriftarten für Designer
• Nützliche und inspirierende Flyer-Vorlagen
• Die besten 3D-Filme des Jahres 2013
• Entdecken Sie, was als nächstes für Augmented Reality kommt