Morris Area And Line Chart Integration Using Codeigniter 4 Tutorial Example

Aug 10, 2021 . Admin

Hello Friends,

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

Here i will give you example how you can check create Morris area & Line chart Tutorial Example in Codeigniter 4.

Step 1: Install Codeigniter App

In this step, we will download the latest version of Codeigniter 4.
composer create-project codeigniter4/appstarter project_name
Step 2: Enable Error Debugging

This is completely optional step, if you want to implement than follow below path and set display_errors property to 1 and enable the error debugging in Codeigniter app.

Path: app/Config/Boot/production.php

ini_set('display_errors', '1');
Step 3: Update Database Details

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

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 4: Set Up Controllers

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

Path: app/Controllers/ChartController.php

namespace App\Controllers;
use CodeIgniter\Controller;

class ChartController extends Controller
    public function index() {
        return view('chart');
Step 5: Add Route in CI

In this step you can add route and execute the function defined in the controller, add some code into following path.

Path: app/Config/Routes.php

 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------

$routes->get('/line-chart', 'ChartController::index');
Step 6: Create Chart View Files

You have to create a view file and use it for drawing the line and area chart, hence create chart.php file in the Views folder.
To create the charts make sure to import the Bootstrap 5 CSS and required scripts in the head area of the HTML template.

Path: app/Views/chart.php

<!DOCTYPE html>
<html lang="en">
    <meta charset=utf-8 />
    <title>Morris Area And Line Chart Integration Using Codeigniter 4 Tutorial Example -</title>
    <link href="" rel="stylesheet">
    <div class="container">
            <label class="label label-success">Codeigniter Line Chart Example</label>
            <div id="lineChart"></div>
            <label class="label label-success">Codeigniter Area Chart Example</label>
            <div id="areaChart"></div>

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
            var data = [
                    "year": "2004",
                    "expenses": "1000"
                    "year": "2005",
                    "expenses": "1250"
                    "year": "2006",
                    "expenses": "1400"
                    "year": "2007",
                    "expenses": "1640"
                    "year": "20015",
                    "expenses": "9640"
                    "year": "2020",
                    "expenses": "2640"

            var data = data,
                config = {
                    data: data,
                    fillOpacity: 0.5,                
                    xkey: 'year',
                    ykeys: ['expenses'],
                    labels: ['Students Expense Data'],
                    hideHover: 'auto',
                    behaveLikeLine: true,
                    resize: true,
                    pointStrokeColors: ['blue'],

            config.element = 'lineChart';
            config.element = 'areaChart';
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.


It will help you....