TRẦN VĂN BÌNH MASTER: 📊 BÀI 21: VẼ BIỂU ĐỒ REAL-TIME TRÊN WEB VỚI CHART.JS + FLASK API

Chủ Nhật, 20 tháng 7, 2025

📊 BÀI 21: VẼ BIỂU ĐỒ REAL-TIME TRÊN WEB VỚI CHART.JS + FLASK API

🎯 1. Mục tiêu

Tạo biểu đồ cột (bar chart) điểm sinh viên ngay trong trang web
Dữ liệu lấy từ REST API Flask (/api/students)
Biểu đồ cập nhật mỗi 5 giây → hiệu ứng realtime

⚙️ 2. Yêu cầu

Backend: Flask + pandas (đã làm ở bài 20)
Frontend: HTML + JavaScript + Chart.js (chạy hoàn toàn trên trình duyệt)

🧱 3. Cập nhật file `templates/index.html`

Thay file index.html như sau:

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Biểu đồ điểm sinh viên (Chart.js + Flask)</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body { font-family: Arial; padding: 20px; max-width: 800px; margin: auto; }
    canvas { max-width: 100%; }
  </style>
</head>
<body>
  <h2>Biểu đồ cột: Điểm sinh viên</h2>
  <canvas id="barChart"></canvas>

  <script>
    let chart;

    async function fetchData() {
      const res = await fetch("/api/students");
      const data = await res.json();

      const labels = data.map(sv => sv.name);
      const scores = data.map(sv => sv.score);

      return { labels, scores };
    }

    async function renderChart() {
      const { labels, scores } = await fetchData();

      const ctx = document.getElementById("barChart").getContext("2d");

      if (chart) chart.destroy(); // xóa biểu đồ cũ nếu có

      chart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: 'Điểm sinh viên',
            data: scores,
            backgroundColor: 'rgba(75, 192, 192, 0.6)'
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: { beginAtZero: true, max: 10 }
          }
        }
      });
    }

    renderChart(); // lần đầu
    setInterval(renderChart, 5000); // cập nhật mỗi 5 giây
  </script>
</body>
</html>

✅ 4. Giữ nguyên `app.py` từ Bài 20

Bạn không cần thay đổi gì, vì /api/students vẫn trả về JSON đầy đủ.

▶️ 5. Cách chạy ứng dụng

Đảm bảo bạn có file app.py và templates/index.html
Chạy:

bash
python app.py

Truy cập: http://127.0.0.1:5000/
Thêm dữ liệu qua Postman hoặc API hoặc kết hợp với form bài trước

📈 6. Kết quả

Giao diện web sẽ hiện biểu đồ cột
Biểu đồ sẽ cập nhật tự động mỗi 5 giây
Nếu thêm sinh viên mới → biểu đồ tự thay đổi!

🎨 7. Mẹo tùy chỉnh Chart.js

Thuộc tính	Ý nghĩa
`type: 'bar'`	Kiểu biểu đồ (bar, line, pie, doughnut...)
`backgroundColor`	Màu cột
`scales.y.max`	Đặt giá trị trục y tối đa
`chart.destroy()`	Xóa biểu đồ trước khi render lại
`setInterval(fn, ms)`	Gọi lại fn mỗi ms mili giây (dùng để làm realtime)

✅ 8. Kết luận

Bạn đã kết nối Flask API backend với biểu đồ động frontend
Chart.js cho phép hiển thị dữ liệu sinh động, đẹp, dễ dùng
Có thể áp dụng để:
- Hiển thị báo cáo thống kê người dùng
- Realtime dashboard cho server, điểm, tài chính, IoT…

=============================
Website không chứa bất kỳ quảng cáo nào, mọi đóng góp để duy trì phát triển cho website (donation) xin vui lòng gửi về STK 90.2142.8888 - Ngân hàng Vietcombank Thăng Long - TRAN VAN BINH
=============================
Nếu bạn không muốn bị AI thay thế và tiết kiệm 3-5 NĂM trên con đường trở thành DBA chuyên nghiệp hay làm chủ Database thì hãy đăng ký ngay KHOÁ HỌC ORACLE DATABASE A-Z ENTERPRISE, được Coaching trực tiếp từ tôi với toàn bộ bí kíp thực chiến, thủ tục, quy trình của gần 20 năm kinh nghiệm (mà bạn sẽ KHÔNG THỂ tìm kiếm trên Internet/Google) từ đó giúp bạn dễ dàng quản trị mọi hệ thống Core tại Việt Nam và trên thế giới, đỗ OCP.
- CÁCH ĐĂNG KÝ: Gõ (.) hoặc để lại số điện thoại hoặc inbox https://m.me/tranvanbinh.vn hoặc Hotline/Zalo 090.29.12.888
- Chi tiết tham khảo:
https://bit.ly/oaz_w
=============================
2 khóa học online qua video giúp bạn nhanh chóng có những kiến thức nền tảng về Linux, Oracle, học mọi nơi, chỉ cần có Internet/4G:
- Oracle cơ bản: https://bit.ly/admin_1200
- Linux: https://bit.ly/linux_1200
=============================
KẾT NỐI VỚI CHUYÊN GIA TRẦN VĂN BÌNH:
📧 Mail: binhoracle@gmail.com
☎️ Mobile/Zalo: 0902912888
👨 Facebook: https://www.facebook.com/BinhOracleMaster
👨 Inbox Messenger: https://m.me/101036604657441 (profile)
👨 Fanpage: https://www.facebook.com/tranvanbinh.vn
👨 Inbox Fanpage: https://m.me/tranvanbinh.vn
👨👩 Group FB: https://www.facebook.com/groups/DBAVietNam
👨 Website: https://www.tranvanbinh.vn
👨 Blogger: https://tranvanbinhmaster.blogspot.com
🎬 Youtube: https://www.youtube.com/@binhguru
👨 Tiktok: https://www.tiktok.com/@binhguru
👨 Linkin: https://www.linkedin.com/in/binhoracle
👨 Twitter: https://twitter.com/binhguru
👨 Podcast: https://www.podbean.com/pu/pbblog-eskre-5f82d6
👨 Địa chỉ: Tòa nhà Sun Square - 21 Lê Đức Thọ - Phường Mỹ Đình 1 - Quận Nam Từ Liêm - TP.Hà Nội

=============================
AI, trí tuệ nhân tạo, artificial intelligence, machine learning, deep learning, LLM, ChatGPT, DeepSeek, Grok, oracle tutorial, học oracle database, Tự học Oracle, Tài liệu Oracle 12c tiếng Việt, Hướng dẫn sử dụng Oracle Database, Oracle SQL cơ bản, Oracle SQL là gì, Khóa học Oracle Hà Nội, Học chứng chỉ Oracle ở đầu, Khóa học Oracle online,sql tutorial, khóa học pl/sql tutorial, học dba, học dba ở việt nam, khóa học dba, khóa học dba sql, tài liệu học dba oracle, Khóa học Oracle online, học oracle sql, học oracle ở đâu tphcm, học oracle bắt đầu từ đâu, học oracle ở hà nội, oracle database tutorial, oracle database 12c, oracle database là gì, oracle database 11g, oracle download, oracle database 19c, oracle dba tutorial, oracle tunning, sql tunning , oracle 12c, oracle multitenant, Container Databases (CDB), Pluggable Databases (PDB), oracle cloud, oracle security, oracle fga, audit_trail,oracle RAC, ASM, oracle dataguard, oracle goldengate, mview, oracle exadata, oracle oca, oracle ocp, oracle ocm , oracle weblogic, postgresql tutorial, mysql tutorial, mariadb tutorial, ms sql server tutorial, nosql, mongodb tutorial, oci, cloud, middleware tutorial, hoc solaris tutorial, hoc linux tutorial, hoc aix tutorial, unix tutorial, securecrt, xshell, mobaxterm, putty