Creating Google Charts from MySQL Database

If you need to display some sort of statistics on your website, it would be beautiful if you represent it with charts. It may be difficult to create those charts on your own. But, Google provides visualization api that makes it easy to create google charts from MySQL database using php.

Create Google Charts

Basic Setup to Generate Charts

To create google charts, you need to include Google visualization api in your page and make sure you have connected with your MySQL database like in the simple and basic setup below.


<?php
 $con = mysqli_connect('hostname','username','password','database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts
 </title>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
</body>
</html>

For this tutorial, we are going to show visitors statistics on our page with four kinds of charts such as Column chart, Pie chart, Geo chart and Bar chart.

I assume that you already have the data in your database. But if you don’t know how to get your visitors data, I will post it as a separate tutorial on how to save your visitors geo location data to your mysql database.

For now, let us consider this sample MySQL table entries from which we are going to create google charts.

create-google-charts1

Column Chart

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 = google.visualization.arrayToDataTable([
 ['Date', 'Visits'],
 ['2015-09-01','100'],
 ['2015-09-02','80'],
 ['2015-09-03','210'],
 ]);

 var options = {
 title: 'Date wise visits'
 };
 var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
 chart.draw(data, options);
 }
</script>

The above code is the basic syntax for creating a column chart. Look at the values after “var data = google.visualization.arrayToDataTable([” This one has static values. But in order to show our stats, we need to dynamically load these values from our database with php.


var data = google.visualization.arrayToDataTable([
 ['Date', 'Visits'],
 <?php 
 $query = "SELECT count(ip) AS count, vdate FROM visitors GROUP BY vdate ORDER BY vdate";
 $exec = mysqli_query($con,$query);
 while($row = mysqli_fetch_array($exec)){
 echo "['".$row['vdate']."',".$row['count']."],";
 }
 ?>
 
]);

The final code will be something like this.


<?php
 $con = mysqli_connect('hostname','username','password','database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts
 </title>
 <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 = google.visualization.arrayToDataTable([

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

 $exec = mysqli_query($con,$query);
 while($row = mysqli_fetch_array($exec)){

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

 var options = {
 title: 'Date wise visits'
 };
 var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
 chart.draw(data, options);
 }
 </script>
</head>
<body>
 <h3>Column Chart</h3>
 <div id="columnchart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Pie Chart

Pie chart is the most beautiful charts that can be created with google visualization api. You can create Pie charts in situations like representing the values in percentage. So we are going to create a chart that shows browser wise visits from our database. Like we did for column chart above, you have to dynamically load the values to replace the static content from google pie chart’s syntax.


<?php
 $con = mysqli_connect('hostname','username','password','database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts
 </title>
 <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 = google.visualization.arrayToDataTable([
 ['Browser', 'Visits'],
 <?php 
 $query = "SELECT count(ip) AS count, browser FROM visitors GROUP BY browser";

 $exec = mysqli_query($con,$query);
 while($row = mysqli_fetch_array($exec)){

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

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

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

 chart.draw(data, options);
 }
 </script>
</head>
<body>
 <h3>Pie Chart</h3>
 <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Geo Chart

Geo chart’s main purpose is to show country wise reports with a world map. We have a column called country. So we can create a geo chart to show country wise visits with our data.


<?php
 $con = mysqli_connect('hostname','username','password','database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts
 </title>
 <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 = google.visualization.arrayToDataTable([

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

 $exec = mysqli_query($con,$query);
 while($row = mysqli_fetch_array($exec)){

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

 var options = {
 
 };

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

 chart.draw(data, options);
 }
 </script>
</head>
<body>
 <h3>Geo Chart</h3>
 <div id="geochart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Bar Chart

Basically Bar charts and Column charts are same but it can be used for different purposes according to the users. I use bar charts in situations like comparing two or more values for each row.

Since we are generating visitors stats, we can actually determine new visitors and returning visitors by their ip address. So we are going to create a bar chart that shows new and returned visitors for each country.


<?php
 $con = mysqli_connect('hostname','username','password','database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Create Google Charts
 </title>
 <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 = google.visualization.arrayToDataTable([
 ['Country', 'New Visitors', 'Returned Visitors'],
 <?php 
 $query = "SELECT count(ip) AS count, country FROM visitors GROUP BY country";

 $exec = mysqli_query($con,$query);

 while($row = mysqli_fetch_array($exec)){

 echo "['".$row['country']."',";
 $query2 = "SELECT count(distinct ip) AS count FROM visitors WHERE country='".$row['country']."' ";
 $exec2 = mysqli_query($con,$query2);
 $row2 = mysqli_fetch_assoc($exec2);
 
 echo $row2['count'];
 
 

 $rvisits = $row['count']-$row2['count'];

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

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

For more details about style options, configurations and more documentations, visit here https://developers.google.com/chart/interactive/docs/gallery?hl=en

So, creating charts is simple and easy with google visualization api. All you need to do is to load your db values in right place.

Try creating google charts and tell your feedback below. Also share this post, if you find it useful.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

One comment on “Creating Google Charts from MySQL Database”

  1. Hi Mr. Roshan, I hope you can help. I have been searching for a reason why my code is not working to generate a chart for me. I see your example(s) don’t use Ajax, so I thought I’d try yours to see what the difference is and if it will work for me. I basically just copied your code for the column chart, modified the DB and SQL lines to match my data. When I load the page I get a blank (like the ajax versions) but in your I can view the source and see that the json seems to be returning correctly, so I’m wondering if you can take a look and see why my code isn’t drawing the chart. Any help you can give is appreciated!

    Your modified PHP:
    —————————————————-

    Create Google Charts

    google.load(“visualization”, “1”, {packages:[“corechart”]});

    google.setOnLoadCallback(drawChart);

    function drawChart() {

    var data = google.visualization.arrayToDataTable([

    [‘ACTYPE’, ‘APURUN’],

    ]);

    var options = {

    title: ‘APU Runtimes’

    };

    var chart = new google.visualization.ColumnChart(document.getElementById(“columnchart”));

    chart.draw(data, options);

    }

    Column Chart

    —————————————————————–
    This what I get when I view the source returned:
    ——————————————————————-

    Create Google Charts

    google.load(“visualization”, “1”, {packages:[“corechart”]});

    google.setOnLoadCallback(drawChart);

    function drawChart() {

    var data = google.visualization.arrayToDataTable([

    [‘ACTYPE’, ‘APURUN’],

    [‘A320’,00:26:58],[‘A319’,00:22:05],[‘A320’,00:34:58],[‘A320’,01:16:53],[‘A320’,00:17:32],[‘A319’,01:22:38],[‘A320’,00:17:21],[‘A321’,00:19:13],[‘A319’,00:51:09],[‘A319’,01:13:16],[‘A320’,01:14:47],[‘A319’,00:29:02],[‘A319’,01:22:25],[‘A320’,00:18:29],[‘A320’,00:29:33],[‘A319’,00:43:40],[‘A319’,00:38:24],[‘A319’,00:21:22],[‘A319’,00:14:39],[‘A319’,00:18:50],[‘A321’,01:02:46],[‘A320’,01:45:52],[‘A320’,00:35:11],[‘A319’,00:23:00],[‘A320’,00:27:45],[‘A319’,01:12:09],[‘A320’,01:04:02],[‘A319’,00:20:44],[‘A319’,00:33:15],[‘A319’,00:29:49],[‘A319’,00:02:03],[‘A320’,00:15:50],[‘A319’,00:16:32],[‘A319’,00:41:06],[‘A319’,00:24:56],[‘A320’,00:04:40],[‘A319’,00:17:30],[‘A319’,00:25:39],[‘A319’,00:36:53],[‘A320’,01:34:13],[‘A320’,00:07:36],[‘A319’,00:46:12],[‘A320’,00:25:46],[‘A321’,00:31:13],[‘A319’,00:08:57],[‘A319’,00:12:53],[‘A319’,00:37:55],[‘A319’,00:25:32],[‘A319’,00:13:45],[‘A320’,00:31:31],[‘A319’,00:55:28],[‘A320’,01:52:01],[‘A320’,00:30:36],[‘A319’,00:07:38],[‘A319’,00:38:57],[‘A319’,00:34:50],[‘A320’,00:32:43],[‘A319’,00:26:09],[‘A319’,00:41:30],[‘A320’,00:01:26],[‘A321’,00:39:31],[‘A320’,00:50:20],[‘A320’,02:04:50],[‘A319’,00:01:25],[‘A319’,00:20:19],[‘A319’,00:07:40],[‘A320’,00:07:46],[‘A319’,00:18:32],[‘A319’,00:20:55],[‘A319’,00:17:59],[‘A320’,00:32:43],[‘A320’,01:05:52],[‘A321’,00:39:55],[‘A320’,00:28:52],[‘A319’,00:15:53],[‘A319’,00:23:21],[‘A319’,00:48:43],[‘A320’,00:28:34],[‘A319’,00:29:07],[‘A320’,00:06:47],[‘A319’,01:13:54],[‘A319’,00:16:54],[‘A321’,00:25:05],[‘A319’,00:02:53],[‘A320’,01:36:05],[‘A320’,00:23:37],[‘A320’,01:04:34],[‘A319’,00:07:13],[‘A320’,00:23:46],[‘A319’,01:14:33],[‘A319’,01:07:13],[‘A320’,01:03:31],[‘A320’,00:21:56],[‘A319’,00:17:04],[‘A320’,00:06:12],[‘A319’,00:28:23],[‘A319’,00:27:58],[‘A319’,00:50:17],[‘A320’,00:13:37],[‘A319’,00:25:16],[‘A319’,00:40:48],[‘A319’,00:29:34],[‘A320’,00:22:10],[‘A319’,00:24:49],[‘A319’,00:32:46],[‘A319’,00:15:17],[‘A319’,01:27:29],[‘A320’,00:29:05],[‘A320’,00:20:58],[‘A320’,00:48:14],[‘A320’,00:33:17],[‘A320’,01:11:45],[‘A320’,00:22:12],[‘A319’,01:12:44],[‘A319’,00:17:03],[‘A319’,00:51:02],[‘A319’,00:47:35],[‘A319’,00:40:48],[‘A319’,00:11:06],[‘A319’,00:23:21],[‘A321’,00:29:23],[‘A319’,00:14:34],[‘A319’,02:48:26],[‘A319’,00:19:45],[‘A320’,01:19:45],[‘A319’,01:23:37],[‘A320’,00:18:15],[‘A319’,00:18:48],[‘A320’,00:14:12],[‘A319’,00:02:06],[‘A321’,00:15:07],[‘A319’,00:02:26],[‘A321’,00:11:59],[‘A320’,02:40:50],[‘A319’,00:42:15],[‘A320’,00:26:48],[‘A319’,00:48:28],[‘A320’,00:53:23],[‘A320’,00:02:12],[‘A319’,00:36:00],[‘A319’,00:07:41],[‘A319’,00:16:55],[‘A320’,00:52:31],[‘A321’,01:16:26],[‘A319’,01:27:26],[‘A319’,00:16:43],[‘A320’,00:51:36],[‘A319’,01:26:44],[‘A320’,00:11:28],[‘A319’,00:18:49],[‘A320’,00:57:55],[‘A320’,00:24:43],[‘A320’,00:45:12],[‘A319’,00:49:47],[‘A319’,00:09:44],[‘A319’,00:33:10],[‘A320’,00:09:46],[‘A319’,00:37:01],[‘A320’,01:40:06],[‘A319’,00:20:18],[‘A319’,00:01:01],[‘A320’,00:43:24],[‘A319’,00:56:02],[‘A320’,00:18:07],[‘A319’,00:21:16],[‘A320’,00:25:34],[‘A320’,00:36:04],[‘A319’,00:05:20],[‘A319’,00:14:02],[‘A319’,00:33:00],[‘A320’,00:23:06],[‘A319’,00:52:15],[‘A319’,01:12:36],[‘A321’,00:22:09],[‘A320’,01:22:39],[‘A319’,00:31:52],[‘A320’,00:20:40],[‘A319’,01:10:20],[‘A321’,00:22:23],[‘A319’,00:12:48],[‘A319’,00:27:51],[‘A320’,01:34:35],[‘A319’,01:05:34],[‘A320’,00:17:03],[‘A321’,01:01:12],[‘A320’,00:45:47],[‘A320’,00:21:53],[‘A320’,00:14:16],[‘A320’,00:11:02],[‘A319’,00:14:36],[‘A319’,00:05:36],[‘A320’,00:52:54],[‘A319’,00:36:32],[‘A320’,00:27:04],[‘A319’,00:12:00],[‘A319’,00:11:47],[‘A319’,00:09:53],[‘A320’,00:24:34],[‘A319’,00:39:51],[‘A319’,00:36:23],[‘A320’,00:45:13],[‘A321’,01:16:38],[‘A319’,00:19:20],[‘A319’,00:11:41],[‘A320’,00:04:50],[‘A319’,00:07:41],[‘A319’,00:52:43],[‘A320’,00:09:08],[‘A319’,00:28:55],[‘A319’,00:16:09],[‘A320’,01:41:35],[‘A320’,00:19:39],[‘A319’,00:16:45],[‘A319’,00:06:22],[‘A320’,00:02:23],[‘A319’,00:20:24],[‘A319’,01:35:52],[‘A320’,00:27:27],[‘A319’,00:49:42],[‘A320’,00:17:45],[‘A319’,00:44:21],[‘A319’,00:33:08],[‘A320’,00:32:16],[‘A320’,00:22:29],[‘A320’,00:28:41],[‘A320’,00:28:47],[‘A319’,00:56:20],[‘A321’,00:47:07],[‘A319’,00:39:10],[‘A319’,00:06:39],[‘A319’,00:12:14],[‘A320’,00:08:50],[‘A319’,00:34:37],[‘A320’,00:25:39],[‘A320’,00:15:50],[‘A319’,00:08:01],[‘A321’,00:56:18],[‘A319’,00:11:58],[‘A320’,00:16:39],[‘A320’,01:00:22],[‘A319’,00:09:16],[‘A319’,00:07:41],[‘A320’,00:21:47],[‘A319’,00:04:32],[‘A319’,01:21:01],[‘A319’,00:19:45],[‘A319’,00:26:14],[‘A320’,00:03:11],[‘A319’,00:05:07],[‘A320’,00:41:41],[‘A319’,00:47:19],[‘A320’,00:33:32],[‘A319’,00:42:51],[‘A319’,00:22:56],[‘A319’,00:10:53],[‘A319’,00:21:18],[‘A320’,00:18:12],[‘A321’,01:06:53],[‘A319’,00:17:31],[‘A320’,00:28:23],[‘A320’,00:57:59],[‘A319’,01:13:02],[‘A319’,00:16:39],[‘A320’,00:49:51],[‘A319’,00:16:54],[‘A320’,00:03:07],[‘A320’,00:16:39],[‘A319’,00:19:56],[‘A320’,00:43:01],[‘A320’,01:16:35],[‘A319’,00:08:26],[‘A320’,02:47:28],[‘A320’,01:24:49],[‘A320’,01:09:21],[‘A321’,00:26:12],[‘A320’,01:03:06],[‘A319’,00:45:05],[‘A319’,00:11:31],[‘A319’,00:24:55],[‘A321’,00:22:32],[‘A320’,01:08:35],[‘A319’,00:08:58],[‘A319’,00:26:22],[‘A319’,00:20:23],[‘A320’,00:02:13],[‘A319’,00:33:39],[‘A320’,00:39:23],[‘A319’,00:33:32],[‘A320’,00:23:10],[‘A319’,00:34:26],[‘A319’,00:35:07],[‘A319’,00:44:12],[‘A319’,00:09:46],[‘A320’,00:29:36],[‘A319’,00:16:48],[‘A319’,00:39:35],[‘A319’,00:13:31],[‘A320’,02:09:58],[‘A319’,00:19:49],[‘A319’,00:36:58],[‘A320’,00:19:39],[‘A320’,00:07:55],[‘A320’,02:15:59],[‘A319’,00:12:03],[‘A319’,00:59:50],[‘A320’,00:10:14],[‘A321’,00:52:29],[‘A319’,00:27:40],[‘A319’,00:02:54],[‘A321’,00:34:35],[‘A319’,01:09:14],[‘A320’,02:45:15],[‘A319’,00:51:41],[‘A319’,00:12:07],[‘A320’,00:29:24],[‘A320’,00:15:34],[‘A320’,00:24:42],[‘A319’,00:26:40],[‘A319’,00:05:32],[‘A320’,00:18:24],[‘A319’,00:52:44],[‘A320’,00:21:44],[‘A320’,01:22:27],[‘A320’,00:33:45],[‘A319’,00:17:24],[‘A319’,00:30:23],[‘A319’,00:10:20],[‘A319’,06:20:21],[‘A321’,00:47:06],[‘A319’,00:10:30],[‘A320’,01:04:35],[‘A319’,00:58:38],[‘A320’,00:25:33],[‘A321’,01:10:19],[‘A319’,01:13:16],[‘A319’,00:18:33],[‘A319’,00:59:17],[‘A319’,00:55:53],[‘A319’,00:16:23],[‘A319’,00:27:39],[‘A320’,00:28:06],[‘A319’,00:13:47],[‘A320’,00:16:28],[‘A319’,00:12:47],[‘A320’,01:08:01],[‘A319’,00:32:14],[‘A320’,01:26:14],[‘A320’,00:38:00],[‘A319’,00:19:10],[‘A319’,00:46:15],[‘A319’,00:23:06],[‘A319’,00:23:47],[‘A320’,00:28:33],[‘A320’,00:21:00],[‘A319’,00:14:00],[‘A320’,00:52:40],[‘A319’,00:38:33],[‘A319’,00:19:57],[‘A319’,00:01:10],[‘A319’,00:17:55],[‘A319’,00:11:28],[‘A319’,00:28:21],[‘A320’,00:52:21],[‘A320’,01:21:29],[‘A320’,01:12:56],[‘A319’,00:52:01],[‘A319’,00:15:39],[‘A320’,00:29:26],[‘A320’,00:36:03],[‘A319’,00:02:35],[‘A319’,00:15:50],[‘A319’,00:47:21],[‘A319’,00:38:10],[‘A320’,01:01:17],[‘A320’,00:25:16],[‘A319’,00:26:56],[‘A319’,00:01:34],[‘A320’,00:33:30],[‘A319’,00:16:57],[‘A319’,00:06:51],[‘A319’,00:46:08],[‘A321’,00:45:01],[‘A319’,00:26:17],[‘A321’,00:41:43],[‘A320’,00:57:54],[‘A319’,00:43:40],[‘A320’,01:09:08],[‘A321’,00:28:05],[‘A319’,00:54:02],[‘A319’,00:22:20],[‘A320’,00:08:33],[‘A321’,00:35:39],[‘A320’,00:23:05],[‘A319’,00:06:59],[‘A319’,00:25:20],[‘A320’,00:17:09],[‘A319’,00:13:57],[‘A320’,00:37:39],[‘A319’,00:02:13],[‘A319’,00:14:17],[‘A319’,00:28:48],[‘A319’,00:18:03],[‘A321’,00:36:56],[‘A319’,00:55:53],[‘A320’,00:19:32],[‘A320’,00:56:07],[‘A319’,00:11:43],[‘A320’,01:42:43],[‘A319’,00:12:55],[‘A320’,00:33:57],[‘A319’,07:52:40],[‘A320’,00:20:24],[‘A319’,00:32:59],[‘A320’,00:16:20],[‘A320’,00:20:48],[‘A319’,00:04:37],[‘A319’,00:06:25],[‘A319’,00:39:03],[‘A320’,00:27:31],[‘A319’,00:30:43],[‘A319’,00:16:11],[‘A319’,00:05:39],[‘A320’,01:00:20],[‘A319’,00:21:55],[‘A320’,00:16:29],[‘A320’,00:17:16],[‘A319’,01:10:26],[‘A319’,00:46:58],[‘A319’,00:31:20],[‘A319’,00:11:01],[‘A320’,00:44:18],[‘A319’,00:15:10],[‘A320’,00:15:43],[‘A319’,01:34:16],[‘A320’,01:08:51],[‘A319’,00:23:33],[‘A320’,00:35:25],[‘A320’,00:09:21],[‘A319’,01:19:16],[‘A319’,00:42:06],[‘A319’,00:11:33],[‘A319’,01:42:14],[‘A320’,00:27:40],[‘A320’,00:22:49],[‘A319’,00:20:17],[‘A321’,01:07:31],[‘A320’,00:23:45],[‘A319’,00:09:19],[‘A319’,00:23:58],[‘A321’,00:28:55],[‘A320’,01:10:04],[‘A319’,00:02:22],[‘A321’,06:06:33],[‘A319’,00:34:24],[‘A321’,01:03:29],[‘A319’,00:21:13],[‘A320’,00:40:13],[‘A319’,00:37:30],[‘A319’,00:13:08],[‘A320’,00:14:07],[‘A319’,00:58:27],[‘A320’,00:24:55],[‘A320’,01:04:38],[‘A320’,00:30:54],[‘A319’,01:14:18],[‘A320’,00:21:45],[‘A319’,00:18:18],[‘A320’,00:23:57],[‘A319’,00:03:25],[‘A319’,00:17:36],[‘A319’,00:51:03],[‘A320’,00:15:23],[‘A319’,00:30:38],[‘A319’,01:36:33],[‘A320’,01:26:41],[‘A320’,01:02:42],[‘A319’,01:21:19],[‘A319’,00:28:57],[‘A320’,00:21:31],[‘A319’,00:13:04],[‘A319’,00:14:26],[‘A320’,00:14:44],[‘A319’,00:21:11],[‘A319’,00:13:57],[‘A319’,00:07:06],[‘A320’,00:02:59],[‘A320’,01:22:18],[‘A319’,00:50:40],[‘A319’,00:04:09],[‘A319’,02:23:26],[‘A320’,00:36:43],[‘A319’,00:44:52],[‘A320’,00:12:26],[‘A319’,00:22:20],[‘A319’,00:41:59],[‘A321’,01:00:18],[‘A320’,00:35:15],[‘A320’,00:23:27],[‘A319’,00:58:37],[‘A320’,00:23:28],[‘A320’,00:14:22],[‘A321’,00:31:57],[‘A320’,01:54:07],[‘A319’,00:36:17],[‘A320’,00:47:53],[‘A321’,00:25:10],[‘A319’,01:05:10],[‘A319’,00:11:20],[‘A319’,00:33:03],[‘A320’,00:27:53],[‘A319’,00:23:37],[‘A319’,00:16:31],[‘A320’,00:51:34],[‘A320’,00:50:38],[‘A319’,00:40:58],[‘A319’,00:25:01],[‘A319’,00:30:55],[‘A320’,01:05:39],[‘A320’,00:07:33],[‘A319’,00:15:24],[‘A320’,00:44:57],[‘A320’,02:17:04],[‘A320’,00:07:45],[‘A320’,00:20:01],[‘A319’,00:24:33],[‘A319’,00:26:01],[‘A319’,00:07:35],[‘A319’,00:46:02],[‘A320’,00:14:54],[‘A320’,00:23:36],[‘A319’,00:24:02],[‘A319’,02:00:00],[‘A320’,00:31:24],[‘A319’,00:47:47],[‘A319’,00:19:52],[‘A319’,00:26:39],[‘A320’,00:36:47],[‘A321’,00:15:43],[‘A319’,00:15:55],[‘A320’,00:53:22],[‘A320’,00:53:22],[‘A319’,00:14:33],[‘A320’,00:07:27],[‘A319’,00:40:00],[‘A320’,00:04:03],[‘A319’,00:05:14],[‘A320’,00:12:24],[‘A320’,00:17:41],[‘A320’,00:56:16],[‘A319’,00:00:12],[‘A320’,00:08:05],[‘A319’,00:53:31],[‘A319’,00:00:08],[‘A320’,00:11:35],[‘A319’,00:00:10],[‘A319’,00:00:34],[‘A320’,00:30:47],[‘A319’,00:36:25],[‘A319’,00:05:37],[‘A320’,00:06:21],[‘A320’,03:50:26],[‘A319’,00:11:34],[‘A319’,00:41:58],[‘A319’,02:11:25],[‘A319’,00:27:04],[‘A321’,01:22:11],[‘A319’,00:14:21],[‘A319’,00:57:02],[‘A319’,00:14:42],[‘A320’,00:25:01],[‘A319’,00:44:42],[‘A320’,00:12:39],[‘A319’,00:24:37],[‘A320’,00:26:48],[‘A319’,00:14:57],[‘A320’,00:12:50],[‘A319’,00:24:49],[‘A320’,01:07:11],[‘A319’,00:18:51],[‘A320’,00:16:38],[‘A319’,00:05:11],[‘A320’,00:34:44],[‘A319’,00:05:50],[‘A320’,00:40:22],[‘A320’,01:12:04],[‘A319’,00:02:18],[‘A319’,00:06:06],[‘A320’,00:15:12],[‘A320’,00:27:15],[‘A321’,00:25:36],[‘A319’,00:30:42],[‘A319’,00:19:19],[‘A319’,00:21:25],[‘A320’,00:45:17],[‘A319’,00:39:53],[‘A319’,00:20:14],[‘A320’,00:55:45],[‘A320’,00:22:12],[‘A319’,00:22:30],[‘A319’,01:00:26],[‘A319’,01:03:18],[‘A321’,00:37:36],[‘A319’,00:28:27],[‘A320’,00:17:42],[‘A320’,00:29:17],[‘A320’,00:02:00],[‘A319’,00:15:09],[‘A319’,00:53:32],[‘A319’,00:10:07],[‘A319’,00:15:30],[‘A319’,00:03:46],[‘A319’,00:20:44],[‘A319’,03:30:11],[‘A319’,01:00:12],[‘A319’,00:08:27],[‘A321’,00:17:21],[‘A321’,00:34:44],[‘A320’,00:16:24],[‘A319’,00:24:04],[‘A320’,00:15:41],[‘A319’,01:29:50],[‘A319’,00:04:37],[‘A319’,00:44:32],[‘A320’,01:16:17],[‘A320’,00:35:35],[‘A320’,00:41:05],[‘A320’,00:22:26],[‘A320’,00:19:37],[‘A320’,00:24:09],[‘A320’,00:02:37],[‘A319’,00:15:07],[‘A319’,00:34:31],[‘A320’,00:37:50],[‘A319’,00:51:06],[‘A320’,00:18:43],[‘A320’,00:27:28],[‘A320’,00:37:19],[‘A319’,00:06:17],[‘A321’,00:32:57],[‘A320’,00:21:18],[‘A320’,00:07:37],[‘A320’,00:28:37],[‘A319’,00:16:06],[‘A319’,01:03:44],[‘A319’,01:05:39],[‘A319’,00:22:15],[‘A319’,00:41:43],[‘A319’,00:30:46],[‘A319’,00:12:53],[‘A319’,00:18:22],[‘A320’,00:30:48],[‘A320’,00:37:08],[‘A320’,00:18:44],[‘A320’,01:02:30],[‘A319’,00:21:39],[‘A319’,00:57:07],[‘A319’,00:43:12],[‘A320’,00:18:31],[‘A320’,01:18:43],[‘A319’,00:30:49],[‘A319’,00:23:14],[‘A319’,00:22:50],[‘A319’,00:09:37],[‘A319’,00:04:02],[‘A319’,00:42:05],[‘A319’,00:03:17],[‘A319’,00:19:06],[‘A319’,01:14:40],[‘A321’,00:51:14],[‘A319’,00:07:06],[‘A319’,00:22:58],[‘A319’,00:38:23],[‘A319’,00:01:52],[‘A320’,00:55:07],[‘A319’,00:13:28],[‘A320’,00:41:01],[‘A320’,01:22:42],[‘A321’,00:16:56],[‘A319’,00:18:25],[‘A320’,00:39:10],[‘A319’,00:29:08],[‘A319’,00:23:01],[‘A320’,00:04:58],[‘A319’,00:23:00],[‘A320’,01:34:19],[‘A320’,00:33:32],[‘A319’,00:23:48],[‘A319’,00:42:53],[‘A320’,00:11:09],[‘A319’,00:21:19],[‘A319’,00:39:42],[‘A319’,00:39:54],[‘A321’,01:05:00],[‘A319’,00:28:27],[‘A320’,00:06:48],[‘A319’,00:41:31],[‘A319’,00:25:16],[‘A321’,00:47:19],[‘A320’,01:08:28],[‘A320’,00:54:17],[‘A319’,00:05:36],[‘A320’,00:27:02],[‘A319’,00:36:52],[‘A320’,00:15:56],[‘A320’,00:28:32],[‘A320’,00:14:02],[‘A319’,00:13:43],[‘A319’,00:32:44],[‘A319’,00:17:53],[‘A319’,00:51:33],[‘A319’,00:19:36],[‘A319’,00:16:53],[‘A319’,00:17:40],[‘A320’,01:19:28],[‘A320’,00:29:39],[‘A320’,00:29:40],[‘A320’,00:21:21],[‘A319’,00:01:48],[‘A319’,00:26:26],[‘A319’,00:35:01],[‘A320’,00:02:28],[‘A319’,00:26:18],[‘A319’,00:20:07],[‘A319’,00:32:57],[‘A319’,00:04:18],[‘A319’,00:16:22],[‘A319’,00:25:13],[‘A319’,00:10:41],[‘A320’,00:43:09],[‘A319’,01:12:04],[‘A320’,00:21:41],[‘A320’,00:00:48],[‘A319’,01:08:02],[‘A320’,00:40:06],[‘A320’,00:20:28],[‘A319’,00:50:58],[‘A319’,01:32:35],[‘A320’,01:25:43],[‘A319’,00:03:26],[‘A320’,01:13:56],[‘A320’,01:00:15],[‘A319’,00:19:58],[‘A320’,00:11:26],[‘A319’,00:05:20],[‘A320’,00:20:17],[‘A319’,00:10:19],[‘A320’,01:25:45],[‘A321’,01:13:03],[‘A319’,01:27:51],[‘A319’,00:41:16],[‘A320’,01:21:48],[‘A321’,00:19:36],[‘A319’,00:05:38],[‘A319’,00:38:44],[‘A321’,00:31:41],[‘A319’,00:22:06],[‘A319’,00:23:02],[‘A320’,00:14:26],[‘A320’,00:12:37],[‘A319’,00:18:18],[‘A319’,00:02:05],[‘A319’,00:12:26],[‘A320’,00:20:01],[‘A319’,00:16:49],[‘A319’,00:03:25],[‘A320’,00:09:17],[‘A319’,00:06:11],[‘A319’,00:28:09],[‘A319’,00:28:32],[‘A320’,00:33:27],[‘A320’,00:50:28],[‘A320’,00:29:16],[‘A320’,00:04:05],[‘A319’,00:17:17],[‘A320’,00:38:48],[‘A319’,00:26:07],[‘A319’,00:17:18],[‘A319’,00:29:01],[‘A320’,00:29:13],[‘A319’,00:15:33],[‘A320’,00:49:36],[‘A319’,00:15:54],[‘A320’,00:25:49],[‘A320’,00:24:25],[‘A319’,00:09:25],[‘A320’,00:33:25],[‘A320’,01:14:43],[‘A319’,00:22:18],[‘A320’,00:24:17],[‘A320’,00:15:49],[‘A320’,04:29:30],[‘A320’,00:25:40],[‘A319’,00:29:16],[‘A321’,00:08:47],[‘A321’,00:28:14],[‘A319’,00:03:28],[‘A319’,00:03:28],[‘A320’,00:21:59],[‘A320’,00:11:59],[‘A321’,01:12:20],[‘A319’,00:27:17],[‘A320’,00:43:21],[‘A319’,00:29:14],[‘A319’,00:15:18],[‘A319’,00:18:39],[‘A319’,00:49:49],[‘A320’,07:15:01],[‘A321’,00:21:39],[‘A320’,00:28:55],[‘A319’,00:14:18],[‘A320’,00:48:14],[‘A319’,00:14:39],[‘A320’,00:11:24],[‘A320’,05:08:55],[‘A319’,00:17:21],[‘A319’,00:44:12],[‘A320’,00:20:17],[‘A319’,00:44:22],[‘A319’,00:29:05],[‘A319’,01:02:23],[‘A319’,00:13:47],[‘A321’,00:21:47],[‘A319’,00:12:04],[‘A320’,00:06:15],[‘A321’,00:05:00],[‘A319’,00:10:47],[‘A320’,00:14:23],[‘A320’,01:30:18],[‘A319’,00:07:15],[‘A320’,00:44:36],[‘A319’,00:28:04],[‘A319’,01:14:32],[‘A320’,00:54:11],[‘A320’,00:46:12],[‘A319’,00:46:13],[‘A320’,00:34:35],[‘A319’,01:38:06],[‘A320’,01:35:53],[‘A319’,00:12:38],[‘A319’,00:24:17],[‘A319’,00:19:36],[‘A319’,00:34:45],[‘A320’,00:22:27],[‘A320’,00:49:27],[‘A319’,01:16:06],[‘A319’,00:21:41],[‘A321’,00:58:45],[‘A320’,00:26:48],[‘A320’,00:10:41],[‘A319’,00:03:45],[‘A320’,00:11:32],[‘A319’,00:56:24],[‘A319’,00:02:51],[‘A320’,00:55:26],[‘A320’,00:12:43],[‘A320’,00:22:40],[‘A319’,01:11:43],[‘A320’,00:50:44],[‘A319’,00:23:12],[‘A321’,01:37:00],[‘A319’,00:50:37],[‘A319’,00:03:04],[‘A319’,00:40:44],[‘A319’,00:49:38],[‘A319’,00:11:43],[‘A320’,01:16:42],[‘A319’,00:25:05],[‘A319’,00:05:39],[‘A320’,00:50:43],[‘A320’,00:48:34],[‘A320’,00:43:12],[‘A319’,00:49:28],[‘A319’,00:19:34],[‘A320’,00:42:19],[‘A320’,00:15:01],[‘A320’,00:17:19],[‘A321’,00:15:51],[‘A319’,00:27:30],[‘A319’,03:41:07],[‘A320’,00:18:00],[‘A320’,01:13:21],[‘A320’,00:17:34],[‘A319’,00:02:50],[‘A320’,00:15:01],[‘A320’,00:32:15],[‘A319’,00:33:36],[‘A320’,00:11:26],[‘A319’,00:17:40],[‘A319’,00:24:48],[‘A320’,00:39:41],[‘A320’,00:34:04],[‘A321’,01:06:18],[‘A319’,00:34:12],[‘A320’,01:09:52],[‘A319’,00:22:03],[‘A320’,00:34:12],[‘A319’,00:10:35],[‘A319’,00:27:08],[‘A319’,00:13:22],[‘A320’,00:15:02],[‘A319’,00:34:28],[‘A319’,00:57:38],[‘A319’,00:54:25],[‘A319’,00:31:24],[‘A320’,00:01:01],[‘A320’,00:47:11],[‘A320’,01:16:13],[‘A319’,00:24:42],[‘A319’,00:52:45],[‘A319’,00:38:19],[‘A319’,00:12:24],[‘A319’,00:47:54],[‘A321’,00:20:40],[‘A319’,00:16:28],[‘A321’,00:16:25],[‘A319’,00:26:04],[‘A319’,01:08:22],[‘A320’,00:35:42],[‘A319’,00:22:43],[‘A320’,00:29:27],[‘A321’,00:11:01],[‘A319’,00:04:35],

    ]);

    var options = {

    title: ‘Date wise visits’

    };

    var chart = new google.visualization.ColumnChart(document.getElementById(“columnchart”));

    chart.draw(data, options);

    }

    Column Chart

Leave a Reply

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