Codeigniter 4 Morris Area And Line Chart Integration Tutorial Example

Codeigniter 4 , Codeigniter

Nicesnippets

304

10-08-2021


Codeigniter 4 Morris Area And Line Chart Integration Tutorial Example

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/[email protected]/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


Recommended Posts