Memberi warna data tertentu dalam tabel bukan hanya sekedar menghiasi tabel akan tetapi fungsinya yang sangat besar yaitu untuk memudahkan pembaca menemukan data yang cari dan dibutuhkannya.
Cara mewarnai baris kolom tabel data secara otomatis berdasarkan angka tertentu yang diperkenalkan ini dibuat menggunakan Jsapi Visualization google code
Kode hasi dari data di atas. Cara membuatnya dapat mengikuti langkah-langkahnya pada artikel ini
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Department', 'Pendapatan'],
['Shoes', 10700],
['Sports', -15400],
['Toys', 12500],
['Electronics', -2100],
['Food', 22600],
['Art', 1100]
]);
// Create and draw the visualization.
var table = new google.visualization.Table(document.getElementById('visualization'));
var formatter = new google.visualization.TableColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column
table.draw(data, {allowHtml: true, showRowNumber: true});
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization" style="height: 200px; width: 400px;">
</div>
