Hướng dẫn tích hợp biểu đồ Grafana trong trang web

30/12/2020

Ở các bài viết trước chúng ta đã biết cách cài đặt TIG Stack để giám sát các server, dịch vụ,…. Trong bài viết này, ta sẽ biết thêm được cách tích hợp các biểu đồ đó trong trang web, phục vụ cho nhiều mục đích khác nhau .

B1 : Thay đổi trong file grafana.ini :

vi /etc/grafana/grafana.ini

Chỉnh sửa các dòng sau :

B2 : Trên dashboard của Grafana, vào Panel muốn nhúng, chọn Share :

B3 : Trong tab Embed , copy đoạn code thẻ <iframe> :

Lưu ý :

  • Xóa đoạn &from=xxxxxxxxxxxxx&to=xxxxxxxxxxxxx trong link để biểu đồ hiển thị là real-time
  • Thay đổi &refresh=xx với xx là thời gian update cho panel
  • Thêm &theme=light nếu muốn đổi panel thành nền sáng
  • Thay đổi kích cỡ iframe qua thuộc tính width và height

B4 :  Paste thẻ <iframe> vừa copy vào trong code html của trang web muốn nhúng (ở đây ta sẽ thử với 1 đoạn code HTML đơn giản) :

<!DOCTYPE html> <html>   <head>   </head>   <body>     <div style="text-align: center">       <iframe src="https://grafana.testings123.space/d-solo/9hjjWh6Wk/practice?panelId=95&orgId=1&theme=light&refresh=5s&var-host=jitsi_host&var-data_source=Jitsi&var-interval=$__auto_interval_interval" width="450" height="200" frameborder="0"></iframe>     </div>      </body> </html>

B5 : Kết quả :

ONET IDC thành lập vào năm 2012, là công ty chuyên nghiệp tại Việt Nam trong lĩnh vực cung cấp dịch vụ Hosting, VPS, máy chủ vật lý, dịch vụ Firewall Anti DDoS, SSL… Với 10 năm xây dựng và phát triển, ứng dụng nhiều công nghệ hiện đại, ONET IDC đã giúp hàng ngàn khách hàng tin tưởng lựa chọn, mang lại sự ổn định tuyệt đối cho website của khách hàng để thúc đẩy việc kinh doanh đạt được hiệu quả và thành công.
Bài viết liên quan

[Command] [df][du]Kiểm tra dung lượng đĩa trong Linux

Là một admin hệ thống, bạn luôn muốn chắc chắn rằng bạn có đủ không gian đĩa để cho máy...
30/12/2020

Openstack Kolla [Phần 3] Hướng dẫn tạo máy ảo trên cụm Openstack

Tiếp tục với series hướng dẫn vài đặt OpenStack bằng Kolla Ansible. Ở bài viết những bài viết...
30/12/2020

[DNS] Tìm hiểu về lệnh DIG

Với lệnh dig, bạn có thể truy vấn thông tin về các bản ghi DNS, bao gồm: host addresses, mail exchanges,...
30/12/2020
Bài Viết

Bài Viết Mới Cập Nhật

Huớng dẫn dùng proxy cho ios, iphone 2023
23/09/2023

Cách gắn set proxy cho điện thoại android, oppo, giả lập android, Ldplayer Bằng Proxydroid
20/09/2023

Mua Proxy Socks5 VN Chơi Game Gia Lập Tăng Cường Trải Nghiệm Chơi Game
22/06/2023

Mua Proxy Mỹ, Us Nuôi Tài Khoản Etsy, eBay Tìm Hiểu Về Mua Proxy Mỹ tại Onet.com.vn
22/06/2023

Mua Proxy Game – Giải pháp tuyệt vời cho việc chơi game trên mạng mà không bị giới hạn về vị trí địa lý
03/06/2023