Codeigniter 4 morris bar and stacked charts example. In this step by step guide, we will explain how to implement morris stacked and bar chart in the Codeigniter application.
We will demonstrate how to fetch month-wise data from the MySQL database and blend it into the morris bar and stacked chart.
Morris js library adds significant value in implementing charts and graphs in a web application. In this Codeigniter morris bar and stacked chart tutorial, you will learn how to use Codeigniter SQL queries to integrate morris charts in the Codeigniter application pretty easily.
How to Integrate Morris Bar and Stacked Chart in Codeigniter 4 using MySQL
- Step 1: Download Codeigniter Project
- Step 2: Update Database Details
- Step 3: Create Database and Table
- Step 4: Make Controller File
- Step 5: Register Route
- Step 6: Create View File
- Step 7: Run App in Browser
Download Codeigniter Project
The following url will open the gateway to the official site, you can download the latest version of the Codeigniter app.
https://www.codeigniter.com/download
Second method to download the app is by using the Composer command, make sure to set up the Composer tool.
composer create-project codeigniter4/appstarter
Update Database Details
To make the app connection with the database, you have to add the database details into the app/Config/Database.php file.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'db_username',
'password' => 'db_password',
'database' => 'db_name',
'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 Database and Table
In this step, you have to run the provided command to create a new database, new table and add the data into the database.
CREATE TABLE `users` (
`id` int(11) NOT NULL COMMENT 'Primary Key',
`name` varchar(255) NOT NULL COMMENT 'name',
`sales` varchar(55) NOT NULL COMMENT 'sales',
`created_at` varchar(30) NOT NULL COMMENT 'created at'
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='user db';
INSERT INTO `users` (`id`, `name`, `sales`, `created_at`) VALUES
(1, 'Marie Merritt', '2000', '2020-01-02'),
(2, 'Shoshana Jones', '3000', '2020-02-03'),
(3, 'Rickey Peed', '1000', '2020-03-02'),
(4, 'Sean Walker', '2500', '2020-04-05'),
(5, 'Patrick Frazier', '6000', '2020-05-04'),
(6, 'Neil Chevalier', '27000', '2020-06-07'),
(7, 'James Jackson', '1600', '2020-07-05'),
(8, 'Kayla George', '1200', '2020-08-06');
Make Controller File
In this section, you have to create the controller file and insert the functions to load the chart data from the database and display it into the chart using the SQL query.
Update code in app/Controllers/GraphController.php file.
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class GraphController extends Controller
{
public function index() {
return view('index');
}
public function showGraph() {
$db = \Config\Database::connect();
$builder = $db->table('users');
$query = $builder->select("COUNT(id) as count, sales as s, MONTHNAME(created_at) as month");
$query = $builder->orderBy("s ASC, month ASC");
$query = $builder->where("MONTH(created_at) GROUP BY MONTHNAME(created_at), s")->get();
$record = $query->getResult();
$usersData = [];
foreach($record as $row) {
$usersData[] = array(
'month' => $row->month,
'sales' => floatval($row->s)
);
}
$data['usersData'] = ($usersData);
return view('index', $data);
}
}
Register Route
You can use this route to view the pie graph in the Codeigniter app.
Now, you have to go to app/Config/Routes.php, and in this file, you have to create a new route.
/*
* --------------------------------------------------------------------
* Route Definitions
* --------------------------------------------------------------------
*/
$routes->get('/show-chart', 'GraphController::showGraph');
Create View File
In this section, we will create index.php file inside the app/Views folder and then you have to add the provided code into the 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 Bar Chart Example</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">
<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>
</head>
<body>
<body>
<div class="container mt-4">
<div>
<h2 class="mb-3">Morris Bar Chart in Codeigniter</h2>
<div id="barGraph" style="width: 100%; height: 500px"></div>
</div>
<div>
<h2 class="mb-3">Morris Stacked Chart in Codeigniter</h2>
<div id="stackedGraph" style="width: 100%; height: 500px"></div>
</div>
</div>
<script>
var serries = <?php echo json_encode($usersData);?> ;
var data = serries,
config = {
data: <?php echo json_encode($usersData); ?>,
xkey : 'month',
ykeys: ['sales'],
fillOpacity: 0.8,
hideHover: 'auto',
resize: true,
behaveLikeLine: true,
stacked: true,
barColors: "232",
labels: ['Users months wise']
};
config.element = 'stackedGraph';
config.stacked = true;
Morris.Bar(config);
config.element = 'barGraph';
Morris.Bar(config);
</script>
</body>
</html>
Run App in Browser
In the last section, you have to run the provided command to start the Codeigniter development server.
php spark serve
Once the codeigniter server invoked, ensure that you have inserted the given url on the browser to test the the morris bar chart with dynamic data.
http://localhost:8080/show-chart
Summary
In this tutorial, you have seen how to display data dynamically on morris stacked and bar charts in Codeigniter 4 application using MySQL.
We fetch users data from the database and show the data on the stacked and bar charts, and we reckon this guide will help you.