JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
This table is drawn with the "dataTable" object:
<div id="table_div_1"></div>
This table is drawn with "dataTable" converted into a DataTable object:
<div id="table_div_2"></div>
This table is drawn with a formatted DataTable object:
<div id="table_div_3"></div>
JavaScript
function drawTable() {
var dataTable = {
"cols":
[
{"type": "string" , "id": "Timerange" ,"label": "Timerange"},
{"type": "number" ,"id": " 2013" ,"label": " 2013" }
],
"rows" :
[
{"c" : [
{"v": "< 15"}, {"v": 0}
]
},
{"c" : [
{"v": "16 - 20"}, {"v": 15.63}
]
},
{"c" : [
{"v": "21 - n"}, {"v": 15.63}
]
},
{"c" : [
{"v": "> n"}, {"v": 68.75}
]
}
]
};
var table1 = new google.visualization.ChartWrapper({
chartType: "Table",
containerId: 'table_div_1',
dataTable: dataTable,
options: {
width: 400
}
});
table1.draw();
// convert to a DataTable object
var data = new google.visualization.DataTable(dataTable);
var table2 = new google.visualization.ChartWrapper({
chartType: "Table",
containerId: 'table_div_2',
dataTable: data,
options: {
width: 400
}
});
table2.draw();
// clone the DataTable so the formatting doesn't spread to the others
var formattedData = data.clone();
// format column 1
var formatter = new google.visualization.NumberFormat({prefix: "Value: "});
formatter.format(formattedData, 1);
var table3 = new google.visualization.ChartWrapper({
chartType: "Table",
containerId: 'table_div_3',
dataTable: formattedData,
options: {
width: 400
}
});
table3.draw();
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});