26-Apr-2022
.
Admin
Hi Dev,
I will explain step by step tutorial codeigniter 4 pie chart using chart js. This article goes in detailed on using chart js implement pie chart in codeigniter 4. you'll learn codeigniter 4 pie chart integration using chart js example. if you want to see example of pie chart responsive then you are a right place. you will do the following things for codeigniter 4 pie chart integration.
I’m going to show you about this article goes in detailed on using chart js implement pie chart in codeigniter 4..
So, let's started the example...
Step 1: Install Codeigniter 4
This is optional; however, if you have not created the codeigniter app, then you may go ahead and execute the below command:
composer create-project codeigniter4/appstarter ci-news
Step 2: Create Database With Table
After successfully install the composer open your terminal fire this following command.
you need to create database and table.
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;
Step 3: Setup Database Credentials
In this section we require to connect our project to the database. we need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, We need to set up database credentials in this file like below.
app/Config/Database.php
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 4: Create Controller
Here, in this fourth step go to app/Controllers and create a controller name Chart.php. In this controller, we will create some method/function.
app/Controllers/Chart.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Chart extends CI_Controller {
/**
* Write code on Method
*
* @return response()
*/
public function __construct() {
parent::__construct();
$this->load->database();
$this->load->helper(array('url','html','form'));
}
/**
* Write code on Method
*
* @return response()
*/
public function pie_chart_js() {
$query = $this->db->query("SELECT created_at as y_date, DAYNAME(created_at) as day_name, COUNT(id) as count FROM users WHERE date(created_at) > (DATE(NOW()) - INTERVAL 7 DAY) AND MONTH(created_at) = '" . date('m') . "' AND YEAR(created_at) = '" . date('Y') . "' GROUP BY DAYNAME(created_at) ORDER BY (y_date) ASC");
$record = $query->result();
$data = [];
foreach($record as $row) {
$data['label'][] = $row->day_name;
$data['data'][] = (int) $row->count;
}
$data['chart_data'] = json_encode($data);
$this->load->view('pie_chart',$data);
}
}
?>
Step 5: Create Views
We need to create one view files name pie_chart.php and update the following code into your file:
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Pie</title>
<!-- Latest CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="chart-container">
<div class="pie-chart-container">
<canvas id="pie-chart"></canvas>
</div>
</div>
<!-- javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
Here, now we are require to create a javascript file for showing a data on morris stacked and bar charts you can following this below code.
<script>
$(function(){
/*------------------------------------------
--------------------------------------------
Get the Pie Chart Canvas
--------------------------------------------
--------------------------------------------*/
var cData = JSON.parse(`<?php echo $chart_data; ?>`);
var ctx = $("#pie-chart");
/*------------------------------------------
--------------------------------------------
Pie Chart Data
--------------------------------------------
--------------------------------------------*/
var data = {
labels: cData.label,
datasets: [
{
label: "Users Count",
data: cData.data,
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57",
"#1D7A46",
"#CDA776",
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46",
"#F4A460",
"#CDA776",
],
borderWidth: [1, 1, 1, 1, 1,1,1]
}
]
};
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Last Week Registered Users - Day Wise Count",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
/*------------------------------------------
--------------------------------------------
create Pie Chart class object
--------------------------------------------
--------------------------------------------*/
var chart1 = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
});
</script>
Step 6: Run Codeigniter App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Codeigniter app:
php spark serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:8080/
#Codeigniter 4
