(How to create dynamic Google Pie Chart in ASP.NET) –Biểu đồ là một công cụ giúp bạn nhanh chóng dễ dàng khi cần đánh giá, so sánh, tổng kết để từ đó đưa ra những quyết định, kế hoạch phù hợp hơn. Hiện có nhiều Plugin hỗ trợ việc tạo biểu đồ, trong đó Google Chart là một trong những Plugin tuyệt vời và nó tương thích cho các trình duyệt và các thiết bị di động. Bài viết dưới đây sẽ hướng dẫn các bạn cách sử thư viện Google để 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ệ % sản phẩm trên từng loại.
- 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 TotalProducts
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 @strSQLBạn có thể tải về bảng cơ sở dữ liệu SQL bằng cách nhấn vào liên kết tải về dưới đây
- 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 DynamicGooglePieChart
{
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 stringConnectionString
{
get { return_connectionString; }
}
#endregion
#region"Functions"
public DataTableFillTable(string sql)
{
try
{
DataTable tb = new DataTable();
SqlDataAdapter adap = new SqlDataAdapter(sql, _connectionString);
adap.Fill(tb);
return tb;
}
catch
{
return null;
}
}
#endregion
}
}VB.NET Code
Imports System.Data.SqlClient
Imports System.Data
Namespace DynamicGooglePieChart
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
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 HTML và nhập mã HTML
<%@ PageTitle="How to create dynamic Google Pie Chart in ASP.NET" Language="C#" MasterPageFile="~/Site.master"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="DynamicGooglePieChart._Default"%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawPieChart);
function drawPieChart() {
var options = {
title: "GOOGLE PIE CHART",
titleTextStyle: { color: 'blue', fontSize: 16, bold: true },
pieSliceText: "percentage",
width: 750,
height: 500
};
options.is3D = true;
$.ajax({
type: "POST",
url: 'Default.aspx/GetChartData',
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = newgoogle.visualization.PieChart($("#PieChart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<h3>
How to create dynamic Google Pie Chart in ASP.NET
</h3>
<br />
<div id="PieChart">
</div>
</asp:Content>
- B5: Viết Code cho file Default.aspx
C# Code
//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
using System.Collections.Generic;
using System.Data;
using System.Web.Services;
namespace DynamicGooglePieChart
{
public partial class _Default : System.Web.UI.Page
{
#region"Services"
[WebMethod()]
public static List<object> GetChartData()
{
SqlDataProvider objSQL = newSqlDataProvider();
DataTable objBind = objSQL.FillTable("Pro_ProductByCategory");
List<object> chartData = new List<object>();
chartData.Add(new object[] {"CategoryName","TotalProducts"});
foreach (DataRowrow in objBind.Rows)
{
chartData.Add(new object[] {row["CategoryName"],row["TotalProducts"]});
}
return chartData;
}
#endregion
}
}
VB.NET Code
'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
Imports System.Web.Services
Namespace DynamicGooglePieChart
Public Class _Default
Inherits System.Web.UI.Page
#Region "Services"
<WebMethod()> _
Public Shared Function GetChartData() AsList(Of Object)
Dim objSQL As New SqlDataProvider
Dim objBind As DataTable = objSQL.FillTable("Pro_ProductByCategory")
Dim chartData As New List(Of Object)()
chartData.Add(New Object() {"CategoryName", "TotalProducts"})
For Each row As DataRow In objBind.Rows
chartData.Add(New Object() {row("CategoryName"), row("TotalProducts")})
Next
Return chartData
End Function
#End Region
End Class
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment