How to create angular nvd3 multibar and stacked chart using json data

Question

I want to create an angular nvd3 multibar chart using the following json data.

json:
[
    {
        "ccpProducts": "CME",
        "color": "red",
        "values": [
            {
                "dates": "2015-07-01 00:00:00.0",
                "noOfTrades": 5281
            }
        ]
    },
    {
        "ccpProducts": "LCH",
        "color": "#6b486b",
        "values": [
            {
                "dates": "2015-07-01 00:00:00.0",
                "noOfTrades": 5281
            }
        ]
    }
]

Answer 1

Since values is an array of objects, you can't access its attributes via their index like you are doing (object properties are not ordered):

// d[0] and d[1] are undefined!
x: function(d){ return new d[0]; },
y: function(d){ return d[1]; }

Instead you should do this:

x: function(d){ return new d['dates']; },
y: function(d){ return d['numOfTrades']; }

You could also transform the format of the data in bar.json.