In this codeigniter morris area and line charts tutorial, We would love to share with you how to get current month records from date wise MySQL codeigniter and using this record we will implement morris area chart and line chart with live demo example
In this Codeigniter tutorial, You will learn how to get date wise data from mysql database of current month and year and how to create area and line charts with codeigniter using morris js and also learn how to set the data on morris charts.
We will fetch date wise record of the current Month from mysql database. Every day, Many users registered from our database in month,year,week. We provide demo link at the end of article. Checkout the link.
We will implement area chart and line bar chart in codeigniter using morris js . We can use morris js and also implement bar chart, pie chart, stacked bar chart etc.
Codeigniter Morris Area & Line Charts
Contents
- Download Codeigniter Latest
- Basic Configurations
- Create Database With Table
- Setup Database Credentials
- Make New Controller
- Create Views
- Start Development server
- Conclusion
Download Codeigniter Project
In this step we will download the latest version of Codeigniter, Go to this link Download Codeigniter download the fresh setup of codeigniter and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Basic Configurations
Next we will set the some basic configuration on config.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
$config['base_url'] = 'http://localhost/demo/';
Create Database With Table
In this step, we need to create database name demo, so let’s open your phpmyadmin and create the database with the name demo . After successfully create a database, you can use the below sql query for creating a table in your database.
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', '[email protected]', '9050550998', '2019-01-12');
Setup Database Credentials
In this step, We need to connect our project to database. we need to go application/config/ and open database.php file in text editor. After open the file in text editor, We need to setup database credential in this file like below.
$db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'demo', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );
Create Controller
Now we need to create a controller name Chart.php. In this controller we will create some method/function. We will build some of the methods like :
- Index() – This is used to fetch the record from database and pass the data to view.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Chart extends CI_Controller {
public function __construct() {
parent::__construct();
// load model
$this->load->database();
$this->load->helper(array('url','html','form'));
}
public function morris_area_line_chart() {
// for area and line chart
$dayQuery = $this->db->query("SELECT DAY(created_at) as y, COUNT(id) as a FROM users WHERE MONTH(created_at) = '" . date('m') . "'
AND YEAR(created_at) = '" . date('Y') . "'
GROUP BY DAY(created_at)");
$record = $dayQuery->result();
$data['chart_data'] = json_encode( $record );
//print_r($data['chart_data']);die;
$this->load->view('morris_line_area_chart',$data);
}
}
?>
In this controller function, we fatch the record from database for showing the data on morris stacked and bar charts.
Create Views
Now we need to create morris_line_area_chart.php, go to application/views/ folder and create morris_line_area_chart.php file. Here put the below html code for showing data on pie charts.
<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-12 text-center">
<label class="label label-success">Line Chart</label>
<div id="line-chart" ></div>
</div>
<div class="col-sm-12 text-center">
<label class="label label-success">Area Chart</label>
<div id="area-chart" ></div>
</div>
</div>
</body>
Implement Javascript code
Finally we will implement javascript code for showing a data on morris stacked and bar charts. Now we will put the code on script tag after the closing of body tag.
<script>
var serries = JSON.parse(`<?php echo $chart_data; ?>`);
console.log(serries);
var data = serries,
config = {
data: data,
xkey: 'y',
ykeys: ['a'],
labels: ['Current Month Date Wise Total Registered Users'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['gray','red']
};
config.element = 'area-chart';
Morris.Area(config);
config.element = 'line-chart';
Morris.Line(config);
</script>
In this script code, we have intialize the morris stacked and bar charts with php codeigniter and set the data on it.
Start Development server
For start development server, Go to the browser and hit below the url.
http://localhost/demo/chart/morris_line_area_chart
Conclusion
In this codeigniter morris area and line charts tutorial, We have successfully fetch the date wise record from database of the month and display on the area and line charts using morris js charts.
You may like
- Codeigniter 3 Create First Ajax CRUD Application
- Codeigniter Send Email With Gmail Smtp Protocol
- Laravel 6 Ajax CRUD(DataTables Js) Tutorial Example
- Laravel 6 – Ajax CRUD (Operation) Application Example
- Laravel 6 Angular JS CRUD Example Tutorial
- Upload Files/Images to Amazon s3 Cloud Using Laravel 6 Filesystem
- Laravel 6 CKEditor with Image Upload
- Laravel 6 – Ajax Image Upload Tutorial Example From Scratch
Rrecommended Posts
Learn Remove index.php in web url using .htaccess file Codeigniter
If you have any questions or thoughts to share, use the comment form below to reach us.
