Sử dụng Asp.Net Chart để tạo biểu đồ kiểu Pie trong Asp.net

By Unknown - Tuesday, June 23, 2015 - No Comments

(Sử dụng Asp.Net Chart để tạo biểu đồ kiểu Pie lấy dữ liệu từ SQL Server) –Biểu đồ là công cụ không thể thiếu trong các ứng dụng và phần mềm. Vì từ biểu đồ người xem có thể dễ dàng đánh giá, so sánh để từ đó đưa ra những quyết định, kế hoạch phù hợp hơn. Hiện có nhiều Control cho phép người lập trình tạo biểu đồ, bài viết dưới đây sẽ hướng dẫn các bạn cách sử dụng Asp.Net Chart Control để tạo biểu đồ, dữ liệu để tạo biểu đồ sẽ được lấy từ CSDL Northwind. Biểu đồ này sẽ cho người sử dụng biết được số lượng và tỷ lệ % của từng loại sản phẩm.

Xem những Video hay dành cho thiếu nhi - Nghe trên Youtube

- B1: Download CSDL Northwind

- B2: Bổ xung thêm store:
+ Pro_ProductByCategory: Đếm số sản phẩm theo từng Category

USE [Northwind]

CREATE PROCEDURE [dbo].[Pro_ProductByCategory]

declare @strSQL nvarchar(1000)

declare @strWhere nvarchar(500)

declare @strOrder nvarchar (50)

set @strSQL= 'SELECT Products.CategoryID, Categories.CategoryName,COUNT(Products.ProductID) AS TotalNumber

FROM Products INNER JOIN

Categories ON Products.CategoryID = Categories.CategoryID

GROUP BY Products.CategoryID, Categories.CategoryName

ORDER BY dbo.Categories.CategoryName'

set @strSQL=@strSQL

print @strSQL

exec sp_executesql @strSQL

- B3: Tạo Project trong Microsoft Visual Studio 2010

Trong Visual Studio tạo 1 Class có tên: Utility và nhập đoạn Code phía dưới cho Class này.

C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data.SqlClient;

using System.Data;

using System.Configuration;

namespace AspHorizontalBarsChart

{

public class SqlDataProvider

{

#region "Membres Prives"

private string _connectionString;

#endregion

#region "Constructeurs"

public SqlDataProvider()

{

try

{

_connectionString = ConfigurationManager.ConnectionStrings["SiteSqlServer"].ConnectionString;

}

catch

{

}

#endregion

#region "Proprietes"

public string ConnectionString

{

get { return _connectionString; }

}

#endregion

#region "Functions"

public DataTable FillTable(string ProcName, params ObjectPara[] Para)

{

try

{

DataTable tb = new DataTable();

SqlDataAdapter adap = new SqlDataAdapter(ProcName, _connectionString);

adap.SelectCommand.CommandType = CommandType.StoredProcedure;

if (Para != null)

{

foreach (ObjectPara p in Para)

{

adap.SelectCommand.Parameters.Add(new SqlParameter(p.Name, p.Value));

}

adap.Fill(tb);

return tb;

}

catch

{

return null;

}

#endregion

}

public class ObjectPara

{

string _name;

object _Value;

public ObjectPara(string Pname, object PValue)

{

_name = Pname;

_Value = PValue;

}

public string Name

{

get { return _name; }

set { _name = value; }

}

public object Value

{

get { return _Value; }

set { _Value = value; }

}

VB.NET Code

Imports System.Data.SqlClient

Imports System.Data

Namespace AspPieChart

Public Class SqlDataProvider

#Region "Membres Prives"

Shared _IsError As Boolean = False

Private _connectionString As String

#End Region

#Region "Constructeurs"

Public Sub New()

Try

_connectionString = ConfigurationManager.ConnectionStrings("SiteSqlServer").ConnectionString

_IsError = False

Catch ex As Exception

_IsError = True

End Try

End Sub

#End Region

#Region "Proprietes"

Public ReadOnly Property ConnectionString() As String

Get

Return _connectionString

End Get

End Property

#End Region

#Region "Functions"

Public Function FillTable(ByVal sql As String) As DataTable

Try

Dim tb As New DataTable

Dim adap As New SqlDataAdapter(sql, _connectionString)

adap.Fill(tb)

Return tb

Catch ex As Exception

Return Nothing

End Try

End Function

#End Region

End Class

End Namespace

Chú ý: Thuộc tính SiteSqlServer chính là chuỗi Connect với SQL Server trong file Web.Config

- B4: Mở file Default.aspx dưới dạng Design, kích vào nhóm Data trên thanh Toolbox

- B5: Kéo Control Chart vào file Default.aspx, file sẽ có mã HTML như phía dưới

<%@ Page Title="Asp.Net Pie Bars Chart" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AspPieChart._Default" %>

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

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h1>

Asp.Net Pie Chart

</h1>

<asp:Chart ID="ucChart" runat="server" Height="450px" Width="450px">

<asp:Series ChartType="Pie" Name="Series1">

</asp:Series>

</Series>

<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true">

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

</asp:Content>

- B6: Viết Code cho file Default.aspx
C# Code

//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

using Microsoft.VisualBasic;

using System;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using System.Diagnostics;

using System.Drawing;

using System.Web.UI;

using System.Web.UI.DataVisualization.Charting;

namespace AspPieChart

{

public partial class _Default : System.Web.UI.Page

{

#region "Private Members"

private void CreateChart()

{

DataTable objBind = new DataTable();

objBind = BindData();

if (objBind != null)

{

if (objBind.Rows.Count > 0)

{

string[] x = new string[objBind.Rows.Count];

int[] y = new int[objBind.Rows.Count];

for (int i = 0; i <= objBind.Rows.Count - 1; i++)

{

x[i] = objBind.Rows[i][1].ToString();

y[i] = Convert.ToInt32(objBind.Rows[i][2]);

}

ucChart.Series[0].Points.DataBindXY(x, y);

ucChart.Series[0].BorderWidth = 1;

ucChart.Series[0].BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);

ucChart.Series[0]["PieLabelStyle"] = "Outside";

// Add a legend to the chart and dock it to the bottom-center

ucChart.Legends.Add("Legend1");

ucChart.Legends[0].Enabled = true;

ucChart.Legends[0].Docking = Docking.Bottom;

ucChart.Legends[0].Alignment = System.Drawing.StringAlignment.Center;

// Set the legend to display pie chart values as percentages

ucChart.Series[0].LegendText = "#PERCENT{P2}";

}

#endregion

#region "Bind Data"

private DataTable BindData()

{

SqlDataProvider objSQL = new SqlDataProvider();

DataTable objBind = objSQL.FillTable("Pro_ProductByCategory");

return objBind;

}

#endregion

#region "Event Handles"

protected void Page_Load(object sender, System.EventArgs e)

{

try

{

if (!IsPostBack)

{

CreateChart();

}

catch

{

}

#endregion

}

VB.NET Code

Imports System.Web.UI.DataVisualization.Charting

Namespace AspPieChart

Public Class _Default

Inherits System.Web.UI.Page

#Region "Private Members"

Private Sub CreateChart()

Dim objBind As New DataTable

objBind = BindData()

If Not objBind Is Nothing Then

If objBind.Rows.Count > 0 Then

Dim x As String() = New String(objBind.Rows.Count - 1) {}

Dim y As Integer() = New Integer(objBind.Rows.Count - 1) {}

For i As Integer = 0 To objBind.Rows.Count - 1

x(i) = objBind.Rows(i)(1).ToString()

y(i) = Convert.ToInt32(objBind.Rows(i)(2))

With ucChart.Series(0)

.Points.DataBindXY(x, y)

.BorderWidth = 1

.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105)

End With

ucChart.Series(0)("PieLabelStyle") = "Outside"

' Add a legend to the chart and dock it to the bottom-center

ucChart.Legends.Add("Legend1")

With ucChart.Legends(0)

.Enabled = True

.Docking = Docking.Bottom

.Alignment = System.Drawing.StringAlignment.Center

End With

' Set the legend to display pie chart values as percentages

ucChart.Series(0).LegendText = "#PERCENT{P2}"

End If

End Sub

#End Region

#Region "Bind Data"

Private Function BindData() As DataTable

Dim objSQL As New SqlDataProvider

Dim objBind As DataTable = objSQL.FillTable("Pro_ProductByCategory")

Return objBind

End Function

#End Region

#Region "Event Handles"

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Try

If Page.IsPostBack = False Then

CreateChart()

End If

Catch ex As Exception

End Try

End Sub

#End Region

End Class

End Namespace

Nếu bạn không muốn hiển thị giá trị ở phần biểu đồ, mà muốn hiển thị giá trị & % ở phần Ghi chú. Chỉ cần thay đổi 2 thuộc tính sau:

ucChart.Series(0)("PieLabelStyle") = "Outside" => ucChart.Series(0)("PieLabelStyle") = "Disabled"

ucChart.Series(0).LegendText = "#PERCENT{P2}" => ucChart.Series(0).LegendText = "#VALX (#PERCENT)"

Lưu ý: Khi kéo Control Chart vào Page, các mã trong file web.config sẽ tự động sinh mà bạn không cần phải viết hay chỉnh sửa bất kỳ thông tin gì.

Chúc các bạn thành công!

Quang Bình

News Ticker