In this article, we will explain to you how to integrate the morris area & line charts example in Codeigniter 4(Codeigniter 4 Morris Area & Line Charts Example). we can easily integrate the Morris area and line Charts day, week, and month-wise in CodeIgniter 4.
In this example, we use the morris js library for Charts in Codeigniter 4. here we use the yearly-wise data so you can also get or use data month-wise or weekly-wise from MySQL. so you can see our example.
Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Connect to Database
Step 4: Create Controller
Step 5: Create Views Files
Step 6: Run The Application
Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.
Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url
Step 3: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.
public $default = [ 'DSN' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'ci4_demo', 'DBDriver' => 'MySQLi', 'DBPrefix' => '', 'pConnect' => false, 'DBDebug' => (ENVIRONMENT !== 'production'), 'cacheOn' => false, 'cacheDir' => '', 'charset' => 'utf8', 'DBCollat' => 'utf8_general_ci', 'swapPre' => '', 'encrypt' => false, 'compress' => false, 'strictOn' => false, 'failover' => [], 'port' => 3306, ];
Step 4: Create Controller
In this step, we will create the “Chart.php” controller in “app/Controllers” directory.
app/Controllers/Chart.php
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class Chart extends Controller
{
public function __construct()
{
helper(['html','url']);
}
public function index() {
return view('index');
}
}
?>
Step 5: Create Views Files
Finally, we will create the index.php in the app/views directory.
app/views/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Codeigniter 4 Morris Area & Line Charts Example - XpertPhp</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 4 Line Chart Example</label>
<div id="lineChart"></div>
</div>
<div>
<label class="label label-success">Codeigniter 4 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": "2016",
"sales": "1000"
},
{
"year": "2017",
"sales": "9800"
},
{
"year": "2018",
"sales": "1400"
},
{
"year": "2019",
"sales": "1640"
},
{
"year": "2020",
"sales": "9640"
},
{
"year": "2021",
"sales": "2640"
},
]
var data = data,
config = {
data: data,
fillOpacity: 0.5,
xkey: 'year',
ykeys: ['sales'],
labels: ['Product Sales 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 6: Run The Application
We can start the server and run the codeigniter 4 application using the below command.
php spark serve
Now we will run our example using the below Url in the browser.
http://localhost:8080/chart
If you liked this article, you can also download it through our Github Repository.
