How to Bind Google Column Chart in PHP and Mysql
1 min read
Bind Google Column Chart in PHP and Mysql
Here we will learn How to Bind Google Column Chart in PHP and Mysql
What is Column Chart
A column chart is a vertical bar chart rendered in the browser using SVG or VML, whichever is appropriate for the user’s browser. Like all Google charts, column charts display tooltips when the user hovers over the data. For a horizontal version of this chart, see the bar chart.
Create a Table and Put Data according to this table.
CREATE TABLE `chart_data_column` (
`class` varchar(40) NOT NULL,
`girl` int(3) NOT NULL,
`boy` int(3) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `chart_data_column`
--
INSERT INTO `chart_data_column` (`class`, `girl`, `boy`) VALUES
('First Standard', 44, 52),
('Second Standard', 68, 65),
('Third Standard', 44, 52),
('Fourth Standard', 78, 55),
('Fifth Standard', 44, 52),
('Six Standard', 98, 75);
Bind your data in the Graph using PHP
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title></title>
</head>
<body >
<?Php
$host_name = "localhost";
$database = "chart"; // Change your database name
$username = "root"; // Your database user id
$password = ""; // Your password
//error_reporting(0);// With this no error reporting will be there
//////// Do not Edit below /////////
$connection = mysqli_connect($host_name, $username, $password, $database);
if($stmt = $connection->query("SELECT class,girl,boy FROM chart_data_column ")){
$php_data_array = Array(); // create PHP array
while ($row = $stmt->fetch_row()) {
$php_data_array[] = $row; // Adding to array
}
}else{
echo $connection->error;
}
echo "<script>
var my_2d = ".json_encode($php_data_array)."
</script>";
?>
<h1>Bind Google Column Chart in PHP and Mysql with Source Code</h1>
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Class');
data.addColumn('number', 'Total Boy');
data.addColumn('number', 'Total Girl');
for(i = 0; i < my_2d.length; i++)
data.addRow([my_2d[i][0], parseInt(my_2d[i][1]),parseInt(my_2d[i][2])]);
var options = {
title: 'Student Details',
hAxis: {title: 'Month', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);
}
///////////////////////////////
////////////////////////////////////
</script>
</body></html>
Result: Bind Google Column Chart in PHP and Mysql
Bind Google Column Chart in PHP and Mysql
Download Source Code
About Post Author
