Florian Fiegel 4. Mai 2009

JScharts – Generator und Library für Diagramme

Es gibt eine ganze Reihe an Skripten, Libraries und Generatoren zur Erstellung von Diagrammen, aber mit JScharts existiert es nun auch eine reine JavaScript-Lösung, die tatsächlich im Idealfall wenig bis keine Kenntnisse im Einsatz erfordert. Neben dem dynamischen Einsatz lässt sich die Library auch über den Editor einmalig in den Content einbetten.

Darstellung

JScharts kann die drei gebräuchlichsten Diagrammtypen (Torte, Graph und Balken) mit umfangreichen Anpassungen umsetzen. Dabei lässt sich die Darstellung jedes einzelnen Elements in Bezug auf Größen, Formen und Farben über Parameter und Funktionen steuern. Die Diagramme bleiben damit schön schlicht, können aber trotzdem umfangreich an entsprechende Vorlieben angepasst werden. Einen Eindruck von möglichen Konfigurationen gibt auch die „Examples-Seite“ des Projekts.

Auf Grund des Einsatzes von SVG (eingeschränkter Zeichensatz) zum Rendering der Texte kommt es beispielsweise zu Problemen bei der Darstellung des Eurozeichens. Dies soll zukünftig über den Einsatz von DIV-Containern für die Beschriftung gelöst werden. Eine Erweiterung des Scripts ist für neue Versionen geplant, so sollen neben anderem auch passende Tool-Tipps dazukommen.

Einrichtung

Um JScharts innerhalb eines Dokuments nutzen zu können, muss lediglich der gewohnte Include im Header erfolgen, einen DIV-Container mit eindeutiger ID sowie das Script platziert werden. Die Inhalte des Diagramms können dann entweder über ein Array oder eine entsprechend formatierte XML-Datei übergeben werden. Auf diesem Weg lässt sich das Script auch sehr gut in bereits bestehende Projekte einbauen und kann dynamisch verwendet werden.

Nutzer, die nur einmalig ein Diagramm erstellen wollen, können auch auf den angebotenen Online-Editor zurückgreifen, allerdings stehen Funktionen wie Embed (Einbettung ohne Eingriff in den Header) oder Export erst nach Einrichtung eines Accounts zur Verfügung. Mit dem Editor lässt sich alles festlegen, was auch mit dem Script möglich ist, kann also auch zur Vorkonfiguration genutzt werden.

Browserkompatibilität

Das Skript ist kompatibel mit allen aktuellen Browsern inklusive des IE6. Für Browser mit abgeschaltetem Skript gibt es allerdings nur den Inhalt des DIV-Containers zu sehen, der alternativ befüllt werden kann. ™

Florian Fiegel

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. Wow, danke. Werd ich sofort mal testen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.