CodeIgniter 4 Morris Area and Line Chart Integration Tutorial
In this quick tutorial, you will find out how to add Line chart and Morris area chart in Codeigniter application using Raphael JavaScript vector and Morris Charts js packages.
This Codeigniter 4 line charts and morris area tutorial example will show you how to use third-party libraries to draw morris area chart and line chart correctly in the Codeigniter app from scratch.
Raphael is a tiny JavaScript library that is extremely useful for amplifying the experience of vector graphics on the web. You can create a specific chart or image crop and rotate the widget with this library.
A line chart or a line graph offers a method to showcase data or information as a series of information indicated with plots adjoined with straight line segments. It provides the ideal way of displaying information that might be serviceable in many business areas.
Morris js is a mighty small library that helps you create interactive and dynamic charts. You can draw almost every type of chart in the Codeigniter app by keeping astonishing visuals in mind.
How To Implement Morris Area and Chart Line In Codeigniter 4
- Step 1: Install Codeigniter App
- 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 App
The first thing first, this discourse on codeigniter and map implementation starts with downloading the fresh Codeigniter app.
There is another handy way that goes through the Composer. If you have configured Composer, then go ahead and download the Codeigniter app.
composer create-project codeigniter4/appstarterAfter downloading the app, unzip it, and rename it.
Enable Error Debugging
This step is completely optional, if you want you can open app/Config/Boot/production.php and set display_errors property to 1 and enable the error debugging in Codeigniter app.
ini_set('display_errors', '1');Update Database Details
Next, open the app/Config/Database.php insert the database name, username and password values into their respective properties and 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
Now, you have to create a new ChartController file in the app/Controllers folder, in this controller file define the function to load the chart view.
Open and add the code in app/Controllers/ChartController.php.
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class ChartController extends Controller
{
public function index() {
return view('chart');
}
}Add Route in CI
In this step, you have to add route and execute the function defined in the controller, open and add the below code in app/Config/Routes.php file.
/*
* --------------------------------------------------------------------
* Route Definitions
* --------------------------------------------------------------------
*/
$routes->get('/line-chart', 'ChartController::index');Create Line and Area Chart in Codeigniter
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.
Open and add the code into 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 CI Application
Charts have been integrated properly, you can now run the Codeigniter application and use the given url to view the app.
php spark servehttp://localhost:8080/line-chart
Conclusion
In this Codeigniter 4 morris line chart and area chart tutorial, we have explored how to implement a line chart in Codeigniter 4 app. We showed you how to add the area chart and line chart using static values however you can make the charts dynamic by fetching the data from the database and display the data on the line and area charts.