(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.
- B1: Download CSDL Northwind
- B2: Bổ xung thêm store:
+ Pro_ProductByCategory: Đếm số sản phẩm theo từng Category
USE[Northwind]
GO
CREATE PROCEDURE [dbo].[Pro_ProductByCategory]
AS
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; }
}
}
}
Imports System.Data.SqlClient
Imports System.Data
Namespace AspPieChart
Public Class SqlDataProvider
#Region "Membres Prives"
Shared _IsError As Boolean = False
Private _connectionString AsString
#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() AsString
Get
Return _connectionString
End Get
End Property
#End Region
#Region "Functions"
Public FunctionFillTable(ByVal sql AsString) As DataTable
Try
Dim tb AsNew DataTable
Dim adap AsNew 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
- B5: Kéo Control Chart vào file Default.aspx, file sẽ có mã HTML như phía dưới
<%@ PageTitle="Asp.Net Pie Bars Chart" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AspPieChart._Default" %>
<%@ Registerassembly="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">
<Series>
<asp:Series ChartType="Pie"Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<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 = newDataTable();
objBind = BindData();
if (objBind != null)
{
if (objBind.Rows.Count > 0)
{
string[] x = newstring[objBind.Rows.Count];
int[] y = newint[objBind.Rows.Count];
for (inti = 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 DataTableBindData()
{
SqlDataProvider objSQL = newSqlDataProvider();
DataTable objBind = objSQL.FillTable("Pro_ProductByCategory");
return objBind;
}
#endregion
#region"Event Handles"
protected voidPage_Load(object sender, System.EventArgs e)
{
try
{
if (!IsPostBack)
{
CreateChart();
}
}
catch
{
}
}
#endregion
}
}
Imports System.Web.UI.DataVisualization.Charting
Namespace AspPieChart
Public Class _Default
Inherits System.Web.UI.Page
#Region "Private Members"
Private SubCreateChart()
Dim objBind As New DataTable
objBind = BindData()
If Not objBind Is Nothing Then
If objBind.Rows.Count > 0 Then
Dim x AsString() = New String(objBind.Rows.Count - 1) {}
Dim y AsInteger() = NewInteger(objBind.Rows.Count - 1) {}
For i AsInteger = 0 ToobjBind.Rows.Count - 1
x(i) = objBind.Rows(i)(1).ToString()
y(i) = Convert.ToInt32(objBind.Rows(i)(2))
Next
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 If
End Sub
#End Region
#Region "Bind Data"
Private FunctionBindData() 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 SubPage_Load(ByVal sender AsObject, 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!
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment