Highcharts Server Setup With Apache Maven Server and PhantomJS

Highcharts is a library used in displaying data in the form of charts. Highchart server is used for making up charts whether they're a bar graph, pie chart, map, etc. Setting up a Highchart server is pretty easy.

Required Dependencies 

The dependencies are:

• Apache Maven Server.

• PhantomJS.

• Java 1.8 (nothing lower).

• Install Maven 3 (nothing lower).

• Install PhantomJS 2.0 (nothing lower).

Once done with the dependencies installation, follow these steps to obtain an up-and-running Highcharts server on your machine.

1. Highchart Export Server Generation With Apache Maven Server

You must clone the Highcharts server repository, which can be done here. Once done, simply follow the below commands and create your own Highchart server.

After cloning the repository, go to HighChartsServer/highcharts-export-server/java/highcharts-export/highcharts-export-web.

highcharts-export-web has a file named pom.xml that does the internal mapping for the Highcharts server.

This file contains an index.php file that solves its dependency for Batik. This file is part of the exporting module for Highcharts JS. 

After which one needs to type sudo mvn clean package which basically adds highcharts-export-web.war into the target folder as such.

Then, one needs to run the server sudo mvn jetty:run, which basically compiles in the resources mapped in the pom.xml. The default host on which the server runs is 8080.

In the above screenshot, in the Options section, one can enter in the JSON data that gets mapped into the chart image on the right-hand side. Image File Format gives you the available file formats to which the generated image needs to be posted like SVG, PNG, JPEG, etc.

The constructor provides you with the types of charts which can be generated like Stockchart, Chart, Maps, etc.

The callback function provides you with the styling options wherein you can customize the styling attributes in the chart as such like providing padding, margin, colors, etc.

2. Highchart Export Server Generation With PhantomJS

In order to export the image using PhantomJS, you to pass a curl POST request to the PhantomJS server and start the PhantomJS server simultaneously.

Open another window, go to HighChartsServer/highcharts-export-server/phantomjs, and type:

phantomjs highcharts-convert.js -host 127.0.0.1 -port 3003

The above command will start a PhantomJS server with highcharts-convert.js file as a parameter.

On the first window, go to HighChartsServer/highcharts-export-server/phantomjs and type:

curl -H “Content-Type: application/json” -X POST -d “{\”infile\”:\”{series:[{data:[29.9,71.5,106.4,2.1,2.3,9.0,12.03]}]}\”}” 127.0.0.1:3003

The series parameter consists of the x-axis values. The above command provides a POST request to a PhantomJS server which in return provides a base64 chart image. The POST request to the PhantomJS server will deliver a Base64 image. One can embed the above base64 code into an IMG tag.

This can be embedded anywhere on your site and you can use it as per your convenience.

For example, if you have a site named Product Hunt, then you can embed the image like the screenshot below:

I hope that this Highcharts server tutorial proves beneficial to you all. If you have any questions or suggestions, please comment below.