Table Chart by using google charts sample code with demo

Using google chart library table package we can display tabular data to the user. It has many functions and some of them are listed here. Copy the sample codes and save as html file to check.

Table Chart with data from MySQL database table using PHP pdo and google chart library

Sort column in any order by clicking the column header.
All binary columns takes the value tick ( check marks ) and cross based on values true or false
Alternate colours are given to rows and same can be customized
Header remain fixed as we scroll
Selection of single or multiple rows

<html>
<head>
<title>plus2net.com : table chart </title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
 <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
 </script>
</head>
<body >

<div id=table_div></div>
<script>
google.charts.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'id');
		data.addColumn('string', 'Name');
        data.addColumn('string', 'class');
        data.addColumn('number', 'mark');
		data.addColumn('string', 'gender');
		data.addColumn('boolean', 'passed');
        data.addRows([[1, 'John Deo', 'Four', 75, 'female',true],
[2, 'Max Ruin', 'Three', 85, 'male',false],
[3, 'Arnold', 'Three', 55, 'male',false],
[4, 'Krish Star', 'Four', 60, 'female',true],
[5, 'John Mike', 'Four', 60, 'female',false],
[6, 'Alex John', 'Four', 55, 'male',false]
        ]);
var options ={
			showRowNumber: false, width: 620, height: '50%'			
		}
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
      }
</script>
</body><script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'sg2plzcpnl509233'},{'dcenter':'sg2'},{'cp_id':'10453639'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Paging using google chart table

When more records are there we can break the records in pages and navigational buttons are added to browse different pages by using page:true option.
Number of records per page can be set be using pageSize:3 option.

Options used

var options ={ page:true,pageSize:3,
	showRowNumber: false, width: 620, height: '50%'}

<div id=table_div></div>
<script>
google.charts.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'id');
		data.addColumn('string', 'Name');
        data.addColumn('string', 'class');
        data.addColumn('number', 'mark');
		data.addColumn('string', 'gender');
		data.addColumn('boolean', 'passed');
                data.addRows([[1, 'John Deo', 'Four', 75, 'female',true],
[2, 'Max Ruin', 'Three', 85, 'male',false],
[3, 'Arnold', 'Three', 55, 'male',false],
[4, 'Krish Star', 'Four', 60, 'female',true],
[5, 'John Mike', 'Four', 60, 'female',false],
[6, 'Alex John', 'Four', 55, 'male',false],
[7, 'My John Rob', 'Five', 78, 'male',true],
[8, 'Asruid', 'Five', 85, 'male',false],
[9, 'Tes Qry', 'Six', 78, 'male',true],
[10, 'Big John', 'Four', 55, 'female',false],
[11, 'Ronald', 'Six', 89, 'female',true],
[12, 'Recky', 'Six', 94, 'female',true],
[13, 'Kty', 'Seven', 88, 'female',true],
[14, 'Bigy', 'Seven', 88, 'female',false]
        ]);
var options ={ page:true,pageSize:3,
			showRowNumber: false, width: 620, height: '50%'			
		}
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
      }
</script>
</body><script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'sg2plzcpnl509233'},{'dcenter':'sg2'},{'cp_id':'10453639'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Paging concepts

Out of say 100 records we will display the first 1 to 10 records and then give a link at the end to display the next 10 records. On click of this link we will display 11 to 20 records. At the same time the user may like to return to the first 1 to 10 pages so we will be displaying another link saying Previous. So we can move forward or backward to navigate between pages.
More about Paging and How back end script works to create paging

Data from MySQL database

We can collect data from MySQL database and display the same using google chart table. We need to create one JavaScript array from the mysql records to add data to our Chart table.
Tutorial on using MySQL records to display in Google table chart.

3D Pie Chart with change in data Understanding different types of Charts
Pie Chart using MySQL data
Chart Basics

Subhendu Mohapatra

Author

🎥 Join me live on YouTube

Passionate about coding and teaching, I publish practical tutorials on PHP, Python, JavaScript, SQL, and web development. My goal is to make learning simple, engaging, and project‑oriented with real examples and source code.

Subscribe to our YouTube Channel here

Table Charts

Paging using google chart table

Paging concepts

Data from MySQL database

Subhendu Mohapatra