New in the RAP Incubator: Charts with d3 and nvd3

Some time ago we’ve created a draft for a Chart widget for RAP, based on the famous D3.js. Together with one of our partners, we decided to carry this work forward and make it available in the RAP Incubator.

D3 is a very flexible framework to turn data into dynamic charts. Looking at their examples, it’s amazing how many different types of charts there are. Whatever diagram you can think of, it can probably be done with d3.

Such great freedom comes at the price of some complexity. When all you need is a simple bar chart with two axis, you may not want to dive into the theory of scales, domains, layouts, and selections first. D3 offers a lot of tools, but no ready-to-use chart types. Happily, there are charting libraries built on top of d3. In fact, there are dozens of them.

We’ve decided to implement some basic chart widgets for the most common chart types based on nvd3, a library that provides good-looking charts for most of the common needs. Currently, there is a PieChart, a BarChart, and a LineChart widget with a basic set of properties, that is going to be extended. But we also kept the base classes, Chart and NvChart extensible to allow you to implement your own chart widgets for other d3 or nvd3 chart types with very little effort.

On the application side, creating a simple bar chart is fairly simple:

BarChart barChart = new BarChart( parent, SWT.NONE );
barChart.setItems(
  new BarItem( 759.3, "Chrome", blue ),
  new BarItem( 633.5, "Firefox", orange ),
  new BarItem( 384.6, "Edge", green )
);

To keep things lightweight, the Items are just data objects, not widgets. Colors can be specified as RGB objects. Since it’s in incubation, the API may still change slightly while we (and you) gather more insight.

The widget is now available in the RAP Incubator, it works with RAP 3.0 and 3.1. We hope you like it and we’re happy to hear what you think.