Set Up Highcharts Export Server On Ubuntu Server 12.04: Step by Step

MAR 21ST, 2014

PREREQUISITES FOR INSTALLATION

The java based Highcharts export-server has the following prerequisites:

• install an java application server (for example: Apache Tomcat, Jboss, TC server, Resin) 

TIP: use  Jetty (application server) during development, requires no installation

• install Java 1.7
• install Maven 2 or later
• install PhantomJS on the server, see here
• download the source for the export-server module from Github. This is a maven module. Save the highcharts-export folder to a convenient place. 
• 如果这些都完成后测试发现图表乱码，原因很可能是server没有安装highcharts字体的缘故.解决方法:
• wget http://www.my-guides.net/en/images/stories/fedora12/msttcore-fonts-2.0-3.noarch.rpm
  rpm -Uvh msttcore-fonts-2.0-3.noarch.rpm

There are a lot of JavaScript  libraries for generating elegant and interactive charts, such as  d3.js,  RGraph,  Google Charts, etc. However, most of them have no feature that can let users save their charts as images, except  Highcharts! The charts generated by  Highcharts contain a export button, users can use it to save charts as images. The mechanism of exporting feature of  Highcharts is: by clicking the exporting button, users send a request to  Highcharts’s export server with chart data, then the export server convert chart data (SVG) into images, e.g.  JPEG,  PNG,  PDF, through  PhantomJS, and send the generated images back to clients. So, there is a security problem! Even though  Highcharts said they will  never gather any information send to their export server, users’ chart data still can be intercepted by third part organizations. That’s a common problem of  http protocol! In this blog, I will show you how to set up your own local  highchart-export server step by step, which can be further set up to be accessible outside under  https protocol.

The tutorial of setting up export server on Highcharts’s website is really vague, especially to users that have little knowledge about Java and Tomcat-server. I spent two days to get my server work, but I hope you can get it through in 10 minutes by following this tutorial.

• Install Java. The Highcharts export server is an Apache-tomcat based server, which run under Java run environment, so we need to install Java first. And for Highcharts-export server, we need at least version 1.7. Open your terminal, and type the following command:

1	sudo apt-get install openjdk-7-jdk openjdk-7-jre

To check whether Java was installed correctly, you can use the command:

1	java -version

If you can see the message: java version “1.7.”*, then the Java was successfully installed. We need to tell computer the main path of Java (JAVA_HOME) by appending this line “export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64” into “ ~/.bashrc”.

1	sudo nano ~/.bashrc

After opening the “~/.bashrc” file, use arrow key to navigate to its bottom, type the export command, and press “Ctrl+x” to exist and save the modification.

• Install Tomcat7. You can call Tomcat as the server, because it hosts the highcharts-export-web module which will be used for converting charts to images.

1	sudo apt-get install tomcat7

Create System variable CATALINA_HOME by appending this line “export CATALINA_HOME= /usr/share/tomcat7” to the end of “ ~/.bashrc”. Save it and execute the following command to make all modification work:

1	. ~/.bashrc

If you can see the message: * Starting Tomcat servlet engine tomcat7 [OK]*, then the Tomcat7 was successfully installed.

• Install Maven.

12	sudo apt-get updatesudo apt-get install maven

Check if Maven was successfully installed using:

1	mvn -version

• Install PhantomJS.

12345678910

sudo apt-get remove phantomjssudo unlink /usr/local/bin/phantomjssudo unlink /usr/local/share/phantomjssudo unlink /usr/bin/phantomjscd /usr/local/sharesudo wget https://phantomjs.googlecode.com/files/phantomjs-1.9.0-linux-x86_64.tar.bz2tar xjf phantomjs-1.9.0-linux-x86_64.tar.bz2sudo ln -s /usr/local/share/phantomjs-1.9.0-linux-x86_64/bin/phantomjs /usr/local/share/phantomjssudo ln -s /usr/local/share/phantomjs-1.9.0-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjssudo ln -s /usr/local/share/phantomjs-1.9.0-linux-x86_64/bin/phantomjs /usr/bin/phantomjs

Check if PhantomJS was successfully installed using:

1	phantomjs -v

• Compile file “highcharts-export-web.war” using Maven. Go to Highcharts’ github repository highcharts.com, and click the Download ZIP at the right-bottom corner. Unzip the download file, you can find the “highcharts-export” folder under “highcharts.com-master\exporting-server\java”, copy it to a convenient place. For example,

1	sudo cp -R theFolderDirectory /home/local/../highcharts-export/

Navigate to the directory “highcharts-export”, and compile “highcharts-export-web.war”.

12345

cd /home/local/KRG/huti/highcharts-export/mvn installcd highcharts-export-webmvn clean packagemvn install

If you can see BUILD SUCCESS message, then the “highcharts-export-web.war” was successfully compiled.

Now copy the compiled file into your server’s webapps folder. For example, mine is:

1	sudo cp -R /home/local/KRG/huti/highcharts-export/highcharts-export-web/target/highcharts-export-web.war /var/lib/tomcat7/webapps/

Finally, the setting up is done! You can access the server through interval IP (start with 192), which we can get using:

1

ifconfige

Type the address “http://IP:8080/highcharts-export-web” in your web browser you will see the demo of Highcharts Export Server!

Note! If there are some kinds of error occurred, and you need to remove your Java or Tomcat, or re-installed them, you can use the following command:

12	sudo apt-get purge openjdk*sudo apt-get autoremove tomcat*

Also, to start and stop Tomcat7, you can use the command:

12	service tomcat7 startservice tomcat7 stop

Tips:, To use the new export-server instead of the default one “http://export.highcharts.com/”, we need specify the option url in our JavaScript, like:

123	exporting:{ url:'http://IP:8080/highcharts-export-web/'}

Beware! The address must contain last “/”, otherwise, export button will navigate to the demo of highcharts export server!

测试:

package com.x.x;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.net.URL;

import org.apache.commons.io.IOUtils;
import org.apache.http.HttpEntity;
import org.apache.http.HttpHost;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.protocol.HttpClientContext;
import org.apache.http.client.utils.URIBuilder;
import org.apache.http.impl.client.CloseableHttpClient;
import org.junit.Test;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.bitmain.bpp.common.util.BppHttpClient;

public class HighchartsExample {
     private static Logger logger = LoggerFactory.getLogger(HighchartsExample.class);

     @Test
     public void generatePNG() {
          String API_URI="https://192.168.1.10/highcharts-export-web/";
          try {
               URL url = new URL(API_URI);
               BHttpClient bHC = new BHttpClient();
               CloseableHttpClient httpclient = bHC .getHttpClientInstance();

               HttpHost targetHost = new HttpHost(url.getHost(), url.getPort(), url.getProtocol());
               HttpClientContext context = HttpClientContext.create();
               URIBuilder builder = new URIBuilder(API_URI);
               builder.addParameter("svg", null);
               builder.addParameter("constr", "Chart");
               builder.addParameter("content", "options");
               builder.addParameter("options", "{chart:{type:'spline'},title:{text:'HelloWorld'},xAxis:{type:'datetime',dateTimeLabelFormats:{month:'%e. %b',year:'%b'},tickPixelInterval:150,title:{text:'Date/Time'}},yAxis:{title:{text:'LuckyDog %'},plotLines:[{color:'blue',value:'100',width:'3',zIndex:10,label:{text:'Neutral',y:10,style:{color:'red',fontWeight:'bold'}}}]},series:[{name:'Season One',data:[[1416441600000,67],[1416528000000,49] ..... ]}],plotOptions:{spline:{marker:{enabled:true,symbol:'circle',radius:2},animation:false,states:{hover:{marker:{enabled:true,},lineWidth:2}}}}};");
               builder.addParameter("scale", "1");
               builder.addParameter("type", "image/png");
               builder.addParameter("width", "1215");
               builder.addParameter("callback", null);
               HttpPost httppost = new HttpPost(builder.build());
               httppost.setHeader("Content-Type","application/json");
               httppost.setHeader("User-Agent",BppHttpClient.USER_AGENT);
             CloseableHttpResponse response = httpclient.execute(targetHost, httppost, context);

               logger.debug("executing request" + httppost.getRequestLine());
               HttpEntity entity = response.getEntity();
               logger.debug("----------------------------------------");
               logger.debug(response.getStatusLine().toString());
               if (entity != null) {
                    File file = new File("E:/example.png");
                    InputStream in = entity.getContent();
                    IOUtils.copy(in, new FileOutputStream(file));
                    logger.error("highcharts PNG写入文件成功!");
               }    
          } catch (Exception e) {
               e.printStackTrace();
          }

     }
}