How to add data column wise dynamic in for a row?

Question

This problem is regarding google line charts which would show different lines i.e cycle wise lines

I have a array of data, and the length is unknownm, i.e. Cycle_x.

I will get below data dynamically

arrayCycleName=['Cycle_1','Cycle_3','Cycle_3','Cycle_4',....];

arrayModNames=['mod_1','mod_2','mod_3','mod_4'];

arrayCycle_1_Data=[50,30,10,15];
arrayCycle_2_Data=[40,20,42,44];
arrayCycle_3_Data=[30,34,36,40];
so on..

I'm using DataTale

var data = new google.visualization.DataTable();
var chart = new google.visualization.LineChart(document
            .getElementById('charts'));

data.addColumn('string', 'Module Names');

for (i=0;i<arrayCycleName.lenght;i++)
data.addColumn('number', arrayCycleName[i]);

now the question is how do i get the data as below using any of loops.

data=[
       ['CycleName', 'Cycle_1', 'Cycle_2', 'Cycle_3'],
       ['Mod_1'    ,    50    ,    40    ,      30  ],
       ['Mod_2'    ,    30    ,    20    ,      34  ],
       ['Mod_3'    ,    10    ,    42    ,      36  ],
       ['Mod_4'    ,    15    ,    44    ,      40  ]
     ]

so i can call

chart.draw(data,{title: 'charts'});

Answer 1

One possible solution:

function drawChart() {

    var data = new google.visualization.DataTable();

    var arrayCycleName = ['Cycle_1', 'Cycle_3', 'Cycle_3'];

    var arrayModNames = ['mod_1', 'mod_2', 'mod_3', 'mod_4'];

    var arrayCycle_1_Data = [50,30,10,15];
    var arrayCycle_2_Data = [40,20,42,44];
    var arrayCycle_3_Data = [30,34,36,40];

    var arrayCycles = [arrayCycle_1_Data, arrayCycle_2_Data, arrayCycle_3_Data]

    data.addColumn('string', 'CycleName');
    for (var i = 0; i < arrayCycleName.length; ++i) {
        data.addColumn('number', arrayCycleName[i]);
    }

    for (var i = 0; i < arrayModNames.length; ++i) {
        var row = [];
        row.push(arrayModNames[i]);
        for (var j = 0; j < arrayCycles.length; ++j) {
            row.push(arrayCycles[j][i]);
        }
        console.log(row);
        data.addRow(row);
    }
    console.log(data);

    var options = {
        title: 'charts',
        vAxis: {
            minValue: 0
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

See example at jsbin.