In this article, we will explain to you how to integrate the morris area & line charts example in Codeigniter 4(Codeigniter 4 Morris Area & Line Charts Example). we can easily integrate the Morris area and line Charts day, week, and month-wise in CodeIgniter 4.
In this example, we use the morris js library for Charts in Codeigniter 4. here we use the yearly-wise data so you can also get or use data month-wise or weekly-wise from MySQL. so you can see our example.
Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Connect to Database
Step 4: Create Controller
Step 5: Create Views Files
Step 6: Run The Application
Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.
Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url
Step 3: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | public $default = [ 'DSN' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'ci4_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 4: Create Controller
In this step, we will create the “Chart.php” controller in “app/Controllers” directory.
app/Controllers/Chart.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?php namespace App\Controllers; use CodeIgniter\Controller; class Chart extends Controller { public function __construct() { helper(['html','url']); } public function index() { return view('index'); } } ?> |
Step 5: Create Views Files
Finally, we will create the index.php in the app/views directory.
app/views/index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Codeigniter 4 Morris Area & Line Charts Example - XpertPhp</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 4 Line Chart Example</label> <div id="lineChart"></div> </div> <div> <label class="label label-success">Codeigniter 4 Area Chart Example</label> <div id="areaChart"></div> </div> </div> <!-- Add Scripts --> <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": "2016", "sales": "1000" }, { "year": "2017", "sales": "9800" }, { "year": "2018", "sales": "1400" }, { "year": "2019", "sales": "1640" }, { "year": "2020", "sales": "9640" }, { "year": "2021", "sales": "2640" }, ] var data = data, config = { data: data, fillOpacity: 0.5, xkey: 'year', ykeys: ['sales'], labels: ['Product Sales 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 6: Run The Application
We can start the server and run the codeigniter 4 application using the below command.
1 | php spark serve |
Now we will run our example using the below Url in the browser.
1 | http://localhost:8080/chart |
If you liked this article, you can also download it through our Github Repository.