PHP Google Charts – create a Google Charts from PHP with MySQL

PHP Google Charts – create a Google Charts from PHP with MySQL database

PHP Google Charts :: how to create a Google Charts from PHP with MySQL database ?:: In this post we will give we how to create Google Charts from PHP

In the event that we have to show some kind of insights on your site, it would be lovely in the event that we speak to it with diagrams. It might be hard to make those diagrams all alone. In any case, Google gives perception programming interface that makes it simple to make google diagrams from MySQL database utilizing php.

Basic Setup to Generate Charts – PHP Google Charts

For create google charts, we need to include Google visualization
api(https://www.google.com/jsapi) in your page and must need , to connected with your MySQL database like in the simple and basic setup below.

<?php
    // PHP Google Charts
    $db_connection = mysqli_connect('db_hostname','db_username','db_password','db_database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>Create Google Charts - onlinecode </title>
 <!-- js of google of chart for PHP Google Charts --> 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
</body>
</html>

For this instructional exercise, we will demonstrate guests insights on our page with four sorts of outlines, for example, Column graph, Pie diagram, Geo graph and Bar outline.

I accept that you as of now have the information in your db_database. Be that as it may, on the off chance that you don’t know how to get your guests information, I will post it as a different instructional exercise on the most proficient method to spare your guests geo area information to your mysql database.

For the time being, let us consider this specimen MySQL table passages from which we will make google graphs.

create PHP Google Charts with MySQL database
create PHP Google Charts with MySQL database

Column Chart Google Chart of PHP Google Charts – onlinecode

Column chart is helpful if you want to show your stats for a particular time period. So we can use this chart for period wise stats.

Excluding id, we have four columns such as ip, browser, country and vdate. So we can generate date wise chart by grouping mysql select query by vdate.

<script type="text/javascript">
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data_val = google.visualization.arrayToDataTable([
	 ['Date', 'Visits'],
	 ['2016-11-01','105'],
	 ['2016-11-02','82'],
	 ['2016-11-03','212'],
 ]);

 var options_val = {
 title: 'Date wise visits - onlinecode'
 };
 var chart_val = new google.visualization.ColumnChart(document.getElementById("columnchart"));
 chart_val.draw(data_val, options_val);
 }
</script>

The above code is the fundamental linguistic structure for making a section outline. Take a gander at the qualities after "var data_val = google.visualization.arrayToDataTable([" This one has static qualities. In any case, keeping in mind the end goal to demonstrate our details, we have to powerfully stack these qualities from our db_database with php.

var data_val = google.visualization.arrayToDataTable([
 ['Date', 'Visits'],
 <?php 
 $select_query = "SELECT count(ip) AS count, vdate FROM visitors GROUP BY vdate ORDER BY vdate";
 $query_result = mysqli_query($db_connection,$select_query);
 while($row_val = mysqli_fetch_array($query_result)){
 echo "['".$row_val['vdate']."',".$row_val['count']."],";
 }
 ?>
 
]);

The final code will be something like this.

<?php
 // PHP Google Charts
 $db_connection = mysqli_connect('db_hostname','db_username','db_password','db_database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts - onlinecode 
 </title>
 <!-- js of google of chart --> 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data_val = google.visualization.arrayToDataTable([

 ['Date', 'Visits'],
 <?php 
 $select_query = "SELECT count(ip) AS count, vdate FROM visitors GROUP BY vdate ORDER BY vdate";

 $query_result = mysqli_query($db_connection,$select_query);
 while($row_val = mysqli_fetch_array($query_result)){

 echo "['".$row_val['vdate']."',".$row_val['count']."],";
 }
 ?>
 
 ]);

 var options_val = {
 title: 'Date wise visits - onlinecode'
 };
 var chart_val = new google.visualization.ColumnChart(document.getElementById("columnchart"));
 chart_val.draw(data_val, options_val);
 }
 </script>
</head>
<body>
 <h3>Column Chart</h3>
 <div id="columnchart" style="width: 910px; height: 510px;"></div>
</body>
</html>

Pie Chart Google Chart – onlinecode

Pie diagram is the most wonderful graphs that can be made with google representation programming interface. You can make Pie diagrams in circumstances like speaking to the qualities in rate. So we will make an outline that shows program astute visits from our db_database. As we accomplished for section graph above, you need to powerfully stack the qualities to supplant the static substance from google pie diagram’s grammar.

<?php
 // PHP Google Charts
 $db_connection = mysqli_connect('db_hostname','db_username','db_password','db_database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts - onlinecode 
 </title>
 <!-- js of google of chart --> 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {

 var data_val = google.visualization.arrayToDataTable([
 ['Browser', 'Visits'],
 <?php 
 $select_query = "SELECT count(ip) AS count, browser FROM visitors GROUP BY browser";

 $query_result = mysqli_query($db_connection,$select_query);
 while($row_val = mysqli_fetch_array($query_result)){

 echo "['".$row_val['browser']."',".$row_val['count']."],";
 }
 ?>
 ]);

 var options_val = {
 title: 'Browser wise visits'
 };

 var chart_val = new google.visualization.PieChart(document.getElementById('piechart'));

 chart_val.draw(data_val, options_val);
 }
 </script>
</head>
<body>
 <h2>Pie Chart - onlinecode</h2>
 <div id="piechart" style="width: 910px; height: 510px;"></div>
</body>
</html>

Geo Chart Google Chart – onlinecode

Geo graph’s fundamental reason for existing is to show nation astute reports with a world guide. We have a section called nation. So we can make a geo graph to show nation insightful visits with our information.

<?php
 // PHP Google Charts
 $db_connection = mysqli_connect('db_hostname','db_username','db_password','db_database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts - onlinecode 
 </title>
 <!-- js of google of chart --> 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load("visualization", "1", {packages:["geochart"]});
 google.setOnLoadCallback(drawRegionsMap);

 function drawRegionsMap() {

 var data_val = google.visualization.arrayToDataTable([

 ['Country', 'Visits'],
 <?php 
 $query = "SELECT count(ip) AS count, country FROM visitors GROUP BY country";

 $query_result = mysqli_query($db_connection,$query);
 while($row_val = mysqli_fetch_array($query_result)){

 echo "['".$row_val['country']."',".$row_val['count']."],";
 }
 ?>
 ]);

 var options_val = {
 
 };

 var chart_val = new google.visualization.GeoChart(document.getElementById('geochart'));

 chart_val.draw(data_val, options_val);
 }
 </script>
</head>
<body>
 <h2>Geo Chart PHP Google Charts - onlinecode</h2>
 <div id="geochart" style="width: 910px; height: 510px;"></div>
</body>
</html>

Bar Chart Google Chart PHP Google Charts – onlinecode

Essentially Bar diagrams and Column outlines are same however it can be utilized for various purposes as indicated by the clients. I utilize bar graphs in circumstances like contrasting at least two qualities for every column.

Since we are producing guests details, we can really decide new guests and returning guests by their ip address. So we will make a bar graph that shows new and returned guests for every nation.

<?php
 $db_connection = mysqli_connect('db_hostname','db_username','db_password','db_database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts PHP Google Charts - onlinecode 
 </title>
 <!-- js of google of chart --> 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['corechart', 'bar']});
 google.setOnLoadCallback(drawMaterial);

 function drawMaterial() {
 var data_val = google.visualization.arrayToDataTable([
 ['Country', 'New Visitors', 'Returned Visitors'],
 <?php 
 $query = "SELECT count(ip) AS count, country FROM visitors GROUP BY country";

 $query_result = mysqli_query($db_connection,$query);

 while($row_val = mysqli_fetch_array($query_result)){

 echo "['".$row_val['country']."',";
 $query_visitors = "SELECT count(distinct ip) AS count FROM visitors WHERE country='".$row_val['country']."' ";
 $query_visitors_result = mysqli_query($db_connection,$query_visitors);
 $visitors_result = mysqli_fetch_assoc($query_visitors_result);
 
 echo $visitors_result['count'];
 
 

 $rvisits_val = $row_val['count']-$visitors_result['count'];

 echo ",".$rvisits_val."],";
 }
 ?>
 ]);

 var options_val = {
 
 title: 'Country wise new and returned visitors',
 
 bars: 'horizontal'
 };
 var material_val = new google.charts.Bar(document.getElementById('barchart'));
 material_val.draw(data_val, options_val);
 }
 </script>
</head>
<body>
 <h3>Bar Chart</h3>
 <div id="barchart" style="width: 910px; height: 510px;"></div>
</body>
</html>

Leave a Comment

Your email address will not be published. Required fields are marked *

8  +  2  =  

We accept paid advance and paid guest Posting on our Site : Contact US