[Lập trình JSP – Servlet] Bài 17: Biểu đồ thống kê

Lập trình JSP – Servlet cho phép các nhà phát triển phần mềm xây dựng nội dung động cho website sử dụng nền tảng Java. Tiếp ngay sau đây sẽ là phần hướng dẫn xây dựng biểu đồ thống kê trong loạt video hướng dẫn xây dựng website bán hàng bằng JSP – Servlet mong các bạn chú ý đón xem.

Google Chart là một công cụ giúp bạn tạo ra những biểu đồ một cách đơn giản với đầy đủ các loại biểu đồ như biểu đồ tròn, biểu đồ cột… và chúng ta sẽ áp dụng API này làm biểu đồ thống kê sử dụng JSP – Servlet.

Ở trong phần hướng dẫn tạo biểu đồ thống kê sử dụng JSP – Servlet mình sẽ cần chọn ra một trong số những loại biểu đồ mà Google cung cấp để thực hiện, ở đây mình sẽ giới thiệu đến các bạn một trong 2 loại mình muốn giới thiệu đến các bạn là biểu đồ hình cột và biểu đồ hình tròn.

Để thể hiện biểu đồ bạn hãy sử dụng đoạn mã mình cung cấp bên dưới đây để tạo biểu đồ thống kê sử dụng JSP – Servlet:

See the Pen ZOEEqY by Blog Kênh Lập Trình (@blogkenhlaptrinh) on CodePen.0

Biểu đồ thể hiện dạng cột

See the Pen dXyyQV by Blog Kênh Lập Trình (@blogkenhlaptrinh) on CodePen.0

Biểu đồ thể hiện dạng tròn

Đó là HTML để thể hiện biểu đồ, còn phần còn lại là bạn sẽ viết câu lệnh truy vấn để lấy dữ liệu từ trong cơ sở dữ liệu MySQL lên sau đó tính toán để thể hiện được các thông số ra biểu đồ, như vậy thì chúng ta đã tạo thành công biểu đồ thống kê sử dụng JSP – Servlet nếu như bạn thực hiện theo các bước trên.

public ArrayList<Value> getAll() {
     try {
          CategoryDAO categoryDAO = new CategoryDAO();
          ProductDAO productDAO = new ProductDAO();
          ArrayList<Value> list = new ArrayList<>();
          for (Category category : categoryDAO.getListCategory()) {
              list.add(new Value(category.getCategoryName(),
                   productDAO.getListProductByCategory(category.getCategoryID()).size()));
          }
          return list;
     } catch (SQLException ex) {
          Logger.getLogger(ChartDAO.class.getName()).log(Level.SEVERE, null, ex);
     }
     return null;
}

public ArrayList<Value> getAll() {

try {

CategoryDAO categoryDAO = new CategoryDAO();

ProductDAO productDAO = new ProductDAO();

ArrayList<Value> list = new ArrayList<>();

for (Category category : categoryDAO.getListCategory()) {

list.add(new Value(category.getCategoryName(),

productDAO.getListProductByCategory(category.getCategoryID()).size()));

}

return list;

} catch (SQLException ex) {

Logger.getLogger(ChartDAO.class.getName()).log(Level.SEVERE, null, ex);

}

return null;

}

Và cuối cùng phần hiển thị JSP bạn sẽ sửa lại để lấy dữ liệu hiển thị ra biểu đồ, nếu chưa hiểu lắm bạn hãy xem video hoặc tải mã nguồn bên dưới.

var data = google.visualization.arrayToDataTable([['Country', 'Area(square km)'], 
     <c:forEach var="item" items="${listItem}">['${item.name}',${item.value}],</c:forEach>
]);

var data = google.visualization.arrayToDataTable([['Country', 'Area(square km)'],

<c:forEach var="item" items="${listItem}">['${item.name}',${item.value}],</c:forEach>

]);

Bạn có thể xem video hướng dẫn lập trình JSP- Servlet ngay bên dưới:

Hoặc bạn có thể tải mã nguồn cho bài viết lập trình JSP – Servlet xây dựng biểu đồ thống kê tại đường dẫn sau:

Download link Google Drive

Download link Vipshare

Download link Mshare

Xem thêm một số bài viết liên quan lập trình JSP – Servlet:

Video hướng dẫn xây dựng website bán hàng sử dụng JSP – Servlet:
Hướng dẫn thiết kế giao diện cho website
Hướng dẫn sử dụng JDBC kết nối cơ sở dữ liệu MySQL
Hiển thị danh mục sản phẩm
Hiển thị sản phẩm theo danh mục
Hiển thị thông tin chi tiết sản phẩm

Lời kết: Như vậy chúng ta vừa tìm hiểu về hướng dẫn xây dựng biểu đồ thống kê trong loạt bài xây dựng website bán hàng bằng JSP – Servlet. Ngoài ra, các bạn có thể xem thêm các bài viết khác trong chuyên mục lập trình JSP – Servlet để có thể tự xây dựng hoàn chỉnh một website cho riêng mình.

(Tác giả: Tùng Dương)

16 thoughts on “[Lập trình JSP – Servlet] Bài 17: Biểu đồ thống kê”

Toan

11/03/2017 at 6:32 Chiều - Edit

sao no k hien bieu do vay ban

admin
13/03/2017 at 5:15 Chiều - Edit
Reply
vẫn bt mà bạn

Toan

11/03/2017 at 9:12 Chiều - Edit

sao mình thêm nó vô bị lỗi vậy “”

admin
13/03/2017 at 5:15 Chiều - Edit
Reply
vẫn bt mà bạn
admin
19/03/2017 at 7:18 Chiều - Edit
Reply
bạn bị lỗi gì?

Toàn

28/05/2017 at 1:33 Sáng - Edit

Của mình cũng ko hiện biểu đồ lên.
Mình thử getAttribute(“listItem”) thành ArrayList rồi hiển thị ra jsp cũng ko đc @@

admin
29/05/2017 at 10:12 Sáng - Edit
Reply
Bạn chèn thư viện đầy đủ chưa?

Nguyen Yen

07/12/2017 at 2:56 Chiều - Edit

Ad ơi cho em hỏi chút ạ! Em download code về chạy thử sao nó ra lỗi này ạ:
org.apache.jasper.JasperException: PWC6149: The -uriroot option must specify a pre-existing directory
C:\Users\Yen\Desktop\Lesson 14 Xây dựng chức năng quản lý danh mục, sản phẩm\shop\nbproject\build-impl.xml:936: Java returned: 1
BUILD FAILED (total time: 0 seconds)
Em chưa gặp lỗi này bao giờ mong Ad chỉ ạ?

Admin_NCM
08/12/2017 at 9:37 Sáng - Edit
Reply
có nhận được thư viện

phải có mạng mới được nha bạn.
1. Nguyen Yen
  08/12/2017 at 11:50 Sáng - Edit
  Reply
  Vâng ! Máy tính em có mạng bình thường ạ. Em không hiểu ý Ad lắm ạ ? Làm thế nào để khắc phục ạ?