How to Bind Google Column Chart in PHP and Mysql sarveshpathak.com

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.

1CREATE TABLE `chart_data_column` (
2  `class` varchar(40) NOT NULL,
3  `girl` int(3) NOT NULL,
4  `boy` int(3) NOT NULL
5) ENGINE=InnoDB DEFAULT CHARSET=utf8;
6 
7--
8-- Dumping data for table `chart_data_column`
9--
10 
11INSERT INTO `chart_data_column` (`class`, `girl`, `boy`) VALUES
12('First Standard', 44, 52),
13('Second Standard', 68, 65),
14('Third Standard', 44, 52),
15('Fourth Standard', 78, 55),
16('Fifth Standard', 44, 52),
17('Six Standard', 98, 75);

Bind your data in the Graph using PHP

1<!doctype html public "-//w3c//dtd html 3.2//en">
2<html>
3<head>
4<title></title>
5</head>
6<body >
7<?Php
8$host_name = "localhost";
9$database = "chart"; // Change your database name
10$username = "root";          // Your database user id 
11$password = "";          // Your password
12 
13//error_reporting(0);// With this no error reporting will be there
14//////// Do not Edit below /////////
15 
16$connection = mysqli_connect($host_name, $username, $password, $database);
17 
18if($stmt = $connection->query("SELECT class,girl,boy FROM chart_data_column ")){
19$php_data_array = Array(); // create PHP array
20while ($row = $stmt->fetch_row()) {
21     $php_data_array[] = $row; // Adding to array
22   }
23}else{
24echo $connection->error;
25}
26echo "<script>
27        var my_2d = ".json_encode($php_data_array)."
28</script>";
29?>
30 
31<h1>Bind Google Column Chart in PHP and Mysql with Source Code</h1>
32<div id="chart_div"></div>
33 
34 
35<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
36<script type="text/javascript">
37 
38      // Load the Visualization API and the corechart package.
39      google.charts.load('current', {packages: ['corechart', 'bar']});
40      google.charts.setOnLoadCallback(drawChart);
41       
42      function drawChart() {
43 
44        // Create the data table.
45        var data = new google.visualization.DataTable();
46        data.addColumn('string', 'Class');
47        data.addColumn('number', 'Total Boy');
48          data.addColumn('number', 'Total Girl');
49        for(i = 0; i < my_2d.length; i++)
50        data.addRow([my_2d[i][0], parseInt(my_2d[i][1]),parseInt(my_2d[i][2])]);
51       var options = {
52          title: 'Student Details',
53          hAxis: {title: 'Month',  titleTextStyle: {color: '#333'}},
54          vAxis: {minValue: 0}
55        };
56 
57        var chart = new google.charts.Bar(document.getElementById('chart_div'));
58        chart.draw(data, options);
59       }
60    ///////////////////////////////
61////////////////////////////////////    
62</script>
63</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

Admin

See author's posts

Tags: Column Chart HTML

How to Bind Google Column Chart in PHP and Mysql