Question

I can't set a NVD3 multibarchart able to sort the bars by dates in the xAxis. I'm aware the input data must be grouped by key before displaying it into a multibarchart.

Here a jsfiddle illustrating what I'm talking about: http://jsfiddle.net/fontanon/z4aZ4/54/

As you can see in the data variable, I've added three groups of bars (key1, key2 and key3). Each group has the x values sorted ascendently. The first bar of key2 should be the first (as for having the minimum x value), then the first bar of key1 followed by the second bar of key2, etc. But this is not how the bars are being displayed.

What is exactly happening? Below the data.

var data = [
    {
        "key": "Key1",
        "values": [
            {
                "x": 2393337532000,
                "y": 1401431
            },
            {
                "x": 4394337660000,
                "y": 26188
            },
            {
                "x": 7395510769000,
                "y": 865575
            },
        ]
    },
    {
        "key": "Key2",
        "values": [
            {
                "x": 1396337532000,
                "y": 1401431
            },
            {
                "x": 3397337660000,
                "y": 26188
            },
            {
                "x": 6398510769000,
                "y": 865575
            }
        ]
    },
    {
        "key": "Key3",
        "values": [
            {
                "x": 5399337532000,
                "y": 1401431
            },
            {
                "x": 8400337660000,
                "y": 26188
            },
            {
                "x": 9401510769000,
                "y": 865575
            }
        ]
    }
]
Was it helpful?

Solution

Your data should be look like this

var data = [
    {
        "key": "Key1",
        "values": [
            {
                "x": 7393337532000,
                "y": 1401431
            },
            {
                "x": 8394337660000,
                "y": 26188
            },
            {
                "x": 3398510769000,
                "y": 865575
            }
        ]
    },
    {
        "key": "Key2",
        "values": [
            {
                "x": 7393337532000,
                "y": 1401431
            },
            {
                "x": 8394337660000,
                "y": 26188
            },
            {
                "x": 3398510769000,
                "y": 865575
            }
        ]
    },
    {
        "key": "Key3",
        "values": [
            {
                "x": 7393337532000,
                "y": 1401431
            },
            {
                "x": 8394337660000,
                "y": 26188
            },
            {
                "x": 3398510769000,
                "y": 865575
            }
        ]
    }
]
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top