Morris Area & Line Chart With Codeigniter Example

In this tutorial, we would love to share with you how to create Morris Area and Line Chart and display current month records from MySQL database in CodeIgniter projects.

In this example tutorial, we will get day-wise records of current month from MySQL database and display it on Morris area and line charts.

Codeigniter Morris Area & Line Charts Example Tutorial

Here are steps:

• 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

Edit database.php file from application/config/ folder and add the database details like the following:

$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.

Test This Project

Go to the browser and hit below the url.

http://localhost/demo/chart/morris_line_area_chart

Conclusion

That’s all, we have successfully fetched day-wise records from the month database and displayed them on area and line charts using Morris JS charts.

If you have any questions or thoughts to share, use the comment form below to reach us.