HTML
<script type='text/javascript' src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['controls', 'corechart']});
google.setOnLoadCallback(drawTable);
function drawTable(response) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Column1');
data.addColumn('string', 'Column2');
data.addColumn('number', 'Column3');
data.addRows([
['A', 'foo', 100],
['A', 'foo', 200],
['A', 'foo', 100],
['A', 'foo', 100],
['A', 'bar', 200],
['A', 'bar', 300],
['A', 'baz', 300],
['B', 'baz', 200],
['B', 'cad', 300],
['B', 'cad', 400],
['B', 'cad', 100],
['B', 'qud', 100],
['B', 'qud', 400],
['B', 'qud', 200],
['B', 'qud', 300],
['B', 'qud', 400]
]);
var distinctValues = data.getDistinctValues(2);
var viewColumns = [1];
var groupColumns = [];
// build column arrays for the view and grouping
for (var i = 0; i < distinctValues.length; i++) {
viewColumns.push({
type: 'number',
label: distinctValues[i],
aggregation: google.visualization.data.count
});
groupColumns.push({
column: i+1,
type: 'number',
//label: distinctValues[i],
aggregation: google.visualization.data.sum
});
}
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
// next, we group the view on column A, which gets us the pivoted data
var pivotedData = google.visualization.data.group(view, [0], groupColumns);
table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'dataTable': pivotedData,
'containerId': 'table1',
});
...