10-Aug-2021
.
Admin
Hi guys,
Today i will explained How to Integration Morris Area And Line Chart Example in php Codeigniter 4. This example is so easy to use in Codeigniter 4.
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.
This example to i am explained in seven steps.So let's start to the example.
Step 1: Install Codeigniter App
Codeigniter Project Project install in a two ways.
<?php
https://codeigniter.com/download
or
composer create-project codeigniter4/appstarter project_name
?>
Step 2: 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');
Step 3: Update Database Details
Open the app/Config/Database.php, and insert database name, username and password into the file.
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
You have to generate a new controller template, right after that add the following code into the app/Controllers/ChartController.php file.
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class ChartController extends Controller
{
public function index() {
return view('chart');
}
}
Step 5: Add Route in CI
Next to make the route for showing charts, you need to go to app/Config/Routes.php and define the given below routes in the file
/*
* --------------------------------------------------------------------
* Route Definitions
* --------------------------------------------------------------------
*/
$routes->get('/line-chart', 'ChartController::index');
Step 6: Create Chart View Files
Then Next, you need to create the view file, where you will constitute the chart using the google chart js, bootstrap and most importantly the data coming from the database. Add code into
app/Views/chart.php file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Codeigniter 4 Morris Area And Line Chart Integration Tutorial Example - Nicesnippets.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
Output
#Codeigniter 4
#Codeigniter
