Codeigniter 4 Google Pie Chart Example

In this article, we will explain to you how to integrate the google pie chart example in Codeigniter 4(Codeigniter 4 Google Pie Chart Example). we can easily integrate the Google pia chart daily, weekly, and monthly wise in CodeIgniter 4.

In this example, we are getting day wise data for the google pia chart from MySQL in Codeigniter 4 and you can also get or use data month wise or weekly wise from MySQL. so you can see our following example.

Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create a Database in table
Step 4: Connect to Database
Step 5: Create Controller
Step 6: Create Views Files
Step 7: Run The Application

Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.

Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url

Step 3: Create a Database in table
In this step, We will create the database and products table. so here we have taken some fruits name as products.

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `sales` varchar(255) NOT NULL,
  `created_at` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

INSERT INTO `products` (`id`, `name`, `sales`, `created_at`) VALUES
(1, 'Apple', '2000', '2021-01-02'),
(2, 'Mango', '3000', '2021-02-03'),
(3, 'Banana', '1000', '2021-03-02'),
(4, 'Orange', '2500', '2021-04-05'),
(5, 'Apricots', '6000', '2021-05-04'),
(6, 'Cherry', '27000', '2021-06-07'),
(7, 'Jackfruit', '1600', '2021-07-05'),
(8, 'Kiwi', '1200', '2021-08-06'),
(9, 'Peach', '1200', '2021-09-02');

CREATE TABLE IF NOT EXISTS `products` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) NOT NULL,

`sales` varchar(255) NOT NULL,

`created_at` varchar(30) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

INSERT INTO `products` (`id`, `name`, `sales`, `created_at`) VALUES

(1, 'Apple', '2000', '2021-01-02'),

(2, 'Mango', '3000', '2021-02-03'),

(3, 'Banana', '1000', '2021-03-02'),

(4, 'Orange', '2500', '2021-04-05'),

(5, 'Apricots', '6000', '2021-05-04'),

(6, 'Cherry', '27000', '2021-06-07'),

(7, 'Jackfruit', '1600', '2021-07-05'),

(8, 'Kiwi', '1200', '2021-08-06'),

(9, 'Peach', '1200', '2021-09-02');

Step 4: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'ci4_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,
	];

public $default = [

'DSN' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'ci4_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
In this step, we will create the “Chart.php” controller in “app/Controllers” directory.
app/Controllers/Chart.php

<?php 

namespace App\Controllers;
 
use CodeIgniter\Controller;
 
class Chart extends Controller
{
 
	public function __construct()
	{
		helper(['html','url']);
	}
		
	public function index() {
		$db = \Config\Database::connect();
		$builder = $db->table('products');

		$query = $builder->select("COUNT(id) as count, sales, DAYNAME(created_at) as day");
		$query = $builder->where("DAY(created_at) GROUP BY DAYNAME(created_at), sales")->get();
		$record = $query->getResult();

		$productData = [];

		foreach($record as $row) {
			$productData[] = array(
				'day'   => $row->day,
				'sell' => floatval($row->sales)
			);
		}

		$data['productData'] = ($productData);    
		return view('index', $data);     
	}
 
}

?>

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class Chart extends Controller

{

public function __construct()

{

helper(['html','url']);

}

public function index() {

$db = \Config\Database::connect();

$builder = $db->table('products');

$query = $builder->select("COUNT(id) as count, sales, DAYNAME(created_at) as day");

$query = $builder->where("DAY(created_at) GROUP BY DAYNAME(created_at), sales")->get();

$record = $query->getResult();

$productData = [];

foreach($record as $row) {

$productData[] = array(

'day' => $row->day,

'sell' => floatval($row->sales)

);

}

$data['productData'] = ($productData);

return view('index', $data);

}

Step 6: Create Views Files
Finally, we will create the index.php in the app/views directory.

app/views/index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Codeigniter 4 Google Pie Chart Example - XpertPhp</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
	<body>
		<div class="container">
			<div class="mt-5">
				<div id="GooglePieChart" style="height: 600px; width: 100%"></div>
			</div>
		</div>
		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
		<script>
			google.charts.load('visualization', "1", {
				packages: ['corechart']
			});

			google.charts.setOnLoadCallback(drawBarChart);
			// Pie Chart
			google.charts.setOnLoadCallback(showBarChart);
			function drawBarChart() {
				var data = google.visualization.arrayToDataTable([
					['Day', 'Products Count'], 
						<?php 
							foreach ($productData as $row){
							   echo "['".$row['day']."',".$row['sell']."],";
							}
						?>
				]);
				var options = {
					title: ' Pie chart data',
					is3D: true,
				};
				var chart = new google.visualization.PieChart(document.getElementById('GooglePieChart'));
				chart.draw(data, options);
			}
		</script>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>Codeigniter 4 Google Pie Chart Example - XpertPhp</title>

</head>

<body>

</div>

google.charts.load('visualization', "1", {

packages: ['corechart']

});

google.charts.setOnLoadCallback(drawBarChart);

// Pie Chart

google.charts.setOnLoadCallback(showBarChart);

function drawBarChart() {

var data = google.visualization.arrayToDataTable([

['Day', 'Products Count'],

<?php

foreach ($productData as $row){

echo "['".$row['day']."',".$row['sell']."],";

}

]);

var options = {

title: ' Pie chart data',

is3D: true,

};

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

chart.draw(data, options);

}

</script>

</body>

</html>

Step 7: Run The Application
We can start the server and run the codeigniter 4 application using the below command.

php spark serve

1	php spark serve

Now we will run our example using the below Url in the browser.

http://localhost:8080/chart

1	http://localhost:8080/chart

If you liked this article, you can also download it through our Github Repository.