Server-side Highcharts rendering

Highcharts is a fantastic tool for generating javascript-based charts. It’s flexible, fast and can be extensively customized. Recently, I had to find a way to render Highcharts as static images on the server as we wanted to attach charts in emails.

The reason why we wanted to stick with Highcharts even on the server is to still maintain a single code-base and to have a unified feel of the charts we present to our users.

What I wanted to achieve was simple:

  • Run a POST request against a webserver with the same JSON-data you would construct a regular Highcharts instance with
  • Get back a PNG-image as the HTTP-response

There are a number of options already available:

  • You can use a combination of PHP and Java with Batik
  • You can use the Java server with Batik
  • You can use a PhantomJS script

For various reasons, these did not match what I wanted to achieve or they did it in a way that were not optimal in regards to our server setup or comfort zone. The closest to what I wanted to achieve was the PhantomJS script, but it had a limitation where it would output the chart to local files.

I ended up writing a fairly simple set of scripts that runs on PhantomJS and have made it available on Github. It is by no means thoroughly tested or as flexible as the official solutions, but in my opinion it is slightly cleaner and easier to set up. Basically, you just clone the repository, configure the config.json file (normally just have to change the port to one of your choice) and run:

You can then POST your JSON-options to it (the JSON-parser is strict, so you might want to run your JSON through JSONLint if it fails):

Will give you back this image:
Output of Highcharts renderer

To see that it actually works, you can perform a simple request against the server once it is up and running:

If you want to try it out yourself, get the code on Github.

Read more from the Software engineering category