Vẽ Biểu đồ

Cách vẽ Biểu đồ trong app web iif

1. Chuẩn bị dữ liệu

Dữ liệu ra biểu đồ sẽ có dạng, có thể là xml hay dữ liệu lấy từ Query có kết nối SQL.

Nhom	GiaTri	GiaTri2	GiaTri3
Cafe	51.000	8.000	15.000
Nước uống	23.000	5.000	25.000
Sinh tố	45.000	9.000	57.000

*** Dữ liệu sinh ra dạng javascript có dạng
var data = google.visualization.arrayToDataTable([
          ['Nhom','GiaTri','GiaTri2'],
['Cafe',200000,120000],
['Nước uống',230000,70000],
['Sinh tố',30000,88000],
        ]);

** Cú pháp hay dùng để tạo dữ liệu trong query
SELECT CotNhom, Sum(CotGiaTri)
FROM tbDuLieu
WHERE condition
GROUP BY CotNhom;
ORDER BY Sum(CotGiaTri) DESC;

2. Tạo đường dẫn truy cập
/adminxml/chart.aspx?src=file.xml&type=x&col=a,b,c&title=x&width=100&height=500
                  &title_H=tieu_de_ben_duoi
*** Url thêm
sort: tên cột cần sắp xếp lại dữ liệu đầu vào
rowtop: lọc các bảng ghi đầu, nếu có 100 bảng ghi, lấy 10 bảng ghi đầu hãy nhập 10

* src: nguồn dữ liệu.
-    Tên file xml, ví dụ bangluong.xml
- Gọi trong Query
        Ví dụ có query thongke gõ
q:thongke hay q1:thongke   số 1 là chỉ số bảng của query, nếu để trống thì lấy bảng vị trí 0.

* type: kiểu biểu đồ
    AreaChart : biểu đồ khối
    LinesChart: biểu đồ viền
    PieChart: hình tròn, chỉ cần 1 cột tiêu đề và cột giá trị
         Thêm url có tên:
   is3D=true / false   để hiển thị 3D
           pieHole: 0.0   -> 0.9 (thêm vòng tròn ở giữa)

Biểu đồ

BarChart: hình thanh ngang
Ví dụ: /adminxml/chart.aspx?src=chart_demo.xml&type=BarChart&is3D=true&title=Biểu đồ&col=Nhom,GiaTri,GiaTri2&width=100&height=500&title_H=Doanh thu

* col: danh sách cột, các cột cách nhau dấu ,
        Ví dụ: col=Nhom,GiaTri,GiaTri1,GiaTr2
        ** Áp dụng format:
        col=Nhom:Nhóm {0},GiaTri,GiaTri2,GiaTri3
              * Thêm dấu : vào {0} định dạng giá trị hiện tại.

       Áp dụng format cột ngày * Cột sinh ra trong Table phải là kiểu ngày để sử dụng cú pháp Format
                 col=Ngay:dd/MM,Tien

** Áp dụng thay đổi tên cột trên biểu đồ:
col=Nhom::Nhóm,GiaTri::Giá trị,GiaTri1,GiaTr2

* title: Tiêu đề đồ thị, nhập bất kỳ tiêu đề sẽ hiện ra trên đầu.
* width=100: độ rộng biểu đồ mặc định bằng %
* height=500, chiểu cao biểu đồ mặc định bằng px
* title_H: tiêu đề thanh bên dưới, rỗng sẽ lấy tên cột đầu tiên

Vẽ Biểu đồ

Cách vẽ Biểu đồ trong app web iif

Mục liên quan: