1. Morris Bar Chart
This example demonstrates how to create a Morris Bar Chart using Codeigniter 4. The chart will display the total number of orders placed by customers in the last month.
Step 1: Create a controller
Create a controller named MorrisBarChart.php in the app/Controllers folder.
load->library(‘MorrisBarChart’); // Set the data $data = [ [‘Month’, ‘Orders’], [‘Jan’, 10], [‘Feb’, 20], [‘Mar’, 30], [‘Apr’, 40], [‘May’, 50], [‘Jun’, 60], [‘Jul’, 70], [‘Aug’, 80], [‘Sep’, 90], [‘Oct’, 100], [‘Nov’, 110], [‘Dec’, 120] ]; // Create the chart $chart = $this->morrisbarchart->create($data); // Render the chart echo $chart; } }
Step 2: Create a library
Create a library named MorrisBarChart.php in the app/Libraries folder.
config = $config; } public function create($data) { // Create the chart $chart = ‘
‘; return $chart; } }
Step 3: Load the library
Load the library in the controller.
$this->load->library(‘MorrisBarChart’);
Step 4: Create the chart
Create the chart using the library.
$chart = $this->morrisbarchart->create($data);
Step 5: Render the chart
Render the chart.
echo $chart;
2. Morris Stacked Chart
This example demonstrates how to create a Morris Stacked Chart using Codeigniter 4. The chart will display the total number of orders placed by customers in the last month, broken down by product category.
Step 1: Create a controller
Create a controller named MorrisStackedChart.php in the app/Controllers folder.
load->library(‘MorrisStackedChart’); // Set the data $data = [ [‘Month’, ‘Clothing’, ‘Electronics’, ‘Food’], [‘Jan’, 10, 20, 30], [‘Feb’, 15, 25, 35], [‘Mar’, 20, 30, 40], [‘Apr’, 25, 35, 45], [‘May’, 30, 40, 50], [‘Jun’, 35, 45, 55], [‘Jul’, 40, 50, 60], [‘Aug’, 45, 55, 65], [‘Sep’, 50, 60, 70], [‘Oct’, 55, 65, 75], [‘Nov’, 60, 70, 80], [‘Dec’, 65, 75, 85] ]; // Create the chart $chart = $this->morrisstackedchart->create($data); // Render the chart echo $chart; } }
Step 2: Create a library
Create a library named MorrisStackedChart.php in the app/Libraries folder.
config = $config; } public function create($data) { // Create the chart $chart = ‘
‘; return $chart; } }
Step 3: Load the library
Load the library in the controller.
$this->load->library(‘MorrisStackedChart’);
Step 4: Create the chart
Create the chart using the library.
$chart = $this->morrisstackedchart->create($data);
Step 5: Render the chart
Render the chart.
echo $chart;
Codeigniter 4 morris bar and stacked charts tutorial. In this example tutorial, you will learn how to get current week records from day wise MySQL codeigniter 4 app and implement morris bar chart and stacked chart in codeigniter 4 app.
This tutorial will guide you step by step on how to get days wise data from MySQL database of the current week and year and how to show the data on morris stacked and bar charts with Codeigniter 4 app.
This tutorial will implement bar chart and stacked bar chart in codeigniter 4 app using morris chart js and fetch days wise record of the current week from mysql database. And display it on charts.
- Step 1: Download Codeigniter 4 Project
- Step 2: Basic Configurations
- Step 3: Create a Table in the Database
- Step 4: Setup Database Credentials
- Step 5: Create a Controller
- Step 6: Create a View
- Step 7: Define Routes
- Step 8: Start Development Server
Step 1: Download Codeigniter 4 Project
In this step, you will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Step 2: Basic Configurations
Next, you will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
public $baseURL = 'http://localhost:8080'; To public $baseURL = 'http://localhost/demo/';
Step 3: Create a Table in the Database
In this step, you need to create table in database and as well as insert some data to implement bar and stacked chart in codeiginter 4. So visit your phpmyadmin panel and execute the following sql query in it:
CREATE TABLE users (
id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
name varchar(100) NOT NULL COMMENT 'Name',
email varchar(255) NOT NULL COMMENT 'Email Address',
contact_no varchar(50) NOT NULL COMMENT 'Contact No',
created_at varchar(20) NOT NULL COMMENT 'Created date',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;
INSERT INTO users (id, name, email, contact_no, created_at) VALUES
(1, 'Team', '[email protected]', '9000000001', '2019-01-01'),
(2, 'Admin', '[email protected]', '9000000002', '2019-01-02'),
(3, 'User', '[email protected]', '9000000003', '2019-01-03'),
(4, 'Editor', '[email protected]', '9000000004', '2019-01-04'),
(5, 'Writer', '[email protected]', '9000000005', '2019-01-05'),
(6, 'Contact', '[email protected]', '9000000006', '2019-01-06'),
(7, 'Manager', '[email protected]', '9000000007', '2019-01-07'),
(8, 'John', '[email protected]', '9000000055', '2019-01-08'),
(9, 'Merry', '[email protected]', '9000000088', '2019-01-09'),
(10, 'Keliv', '[email protected]', '9000550088', '2019-01-10'),
(11, 'Herry', '[email protected]', '9050550088', '2019-01-11'),
(12, 'Mark', 'm[email protected]', '9050550998', '2019-01-12');
Step 4: Setup Database Credentials
In this step, you need to connect our project to the database. you need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, you need to set up database credentials in this file like below.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => '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 5: Create a Controller
In this step, Visit app/Controllers and create a controller name MorrisChart.php. In this controller, you need to add the following methods into it:
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class MorrisChart extends Controller
{
public function index() {
$db = \Config\Database::connect();
$builder = $db->table('users');
$query = $builder->query("SELECT DAYNAME(created_at) as y, COUNT(id) as a FROM users WHERE date(created_at) > DATE_SUB(NOW(), INTERVAL 1 WEEK) AND MONTH(created_at) = '" . date('m') . "' AND YEAR(created_at) = '" . date('Y') . "' GROUP BY DAYNAME(created_at)");
$data['day_wise'] = $query->getResult();
return view('home',$data);
}
}
Step 6: Create a View
In this step, you need to create one view files name home.php and update the following code into your file:
<head>
<meta charset=utf-8 />
<title>Morris.js Bar and Stacked Chart With Codeigniter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"></script>
</head>
<body>
<h3 class="text-primary text-center">
Morris charts with Codeigniter
</h3>
<div class"row">
<div class="col-sm-6 text-center">
<label class="label label-success">Bar Chart</label>
<div id="bar-chart" ></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">Bar stacked</label>
<div id="stacked" ></div>
</div>
</div>
</body>
Implement Javascript code
Finally, need to implement javascript code for showing a data on morris bar chart. Now we will put the code on script tag after the closing of body tag.
<script>
var serries = JSON.parse(`<?php echo $day_wise; ?>`);
console.log(serries);
var data = serries,
config = {
data: data,
xkey: 'y',
ykeys: ['a'],
labels: ['This Week Total Registered Users'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['gray','red']
};
//for mories bar chart
config.element = 'bar-chart';
Morris.Bar(config);
//for stacked bar chart
config.element = 'stacked';
config.stacked = true;
Morris.Bar(config);
</script>
Step 7: Define Routes
In this step, you need to create a route that renders the table into the view, place the following code in app/Config/Routes.php file.
$routes->get('/', 'MorrisChart::index');
Step 8: Start Development Server
In this step, open your terminal and execute the following command to start development sever:
php spark serve
Then, Go to the browser and hit below the URL:
http://localhost:8080
Conclusion
In this codeigniter 4 morris stacked chart and bar chart tutorial, you have successfully fetched the record from a database and display it on the morris charts in codeigniter 4 app.
If you have any questions or thoughts to share, use the comment form below to reach us.
