Grouped and stacked multiBarChart with NVD3

Question

Possible duplicate question to Bar chart in Javascript: stacked bars + grouped bars

I'm trying to create a stacked bar chart that lets you compare 2 values (dark and mid blue) to last week's data points (the secondary light blues 'behind').

1. Starting with multiBarChart() with .stacked(true) first I tried merging both weeks into a single array of 14 bars, where the x position could help group the bars. I tried to form my combined array of objects where .x properties' values are 0, 0.3, 1, 1.3, 2, 2.3, etc. Unfortunately unlike lineChart() it doesn't use the x value for positioning.

2. Another idea is to exploit the group .stacked(false), providing 4 items (instead of 2) with the same x value. These then appear overlaid on top of each other instead of stacked. Here the spacing looks good, but how do I stack these 2 by 2?

Guertin

Answer 1

Hey I just developed grouped+stacked bar chart on d3.js. It is not NVD3 but it may help you.

• Source

• Demo

Tiberias

Answer 2

Let me just say up front that I am SO not an nvd3 expert. I'm barely past the getting-started stage myself.

That said, it looks like you're making this too hard on yourself.

I think you really want to send nvd3 two sets of data, with the x's matching between the two. (E.g., (1,y1a) corresponding to (1,y2a), then (2,y2a) with (2,y2b), etc.)

You can see this more clearly by the following:

1. Head to their Live Code page
2. Select the Group/Stacked Bar Chart.
3. Select the Data (JSON) tab.
4. Replace the first function with the following, and observe the resulting x values.:

    function() {
      return stream_layers(2,10,.1).map(function(data, i) {
        alert( 'Stream '+i+': '+JSON.stringify(data));
        return {
          key: 'Stream' + i,
          values: data
        };
      });
    }

Best as I understand it, that's the model you're looking for.

Gilding