In this codeigniter google line and bar charts tutorial, We would love to share with you how to get current month records from day wise MySQL codeigniter and using this record we will implement google bar chart and line with live demo example
In this Codeigniter tutorial, You will learn how to get days wise data from mysql database of current month and year and how to show the data on google line and bar charts with codeigniter.
We will fetch days wise record of the current month and current year from mysql database. Every day, How many users registered from our database. We provide demo link at the end of article. Checkout the link.
Codeigniter Google Line & Bar Charts
Contents
- Download Codeigniter Latest
- Basic Configurations
- Create Database With Table
- Setup Database Credentials
- Make New Controller
- Create Views
- Start Development server
- Conclusion
Download Codeigniter Project
In this step we will download the latest version of Codeigniter, Go to this link Download Codeigniter download the fresh setup of codeigniter and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Basic Configurations
Next we will set the some basic configuration on config.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
$config['base_url'] = 'http://localhost/demo/';
Create Database With Table
In this step, we need to create database name demo, so let’s open your phpmyadmin and create the database with the name demo . After successfully create a database, you can use the below sql query for creating a table in your database.
CREATE TABLE users (
id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
name varchar(100) NOT NULL COMMENT 'Name',
email varchar(255) NOT NULL COMMENT 'Email Address',
contact_no varchar(50) NOT NULL COMMENT 'Contact No',
created_at varchar(20) NOT NULL COMMENT 'Created date',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;
INSERT INTO users (id, name, email, contact_no, created_at) VALUES
(1, 'Team', '[email protected]', '9000000001', '2019-01-01'),
(2, 'Admin', '[email protected]', '9000000002', '2019-01-02'),
(3, 'User', '[email protected]', '9000000003', '2019-01-03'),
(4, 'Editor', '[email protected]', '9000000004', '2019-01-04'),
(5, 'Writer', '[email protected]', '9000000005', '2019-01-05'),
(6, 'Contact', '[email protected]', '9000000006', '2019-01-06'),
(7, 'Manager', '[email protected]', '9000000007', '2019-01-07'),
(8, 'John', '[email protected]', '9000000055', '2019-01-08'),
(9, 'Merry', '[email protected]', '9000000088', '2019-01-09'),
(10, 'Keliv', '[email protected]', '9000550088', '2019-01-10'),
(11, 'Herry', '[email protected]', '9050550088', '2019-01-11'),
(12, 'Mark', '[email protected]', '9050550998', '2019-01-12');
Setup Database Credentials
In this step, We need to connect our project to database. we need to go application/config/ and open database.php file in text editor. After open the file in text editor, We need to setup database credential in this file like below.
$db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'demo', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );
Create Controller
Now we need to create a controller name Chart.php. In this controller we will create some method/function. We will build some of the methods like :
- Index() – This is used to fetch the record from database and pass the data to view.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Chart extends CI_Controller {
public function __construct() {
parent::__construct();
// load model
$this->load->database();
$this->load->helper(array('url','html','form'));
}
public function google_line_bar_chart() {
$dayQuery = $this->db->query("SELECT COUNT(id) as count,DAY(created_at) as day_date FROM users WHERE MONTH(created_at) = '" . date('m') . "'
AND YEAR(created_at) = '" . date('Y') . "'
GROUP BY DAY(created_at)");
$data['day_wise'] = $dayQuery->result();
///print_r($data['day_wise']);die;
$this->load->view('google_line_bar_chart',$data);
}
}
?>
In this controller function, we fatch the record from database for showing the data on google line and bar charts.
Create Views
Now we need to create google_line_bar_chart.php, go to application/views/ folder and create google_line_bar_chart.php file. Here put the below html code for showing data on pie charts.
<!Doctype html>
<html>
<head>
<title>Google Date Wise Bar and Line Chart Codeigniter Tutorial</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('visualization', "1", {
packages: ['corechart']
});
</script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div id="line_date_wise" style="width: 900px; height: 500px; margin: 0 auto"></div>
<div id="bar_date_wise" style="width: 900px; height: 500px; margin: 0 auto"></div>
</div>
</div>
</body>
</html>
Implement Javascript code
Finally we will implement javascript code for showing a data on google line and bar charts. Now we will put the code on script tag after the closing of body tag.
<script language="JavaScript">
// Draw the pie chart for registered users month wise
google.charts.setOnLoadCallback(lineChart);
// Draw the pie chart for registered users year wise
google.charts.setOnLoadCallback(barChart);
//for month wise
function lineChart() {
/* Define the chart to be drawn.*/
var data = google.visualization.arrayToDataTable([
['Date', 'Users Count'],
<?php
foreach ($day_wise as $row){
echo "['".$row->day_date."',".$row->count."],";
}
?>
]);
var options = {
title: 'Day Wise Registered Users Of Line Chart',
curveType: 'function',
legend: { position: 'bottom' }
};
/* Instantiate and draw the chart.*/
var chart = new google.visualization.LineChart(document.getElementById('line_date_wise'));
chart.draw(data, options);
}
// for year wise
function barChart() {
/* Define the chart to be drawn.*/
var data = google.visualization.arrayToDataTable([
['Date', 'Users Count'],
<?php
foreach ($day_wise as $row){
echo "['".$row->day_date."',".$row->count."],";
}
?>
]);
var options = {
title: 'Date wise Registered Users Bar Chart',
is3D: true,
};
/* Instantiate and draw the chart.*/
var chart = new google.visualization.BarChart(document.getElementById('bar_date_wise'));
chart.draw(data, options);
}
</script>
In this script code, we have intialize the google line and bar charts with php codeigniter and set the data on it.
Start Development server
For start development server, Go to the browser and hit below the url.
http://localhost/demo/chart/google_line_bar_chart
Conclusion
In this codeigniter google pie charts tutorial, We have successfully fetch the day wise record from database of the current month and year and display on the google line and bar charts.
If you have any questions or thoughts to share, use the comment form below to reach us.
