Ngôn ngữ ASP.NET - Điều khiển Chart

Đối tượng điều khiển Chart

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.
Trong ví dụ nảy chúng ta sẽ tạo một trang web sẽ biều đồ thống kê xem mỗi nhà xuất bản có bao nhiêu cuốn sách đang bán

Bước 1: Tao store procedure 

Create PROC  ThongKeSach

as
SELECT        dbo.NHAXUATBAN.TenNXB, COUNT(dbo.SACH.MaNXB) AS SL
FROM            dbo.NHAXUATBAN INNER JOIN
                         dbo.SACH ON dbo.NHAXUATBAN.MaNXB = dbo.SACH.MaNXB
GROUP BY dbo.NHAXUATBAN.TenNXB

Bước 2 : Kéo thả điều khiển Chart từ ToolBox vào màn hình design

Bước 2: Chọn database -> Chọn kết nối -> Chọn nguồn dữ liệu 

Chọn Next  -> Finish

Bước 5: Chọn loại biểu đồ

Code trang web BookChart.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BookChart.aspx.cs" Inherits="BookChart" %>

<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table style="width: 99%">
        <tr>
            <td style="width: 150px;font-weight:bold;color:red" align="center">
                Biểu đồ NXB - Sách</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1">
                    <series>
                        <asp:Series Name="Series1" XValueMember="TenNXB" YValueMembers="SL">
                        </asp:Series>
                    </series>
                    <chartareas>
                        <asp:ChartArea Name="ChartArea1">
                        </asp:ChartArea>
                    </chartareas>
                </asp:Chart>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:QLBANSACH1ConnectionString %>" SelectCommand="ThongKeSach" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

Thực thi trang web trên cho kết quả: