Displaying a single series multi bar chart using nvd3 library

Question

Does anyone know how I would go making a multi bar graph to be single series? In a work

Answer 1

The expected data format for the multi-bar chart is an array of object, each of which represent a data series. Within each series object, there should be a key property naming that series, and a values array with the data points. The values array should have an object for each bar, with a categorical x value and a numerical y value.

For example, if I "stringify" the results of their data-generating function (after reducing the parameters so I only get two data series with five bars each), it looks like this:

[{
    "key": "Stream0",
    "values": [{
        "x": 0,
        "y": 0.16284738584101344
    }, {
        "x": 1,
        "y": 2.370283172738109
    }, {
        "x": 2,
        "y": 0.1631208266452718
    }, {
        "x": 3,
        "y": 0.24609871793543797
    }, {
        "x": 4,
        "y": 1.5096133160633776
    }]
}, {
    "key": "Stream1",
    "values": [{
        "x": 0,
        "y": 0.12566330679904006
    }, {
        "x": 1,
        "y": 0.1321859413211272
    }, {
        "x": 2,
        "y": 1.4798247902549135
    }, {
        "x": 3,
        "y": 0.10870538273358979
    }, {
        "x": 4,
        "y": 0.16155091711225184
    }]
}]

The graph looks like this:

Each series is graphed in a different colour. The bars are grouped according to their x value, side-by-side or you can switch to stacked.

The reason you were getting one narrow bar for each of your categories is because you have 11 different data series, each with one bar that has a different x-value. So for each x-value, the graph leaves room for all the data series to be plotted side-by-side, even though it doesn't have data for them.

You either need to group all your bars into one data series, with the test identified via the x-value, or you need to give them all the same x-value, with the test identified via the series key.

I know you've already got the first option pretty much working, based your other question on the discrete bar chart function.

The easiest way to modify this code to see what it looks like the other way (11 series, each with only one bar), is to tell the chart function to just use a constant value for x:

chart.x(function(d){return "test";})

With that, and data similar to yours (many series, each with only one data point), you get a chart that switches from a bar chart to a stacked area chart, like this:

(P.S., You'll of course want to remove the number-formatting tickFormat function so that you don't get "NaN" like in these pictures!)