Vẽ biểu đồ thống kê trong php
Giới thiệuHiện nay các website quản lý càng trở nên phong phú và đa dạng nên việc thống kê quản lý và báo cáo là điều khá phổ biến. Để việc thống kê dữ liệu trở nên trực quan hơn thì biểu đồ là một trong những công cụ hỗ trợ tuyệt vời. Biểu đồ là gì? Ưu điểm của việc biểu diễn dữ liệu bằng biểu đồ là gì? Biểu đồ là hình vẽ biểu diễn các số liệu, thường dùng để so sánh nhận ra sự khác biệt và biết được cụ thể tỷ lệ của từng thành phần so với tổng thể. Ưu điểm của việc biểu diễn dữ liệu bằng biểu đồ là giúp dễ dàng so sánh dữ liệu đưa ra dự đoán xu thế tăng giảm của các số liệu. Có rất nhiều loại biểu đồ khác nhau và việc vẽ các biểu đồ này trên website rất dễ dàng bởi vì hiện nay đã có rất nhiều thư viện hỗ trợ như ChartJS là gì? Chart.js là một thư viện mã nguồn mở hỗ trợ các loại biểu đồ: bar, line, area, pie (doughnut), radar, polar... ChartJS mặc định là responsive, giúp cho việc hoạt động trên đa nền tảng tốt hơn. Chắc chắn ChartJS là một trong những thư viện mã nguồn mở về biểu đồ ấn tượng nhất trong thời gian gần đây. Bài viết này mình sẽ sử dụng ChartJS kết hợp với PHP, MySQL để biểu diễn đồ thị một cách đơn giản nhất, từ đó bạn có thể tự custom thêm để biểu đồ của bạn trở nên phù hợp và đẹp hơn. Tạo cơ sở dữ liệuĐầu tiên ta cần tạo một database để chứa các thông tin cần tạo biểu đồ:
Cấu trúc thư mụcSẽ có một thư mục gốc gồm có các file như data.php để lấy dữ liệu từ phía server, database.php để kết nối đến database, file index.php để biểu diễn dữ liệu dưới dạng biểu đồ, và thư mục js chưa các thư viện như jquery và Chart.js. 1. database.phpTiếp theo cần một file để kết nối với cơ sở dữ liệu MySQL:
2. data.phpFile data.php sẽ truy vấn bảng và xuất dữ liệu được trích xuất từ cơ sở dữ liệu MySQL và encode dưới dạng json.
Để kiểm tra kết quả các bạn có thể truy cập vào đường dẫn đến file ví dụ: http://localhost/graph/data.php 3. index.php
Trong đó ta sử dụng hàm post lên file data.php đã xử lý trước đó để lấy dữ liệu được trả về dưới dạng JSON. Sau khi nhận được data trả về sẽ tiền hành gán vào từng label và data cho từng label đó. Khi gán dữ liệu xong thì ta có thể tiến hành custom màu cho biểu đồ bằng cách set
Sau khi hoàn thành các bước trên các bạn tiền hành tạo một Chart với kiểu biểu đồ bạn muốn. Trong đó Chart.js hỗ trợ rất nhiều loại biểu đồ như:
Hoặc có thể vẽ biểu đồ cột như sau
Kết luậnBài viết trên là một ví dụ đơn giản về ChartJS hy vọng nó sẽ giúp bạn trong bước đầu tìm hiểu về biểu đồ trên website. Để tìm hiểu thêm các bạn có thể tham khảo tại Chart.js hoặc một số tài liệu khác để custom biểu đồ cho đẹp hơn. |