Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Table Chart

Table chart helps in rendering a table which can be sorted and paged.

Table cells can be formatted using format strings, or by directly inserting HTML as cell values.

Numeric values are right-aligned by default; boolean values are displayed as check marks or cross marks.

Users can select single rows either with the keyboard or the mouse.

Column headers can be used for sorting. The header row remains fixed during scrolling.


Basic Table Chart

The following example shows how to draw a basic table chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div":

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div"></div> </body> </html>

Then add a reference to the Chart API:

<script src="https://www.gstatic.com/charts/loader.js"></script>

Finally add a JavaScript function:

// Load the table package and set a callback google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = google.visualization.arrayToDataTable([ ['Name', 'Salary', 'Full Time Employee'], ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); // Set chart options var options = { showRowNumber: true, width: '100%', height: '100%' }; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.Table(document.getElementById('chart-div')); chart.draw(data, options); }