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.

https://codeigniter.com/download
or
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

<?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">
<head>
    <meta charset=utf-8 />
    <title>Morris Area And Line Chart Integration Using Codeigniter 4 Tutorial Example - MyWebtuts.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div>
            <label class="label label-success">Codeigniter Line Chart Example</label>
            <div id="lineChart"></div>
        </div>                
        
        <div>
            <label class="label label-success">Codeigniter Area Chart Example</label>
            <div id="areaChart"></div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <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,
                    lineColors:['green','orange'],
                    pointFillColors:['#ffffff'],
                    pointStrokeColors: ['blue'],
            };

            config.element = 'lineChart';
            Morris.Line(config);            
    
            config.element = 'areaChart';
            Morris.Area(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/line-chart

It will help you....

#Codeigniter

You might also like...