My HighChart server

author
By Team Srijan May 5, 2016

Highchart server is basically used for making up charts which may be a bar graph, pie chart, highstocks,maps etc.Setting up a highchart server is pretty easy, where in one needs to install the following Pre-Requisite as such  –

  1. Apache Maven Server.

  2. PhantomJS.

  • Java 1.8 (Not below the mentioned Version)

  • install Maven 3 (Not below the mentioned Version)

  • install PhantomJS 2.0 (Not below the mentioned Version)

I) Highchart export server Generation using Apache Maven Server

One needs to clone the highcharts server repository which can be replicated over here.

 Once done simply follow the commands below and create your own Highchart server.

 After Cloning the repository, go to the path referenced below –

 – HighChartsServer/highcharts-export-server/java/highcharts-export/highcharts-export-web.highchart1

The highcharts-export-web  has a file named pom.xml which does the internal mapping for highcharts server.highchart2

This File contains index.php file which solves it’s dependency for Batik and is part of the exporting module for Highcharts JS.highchart3After this, one needs to type sudo mvn clean package which basically adds  highcharts-export-web.war into the target folder as such.highchart4Then one needs to run the server- sudo mvn jetty:run which basically compiles the resources mapped in the POM.xml. which is the default host on which the server runs 8080highchart5

highchart6

In the above screenshot,  in the Options section one can enter in the JSON data which gets mapped in to the chart image on the right hand side and the Image File Format gives you the available file formats to which the generated image needs to be posted like svg, png or jpeg.

Constructor provides you with the types of charts which can be generated like  stockchart, chart, maps etc.

The Callback function provided you with the styling options, where in one can customize the styling attributes in chart such as providing padding,margin,colors etc.

II)  Highchart export server generation using PhantomJS.

In order to export the image using PhantomJS one needs to pass  a curl post request to PhantomJS server  and start PhantomJS server simultaneoulsy.

Open another window and got to ->  HighChartsServer/highcharts-export-server/phantomjs  and type

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 consist of  the X axis values.

The above command provides a post request to a PhantomJS server which in return provides a base64 chart image which looks something like this:

One can embed the above base64 code into an img tag in the format given below

This can be embedded anywhere in your site and used as per your convenience. For example, if you have a site named Product Hunt, then you can embed the image like the screenshot below:

Hope this Highcharts server proves beneficial to you. Please comment below  for any queries or suggestions to improve this process.

Shared Success

How We Helped 8world Deliver New Digital Experiences Through A Hybrid CMS
How We Helped A Telecom Giant Shorten The Time-To-Market For APIs
How We Delivered A Market-ready Website With Unified UX In Just 6 Weeks
How We Built An API Developer Portal For a Telecom Giant To Improve Developer Engagement

Let’s start our conversation

  • Business Inquiry
  • Career
  • Others

Business Inquiry

Career

Others