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
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:
To check whether Java was installed correctly, you can use the command:
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”.
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.
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:
If you can see the message: * Starting Tomcat servlet engine tomcat7 [OK]*, then the Tomcat7 was successfully installed.
- Install Maven.
Check if Maven was successfully installed using:
- Install PhantomJS.
Check if PhantomJS was successfully installed using:
- 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,
Navigate to the directory “highcharts-export”, and compile “highcharts-export-web.war”.
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:
Finally, the setting up is done! You can access the server through interval IP (start with 192), which we can get using:
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:
Also, to start and stop Tomcat7, you can use the command:
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:
Beware! The address must contain last “/”, otherwise, export button will navigate to the demo of highcharts export server!
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();
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();
}
}
}