Inverting rows and columns on Google Area Chart - charts

Question

When I use an Area Chart on Google Drive, I can select an option to "Switch Rows / Columns".
Now that I am playing with the Javascript API, I'd like to do the same but couldn't find a way to do it in the documentation.
Here's the code I am using successfully. All I need is to switch row/column on the API.
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['data',0,1,2,3,4,5,6]
,['2013-04-14 (336)',064,04,03,02,06,02,02]
,['2013-04-21 (169)',0,028,03,02,04,02,02]
,['2013-04-28 (121)',0,0,027,02,01,02,02]
,['2013-05-05 (101)',0,0,0,020,0,01,0]
,['2013-05-12 (688)',0,0,0,0,0143,017,07]
,['2013-05-19 (3226)',0,0,0,0,0,0642,022]
,['2013-05-26 (321)',0,0,0,0,0,0,082]
]);
var options = {
title: 'Company Performance', isStacked:true,
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Can anyone help?

Answer 1

Unfortunately you have to transpose the DataTable. The following code will do the job. If anyone can improve it, please share improved version.
This function would work passing a DataView as well.
In your case: var transposedData = transposeDataTable(data);
function transposeDataTable(dataTable) {
//step 1: let us get what the columns would be
var rows = [];//the row tip becomes the column header and the rest become
for (var rowIdx=0; rowIdx < dataTable.getNumberOfRows(); rowIdx++) {
var rowData = [];
for( var colIdx = 0; colIdx < dataTable.getNumberOfColumns(); colIdx++) {
rowData.push(dataTable.getValue(rowIdx, colIdx));
}
rows.push( rowData);
}
var newTB = new google.visualization.DataTable();
newTB.addColumn('string', dataTable.getColumnLabel(0));
newTB.addRows(dataTable.getNumberOfColumns()-1);
var colIdx = 1;
for(var idx=0; idx < (dataTable.getNumberOfColumns() -1);idx++) {
var colLabel = dataTable.getColumnLabel(colIdx);
newTB.setValue(idx, 0, colLabel);
colIdx++;
}
for (var i=0; i< rows.length; i++) {
var rowData = rows[i];
console.log(rowData[0]);
newTB.addColumn('number',rowData[0]); //assuming the first one is always a header
var localRowIdx = 0;
for(var j=1; j< rowData.length; j++) {
newTB.setValue(localRowIdx, (i+1), rowData[j]);
localRowIdx++;
}
}
return newTB;
}
Source and credit:
http://captaindanko.blogspot.sg/2013/05/transpose-of-google-visualization-data.html
Example:
https://bitbucket.org/cptdanko/blog-code/src/0666cdce533db48cd89a4e2f02ef7e87a891c857/transpose.html?at=default

Answer 2

A neater and more efficient version with use of the getDate function on the first column label.
Here's a nice and verbose edition commented to explain what's going on -
function transposeDateDataTable (dataTable) {
// Create new datatable
var newDataTable = new google.visualization.DataTable ();
// Add first column from original datatable
newDataTable.addColumn ('string', dataTable.getColumnLabel (0));
// Convert column labels to row labels
for (var x=1; x < dataTable.getNumberOfColumns (); x++) {
var label = dataTable.getColumnLabel (x);
newDataTable.addRow ([label]);
}
// Convert row labels and data to columns
for (var x=0; x < dataTable.getNumberOfRows (); x++) {
newDataTable.addColumn ('number', dataTable.getValue (x, 0).getDate ()); // Use first column date as label
for (var y=1; y < dataTable.getNumberOfColumns (); y++) {
newDataTable.setValue (y-1, x+1, dataTable.getValue (x, y));
}
}
return newDataTable;
}
Or the nice and compact version...
function transposeDateDataTable (dt) {
var ndt = new google.visualization.DataTable;
ndt.addColumn ('string',dt.getColumnLabel(0));
for (var x=1; x<dt.getNumberOfColumns(); x++)
ndt.addRow ([dt.getColumnLabel(x)]);
for (var x=0; x<dt.getNumberOfRows(); x++) {
ndt.addColumn ('number', dt.getValue(x,0).getDate());
for (var y=1; y<dt.getNumberOfColumns(); y++)
ndt.setValue (y-1, x+1, dt.getValue (x,y));
}
return ndt;
}