Codeigniter 4 Morris Area and Line Chart Tutorial

Codeigniter 4 morris line and area chart example; In this tutorial, i will show you how to create morris line and area chart in Codeigniter 4 app using morris library. And as well as learn how to get month records day wise from mysql db in codeigniter 4 app and using this record; i will implement arae and line charts.

For morris area and line chart example; I will get day wise data of the current month from mysql database and create area and line chart and display data from database in codeigniter 4 apps using morris js.

How to Create Area and Line Chart in Codeigniter 4 using Morris js

Install Codeigniter 4 Application
Basic App Configurations
Create Database and Table
Setup Database Credentials
Create Controller Class
Create Views
Setup Routes
Start Development server

Step 1 - Install Codeigniter 4 Application

First of all, you need to ownload the latest version of Codeigniter 4. So, visit this link https://codeigniter.com/download Download Codeigniter 4 app and unzip the setup in your local system xampp/htdocs/ .

Note that, please change the download folder name “demo”.

Step 2 - Basic App Configurations

Now, you need to some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

Step 3 - Create Database and Table

Create database and table; so open your phpmyadmin and execute the following sql query on it to create 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;
  INSERT INTO users (id, name, email, contact_no, created_at) VALUES
  (1, 'Team', '[email protected]', '9000000007', '2021-07-07'),
  (2, 'Admin', '[email protected]', '9000000002', '2021-07-02'),
  (3, 'User', '[email protected]', '9000000003', '2021-07-03'),
  (4, 'Editor', '[email protected]', '9000000004', '2021-07-04'),
  (5, 'Writer', '[email protected]', '9000000005', '2021-07-05'),
  (6, 'Contact', '[email protected]', '9000000006', '2021-07-06'),
  (7, 'Manager', '[email protected]', '9000000007', '2021-07-07'),
  (8, 'John', '[email protected]', '9000000055', '2021-07-08'),
  (9, 'Merry', '[email protected]', '9000000088', '2021-07-09'),
  (10, 'Keliv', '[email protected]', '9000550088', '2021-07-10'),
  (11, 'Herry', '[email protected]', '9050550088', '2021-07-11'),
  (12, 'Mark', '[email protected]', '9050550998', '2021-07-12');

Step 4 - Setup Database Credentials

To connect your codeigniter 4 app to the database. So, visit app/Config/ directory and open Database.php. Then add the databasae details like below into database.php file:

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'test',
        'password' => '4Mu99BhzK8dr4vF1',
        'database' => 'demo',
        '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 5 - Create Controller Class

Create MorrisChart.php file. So, visit app/Controllers directory and create MorrisChart.php.Then add the following code into it:

<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class MorrisChart extends Controller
{
    public function index() {
        $db      = \Config\Database::connect();
        $builder = $db->table('users');   
        $query = $builder->query("SELECT  DAY(created_at) as y, COUNT(id) as a FROM users WHERE MONTH(created_at) = '" . date('m') . "'
        AND YEAR(created_at) = '" . date('Y') . "'
      GROUP BY DAY(created_at)");
      $data['chart_data'] = $query->getResult();
      return view('home',$data);
    }
}

The index() function renders bar and stacked chart template into the view.

Step 6 - Create Views

Create home.php view file, so visit app/views/ directory and create home.php file. Then add the following HTML into home.php file:

<head>
<meta charset=utf-8 />
<title>Codeigniter 4 Morris Line and Area Chart Example - LaraTutorials.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"></script>
</head>
<body>
  <h3 class="text-primary text-center">
    Morris charts with Codeigniter
  </h3>
  <div class"row">
    <div  class="col-sm-12 text-center">
       <label class="label label-success">Line Chart</label>
      <div id="line-chart" ></div>
    </div>
     <div class="col-sm-12 text-center">
       <label class="label label-success">Area Chart</label>
      <div id="area-chart" ></div>
    </div>
  </div>
</body>

Step 7 - Setup Routes

To define a route, So, visit app/Config/ directory and open Routes.php file. Then add the following routes into it:

// 
$routes->setDefaultController('MorrisChart');
$routes->get('/', 'MorrisChart::index');

Step 8 - Start Development server

Execute the following command into command prompt or terminal to start the codeigniter 4 application:

php spark serve

Then visit your web browser and hit the following url on it:

http://localhost/demo/
OR
http://localhost:8080/

Conclusion

Codeigniter 4 stacked and bar chart example; In this tutorial,You have learned how to create bar and stacked chart in Codeigniter 4 app using morris library.