Heute im Fokus: Integration von schönen Formeln auf Webseiten mit der Google Chart API.
Da dieser Blog ab und an etwas mathematiklastig ist und in Folge dessen auch Formen dargestellt werden müssen, habe ich mir die Google Chart API etwas näher angeschaut und gehe in diesem Kurztipp auf die Syntax und die Verwendung der API zum Formelnerstellen ein.
Was ist die Google Chart API?
Auf den Punkt gebracht, ist die Google Chart API eine bequeme Möglichkeit dynamisch Diagramme, Formeln und Graphen zu erzeugen und in eine Webseite zu integrieren. Die Grafik wird hierfür über eine URL erstellt und von Google im png-Format angezeigt.
Natürlich können die Grafiken auch auf dem lokalen Rechner gesichert werden.
Ursprünglich war die Google Chart API für den internen Gebrauch gedacht, um sie in anderen Google-Services zu verwenden. Doch nun ist die API zugänglich und kann für tolle eigene Grafiken verwendet werden.
Syntax der Google Chart API
Um eine Grafik mit der API zu erzeugen, muss eine URL in den Browser eingetippt werden, welche einigen bestimmten Regeln folgt. Folgendermaßen sieht die URL-Struktur aus:
http://chart.apis.google.com/chart?cht=
Wie leicht erkannt werden kann, wird zunächst mit chart.apis.google.com/chart die Chart-API angesprochen. Nach einem Fragezeichen, welches andeutet, das als nächstes eine Variable kommt, wird der Typ der Grafik angegeben. Dann muss wiederum nach einem Fragezeichen die Größe der Grafik angegeben werden.
Die API kennt noch etliche weitere Variablen, mit denen die Grafik an die eigenen Bedürfnisse angepasst werden kann, jedoch sind die für die Formeln in erster Linie nicht relevant.
Um eine Formel zu erstellen, muss als Datentyp tx angegeben werden. Danach kann sofort die Formel als eine mit chl bezeichnete Variable eingetippt werden:
http://chart.apis.google.com/chart?cht=tx&chl=formel
Erfreulicherweise werden die Formeln in TeX geschrieben und sehen sehr gut aus. Dadurch können die eventuell bereits bekannten TeX-Befehle wieder verwendet werden.
Verwendung der Google Chart API zur Generierung von Formeln
Je nach Anwendungsfall kann es sinnvoll sein die Formel direkt in die Browser-Adressleiste ein zu tippen, oder die selbe URL, in <img>-Tags verpackt, in einen Webseite zu integrieren. Ebenso sinnvoll kann es sein, die URL erst in der Browser-Adressleiste zu verifizieren und, wenn das gewünschte angezeigt wird, die <img>-Tags bemühen.
Google Chart API in der Browseradressleiste
Als Beispielformel verwende ich den Ludwik-Ansatz, einen aus der Mechanik (Kontinuumsmechanik) bekannten Ansatz zur Beschreibung von Materialverhalten, was uns an dieser Stelle jedoch nicht weiter interessieren soll.
In reinem Latex-Code würde die Formel folgendermaßen aussehen:
\sigma_f = {A + B \cdot (\overline{\varepsilon}_{pl})^n}}
Damit ergibt sich folgende URL, mit der die Formel erstellt werden kann:
http://chart.apis.google.com/chart?cht=tx&chl=\sigma_f = {A %2B B \cdot (\overline{\varepsilon}_{pl})^n}}
Das Ziel des Ganzen ist nun die Formel:
Interessierte Leser sind an dieser Stelle aufgefordert, die URL zu kopieren und im eigenen Browser zu testen.
Schlusswort
Die Google Chart API ist ein sehr interessantes Werkzeug. Abgesehen von Formeln und Diagrammen lassen sich sogar Kartenplots von einzelnen Kontinenten oder der ganzen Welt erstellen.
Nun hoffe ich, dass dieser Artikel einige inspiriert hat, eigene Charts zu erstellen. Über Beispiele der Leser in den Kommentaren freue ich mich sehr.
Um eine Formel zu erstellen, muss als Datentyp tx angegeben werden. Danach kann sofort die Formel als eine mit chl bezeichnete Variable eingetippt werden:
http://chart.apis.google.com/chart?cht=tx&chl=formel
Erfreulicherweise werden die Formeln in TeX geschrieben und sehen sehr gut aus. Dadurch können die eventuell bereits bekannten TeX-Befehle wieder verwendet werden.
Verwendung der Google Chart API zur Generierung von Formeln
Je nach Anwendungsfall kann es sinnvoll sein die Formel direkt in die Browser-Adressleiste ein zu tippen, oder die selbe URL, in <img>-Tags verpackt, in einen Webseite zu integrieren. Ebenso sinnvoll kann es sein, die URL erst in der Browser-Adressleiste zu verifizieren und, wenn das gewünschte angezeigt wird, die <img>-Tags bemühen.
Google Chart API in der Browseradressleiste
Als Beispielformel verwende ich den Ludwik-Ansatz, einen aus der Mechanik (Kontinuumsmechanik) bekannten Ansatz zur Beschreibung von Materialverhalten, was uns an dieser Stelle jedoch nicht weiter interessieren soll.
In reinem Latex-Code würde die Formel folgendermaßen aussehen:
\sigma_f = {A + B \cdot (\overline{\varepsilon}_{pl})^n}}
Damit ergibt sich folgende URL, mit der die Formel erstellt werden kann:
http://chart.apis.google.com/chart?cht=tx&chl=\sigma_f = {A %2B B \cdot (\overline{\varepsilon}_{pl})^n}}
Das Ziel des Ganzen ist nun die Formel:
Interessierte Leser sind an dieser Stelle aufgefordert, die URL zu kopieren und im eigenen Browser zu testen.
Schlusswort
Die Google Chart API ist ein sehr interessantes Werkzeug. Abgesehen von Formeln und Diagrammen lassen sich sogar Kartenplots von einzelnen Kontinenten oder der ganzen Welt erstellen.
Nun hoffe ich, dass dieser Artikel einige inspiriert hat, eigene Charts zu erstellen. Über Beispiele der Leser in den Kommentaren freue ich mich sehr.
-->Artikel aus der selben Kategorie:
Bisher nur ein Kommentar zu “Kurztipp 6: Formeln in Webseiten mit Google Chart API”
Meinungsfreiheit für alle!
1. Swen
Kommentar vom 7 Juli 2010 um 09:24
Cool, alles klar! Jetzt könnte ich es probieren. Danke