RRZE – Projekte & Prozesse (P&P)

Das Blog der RRZE Stabsstelle "Projekte & Prozesse"

Content

Vergleich von Javascript Charting Frameworks

Charts

English Version

Wir haben uns entschieden in unseren Projekten die kommerziellen Javascript-Charting-Frameworks Highcharts und Google Visualization durch ein alternatives OpenSource-Charting-Framework zu ersetzen. Im folgenden Artikel sollen die Schritte, die wir unternommen haben, um zu einer Entscheidung zu kommen, beschrieben werden.

Zunächst haben wir von allen Entwicklern die aktuell verwendeten Graphen gesammelt und in einer LibreOffice-Tabelle aufbereitet. In dieser Tabelle konnten wir ablesen, welche Chart-Typen eine OpenSource-Alternative bieten muss. Hier stellte sich heraus, dass das OpenSource-Framework mindestens Pie-, Bar-, Column- und Line-Charts beherrschen muss.

In einer weiteren LibreOffice-Tabelle haben wir versucht, möglichst viele offene Charting Frameworks zu sammeln und zu bewerten. Als eine der wichtigsten Quellen ist hier unter anderen der Filehosting-Dienst für Softwareprojekte github.com zu nennen. Dabei entstand eine Tabelle vergleichbar derer auf Wikipedia, mit der wir eine gewisse Vorauswahl treffen konnten. Wichtig für die Vorauswahl war für uns, neben der OpenSouce-Lizenz, das Beherrschen, der von uns benötigten Chart-Typen, die Aktualität des Projekts, Responsiveness, eine nicht zu steile Lernkurve und eine möglichst aktive Community.

Während der Arbeit an diesem Projekt sind verschiedene Erkenntnisse im Bereich der OpenSource Charting Frameworks aufgetaucht. Zunächst gibt es zwei Möglichkeiten, wie die Graphen im Browser erzeugt werden. Viele der Frameworks setzen als Abhängigkeit das SVG-Framework D3.js von Mike Bostock voraus, das heißt die Graphen werden durch Vektorgraphen mit dem offenen Format SVG erzeugt. Ein anderer Teil setzt bei der Erzeugung der Graphen auf das HTML5 Canvas-Element.

Für die Frameworks aus unserer Vorauswahl wurde nun im Anschluss eine kleine Grails-Applikation erstellt um Tests mit den verschiedenen für uns interessanten Charting Frameworks durchführen zu können. Hierfür wurden für alle für uns relevanten Chart-Typen zwei Testfälle konzipiert. Im einfachen Basis-Testfall wurden grundlegende Funktionen der Framework getestet, im komplizierteren Testfall wurden die Frameworks mit erheblich mehr Datensätzen und komplexeren Graphen erprobt. Durch diese Tests konnten wir schließlich zu einer Entscheidung kommen.

Wir haben uns letztendlich für das Javascript-Charting-Frameworks c3.js entschieden. Es schnitt in unseren Testfällen in der Grails-Anwendung am besten ab und konnte durch gute Performance, einer aktiven unabhängigen Community, einer sehr guten Dokumentation und sehr vielen Beispielen auf der Webseite punkten. Es bietet außerdem durch die Abhängigkeit von D3.js die nötige Komplexität, ist aber dennoch leicht zu erlernen.

Comparison of Javascript charting frameworks

Charts

We decided to replace in our projects the commercial Javascript charting frameworks Highcharts and Google Visualization with an OpenSource charting framework. The following article should describe the steps, we have done, to come to an decision.

Initially we collected from all our developer the charts they use at the moment and processed them in a LibreOffice table. In this table we could see, which chart types an alternative OpenSource framework has to support. Here we could see that the OpenSource framework has to support at least pie, bar, column and line charts.

In another LibreOffice table we tried to collect and rate as many open frameworks as possible. As one of the important sources we can name amongst other the file hosting service for software projects github.com. In doing so we got a table similar to that on Wikipedia, which we could use for a certain preselection. Important for our preselection was beside the OpenSource license, the support for the chart types we need, actuality of the project, responsiveness, a not to steep learning curve and a as possible active community.

During the work on this project we learned some lessons about OpenSource charting frameworks. First there are two possibilities, how the charts will be generated in the browser. Many of the frameworks require as a dependency the SVG framework D3.js from Mike Bostock, i.e. the charts are generated with vector graphics with the open format SVG. Another part uses for the generation the HTML5 canvas element.

For the frameworks of our preselection we created as a next step a little Grails application, so we can do some tests with the for us interesting frameworks. For this purpose we designed two test cases for all for us interesting chart types. In the basic test case we tested only basic functions, in the extended test case we approved the frameworks with a lot more datasets and more complex charts. With this tests we could come to an decision.

Finally we decided to use in our projects the Javascript charting framework c3.js. It performed in our test cases in the Grails application very well and scoured with good performance, a active independent community, a very good documentation and a lot of examples on the web page. It offers in addition by the use of D3.js as a dependency the required complexity, but is still easy to learn.

Metadatenskript für SVG

Das vom Regionalen Rechenzentrum Erlangen (RRZE) erstellte RRZETangoIconSet besteht aus Grafiken im Format Scalable Vector Graphics (SVG). SVG-Dateien beschreiben zweidimensionale Vektorgrafiken in der XML-Syntax. Diese SVG-Dateien werden im Web der Öffentlichkeit zur Verfügung gestellt, wozu z.B. eine Beschreibung der einzelnen Dateien notwendig ist. Diese Beschreibung wird allerdings bereits von der Designerin der SVG-Dateien beim Erstellen mit dem Designprogramm Inkscape in den Metadaten der jeweiligen Grafik eingetragen. Nun ergibt sich das Problem, dass jede Grafik mit dem Grafikprogramm Inkscape geöffnet und aus einem Unterdialog die Beschreibung herauskopiert werden muss. Dies ist ein nicht zu vertretender Aufwand.

Um diesen Aufwand zu minimieren, erstellte Frau Andrea Löhlein ein Perl-Skript, welches automatisch die SVG-Dateien aus dem angegebenem Verzeichnis (einschließlich der Unterverzeichnisse) ausließt und die entsprechenden Metadaten in eine Datei speichert. Somit müssen Informationen lediglich aus einer Datei herausgenommen werden. Hierfür verwendet das Skript das PerlModul SVG::Metadata.
Dem Skript kann mit dem Parameter -d (oder –directory) ein Verzeichnis übergeben werden, in dem die Grafiken liegen. Außerdem wird mit dem Parameter -o (oder –output) eine Datei angegeben, in die die Informationen geschrieben werden sollen. Diese Datei muss noch nicht existieren. Existiert sie noch nicht, wird sie vom Skript automatisch erstellt. Außerdem kann mit dem Parameter -m (oder –metadatafield) ein Metadatenfeld ausgewählt werden, welches ausgelesen werden soll. Hierbei werden mehrere Metadatenfelder durch ein Komma im Parameter getrennt (z.B. -m description,author,owner). Diese Informationen werden in die angebene Textdatei geschrieben. Mit dem Parameter –as-csv können die Informationen allerdings in eine CSV-Datei geschrieben werden. Hierbei werden die Informationen durch Semikolons (;) getrennt.

perl tango.pl --help

Tango.pl print different Metadata from SVG-Files to an txt- or csv-file.

Usage: perl tango.pl -p SVGFilePath -o OutputFilePath
       perl tango.pl -p SVGFilePath -o OutputFilePath [options]

   -p  --path                      Path to SVG-File(s)
   -o  --output                    Path or name to Outputfile
   -h  --help                      Print this Help

Options:
   -m  --metadatafield [METADATA]  Print different Metadata. This Metadata
                                   could be: description, title, subject,
                                   publisher, publisher_url, creator,
                                   creator_url, owner, owner_url, license,
                                   license_date, language, keywords
                                   More than one METADATA must be seperated by
                                   a semicolon ;

   --as-csv                        Print the different Metadata not in a *.txt-file
                                   but in a *.csv-file

Examples:
   perl tango.pl -p Tango/scalable -o /tmp/tango.txt
   perl tango.pl -p Tango/scalable -o tango.txt -m description,title,subject
   perl tango.pl -p Tango/ -o /opt/var/tango.txt -m description,title --as-csv

Read Metadata from SVG

The Regional Computer Centre Erlangen (RRZE) created the RRZETangoIconSet which consists of Scalable Vector Graphics(SVG). SVG files describe two-dimensional vector graphics in the XML syntax. These SVG files are published on the internet, that’s why a description of the separate files is necessary. This description needs to be inserted into the metadata of the respective graphics by the designer of the SVG files during the creation of those files with the design program Inkscape . Now the problem arises that every graphic must be opened with the graphics program Inkscape and every description must be individually copied from the subdialogue. This is a very unnecessary and tedious effort.

To mimimize this effort, Miss Andrea Löhlein created a perl script which automatically reads the SVG files from the indicated directory (including the subdirectories) and writes the appropriate metadata to a file. This way, the information has to be taken from one file only. For this purpose the script uses the perl module SVG::Metadata. To run the script, some parameters need to be passed. For example -d (or –directory) with the directory the SVG graphics are in. The parameter -o (or –ouput) with a filename defines where the information will be written. This can either be an existing file, or one will automatically be created by the script. Also the parameter -m (or –metadatafield), specifying the name of the metadatafield to be selected, is available. For several metadatafields, use a comma to separate them (e.g. -m description,author,owner). This information will be written in the textfile indicated. When using the parameter –as-csv, the information will be written in a CSV file. With this option, the information in the file will be separated by semicolons (;).