Codeigniter 4 Morris Stacked & Bar Chart Tutorial Example

Do you struggle to add morris bar and stacked charts in Codeigniter 4 application? We will tell you how profoundly integrate stacked charts in Codeigniter.

Not only but also, we will show how to write and properly use Codeigniter SQL queries to filter the data and dynamically retrieve the sales day-wise data from the database and display it in the stacked and bar charts.

This Codeigniter 4 morris chart example is for novice programmers who want to amplify their understanding and mastery over charts integration in PHP Codeigniter.

Also, learn how to implement javascript morris stacked and bar charts in the Codeigniter app with MySQL database.

How to Add Morris Stacked Chart Bar in Codeigniter 4 Application

• Step 1: Install Codeigniter Project
• Step 2: Connect App to Database
• Step 3: Create Table & 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

This step is for those who haven’t downloaded the Codeigniter application. You may use either of the methods to commence the app installation process.

Install app using the direct link:

https://codeigniter.com/download

Download app using the Composer:

composer create-project codeigniter4/appstarter

Next, change the default project folder name to “my_ci_app” or anything fancy you want.

Connect App to Database

In this step, we will learn to build the codeigniter application connection with database.

Open the app/Config/Database.php, and insert 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 & Insert Data

In this section, we would request you to step inside your SQL query section and recklessly execute the following command and generate a table at the same time insert few records into 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

You have to generate a new controller template, right after that add the following 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 for showing charts, you need to go to app/Config/Routes.php and define the given below routes in the file.

$routes->setDefaultController('MorrisChartController');
$routes->get('/morris-charts', 'MorrisChartController::startChart');

Setting Up View File

Create a view file, add morris js with the required dependencies like jQuery and Raphael to view template; create charts div and define respective ids to load the charts in both the div.

Finally, add the script tag right before the body tag; you can set various options using config object; this makes chart customization easy.

Add 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 Application

In this last step, you have to open the terminal, type command to run the application.

php spark serve

You can take the help of the following url to see the morris charts in the browser.

http://localhost:8080/morris-charts

Conclusion

We shared a smarter way to learn about JavaScript morris charts; this is just a beginning; however, you may go to the next level and show data in bar charts and stacked charts through several other approaches.

Through this definitive guide, we always aimed to cut your efforts drastically. We have seen the pragmatic methods to integrate morris bar charts and morris stacked charts in the Codeigniter app.