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 AppIn this step, we will download the latest version of Codeigniter 4.
https://codeigniter.com/download or composer create-project codeigniter4/appstarter project_nameStep 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....