<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>plus2net.com : Table chart using data from MySQL table</title>
</head>
<body >
<?Php
require "config-pdo.php";// Database connection
$query="SELECT id, name,class,mark,gender FROM student";
$step=$dbo->prepare($query);
if($step->execute()){
$php_data_array=$step->fetchAll();
echo "<script>
var my_2d=".json_encode($php_data_array)."
</script>";
}
?>

<div id=table_div></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':['table']});
      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');
		var options ={
			showRowNumber: false, width: '50%', height: '50%',
			page:'enable'
		}
for(i = 0; i < my_2d.length; i++)
    data.addRow([parseInt(my_2d[i][0]), my_2d[i][1],my_2d[i][2],parseInt(my_2d[i][3]),my_2d[i][4]]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, options);
      }
    </script>
</body></html>
