Google Chart als SVG speichern


Wer auf einfache HTML5-Charts steht, der nutzt vielleicht Google Charts. Wer eine SVG-Exportmöglichkeit in Google-Charts sucht, der wird sie nicht finden. Schade! Aber was muss, das muss. Zum Glück werden die Diagramme als SVG gerendert und können entsprechend über Modifikationen als SVG gespeichert werden.

Zuerst müssen wir an den SVG-Code selbst kommen. Dazu sehen wir uns einen generierten HTML-Ausschnitt an.

 

<div id="firstDiag" style="position: relative;">
<div dir="ltr" style="position: relative; width: 550px; height: 200px;">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg style="overflow: hidden;"></svg>...

firstDiag ist das von uns angegebene Div in das das Diagramm generiert werden soll. Was uns interessiert ist allerdings der SVG-Code, also alles, was ab dem ersten SVG-Tag steht.
Mit JQuery ist es ein Leichtes an diesen Code zu kommen:

$('#firstDiag svg');

Dadurch erhalten wir das JQuery-Objekt, benötigen allerdings den HTML/SVG-Code. Dies erreichen wir über folgende Erweiterung des obigen Codes:

var svgCode = $('</pre>
<div>').append($('#firstDiag svg').clone()).html();

Würden wir den Code nun als eine SVG-Datei abspeichern, würden die meisten Programme wohl nichts, oder einen Fehler anzeigen – es fehlt die XML-Deklaration. Dazu fügen wir ganz am Anfang des Strings bzw. unserer variable svgCode die Deklaration an und geben dem ersten SVG-Tag noch ein paar zusätzliche Meta-Informationen mit.

			svgCode='<!--?xml version="1.0" encoding="utf-8"?-->'+svgCode;
			svgCode=svgCode.replace("<svg ", '<svg id="Layer_1">

Wir sind nun fast fertig. Um den SVG-String download-fähig zu bekommen, können wir uns das Data URI-Schema zu Nutze machen. Eine zusätzliche Hürde ist das Base64-Encoding. Hierzu gibt es eine Menge fertiger Snippets, ich nutze das JQuery-Plugin von Yannick Albert.

$('#download').attr("href", "data:application/octet-stream;charset=utf-8;base64,"+$.base64.btoa(svgCode));

Hierdurch wird einem im body vorhandenem Anchor-Element der Code im href-Attribut zugewiesen.

Das komplette Beispiel könnt ihr euch herunterladen:
Download Projektbeispiel

Das Ganze funktioniert übrigens auch serverseitig.

Liebe in jeder Zeile Code, egal ob Java, PHP, Groovy oder HTML. Größter Spaß: Facebook-Development und CSS3-Spielereien.

You may also like

LEAVE A COMMENT