DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Java
  4. Highcharts Server Setup With Apache Maven Server and PhantomJS

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.

Sibu Stephen user avatar by
Sibu Stephen
·
Apr. 24, 17 · Tutorial
Like (2)
Save
Tweet
Share
7.24K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Apache Maven Highcharts

Published at DZone with permission of Sibu Stephen. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • (Deep) Cloning Objects in JavaScript
  • Efficiently Computing Permissions at Scale: Our Engineering Approach
  • How To Validate Three Common Document Types in Python
  • Handling Virtual Threads

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: