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/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>
<!-- 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