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

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

(Sử dụng Asp.Net Chart để tạo biểu đồ kiểu Horizontal Bars lấy dữ liệu từ SQL Server) – Khi cần so sánh, tổng hợp trên phần mềm người sử dụng thường sử dụng chức năng biểu đổ (Chart). Với ưu điểm dễ dàng và trực quan nên chức năng biểu đồ không gây một trở ngại khó khắn nào cho người dùng khi cần sử dụng. 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 đồ kiểu Horizontal Bars, 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 AspHorizontalBarsChart

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 ProcName As String, ByVal ParamArray Para() As ObjectPara) As DataTable

Try

Dim tb As New DataTable

Dim adap As New SqlDataAdapter(ProcName, _connectionString)

adap.SelectCommand.CommandType = CommandType.StoredProcedure

If Not Para Is Nothing Then

For Each p As ObjectPara In Para

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

End If

adap.Fill(tb)

Return tb

Catch ex As Exception

Return Nothing

End Try

End Function

#End Region

End Class

Public Class ObjectPara

Dim _name As String

Dim _Value As Object

Sub New(ByVal Pname As String, ByVal PValue As Object)

_name = Pname

_Value = PValue

End Sub

Public Property Name() As String

Get

Return _name

End Get

Set(ByVal value As String)

_name = value

End Set

End Property

Public Property Value() As Object

Get

Return _Value

End Get

Set(ByVal value As Object)

_Value = value

End Set

End Property

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 Horizontal Bars Chart" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AspHorizontalBarsChart._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 Horizontal Bars Chart

</h1>

<br />

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

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

</asp:Series>

</series>

<asp:ChartArea Name="ChartArea1">

</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 AspHorizontalBarsChart

{

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

{

#region "Private Members"

private void ConfigurTitle(Title title)

{

title.BorderColor = Color.Silver;

title.BorderDashStyle = ChartDashStyle.Solid;

title.ShadowColor = Color.Gray;

title.ShadowOffset = 6;

title.Font = new Font("Sans Serif", 10, FontStyle.Bold);

}

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);

}

//Title

ucChart.Titles.Add(new Title("Asp.Net Horizontal Bars Chart"));

ConfigurTitle(ucChart.Titles[0]);

//Setting the Y Axis

ucChart.ChartAreas[0].AxisY.Title = "Value";

ucChart.ChartAreas[0].AxisY.TitleAlignment = StringAlignment.Center;

ucChart.ChartAreas[0].AxisY.TextOrientation = TextOrientation.Horizontal;

ucChart.ChartAreas[0].AxisY.TitleFont = new Font("Sans Serif", 10, FontStyle.Bold);

//Setting the X Axis

ucChart.ChartAreas[0].AxisX.Title = "Categories";

ucChart.ChartAreas[0].AxisX.TitleAlignment = StringAlignment.Center;

ucChart.ChartAreas[0].AxisX.TextOrientation = TextOrientation.Rotated90;

ucChart.ChartAreas[0].AxisX.TitleFont = new Font("Sans Serif", 10, FontStyle.Bold);

}

#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.Drawing

Imports System.Web.UI.DataVisualization.Charting

Namespace AspHorizontalBarsChart

Public Class _Default

Inherits System.Web.UI.Page

#Region "Private Members"

Private Sub ConfigurTitle(ByVal title As Title)

With title

.BorderColor = Color.Silver

.BorderDashStyle = ChartDashStyle.Solid

.ShadowColor = Color.Gray

.ShadowOffset = 6

.Font = New Font("Sans Serif", 10, FontStyle.Bold)

End With

End Sub

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))

ucChart.Series(0).Points.DataBindXY(x, y)

End If

'Title

With ucChart.Titles

.Add(New Title("Asp.Net Horizontal Bars Chart"))

End With

ConfigurTitle(ucChart.Titles(0))

'Setting the Y Axis

With ucChart.ChartAreas(0).AxisY

.Title = "Value"

.TitleAlignment = StringAlignment.Center

.TextOrientation = TextOrientation.Horizontal

.TitleFont = New Font("Sans Serif", 10, FontStyle.Bold)

End With

'Setting the X Axis

With ucChart.ChartAreas(0).AxisX

.Title = "Categories"

.TitleAlignment = StringAlignment.Center

.TextOrientation = TextOrientation.Rotated90

.TitleFont = New Font("Sans Serif", 10, FontStyle.Bold)

End With

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

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