Loop Multidimensional array to generate Multidimensional Array for Google Charts

Question

I am currently trying to generate a report using Google charts.

I am pulling information from a MYSQL DB in my node.js server side code and using socket.io to pass it to the client side in a multidimensional array which looks like the following:

[ [ 'ANSWERED', '477', 728 ],[ 'BUSY', '477', 48 ],[ 'NO ANSWER', '477', 277 ],[ 'ANSWERED', '478', 88 ],[ 'BUSY', '478', 24 ],[ 'NO ANSWER', '478', 56 ] ]

So I am currently looping through that array and trying to pull out the values so it is in the following format for Google Charts:

[ ['477', 728, 48, 277 ],[ '478',88, 24, 56]]

I cannot get it into this format and am struggling to find ways to do so, so then I can then insert this information into my multidimensional array for Google tables and generate a report.

The current code I have so far is:

socket.on("SQL", function (valueArr) {
        google.charts.load('current', {
            packages : ['corechart']
        });
        google.charts.setOnLoadCallback(drawMaterial);
        function drawMaterial() {
            var data = [];
            var Header = ['Call Disposition', 'Answered'];
            data.push(Header);
            for (i in valueArr) {
                var index = 0;
                var foundIndex = false;
                var agent = valueArr[i][1];
                var callcount = valueArr[i][2];
                for (var i in data) {
                    var dataElem = data[i];
                    if (dataElem[0] === agent) {
                        index = i;
                        foundIndex = true;
                        data[index][i] = callcount;
                    }
                }
                if (foundIndex === false) {
                    var chanar = new Array(agent);
                    data.push(chanar);
                }
            }

            console.log(data);

            var options = {
                title : 'Call Disposition',
                hAxis : {
                    title : 'Agents',   
                    minValue : 0,
                },
                vAxis : {
                    title : 'Disposition Number'
                },
                isStacked : true
            };
            var chartdata = new google.visualization.arrayToDataTable(data);
            var material = new google.visualization.ColumnChart(document.getElementById('chart'));
            material.draw(chartdata, options);
        }
    });

Which outputs the following multidimensional array:

[['Call Disposition', 'Answered'],['477',277 ]]

The idea is I need the multidimensional data array to eventually look like(Note header can be changed in code its just due to the current amount of values am working with to build it up):

[['Call Disposition', 'Answered','Busy','Failed'],['477', 728, 48, 277 ],[ '478',88, 24, 56]]

Answer 1

Edit: This uses a function and a temporary variable temp for collecting values. Every third item, a new array is pushed to the result array.

function x(data) {
    var r = [], temp;
    data.forEach(function (a, i) {
        if (!(i % 3)) {
            temp = [a[1]];
            r.push(temp);
        }
        temp.push(a[2]);
    });
    return r;
}

var data = [['ANSWERED', '477', 728], ['BUSY', '477', 48], ['NO ANSWER', '477', 277], ['ANSWERED', '478', 88], ['BUSY', '478', 24], ['NO ANSWER', '478', 56]],
    result = [['Call Disposition', 'Answered', 'Busy', 'Failed']].concat(x(data));

document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');