Sử dụng Asp.net Chart Control để vẽ biểu đồ trên website

Sau mấy tuần bận rộn với một đống công việc phải giải quyết, hôm nay được một ngày rảnh rỗi. Lại ngồi viết một bài cho phong phú website của mình, sau nữa là có chỗ để lúc nào cần xem lại copy code cho nhanh (^.^). Ở bài này mình làm một ví dụ về sử dụng Asp.net Chart Control để vẽ biểu đồ trên web, với số liệu thống kê được lấy từ CSDL SQL.

1. CSDL

- Đầu tiên giả sử mình tạo 1 table chứa dữ liệu cần thống kê, ví dụ ở đây là thống kê số lượng bài viết trong từng chuyên mục.

2. Project.

- Tiếp đến ta tạo 1 website ví dụ để thực hiện hiển thị dữ liệu ở bảng thiết kế ở trên dưới dạng 1 biểu đồ.

- Ở trang Sample01.aspx, ta kéo Chart Control và 1 DropDownList từ toolbox vào như sau

<table style="width: 99%">
        <tr>
            <td style="width: 150px; text-align: right">
                Loại biểu đồ:
            </td>
            <td>
                <asp:DropDownList ID="drTypeChart" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drTypeChart_SelectedIndexChanged">
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Chart ID="Chart1" runat="server" Width="800" Height="400" Palette="SeaGreen">
                    <Series>
                        <asp:Series Name="Category" ChartArea="ChartArea1">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                        </asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
            </td>
        </tr>
    </table>

- DropDownlist ở đây mình sử dụng để thay đổi các kiểu biểu đồ, hiện tại khi sử dụng Asp.net Chart Control có rất nhiều kiểu biểu đồ cho mình lựa chọn tùy vào nhu cầu cụ thể. Để lấy danh sách các kiểu biểu đồ ta dùng hàm sau.

private void LoadChartType()
    {
        string[] chartType = Enum.GetNames(typeof(SeriesChartType));
        drTypeChart.DataSource = chartType;
        drTypeChart.DataBind();
        drTypeChart.Items.Insert(0, new ListItem("--Lựa chọn--", "Column"));
    }

- Ở ví dụ hiện tại, mình sử dụng LinQ để thao tác với CSDL, các bạn có thể dùng ADO hay Entity cũng hoàn toàn tương tự. Lấy dữ liệu từ tblCategory thiết kế ở trên và Bind vào Chart Control để phục vụ việc hiển thị

private void LoadChart()
    {
        try
        {
            //get data from SQL
            var tb = from data in _db.tblCategories
                     select new
                     {
                         col1 = data.Category,
                         col2 = data.NumberArticle
                     };

            //Set chart data source
            Chart1.DataSource = tb;

            //Set series members names for the X and Y values
            Chart1.Series["Category"].XValueMember = "col1";
            Chart1.Series["Category"].YValueMembers = "col2";

            //Data bind to the selected data source
            Chart1.DataBind();

            //name x,y
            Chart1.ChartAreas["ChartArea1"].AxisX.Title = "Số bài viết";
            Chart1.ChartAreas["ChartArea1"].AxisY.Title = "Chuyên mục";
        }
        catch (Exception ms)
        {
            Response.Write(ms.Message);
        }
    }

- Table trong CSDL của bạn có thể thiết kế với nhiều trường hơn, nhưng khi thống kê mình cần chọn tiêu chí thống kê cụ thể để lựa chọn column cho phù hợp. Ở đây mục đích là mình thống kê số lượng bài viết ở mỗi chuyên mục, nên mình chọn 2 column là Category & NumberArticle để lấy ra trước khi Bind dữ liệu vào Chart Control.

//get data from SQL
var tb = from data in _db.tblCategories
                     select new
                     {
                         col1 = data.Category,
                         col2 = data.NumberArticle
                     };

- Code đầy đủ của Sample01.aspx.cs sẽ như sau

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Configuration;
using System.Web.UI.DataVisualization.Charting;

public partial class Sample01 : System.Web.UI.Page
{
    #region declare
    DataClassesDataContext _db = new DataClassesDataContext(ConfigurationManager.ConnectionStrings["chartConnectionString"].ConnectionString);
    #endregion

    #region load data
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadChartType();

            LoadChart();
        }
    }
    private void LoadChartType()
    {
        string[] chartType = Enum.GetNames(typeof(SeriesChartType));
        drTypeChart.DataSource = chartType;
        drTypeChart.DataBind();
        drTypeChart.Items.Insert(0, new ListItem("--Lựa chọn--", "Column"));
    }

    private void LoadChart()
    {
        try
        {
            //get data from SQL
            var tb = from data in _db.tblCategories
                     select new
                     {
                         col1 = data.Category,
                         col2 = data.NumberArticle
                     };

            //Set chart data source
            Chart1.DataSource = tb;

            //Set series members names for the X and Y values
            Chart1.Series["Category"].XValueMember = "col1";
            Chart1.Series["Category"].YValueMembers = "col2";

            //Data bind to the selected data source
            Chart1.DataBind();

            //name x,y
            Chart1.ChartAreas["ChartArea1"].AxisX.Title = "Số bài viết";
            Chart1.ChartAreas["ChartArea1"].AxisY.Title = "Chuyên mục";
        }
        catch (Exception ms)
        {
            Response.Write(ms.Message);
        }
    }
    #endregion


    #region action
    protected void drTypeChart_SelectedIndexChanged(object sender, EventArgs e)
    {
        Chart1.Series[0].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), drTypeChart.SelectedValue);
        LoadChart(); 
    }
    #endregion
}

- Chúng ta cũng cần phải khai báo thêm trong webconfig. Trong httpHandlers của system.web ta thêm thẻ sau

<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

- Trong handlers của system.webSever ta thêm thẻ sau

<remove name="ChartImageHandler"/>
			<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

- Và bây giờ hãy chạy ví dụ vừa tạo để xem thành quả.

- Trong ví dụ đính kèm cuối bài viết, mình còn làm thêm Sample02.aspx là 1 ví dụ về thống kê tỷ lệ việc làm của Asp.Net & PHP của 12 tháng trong năm, tất nhiên dữ liệu mình tự nghĩ ra (*.*). Các bạn có thể download ví dụ về tham khảo cụ thể.

Download Source

Related Post


Tài liệu Video học Asp.net MVC 4.0 Tiếng Việt
Wednesday, September 10, 2014
Hôm nay lang thang trên mạng tìm được một bộ video về Asp.Net MVC4 khá hay và đầy đủ. Thực sự thấy biết ơn tác giả bộ video này đã bỏ thời gian chia sẻ kiến thức đến mọi người...
Upload multiple file trong Asp.net
Tuesday, April 29, 2014
Hôm nay tôi muốn giới thiệu một đoạn code nhỏ nhưng khá hay, cho phép upload nhiều file trong Asp.net. Chức năng này cho phép người sử dụng lựa chọn nhiều file trước khi click Upload. Và trả về thông báo sau khi upload thành công ở mỗi file lựa chọn.
Search

Đăng ký nhận bài mới


Category

Blog Archive