Cách Thêm biểu đồ đường và biểu đồ vùng Morris trong Codeigniter

Trong hướng dẫn CodeIgniter này, chúng ta sẽ tìm hiểu cách thêm biểu đồ đường Morris Charts và biểu đồ vùng trong ứng dụng Codeigniter bằng cách sử dụng vectơ Raphael JavaScript và gói Morris Charts js.

Ví dụ hướng dẫn về biểu đồ đường và vùng morris trong Codeigniter 4 này sẽ chỉ cho bạn cách sử dụng thư viện của bên thứ ba để vẽ biểu đồ vùng và biểu đồ đường morris một cách chính xác trong ứng dụng Codeigniter từ đầu.

Raphael là một thư viện JavaScript nhỏ cực kỳ hữu ích để mở rộng trải nghiệm đồ họa vector trên web. Bạn có thể tạo một tiện ích cắt và xoay đồ họa hoặc hình ảnh cụ thể với thư viện này.

Biểu đồ đường hoặc biểu đồ đường cung cấp một phương pháp hiển thị dữ liệu hoặc thông tin dưới dạng một chuỗi thông tin được biểu thị bằng các biểu đồ liền kề với các đoạn đường thẳng. Nó cung cấp một cách lý tưởng để hiển thị thông tin có thể hữu ích trong nhiều lĩnh vực kinh doanh.

Morris js là một thư viện nhỏ mạnh mẽ giúp bạn tạo các biểu đồ tương tác và động. Bạn có thể vẽ hầu hết tất cả các loại đồ họa trong ứng dụng Codeigniter, lưu ý đến những hình ảnh tuyệt vời.

Cách triển khai vùng Morris và đường đồ thị trong Codeigniter 4

Bước 1: Cài đặt ứng dụng Codeigniter
Bước 2: Bật gỡ lỗi
Bước 3: Cập nhật chi tiết cơ sở dữ liệu
Giai đoạn 4: Cấu hình bộ điều khiển
Bước 5: Thêm tuyến trong CI
Bước 6: Tạo tệp hiển thị đồ họa
Bước 7: Chạy ứng dụng

Cài đặt ứng dụng Codeigniter

Đầu tiên, phần nói về trình viết mã và triển khai bản đồ này bắt đầu bằng việc tải xuống ứng dụng Codeigniter mới .

Có một cách thực tế khác là thông qua Composer. Nếu bạn đã thiết lập Composer, hãy tiếp tục và tải xuống ứng dụng Codeigniter.

composer create-project codeigniter4/appstarter

Sau khi tải ứng dụng về giải nén và đổi tên.

Bật sửa lỗi

Bước này hoàn toàn không bắt buộc, nếu muốn bạn có thể mở app/Config/Boot/production.php và đặt thuộc tính display_errors thành 1 và bật sửa lỗi trong ứng dụng Codeigniter.

ini_set('display_errors', '1');

Cập nhật chi tiết cơ sở dữ liệu

Sau đó mở app/Config/Database.php nhập các giá trị tên cơ sở dữ liệu, tên người dùng và mật khẩu vào thuộc tính tương ứng của chúng và kết nối ứng dụng Codeigniter với cơ sở dữ liệu MySQL.

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,
    ];

cấu hình bộ điều khiển

Bây giờ, bạn nên tạo một tệp ChartController mới trong thư mục ứng dụng/Bộ điều khiển, trong tệp bộ điều khiển này xác định chức năng tải chế độ xem biểu đồ.

Mở và thêm mã vào app/Controllers/ChartController.php .

 

namespace App\Controllers;

use CodeIgniter\Controller;

class ChartController extends Controller
{
    public function index() {
      return view('chart');
    }
}

Thêm tuyến đường trong CI

Trong bước này, bạn phải thêm tuyến đường và chạy chức năng được xác định trong bộ điều khiển, mở và thêm mã bên dưới vào tệp app/Config/Routes.php.

/*
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
*/

$routes->get('/line-chart', 'ChartController::index');

Tạo biểu đồ đường và vùng trong Codeigniter

Bạn phải tạo một tệp trực quan hóa và sử dụng nó để vẽ biểu đồ đường và vùng, vì vậy hãy tạo tệp chart.php trong thư mục Visualizations.

Để tạo đồ họa, hãy đảm bảo nhập CSS Bootstrap 5 và các tập lệnh cần thiết vào vùng tiêu đề của mẫu HTML.

Mở và thêm mã vào tệp app/View/chart.php .

<head>
    <meta charset=utf-8 />
    <title>Codeigniter 4 Area Chart and Line Chart Demo</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 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>

    <!-- 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": "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>

Chạy ứng dụng CI

Đồ họa đã được tích hợp đúng cách, giờ đây bạn có thể chạy ứng dụng Codeigniter và sử dụng URL được cung cấp để xem trước ứng dụng.

php spark serve

http://localhost:8080/line-chart

Biểu đồ đường và vùng Codeigniter Morris

Phần kết luận

Trong hướng dẫn biểu đồ vùng và biểu đồ đường morris trên Codeigniter 4 này, chúng ta khám phá cách triển khai biểu đồ đường trong ứng dụng Codeigniter 4. Chúng tôi chỉ cho bạn cách thêm biểu đồ vùng và biểu đồ đường bằng các giá trị tĩnh, nhưng bạn có thể làm cho biểu đồ tìm nạp động dữ liệu từ cơ sở dữ liệu và hiển thị dữ liệu trong biểu đồ đường và khu vực.

Bài viết gốc được lấy từ: https://www.positronx.io

#codeigniter

What is GEEK

Buddha Community

Cách Thêm biểu đồ đường và biểu đồ vùng Morris trong Codeigniter

Phung Dang

1678210140

Cách Thêm biểu đồ đường và biểu đồ vùng Morris trong Codeigniter

Trong hướng dẫn CodeIgniter này, chúng ta sẽ tìm hiểu cách thêm biểu đồ đường Morris Charts và biểu đồ vùng trong ứng dụng Codeigniter bằng cách sử dụng vectơ Raphael JavaScript và gói Morris Charts js.

Ví dụ hướng dẫn về biểu đồ đường và vùng morris trong Codeigniter 4 này sẽ chỉ cho bạn cách sử dụng thư viện của bên thứ ba để vẽ biểu đồ vùng và biểu đồ đường morris một cách chính xác trong ứng dụng Codeigniter từ đầu.

Raphael là một thư viện JavaScript nhỏ cực kỳ hữu ích để mở rộng trải nghiệm đồ họa vector trên web. Bạn có thể tạo một tiện ích cắt và xoay đồ họa hoặc hình ảnh cụ thể với thư viện này.

Biểu đồ đường hoặc biểu đồ đường cung cấp một phương pháp hiển thị dữ liệu hoặc thông tin dưới dạng một chuỗi thông tin được biểu thị bằng các biểu đồ liền kề với các đoạn đường thẳng. Nó cung cấp một cách lý tưởng để hiển thị thông tin có thể hữu ích trong nhiều lĩnh vực kinh doanh.

Morris js là một thư viện nhỏ mạnh mẽ giúp bạn tạo các biểu đồ tương tác và động. Bạn có thể vẽ hầu hết tất cả các loại đồ họa trong ứng dụng Codeigniter, lưu ý đến những hình ảnh tuyệt vời.

Cách triển khai vùng Morris và đường đồ thị trong Codeigniter 4

Bước 1: Cài đặt ứng dụng Codeigniter
Bước 2: Bật gỡ lỗi
Bước 3: Cập nhật chi tiết cơ sở dữ liệu
Giai đoạn 4: Cấu hình bộ điều khiển
Bước 5: Thêm tuyến trong CI
Bước 6: Tạo tệp hiển thị đồ họa
Bước 7: Chạy ứng dụng

Cài đặt ứng dụng Codeigniter

Đầu tiên, phần nói về trình viết mã và triển khai bản đồ này bắt đầu bằng việc tải xuống ứng dụng Codeigniter mới .

Có một cách thực tế khác là thông qua Composer. Nếu bạn đã thiết lập Composer, hãy tiếp tục và tải xuống ứng dụng Codeigniter.

composer create-project codeigniter4/appstarter

Sau khi tải ứng dụng về giải nén và đổi tên.

Bật sửa lỗi

Bước này hoàn toàn không bắt buộc, nếu muốn bạn có thể mở app/Config/Boot/production.php và đặt thuộc tính display_errors thành 1 và bật sửa lỗi trong ứng dụng Codeigniter.

ini_set('display_errors', '1');

Cập nhật chi tiết cơ sở dữ liệu

Sau đó mở app/Config/Database.php nhập các giá trị tên cơ sở dữ liệu, tên người dùng và mật khẩu vào thuộc tính tương ứng của chúng và kết nối ứng dụng Codeigniter với cơ sở dữ liệu MySQL.

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,
    ];

cấu hình bộ điều khiển

Bây giờ, bạn nên tạo một tệp ChartController mới trong thư mục ứng dụng/Bộ điều khiển, trong tệp bộ điều khiển này xác định chức năng tải chế độ xem biểu đồ.

Mở và thêm mã vào app/Controllers/ChartController.php .

 

namespace App\Controllers;

use CodeIgniter\Controller;

class ChartController extends Controller
{
    public function index() {
      return view('chart');
    }
}

Thêm tuyến đường trong CI

Trong bước này, bạn phải thêm tuyến đường và chạy chức năng được xác định trong bộ điều khiển, mở và thêm mã bên dưới vào tệp app/Config/Routes.php.

/*
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
*/

$routes->get('/line-chart', 'ChartController::index');

Tạo biểu đồ đường và vùng trong Codeigniter

Bạn phải tạo một tệp trực quan hóa và sử dụng nó để vẽ biểu đồ đường và vùng, vì vậy hãy tạo tệp chart.php trong thư mục Visualizations.

Để tạo đồ họa, hãy đảm bảo nhập CSS Bootstrap 5 và các tập lệnh cần thiết vào vùng tiêu đề của mẫu HTML.

Mở và thêm mã vào tệp app/View/chart.php .

<head>
    <meta charset=utf-8 />
    <title>Codeigniter 4 Area Chart and Line Chart Demo</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 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>

    <!-- 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": "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>

Chạy ứng dụng CI

Đồ họa đã được tích hợp đúng cách, giờ đây bạn có thể chạy ứng dụng Codeigniter và sử dụng URL được cung cấp để xem trước ứng dụng.

php spark serve

http://localhost:8080/line-chart

Biểu đồ đường và vùng Codeigniter Morris

Phần kết luận

Trong hướng dẫn biểu đồ vùng và biểu đồ đường morris trên Codeigniter 4 này, chúng ta khám phá cách triển khai biểu đồ đường trong ứng dụng Codeigniter 4. Chúng tôi chỉ cho bạn cách thêm biểu đồ vùng và biểu đồ đường bằng các giá trị tĩnh, nhưng bạn có thể làm cho biểu đồ tìm nạp động dữ liệu từ cơ sở dữ liệu và hiển thị dữ liệu trong biểu đồ đường và khu vực.

Bài viết gốc được lấy từ: https://www.positronx.io

#codeigniter

hourly developer

1596183830

Hire CodeIgniter Developer

Want to create unique, scalable web and app solutions?

At HourlyDeveloper.io, Expert CodeIgniter developer works particularly for you and your project.

You can Hire CodeIgniter Developer with an extensive variety of skill sets together with PHP, MySQL, PHP frameworks such as Laravel, CakePHP, and Zend, CMS, and e-commerce platforms such as WordPress, Drupal, Magento, WooCommerce, Shopify.

Consult with our experts: https://bit.ly/3hUdppScodeIgniter development services

#hire codeigniter developer #codeigniter developer #codeigniter development #codeigniter development company #codeigniter development services #codeigniter

WebClues Infotech

1617355159

Hire Codeigniter Developer - Hire CodeIgniter Developers or Programmers

One of the fastest, lightest, reliable, and completely capable frameworks for a business web app development is the Codeigniter framework from PHP. CodeIgniter provides out-of-the-box libraries to perform operations like Sending Emails, Uploading Files, Managing Sessions, etc.

Want to build an excellent web application for your business?

Then WebClues Infotech is the right place where you could find highly skilled and expert CodeIgniter developers for hire. Share us your requirement, Conduct desired candidate interviews, and finally choose the one best suitably, it is that easy with WebClues Infotech.

So what are you waiting for? Get going on the path to business growth with WebClues Infotech

For more inquiry click here: https://www.webcluesinfotech.com/contact-us/

Hire CodeIgniter Developer: https://www.webcluesinfotech.com/hire-codeigniter-developer/

Email: sales@webcluesinfotech.com

#hire codeigniter developers #hire codeigniter development expert #hire codeigniter developers #hire codeigniter developers or programmers #hire an offshore codeigniter development team #codeigniter programmer

Hoang Ha

1657788360

Cách Thêm Thanh Biểu đồ Xếp Chồng Morris Trong ứng Dụng Codeigniter 4

Bạn có gặp khó khăn khi thêm thanh morris và các biểu đồ xếp chồng lên nhau trong ứng dụng Codeigniter 4 không? Chúng tôi sẽ cho bạn biết cách tích hợp sâu sắc các biểu đồ xếp chồng lên nhau trong Codeigniter.

Không những thế, chúng tôi còn hướng dẫn cách viết và sử dụng đúng cách các truy vấn Codeigniter SQL để lọc dữ liệu và lấy động dữ liệu bán hàng trong ngày từ cơ sở dữ liệu và hiển thị nó trong biểu đồ thanh và xếp chồng.

Ví dụ về biểu đồ Codeigniter 4 morris này dành cho các lập trình viên mới bắt đầu muốn nâng cao hiểu biết và sự thành thạo của họ qua việc tích hợp biểu đồ trong PHP Codeigniter.

Ngoài ra, hãy tìm hiểu cách triển khai các biểu đồ thanh và xếp chồng javascript morris trong ứng dụng Codeigniter với cơ sở dữ liệu MySQL.

Cách thêm thanh biểu đồ xếp chồng Morris trong ứng dụng Codeigniter 4

Bước 1: Cài đặt Codeigniter Project
Bước 2: Kết nối ứng dụng với cơ sở dữ liệu
Bước 3: Tạo bảng & Chèn dữ liệu
Bước 4: Tạo tệp điều khiển
Bước 5: Tạo tệp định tuyến
Bước 6: Thiết lập chế độ xem tệp
Bước 7: Chạy ứng dụng

Cài đặt dự án Codeigniter

Bước này dành cho những ai chưa tải ứng dụng Codeigniter. Bạn có thể sử dụng một trong các phương pháp để bắt đầu quá trình cài đặt ứng dụng.

Cài đặt ứng dụng bằng liên kết trực tiếp:

https://codeigniter.com/download

Tải xuống ứng dụng bằng Trình soạn nhạc:

composer create-project codeigniter4/appstarter

Tiếp theo, thay đổi tên thư mục dự án mặc định thành “my_ci_app” hoặc bất kỳ thứ gì bạn muốn.

Kết nối ứng dụng với cơ sở dữ liệu

Trong bước này, chúng ta sẽ học cách xây dựng kết nối ứng dụng codeigniter với cơ sở dữ liệu.

Mở ứng dụng / Config / Database.php và chèn tên cơ sở dữ liệu, tên người dùng và mật khẩu vào tệp.

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,
    ];

Tạo bảng và chèn dữ liệu

Trong phần này, chúng tôi sẽ yêu cầu bạn bước vào bên trong phần truy vấn SQL của mình và thực hiện một cách liều lĩnh lệnh sau và tạo một bảng đồng thời chèn một vài bản ghi vào đó.

CREATE TABLE `product` (
  `id` int(11) NOT NULL COMMENT 'Primary Key',
  `name` varchar(255) NOT NULL COMMENT 'name',
  `sell` varchar(55) NOT NULL COMMENT 'sell',    
  `created_at` varchar(30) NOT NULL COMMENT 'created at'
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='Atomic database';

INSERT INTO `product` (`id`, `name`, `sell`, `created_at`) VALUES
(1, 'Coca Cola', '5000', '2021-05-01'),
(2, 'Pepsi', '7000', '2021-05-02'),
(3, 'Coke Zero', '19000', '2021-05-03'),
(4, 'Pepsi Max', '1500', '2021-05-04'),
(5, 'Diet Coke', '19000', '2021-05-05'),
(6, 'Pepsi Light', '3000', '2021-05-06'),
(7, 'Gatorade', '22000', '2021-05-07');

Tạo tệp điều khiển

Bạn phải tạo một mẫu bộ điều khiển mới, ngay sau đó thêm đoạn mã sau vào tệp app / Controllers / MorrisChartController.php .

<?php 
namespace App\Controllers;
use CodeIgniter\Controller;

class MorrisChartController extends Controller
{
    public function index() {
        return view('index');
    }
    
    public function startChart() {
        
        $db = \Config\Database::connect();
        $builder = $db->table('product');
        $query = $builder->select("COUNT(id) as count, sell as s, DAYNAME(created_at) as day");
        $query = $builder->where("DAY(created_at) GROUP BY DAYNAME(created_at), s");
        $query = $builder->orderBy("s ASC, day ASC")->get();
        
        $data['products'] = $query->getResult();
        return view('index', $data); 
    }
 
}

Tạo tệp tuyến đường

Để tạo lộ trình hiển thị biểu đồ, bạn cần truy cập app / Config / Routes.php và xác định các lộ trình dưới đây trong tệp.

$routes->setDefaultController('MorrisChartController');
$routes->get('/morris-charts', 'MorrisChartController::startChart');

Thiết lập chế độ xem tệp

Tạo tệp xem, thêm morris js với các phụ thuộc bắt buộc như jQuery và Raphael để xem mẫu; tạo biểu đồ div và xác định id tương ứng để tải các biểu đồ trong cả div.

Cuối cùng, thêm thẻ script ngay trước thẻ body; bạn có thể đặt các tùy chọn khác nhau bằng cách sử dụng đối tượng cấu hình; điều này làm cho việc tùy chỉnh biểu đồ dễ dàng.

Thêm mã vào tệp app / Views / index.php .

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Codeigniter Morris Stacked and Bar Charts Demo</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
</head>
<body>
	<body>
		<div class="container">
    		<div class="mt-5">
			<h2 class="text-center mb-5">Codeigniter Morris Stacked Chart Example</h2>
				<div id="MorrisStakcedChart" style="height: 400px; width: 100%"></div>
			</div>		
			<div class="mt-5">
			    <h2 class="text-center mb-5">Codeigniter Morris Bar Chart Example</h2>
				<div id="MorrisBarChart" style="height: 400px; width: 100%"></div>
			</div>
		</div>
        <!-- Add scripts -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
		<script>
			var serries = <?php echo json_encode($products); ?>;
			var data = serries,
				config = {
					data: <?php echo json_encode($products); ?>,
					xkey: 'day',
					ykeys: ['s'],
					labels: ['Sales this week'],
					fillOpacity: 0.7,
					hideHover: 'auto',
					resize: true,
					behaveLikeLine: true,
					stacked: true,
					barColors: "455"
			    };
			
			// Call bar chart
			config.element = 'MorrisBarChart';
			Morris.Bar(config);
			
			// Call stacked chart
			config.element = 'MorrisStakcedChart';
			config.stacked = true;
			Morris.Bar(config);
		</script>
	</body>
</html>

Chạy ứng dụng

Trong bước cuối cùng này, bạn phải mở terminal, gõ lệnh để chạy ứng dụng.

php spark serve

Bạn có thể nhờ sự trợ giúp của url sau để xem biểu đồ biến hình trong trình duyệt.

http://localhost:8080/morris-charts

Ví dụ về Codeigniter 4 Morris Stacked & Bar Chart

Sự kết luận

Chúng tôi đã chia sẻ một cách thông minh hơn để tìm hiểu về biểu đồ biến hình JavaScript; Đây chỉ là một sự khởi đầu; tuy nhiên, bạn có thể chuyển sang cấp độ tiếp theo và hiển thị dữ liệu trong biểu đồ thanh và biểu đồ xếp chồng thông qua một số cách tiếp cận khác.

Thông qua hướng dẫn dứt khoát này, chúng tôi luôn hướng tới mục tiêu cắt giảm đáng kể nỗ lực của bạn. Chúng tôi đã thấy các phương pháp thực dụng để tích hợp biểu đồ thanh morris và biểu đồ xếp chồng morris trong ứng dụng Codeigniter.

Nguồn: https://www.positronx.io/codeigniter-morris-stacked-bar-chart-tutorial-example/

#codeigniter #javascript

Amelia Williams

1618650571

Codeigniter Development Company| Codeigniter Web Developers-SISGAIN

SISGAIN brings you the best Codeigniter development services in New Jersey, USA. We provide you with applications that are safe and secure. Our team of Codeigniter web developers is experienced and skilled, they can give you a customized software application. With the help of our Codeigniter applications, we make the website world much easier. Codeigniter development helps to reduce the complexity. Our applications are simple, cost-effective, and elegant. Codeigniter applications development allows the developers to create broad solutions and provide them with great performance. We have PHP programming systems in our Codeigniter applications. For more information call us at +18444455767 or email us at hello@sisgain.com

#codeigniter development services #best codeigniter development company #codeigniter web developers #codeigniter development #codeigniter development company #software development