Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Highcharts Server Setup With Apache Maven Server and PhantomJS

DZone's Guide to

Highcharts Server Setup With Apache Maven Server and PhantomJS

The Highchart server can be used to display data in a variety of different charts, and it's pretty easy to set up with Apache Maven and PhantomJS.

· Big Data Zone ·
Free Resource

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

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.

Screen Shot 2016-05-01 at 10.50.13 PM

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

Screen Shot 2016-05-01 at 10.50.34 PM

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

Screen Shot 2016-05-01 at 10.56.16 PM

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

Screen Shot 2016-05-01 at 10.51.26 PM

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.

Screen Shot 2016-05-01 at 10.57.50 PM

Screen Shot 2016-05-01 at 10.58.12 PM

Screen Shot 2016-05-01 at 10.58.50 PM

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.

Screen Shot 2016-05-01 at 10.58.57 PM

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

Screen Shot 2016-05-01 at 11.51.13 PM

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:

Screen Shot 2016-05-02 at 12.21.51 AM.png

 







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

Hortonworks Community Connection (HCC) is an online collaboration destination for developers, DevOps, customers and partners to get answers to questions, collaborate on technical articles and share code examples from GitHub.  Join the discussion.

Topics:
highchart ,phantomjs ,maven ,data visualization ,big data ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}