NVD3.js: Stacked and grouped bar chart with two y-axis

Question

I am using NVD3.js and want to create following chart:

As you can see - bars are stacked, two axis and grouped by x-axis

Using multiChart I got :

It is stacked, two axis, but not grouped by x-axis.

Maybe I need to use different chart type - not multiChart, but I didn't find bar charts where are two y-axis.

1) How can I achieve this using NVD3.js?

2) If it can not be done in NVD3.js, then which solution I can properly integrate?

Thanks!

Answer 1

The NVD3 Javascript library is, to quote their website, "an attempt to build re-usable charts and chart components". It's creators have made a couple key decisions in order to emphasize the reusability of the charts:

• They have focused on implementing standard chart designs (line graphs, bar graphs, scatterplots), but implemented in flexible, interactive ways.

• They have used the same data structure requirement for all the graphs:

  • The main data array contains multiple data series, each of which represents a logical grouping of the data;

  • Each series is an array of individual data objects containing two or more variables.

• All the graphs have a similar style and reuse important pieces of code.

The NVD3 library allows you to create a grouped bar chart or a stacked bar chart, and even a chart that interactively animates between the two.

Adapting that chart to create a stacked and grouped bar chart is not a simple task, in part because the data structure would be different. You would need a three-level data structure (series > sub-series > datapoints, representing groups > stacks > bars) instead of the two-level (series > datapoints) structure used by NVD3.

All is not lost, however. NVD3 is built on the d3 Javascript library. D3 is much more flexible and open-ended; it doesn't define specific chart types, it defines a way of manipulating a webpage to make it match your data. You can use it to create any type of chart that can be drawn with HTML or SVG. But of course, that means that it is much more work, since you have to explicitly create all the parts of the graph, and make all the design decisions yourself!

I strongly recommend, if you want to use d3, start with the basics in the tutorials list or one of the introductory books. However, you'll also want to check out the gallery of examples, and from there you'll find the following charts that will be of particular interest:

• Mike Bostock's Stacked Bar Chart
• Bostock's Grouped Bar Chart of the same data
• Ali Gencay's adaptation of those examples to create a stacked, grouped bar chart

Once you have become familiar with building charts in d3, you may want to open up the NVD3 source code to see if you can borrow some of their reusable code components (being sure to respect their licence terms, of course). However, I would not recommend doing so as a beginner -- it is a lot of code, and uses a lot of complex techniques to put all the pieces together.