Đồ thị trong Laravel sử dụng Ajax và thư viện Morris

Rate this post

Nếu bạn có ứng dụng sử dụng Laravel hay(ứng dụng sử dụng framework khác) bạn đều có thể thống kê phân tích những mục như  sau:

  • Có bao nhiêu user đã được đăng ký trong tuần qua
  • Có bao nhiêu đơn hàng đã được đặt trong tháng qua
  • Có bao nhiêu bài đăng đã được đăng bởi tất cả user trong hệ thống web site của bạn

Việc bạn kết hợp giữa Ajax và thư viện Morris sẽ dễ dàng cho việc viết code hơn

Cách thức thực hiện:

Trước tiên bạn viết một phiên bản không sử dụng Ajax trong đồ thị mà dự liệu sẽ được code cứng trong trang HTML của bạn và rồi bạn viết ra một hàm API nhỏ, hàm này sẽ cung cấp dữ liệu với định dạng JSON. Dữ liệu của bạn đi theo cặp ngày và số giá trị đi kèm

  • 04-02-2014 – 3
  • 04-03-2014 – 10
  • 04-04-2014 – 5
  • 04-05-2014 – 17
  • 04-06-2014 – 6
  • etc.

Trong file HTLM của bạn bao gồm những file thư viện như sau

Bây giờ bạn có thể sử dụng thư viện và chuyển đổi dữ liệu dạng cặp vào đồ thị Morris. Với trục X là ngày, trục Y sẽ là giá trị

Và trên trình duyện ta thấy kết quả như  sau:

dothi

Thật tuyệt vời đúng không các bạn,  bây giờ dữ liệu của chúng ta không code cứng nữa mà lấy từ  cơ sở dữ liệu lên. Trong cơ sở dữ liệu lập 1 bảng orders và chúng ta truy vấn tổng số đơn hàng trong 1 ngày là bao nhiêu, chúng ta tính cho tới 30 ngày.

Chúng ta đặt đoạn code này trong file route hay file controller đều được.  Biến $stats sẽ thay thế code cứng trong trang HTML của bạn. Nếu bạn muốn tìm dữ liệu của 7 ngày hay 90 ngày thì buộc bạn phải refresh lại trang.

Hoàn chỉnh đoạn code trên trong file route như  sau

Trong file HTML thì đoạn code jQuery được viết như  sau

Kết hợp giữa HTML và Ajax như

Bạn có thể xem DEMO tại: http://laravel-charts.gopagoda.com/

Tải code tại: https://github.com/msurguy/laravel-charts