1

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?

2 Answers 2

5

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

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.