Cara membuat data tabel database tertentu seperti adanya penurunan dan peningkatan angka tertentu dapat dibuat menggunakan Jsapi visualization. Tampilan data tabel yang diposting ini seperti yang terlihat pada halaman utama yahoo.com, Reuters.com dan situs-situs besar nasional dan manca negara.
Kode di bawah ini merupakan hasil dari data tabel database di atas. Cara membuat selengkapnya dapat membaca artikel ini
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
['Computer', {v: 12, f: '12.0%'}],
['Sports', {v: -7.3, f: '-7.3%'}],
['Toys', {v: 0, f: '0%'}],
['Electronics', {v: -2.1, f: '-2.1%'}],
['Food', {v: 22, f: '22.0%'}]
]);
// Create and draw the visualization.
var table = new google.visualization.Table(document.getElementById('visualization'));
var formatter = new google.visualization.TableArrowFormat();
formatter.format(data, 1); // Apply formatter to second column
table.draw(data, {allowHtml: true, showRowNumber: true});
}
google.setOnLoadCallback(drawVisualization);
</script>
<br />
<div id="visualization" style="height: 184px; width: 500px;">
</div>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
['Computer', {v: 12, f: '12.0%'}],
['Sports', {v: -7.3, f: '-7.3%'}],
['Toys', {v: 0, f: '0%'}],
['Electronics', {v: -2.1, f: '-2.1%'}],
['Food', {v: 22, f: '22.0%'}]
]);
// Create and draw the visualization.
var table = new google.visualization.Table(document.getElementById('visualization'));
var formatter = new google.visualization.TableArrowFormat();
formatter.format(data, 1); // Apply formatter to second column
table.draw(data, {allowHtml: true, showRowNumber: true});
}
google.setOnLoadCallback(drawVisualization);
</script>
<br />
<div id="visualization" style="height: 184px; width: 500px;">
</div>