Integrating Highchart.js into Java 8

By | April 27, 2016

At some point when developing an application your client will ask for visual representations of big data sets. Be it from simple line graphs of sales per month or advanced carpet plots of interest rate vs the amount of mortgages sold.

When you are developing for a web-application then you could opt to use Highchart.js to render the graphs. Highcharts is a highly customizable, easy to use graph render tool using JavaScript. But what if you have to render these graphs server-side. I faced the same problem so I developed a library called Highchart Renderer to do just that.

It will allow you to create PNG images using either:

  • a combination of PhantomJs with Selenium driver
  • the export server provided by Higcharts

You can include the library using maven by including the dependency below:

<dependency>
    <groupId>com.jongsoft.utils</groupId>
    <artifactId>highchart-renderer</artifactId>
    <version>1.0.3</version>
</dependency>

Now in code all you need to do is create a Higchart entity, on this you can set the properties as indicated by the official Highcharts API reference. For most of the options a Java method has been created to set it. A small example is below:

Highchart highchart = new Highchart();
        highchart.getChart()
            .setAlignTicks(true)
            .setAnimation(false)
            .setHeight(500)
            .setWidth(600)
            .setMargin(new Margin(15, 20))
            .getStyle()
                .css("color", new GraphColor("#ffffff"))
                .build()
            .build()
        .getCredits()
            .setEnabled(false);

    // Don't forget to set the axis
    highchart.addYAxis(new Axis()
        .setTickInterval(1.0)
        .setStartOnTick(Boolean.FALSE)
        .setEndOnTick(Boolean.FALSE)
        .setMin(0)
        .setMax(24)
        .getTitle().setText("Y Axis").build()
        .getLabels().setFormat("{value}").build());
    chartOptions.addXAxis(new Axis()
        .getLabels().setAlign(Alignment.LEFT).setX(5).setY(14).build()
        .setShowLastLabel(false));

    // Set some series with data
    LineSeries series = SeriesFactory.createSeries(SeriesType.LINE);
    series.add(new SeriesPoint().setX(1).setY(9));
    series.add(new SeriesPoint().setX(2).setY(12));
    series.add(new SeriesPoint().setX(3).setY(15));
    highchart.addSeries(series);

You now have a Java object for which you can generate either the JavaScript object or render to PNG. Rendering it to a PNG file is as simple as below:

ImageRenderer imageRenderer = new ImageRenderer();
FileOutputStream out = new FileOutputStream("target/render-output/phantom-testRender.png");
imageRenderer.setOutputStream(out);

// Fill this highchart object with all desired settings
Highchart highchart = new Highchart();
imageRenderer.setRenderObject(highchart);

// Perform the render operation in a try-catch as it may throw an exception when rendering
try {
    imageRenderer.render();
} catch (RenderException e) {
    // Do something usefull with the exception thrown
}

If you have any suggestions for new features or any issues with the library then feel free to register them on https://github.com/gjong/highcharts-renderer.

Update 1: updated the link to the GitHub repository after moving it to a dedicated project.

2 thoughts on “Integrating Highchart.js into Java 8

    1. Gerben Post author

      You are absolutely right. The git repository has moved to a dedicated location, rather then being part of a larger project.

      Reply

Leave a Reply