Morris Stacked & Bar Chart Tutorial Using Codeigniter 4 Example

Jul 31, 2021 . Admin

Hello Friends,

Today i will explained Morris Stacked & Bar Chart Tutorial Example in Codeigniter 4. This example is so easy to use in Codeigniter 4. Now, i will implemented to the Morris Stacked & Bar Chart Tutorial Using Codeigniter. I am implemented to the seven steps to implement in stacked & bar chart tutorial using Codeigniter.

Here i will give you example how you can check create Morris Stacked & Bar Chart Tutorial Example in Codeigniter 4.

Step 1: Download Codeigniter Project

In this step, we will download the latest version of Codeigniter 4.

https://codeigniter.com/download
or
composer create-project codeigniter4/appstarter project_name
Step 2: Connect App to Database

Now, Open the app/Config/Database.php, and insert database name, username and password into the file.

Path: app/Config/Database.php

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,
];
Step 3: Create Table & Insert Data

Then next step to create table and insert to the few records.

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');
Step 4: Make Controller File

Now, You have to generate a new controller template, right after that add the following code into the app/Controllers/MorrisChartController.php file.

Path: app/Controllers/MorrisChartController.php

<?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); 
        } 
    }
Step 5: Make Route File

next 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

Path: app/Config/Routes.php

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

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.

Path: 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>Morris Stacked & Bar Chart Tutorial Using Codeigniter 4 Example Mywebtuts.com</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>
        <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>
Step 7: Run Application

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

php spark serve

Then next run the url in your browser.

http://localhost:8080/morris-charts

It will help you....

#Codeigniter

You might also like...