Have you ever added Morris Bar And Stacked Charts in CodeIgniter 4 App? In this tutorial, we will learn how to do so in an easy and smooth manner.
We will also get to know how to write and use CodeIgniter SQL queries to filter the data and retrieve the sales day-wise data from the database and display it in the stacked and bar charts.
With the help of this CodeIgniter example, even a novice programmer will be able to integrate the charts in PHP CodeIgniter. We will also learn how to javascript morris stacked and bar charts in the CodeIgniter app with MySQL database.
How To Add Morris Stacked Bar Chart In CodeIgniter 4 Application
Step 1- Install CodeIgniter Project
Step 2- Connect App To Database
Step 3- Create Table And Insert Data
Step 4- Make Controller File
Step 5- Make Route File
Step 6- Setting Up View File
Step 7- Run Application
Install CodeIgniter Project
In this step, we simply have to download the CodeIgniter application. We can use any of the methods for starting the installation process.
We will install the app by using the direct link:
https://codeigniter.com/download
Download the app using the Composer:
composer create-project codeigniter4/appstarter
Next is required to change the default project folder name to “my_ci_app” or any other name we want.
Connect App To Database
Here, we will learn how to build the CodeIgniter application connection with the database.
Next, we will open the app/Config/Database.php and insert the database name, username and password into the file:
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'codeigniter_db',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'development'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];
Create Table And Insert Data
So, in this step, we have to step inside the SQL query section and recklessly execute the command given below and generate a table at the same time. Insert few records in it:
CREATE TABLE `product` (
`id` int(11) NOT NULL COMMENT 'Primary Key',
`name` varchar(255) NOT NULL COMMENT 'name',
`sell` varchar(55) NOT NULL COMMENT 'sell',
`created_at` varchar(30) NOT NULL COMMENT 'created at'
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='Atomic database';
INSERT INTO `product` (`id`, `name`, `sell`, `created_at`) VALUES
(1, 'Coca Cola', '5000', '2021-05-01'),
(2, 'Pepsi', '7000', '2021-05-02'),
(3, 'Coke Zero', '19000', '2021-05-03'),
(4, 'Pepsi Max', '1500', '2021-05-04'),
(5, 'Diet Coke', '19000', '2021-05-05'),
(6, 'Pepsi Light', '3000', '2021-05-06'),
(7, 'Gatorade', '22000', '2021-05-07');
Make Controller File
We will generate a new controller template, after which, we will add the given code into the app/Controllers/MorrisChartController.php file:
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class MorrisChartController extends Controller
{
public function index() {
return view('index');
}
public function startChart() {
$db = \Config\Database::connect();
$builder = $db->table('product');
$query = $builder->select("COUNT(id) as count, sell as s, DAYNAME(created_at) as day");
$query = $builder->where("DAY(created_at) GROUP BY DAYNAME(created_at), s");
$query = $builder->orderBy("s ASC, day ASC")->get();
$data['products'] = $query->getResult();
return view('index', $data);
}
}
Make Route File
To make the route show charts, we will go to app/Config/Routes.php and define the following routes in the file:
$routes->setDefaultController('MorrisChartController');
$routes->get('/morris-charts', 'MorrisChartController::startChart');
Setting Up View File
In this step, we have to create a view file, add morris js with the required dependencies like j Query and Raphael to view the template; create charts div and define respective ids to load the charts in both the div.
Lastly, we will add the script tag right before the body tag; we can set various options using config object; this makes chart customization easy.
Then, we will add the code into app/Views/index.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codeigniter Morris Stacked and Bar Charts Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
</head>
<body>
<body>
<div class="container">
<div class="mt-5">
<h2 class="text-center mb-5">Codeigniter Morris Stacked Chart Example</h2>
<div id="MorrisStakcedChart" style="height: 400px; width: 100%"></div>
</div>
<div class="mt-5">
<h2 class="text-center mb-5">Codeigniter Morris Bar Chart Example</h2>
<div id="MorrisBarChart" style="height: 400px; width: 100%"></div>
</div>
</div>
<!-- Add scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
var serries = <?php echo json_encode($products); ?>;
var data = serries,
config = {
data: <?php echo json_encode($products); ?>,
xkey: 'day',
ykeys: ['s'],
labels: ['Sales this week'],
fillOpacity: 0.7,
hideHover: 'auto',
resize: true,
behaveLikeLine: true,
stacked: true,
barColors: "455"
};
// Call bar chart
config.element = 'MorrisBarChart';
Morris.Bar(config);
// Call stacked chart
config.element = 'MorrisStakcedChart';
config.stacked = true;
Morris.Bar(config);
</script>
</body>
</html>
Run The Application
Here, in this last step, we just have to open the terminal and type the command for running the application:
php spark serve
Summary
So friends, hope that you have learnt about JavaScript Morris Charts in quite a smart way. With the help of this, you can also go to the next level and show the data in a Bar Chart and Stacked Chart.
Thanks