Transpose Google Visualization data table

Since i spend a lot of time at my day job working with the Google Visualization tools for the charting needs of my work, I figured it is inevitable that I will be requested to draw a chart with transposed data. In this post, I will share the solution to transpose Google visualization data table object.

ok…let us backtrack a little. So to draw a chart using the Google Visualization tools, the first step is to prepare a DataTable, which is a data structure provided by Google. The DataTable as the name suggests is simple table of rows and columns, hence it can be thought of a 2D matrix. Obviously now once you start to perceive your data as a matrix, what you can do with a matrix is only limited by the type of data stored in it.

In this case the matrix operation of interest to me, was the transpose. Transpose is one of the simpler concepts of linear algebra, where by in a given matrix , rows become columns and columns become rows.

Ok so now onto business? FYI, this is a quick and dirty solution and is in no way optimal. Since my need was to transpose a table that has the first row as a string type and the rest numbers, this solution was written only to handle that.

For a given dataTable object, the function transpose(dataTable) would start as follows. first  extract the row values of the data table.

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);
}

Next , create a new dataTable object, i.e. newTB , add the rows to it and then populate it with the values in its first column.

var newTB = new google.visualization.DataTable();
//in this case the first column is the same across both the tables
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++;
}

Now that the rest of the table is ready to be populated, let us get the values from the rows array

for (var i=0; i< rows.length; i++) {
    var rowData = rows[i];
    console.log(rowData[0]);
    //assuming the first one is always a header
    newTB.addColumn('number',rowData[0]); 
    var localRowIdx = 0;
    for(var j=1; j< rowData.length; j++) {
        newTB.setValue(localRowIdx, (i+1), rowData[j]);
        localRowIdx++;
    }
}

There you go, you have it, a transposed version of the original dataTable. Obviously one of the first improvements to the code above would be to remove the part where we extract the data into rows array. We really dont need it anyway, we already have all the data stored in the table.

Anyway once again, a working example and a visualization of the transpose can be found here

If you find any of my posts useful and want to support me, you can buy me a coffee :)

https://www.buymeacoffee.com/bhumansoni

Or you can  buying or even try one of my apps on the App Store. 

https://mydaytodo.com/apps/

In addition the above, have a look at a few of the other posts,
How to create radio buttons using vanilla Javascript
https://mydaytodo.com/vanilla-javascript-create-radio-buttons/

How to build a Javascript frontend for Java Spring Boot backend 
https://mydaytodo.com/java-spring-boot-vanilla-javascript-solution/

Or have a look at some useful Javascript tutorials below
https://mydaytodo.com/category/javascript/