In CodeIgniter 4, Google bar and line charts are types of charts provided by the Google Charts library, which allow users to represent data in a graphical format.
Here are steps to integrate google bar and line chart:
Step 1: Setup Codeigniter 4 Project
In this step, you will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Step 2: Basic Configurations
Next, you will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
public $baseURL = 'http://localhost:8080'; To public $baseURL = 'http://localhost/demo/';
Step 3: Create Table in Database
In this step, you need to create table in database and as well as insert some data for google bar and line chart in codeiginter 4. So visit your phpmyadmin panel and execute the following sql query in it:
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-02-01'),
(3, 'User', '[email protected]', '9000000003', '2018-03-01'),
(4, 'Editor', '[email protected]', '9000000004', '2019-04-01'),
(5, 'Writer', '[email protected]', '9000000005', '2017-05-01'),
(6, 'Contact', '[email protected]', '9000000006', '2019-06-01'),
(7, 'Manager', '[email protected]', '9000000007', '2019-07-01'),
(8, 'John', '[email protected]', '9000000055', '2016-08-01'),
(9, 'Merry', '[email protected]', '9000000088', '2019-09-01'),
(10, 'Keliv', '[email protected]', '9000550088', '2019-10-01'),
(11, 'Herry', '[email protected]', '9050550088', '2019-11-01'),
(12, 'Mark', '[email protected]', '9050550998', '2019-12-01');
Step 4: Setup Database
In this step, you need to connect our project to the database. you need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, you need to set up database credentials in this file like below.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'demo',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'production'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];
Step 5: Create Controller
Create a controller GoogleCharts.php in app/Controllers folder, and add the following methods into it to handle chart data from server:
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class GoogleCharts extends Controller
{
public function index() {
$db = \Config\Database::connect();
$builder = $db->table('users');
$query = $builder->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'] = $query->getResult();
return view('home',$data);
}
}
Step 6: Create Google Chart in View
Create one view files name home.php and then create google line and bar chart in it:
<!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>
The following JavaScript code to show data on Google Bar Chart. Now we will put the code on the script tag after the body tag is closed.
<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
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
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>
Step 7: Create Route
Ceate a route in app/Config/Routes.php file to handle views renders requests:
$routes->get('/', 'GoogleCharts::index');
Step 8: Test Google Bar and Line Chart
Run the following command to start development server:
php spark serve
Then, Go to the browser and hit below the URL:
http://localhost:8080
Conclusion
In this codeigniter google bar and line charts tutorial, you have successfully got the record from a database and display it on the google line and bar charts in codeigniter 4 app.
If you have any questions or thoughts to share, use the comment form below to reach us.
