Listing data horizontally(in a table) instead of vertically

I have an object with an array and a string:

{
    "result": [
    ],
    "text": "success
}

"result" contains four arrays with twelve objects

"result": [
    [
        {
        // data
        },
        // eleven more objects
    ],
    // three more arrays
]

The entire object is from a database which contains data about yearly income. In each of the twelve objects(one for each month) there's data about gross income, net income, expenses, savings and so on. Each array(direct child of "result"-array) is an array for a year.

What I'm trying to accomplish is listing the data horizontally, with each month as a column and each row has a "label" as a legend as to explain what the row contains.

This is my desired result. Notice how the the chart displays that the pay is increasing each month:

What I'm getting. February's gross is put under january's net, and so on:

I've tried nesting loops but I'm having a hard time breaking off to a new row. The first row(gross) spans twelve columns and the correct data is entered in each cell, but on the first row I get 12*6 cells, second row 12*5, third row 12*4 and so on. On top of this I need to loop through four years(each array in "result"-array).

This is what I use to build the table(s), and it works great: http://jsfiddle.net/w3mktubx/

This is the entire code for the table-looping: http://jsfiddle.net/v4vo6zot/1/

I've tried Object.keys() but wasn't successful on that part either. I know I could just make like 100+ lines of code and make it all but there should be a solution for this using loops. I'd also prefer to make the tables using JS since the table should only be created once the user navigates to that particular page.

The data in my month-objects is as follows. Doing it from memory since I'm at work right now, but it should be correct:

{
    "id": "0",
    "year": "2011",
    "month": "january",
    "gross": "10000",
    "net": "8000",
    "expenses": "2000",
    "afterExpenses": "6000",
    "savings": "4000",
    "moneyToSpend": "2000"
}

So my question is: is there an easy solution to this? If so, how do I do it?