創建從現有的谷歌圖表數據視圖迴轉DataTable對象

Question

我有一個包含數據表：

id,day,proj,col1,col2,subtype,time 
1,Nov 28,projectA,1050,880,foo,17481 
2,Nov 28,projectA,1050,880,bar,16098 
3,Nov 28,projectA,1080,40,foo,13509 
4,Nov 28,projectA,1080,40,bar,9031 

但是想創建一個包含新的數據視圖樞軸轉動：

id,day,proj,col1,col2,foo,bar 
1,Nov 28,projectA,1050,880,17481,16098 
3,Nov 28,projectA,1080,40,13509,9031 

成爲我希望然後像創建一個堆疊的ColumnChart。

查詢語言中有一個pivot子句，但是如何轉換已經在DataTable中的數據？

Answer 1

手動。

您可以通過asgallant在jsfiddle上查看this example。這使用數據視圖來完成任務。

google.load('visualization', '1', {packages: ['table']}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'A'); 
    data.addColumn('string', 'B'); 
    data.addColumn('number', 'C'); 
    data.addRows([ 
     [1, 'foo', 6], 
     [2, 'foo', 2], 
     [3, 'foo', 1], 
     [4, 'foo', 3], 
     [1, 'bar', 7], 
     [2, 'bar', 3], 
     [1, 'baz', 8], 
     [2, 'baz', 4] 
    ]); 

    var table1 = new google.visualization.Table(document.getElementById('table1')); 
    table1.draw(data, {}); 

    /* manually pivot the data table 
    * set column A as the first column in the view, 
    * then we have to separate out the C values into their own columns 
    * according to the value of B, using a DataView with calculated columns 
    */ 
    var view = new google.visualization.DataView(data); 
    view.setColumns([0, { 
     type: 'number', 
     label: 'foo', 
     calc: function (dt, row) { 
      // return values of C only for the rows where B = "foo" 
      return (dt.getValue(row, 1) == 'foo') ? dt.getValue(row, 2) : null; 
     } 
    }, { 
     type: 'number', 
     label: 'bar', 
     calc: function (dt, row) { 
      // return values of C only for the rows where B = "bar" 
      return (dt.getValue(row, 1) == 'bar') ? dt.getValue(row, 2) : null; 
     } 
    }, { 
     type: 'number', 
     label: 'baz', 
     calc: function (dt, row) { 
      // return values of C only for the rows where B = "baz" 
      return (dt.getValue(row, 1) == 'baz') ? dt.getValue(row, 2) : null; 
     } 
    }]); 

    // next, we group the view on column A, which gets us the pivoted data 
    var pivotedData = google.visualization.data.group(view, [0], [{ 
     column: 1, 
     type: 'number', 
     label: view.getColumnLabel(1), 
     aggregation: google.visualization.data.sum 
    }, { 
     column: 2, 
     type: 'number', 
     label: view.getColumnLabel(2), 
     aggregation: google.visualization.data.sum 
    }, { 
     column: 3, 
     type: 'number', 
     label: view.getColumnLabel(3), 
     aggregation: google.visualization.data.sum 
    }]); 

    var table2 = new google.visualization.Table(document.getElementById('table2')); 
    table2.draw(pivotedData, {}); 
} 

或者，您可以手動執行此操作。

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

     data.addColumn('string', 'First Column Title'); 

     var baseline = chartData.getValue(chartData.getNumberOfRows() - 1, 15); 

     for (var i = 0; i < chartData.getNumberOfRows(); i++) { 
     data.addColumn('number', chartData.getFormattedValue(i, 0)); 
     }; 

     for (var j = 0; j < chartData.getNumberOfColumns() - 2; j++) { 
     data.addRow(); 
     data.setValue(j, 0, chartData.getColumnLabel(j + 1)); 
     for (var i = 0; i < chartData.getNumberOfRows(); i++) { 
      data.setValue(j, i + 1, chartData.getValue(i, j+1)); 
     }; 
     };