Vẽ Biểu đồ

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.
 

*** 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&title_V=tieu_de_ben_trai
*** 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)

   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