«Back
Vaadin Charts export from browser to SVG and PDF

Blog post by Matti Tahvonen:

Like most new chart libraries of our era, Vaadin Charts was born for the web. Behind the scenes, we rely on the industry leading Highcharts JS library, which renders charts in the browser using the standard SVG vector format. Even though SVG had a rocky start, modern browsers nowadays offer great support for the format. IE8 is the last pain in the butt, but luckily Highcharts does a great job rendering charts in Microsoft’s proprietary VML format as well.

The real value of Vaadin Charts comes from its clean Java API. Using the API, it builds a compact JSON representation of a chart, which is then passed to the browser and Highcharts for rendering. Due to the Java API, the integrated documentation, and a modern IDE, all Java developers will feel comfortable with Vaadin Charts from the very beginning.

Basic usage of the API is so simple that I see no point in boring you with usage examples. Download Vaadin Charts, check out the examples and play with it in your favourite IDE. That’s the best way to get convinced!

Instead of basic examples, I want to answer one of the most common questions from evaluators: "Can I use the same chart in a PDF file I need to generate due to accounting legislation?" As you might guess, the answer is yes. And it has got nothing to do with those naive "print" and "download as" buttons you have spotted elsewhere.

Although the actual rendering of charts happens on the client side using browser technologies, there are tools that let us generate the very same SVG completely on the server side. PhantomJS is a lightweight headless browser, based on the WebKit rendering engine. It is most commonly used for testing purposes. Once you have installed PhantomJS, you can use a helper class in Vaadin Charts to generate an SVG representation of your chart. After that, there is no limit to the possibilities of creative Java developers.

You can generate an SVG from the same Configuration object that you use in your browser UI like this:
 

String svg = SVGGenerator.getInstance().generate(configuration);


The helper class automatically starts a PhantomJS process that it uses to render charts into SVG format. The first pass takes about a second, but subsequent requests take just around 20ms on my development machine.

Once you have the chart in SVG format, you can do pretty much anything you want with it. If the raw SVG format is not suitable for your needs, Batik is a great Java library to hook it up to your processes.

To demonstrate the feature, we have prepared a simple example project that you can check out from our SVN repository and play with. It displays a chart in a Vaadin UI, which can then be exported into various formats. The server side generated SVG can be downloaded as such or as a part of a PDF report generated with the iText library. To emphasize the agility of Vaadin Charts, there is also an example that opens a Swing UI (JPanel) displaying the SVG on the server. Now you can start porting your legacy Swing app to Vaadin starting with the charts :-)

 


Related Links:
The example project that uses an exported chart in a Swing app, as a downloadable SVG, and embedded in a PDF.
PhantomJS
- The tool that needs to be installed for server side usage.
Batik Toolkit
- A general purpose SVG library for Java.


Matti Tahvonen works at the Vaadin team building products like the Vaadin Charts. If you want to meet Matti and ask more about Vaadin Charts join us for a webinar on March 12.

Comments
NICE!! But would be nicer if pro-accounts included an itext-license.

Posted on 3/1/13 9:42 AM.

Top
I installed PhantomJS on my Mac system and included it in my $PATH - but when my code reaches the line
String svg = SVGGenerator.getInstance().generate(configuration);
I get a runtime exception that it couldn't find the 'phantomjs' executable:

Caused by: java.io.IOException: Cannot run program "phantomjs": error=2, No such file or directory
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1041)
at com.vaadin.addon.charts.util.SVGGenerator.<init>(SVGGenerator.java:114)
... 40 more

I know that phantomjs is in my PATH because I tried executing hello.js via 'phantoms hello.js' without specifying the complete executable path.

Posted on 8/1/13 7:17 PM.

Top
Hi,

Are you sure it is on a path used by starting your JVM? E.g. in Eclipse you might need to add it to run configuration.

cheers,
matti

Posted on 8/23/13 1:16 PM in reply to Thomas Wolf.

Top
Hi, Thanks for posting.

Link to example project is broken, can you fix that?

Posted on 11/12/13 4:59 PM.

Top
Nope, "somebody" decided to move all stuff to git. If you master git you should find the same project from here (chart-export-demo):
http://dev.vaadin.com/git/?p=charts.git;a=tree;h=refs/heads/master;hb=master

Posted on 11/12/13 5:07 PM in reply to David Castaneda.

Top
Yes, that was the problem - thanks Matti.

Posted on 11/12/13 6:26 PM in reply to Matti Tahvonen.

Top
Concurrency and distributed systems are probably among the hardest parts of software engineering. Basic Java EE apps usually don’t need to deal with these issues that much, but increasing
We're pleased to announce the public release of Tori – the modern and sleek discussion forum for Liferay portal . We've kept Tori under the blanket while developing it and
There is a point in every enterprise web application project when the scalability of the application under development is wanted to be measured. There are several reasons for why scalability tests
Vaadin TestBench is a browser automation tool, suited for creating UI level tests for Vaadin applications. It is based on Selenium 2, which means that all features of Selenium 2/WebDriver are also
Servlet 3.0 is awesome, so is CDI . They work well and are a joy to set up. Even adding the Vaadin Navigator to the mix isn’t an issue, since you can use the CDIViewProvider to maintain the
Showing 1 - 5 of 100 results.
of 20

See all blog entries
Subscribe to this blog