Google Visualization API Chart - Line Charts using columns or rows like series

Question

I would like to use the same data keeping the format in different line graphs. I mean, I would like to do a matrix translation on the data table.

I use the google code example to explain better my question:

var data = google.visualization.arrayToDataTable([
      ['Name', 'Gender', 'Donuts February', 'Donuts January'],
      ['Michael' , 'Male', 12, 5],
      ['Elisa', 'Female', 20, 7],
      ['Robert', 'Male', 7, 3],
    ]);

By default, I can draw the line chart with x-axis: Michael, Elisa, and Robert and two series. But I do not know how to draw in the x-axis: 'Donuts January' and 'Donuts February' and three series (Michael, Elisa, and Robert).

Is it possible?

asgallant asgallant · Accepted Answer · 2013-11-25T18:09:55

The API does not support switching row and column roles to use rows as your series and columns as your axis values. If you want to accomplish that, you have to manually construct a new DataTable from your old one, in the format you want. Here's one way you could do it:

var pivottedData = new google.visualization.DataTable();
pivottedData.addColumn('string', 'Category');
for (var i = 0; i < data.getNumberOfRows(); i++) {
    pivottedData.addColumn('number', data.getValue(i, 0));
}
// skip "Name" and "Gender" columns
for (var i = 2; i < data.getNumberOfColumns(); i++) {
    var row = [data.getColumnLabel(i)];
    for (var j = 0; j < data.getNumberOfRows(); j++) {
        row.push(data.getValue(j, i));
    }
    pivottedData.addRow(row);
}

Google Visualization API Chart - Line Charts using columns or rows like series

1 Answers