CodeIgniter 4 Tutorial- Morris Area And Line Chart Integration Example

Have you ever added Morris Line And Area Charts in CodeIgniter 4 App? In this tutorial, we will learn how to do so in an easy and smooth manner.

We will also get to know to use third-party libraries to draw Morris area charts and line charts correctly in the CodeIgniter app from scratch.

In addition, we will be using Raphael JavaScript vector and Morris Charts Js packages in this tutorial. Raphael is a tiny JavaScript library that is very beneficial for amplifying the experience of vector graphics on the web. We can easily create a specific chart or can make any image crop or rotate with this library.

With the help of this CodeIgniter example, even a novice programmer will be able to integrate the charts in PHP CodeIgniter.

 

How To Add Morris Area And Line Chart In CodeIgniter 4 Application

Step 1- Install CodeIgniter Project

Step 2- Enable Error Debugging

Step 3- Update Database Details

Step 4- Set Up Controllers

Step 5- Add Route In CI

Step 6- Create Chart View Files

Step 7- Run Application

 

Install CodeIgniter Project

In this step, we simply have to download the CodeIgniter application. We can use any of the methods for starting the installation process.

We will install the app by using the direct link:

https://codeigniter.com/download

 

Download the app using the Composer:

composer create-project codeigniter4/appstarter

 

Next is required to change the default project folder name to “my_ci_app” or any other name we want.

 

Enable Error Debugging

This second step is not mandatory. If you choose to follow it, then open app/Config/Boot/production.php and set display_errors property to 1 and enable the error debugging in the CodeIgniter app.

ini_set('display_errors', '1');

Update Database Details

Now, we will have to open the app/Config/Database.php where we insert the database name, username and password values into their respective properties and then connect the Codeigniter app to the MySQL database.

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,
    ];

Set Up Controllers

We will create a new ChartController file in the app/Controllers folder, in this controller file, define the function to load the chart view. Afterward, we will open theĀ  app/Controllers/ChartController.php file and add the given code into it:

<?php 

namespace App\Controllers;

use CodeIgniter\Controller;

class ChartController extends Controller
{
    public function index() {
      return view('chart');
    }
}

 

Add Route In CI

In this step, we will have to add route and execute the function defined in the controller. This will be opened and the below code will be added in app/Config/Routes.php file:

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

$routes->get('/line-chart', 'ChartController::index');

 


Create Line And Area chart In CodeIgniter

So, here, we have to create a view file and then use it for drawing the line and area chart. Hence, create chart.php file in the View s folder:

To create the charts, do remember to import the Bootstrap 5 CSS and required scripts in the head area of the HTML template.

Now, we will open and add the code in the app/View/chart.php file:

<head>
    <meta charset=utf-8 />
    <title>Codeigniter 4 Area Chart and Line Chart Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

    <!-- Add Scripts -->
    <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>

 

Run The CI Application

Here, in this last step, we just have to open the terminal and type the command for running the application since we have successfully integrated the charts:

php spark serve

 

Summary

So friends, in this CodeIgniter tutorial, we have seen how to implement a line chart in the CI 4 app. Also, we have learned how to add the area chart and line chart using the static values. Hope that you have found this example quite dynamic as well as easy to execute.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *