9 May 2014 / by David Gilbert / in Java

Orson Charts 3D / Enhanced SVG Export

Overview

In April, we released Orson Charts version 1.3. This release brings exciting new interactive features, including mouse events that can identify all chart elements (titles, axis labels, legend items, data items, etc.) and provide links back to the chart's source data. This gives developers endless possibilities to create dynamic and interactive visualisations in Java applications, whether it be for item selections, popup info (dialogs and/or tooltips) or drill-down data displays. With Orson Charts 1.3 it is now even easier to let your users explore their data.

This post highlights a less visible feature in the 1.3 release---the enhanced SVG export---which also supports interactivity (mouse events and tooltips) for server-side generated charts displayed in modern web browsers.

Enhanced SVG Export

The enhanced SVG export adds a custom attribute to the SVG elements it generates to identify the chart element (or data item) that the SVG element corresponds to. This custom attribute can be picked up by mouse event handlers in JavaScript to provide interactive features in web clients for charts that are generated on the server-side.

This feature is implemented using special rendering hints that get recognised by JFreeSVG but ignored by other Graphics2D implementations. This allows you to use the same code, unchanged, with any output target. In this post, we provide a few examples to illustrate---the source code for these demos is included in the Orson Charts download (you can also view the HTML page source here).

Configuration

To enable the enhanced SVG export feature, you simply need to call the setElementHinting(boolean) method on your chart instance prior to drawing the chart to the SVGGraphics2D instance provided by JFreeSVG:

SVGGraphics2D g2 = new SVGGraphics2D(width, height);
chart.setElementHinting(true);
chart.draw(g2, new Rectangle(width, height));
return g2.getSVGElement(chart.getID());

That's all that needs to be done in terms of the SVG generation (for an overview of creating a chart using Orson Charts, refer to an earlier blog post 'Creating 3D Charts in Java').

Client Side

On the client side, you need to add mouse (or touch) event handlers in JavaScript that perform the required actions when the user interacts with the chart. You can view the page source for this page to see how we've implemented these handlers for the examples. You have complete freedom to use a different approach on the client side, the key is simply to extract the chart ID and item reference from the SVG element that is the source of the event. Orson Charts provides some utility functions in JavaScript that you can use to grab the chart ID and link reference, and dataset classes if you require the full dataset on the client-side (for example, to generate tooltips as we do in these examples).

Examples

In the charts below, try clicking on an item in the chart or just hover and look at the tooltip (the reference is a string in JSON format that contains sufficient information to identify the chart element). Our examples make use of Opentip, a free JavaScript library for displaying tooltips.

Milk Products Meat Wood/Logs Crude Oil Machinery Fruit Fish Wine Other Milk Products (25%) Meat (11%) Wood/Logs (7%) Crude Oil (4%) Machinery (4%) Fruit (3%) Fish (3%) Wine (3%) Other (40%) Orson Charts (evaluation) (c) 2013, 2014, by Object Refinery LimitedNew Zealand Exports 2012 http://www.stats.govt.nz/browse_for_stats/snapshots-of-nz/nz-in-profile-2013.aspx

Q2/11 Q3/11 Q4/11 Q1/12 Q2/12 Q3/12 Q4/12 Q1/13 Q2/13 Q3/13 Q4/13 Quarter 0 20 40 60 $billion Revenues 0 20 40 60 $billion Revenues Oracle Google Microsoft Apple Oracle Google Microsoft Apple Oracle Google Microsoft Apple Orson Charts (evaluation) (c) 2013, 2014, by Object Refinery LimitedQuarterly Revenues For some large IT companies

4.5 5.0 5.5 6.0 6.5 7.0 7.5 8.0 Sepal Length 2.0 2.5 3.0 3.5 4.0 4.5 Sepal Width 1 2 3 4 5 6 7 Petal Length setosa versicolor virginica Orson Charts (evaluation) (c) 2013, 2014, by Object Refinery LimitedIris Dataset


Summary

In this post we showed how Orson Charts and JFreeSVG integrate to provide both high quality vector rendering in modern web browsers plus the ability to support interactive features such as tooltips and mouse selection. The source code for these examples is included in the Orson Charts download.

If you'd like to give feedback on this post, please comment via the Orson Charts Twitter feed.