Render charts on the server

02 January 2013

The export module has always been an important feature for Highcharts. With this module your users can download an image copy of a chart. This image is generated by the browser post an SVG file to the export server where it generates a image in the desired format and returns it for download. However, until now, a browser was required in order to generate the SVG and send the post.

Downloads related to this article

• The Phantom JS script
• The Java export server

Running Highcharts on the server side

We have released a script which makes it possible to run Highcharts on the server. Why?

1. you want to include your charts in emails or automated management reports
2. you want to have a consistency between graphs you present on your website and your backend produced reports

phantomjs highcharts-convert.js -infile options.json -outfile chart.png -scale 2.5 -width 300 -constr Chart -callback callback.js

Also featured on the export server

We included the above PhantomJS script also on the export server and with this you can POST a Highcharts configuration in JSON to the export server and return an image of the chart.

An online demo with a GUI can be viewed at export.highcharts.com/demo. For an overview of possible POST parameters, see here

Technically we could let PhantomJS convert the SVG to an other image format and drop Batik. PhantomJS can render SVG to PNG, GIF, JPEG and PDF without a problem. While this works fine for smaller graphs with little data, when the graph contains more data, we experienced a long response time. Batik outperforms PhantomJS with rasterizing larger SVG's

Defining the right combination of tools

Batik and Rhino + env.js or jsdom

env.js or jsdom have no good concept of the box-model. We ran into problems when placing labels because we couldn't get SVG's getBBox method to work reliably.

PhantomJS in PHP

Call PhantomJS with the highcharts-convert.js script from PHP and let PhantomJS convert JSON or SVG files to different image formats. Although local benchmarks show a great performance of rasterizing with PhantomJS, in production we ran into trouble when converting SVG files with more than 1500 data points. It simply took too long time in our server environment, perhaps due to creating files locally and the number of concurrent users?

Imagemagick, PhantomJS in PHP

The idea was to let PhantomJS generate the SVG file and let ImageMagick do the image conversion. In production we couldn't get Imagemagick (version 6.8) to run stable on the server. Approximately once a day CPU went up to 100% and we had to restart the export server. We followed up several hints found on forums, like compiling natively and setting specific settings, but in the end we gave up. Another disadvantage was that semi-transparent shapes where rasterized in PDF export. This is better handled in Batik.

We welcome everybody to discuss the new released Highcharts export-server and PhantomJS convert scrip on the Highcharts forum, see this topic

Example usage of PhantomJS and highcharts-convert.js

phantomjs highcharts-convert.js -infile options1.json -outfile chart1.png -scale 2.5 -width 300 -constr Chart -callback callback.js

Description of command line parameters

function(chart) {
    chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
        fill : '#FCFFC5',
        stroke : 'black',
        'stroke-width' : 1
     }).add();
}

Description of POST parameters for the Highcharts export server

function(chart) {
    chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
        fill : '#FCFFC5',
        stroke : 'black',
        'stroke-width' : 1
     }).add();
}