(How to create dynamic Google Column 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 doanh thu bán được trên từng loại.
- B1: Download CSDL Northwind
- B2: Bổ xung thêm store:
+ Pro_SalesByCategory: Tổng số tiền bán được theo từng Category
USE [Northwind]
GO
CREATE PROCEDURE [dbo].[Pro_SalesByCategory]
AS
SELECT TOP (100) PERCENT dbo.Products.CategoryID, Categories.CategoryName, SUM(Products.UnitPrice * [Order Details].Quantity) AS Amount
FROM Products INNER JOIN
[Order Details] INNER JOIN
Orders ON [Order Details].OrderID = Orders.OrderID ON Products.ProductID = [Order Details].ProductID INNER JOIN
Categories ON Products.CategoryID = Categories.CategoryID
GROUP BY Products.CategoryID, Categories.CategoryNameBạ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
{
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 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
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
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 Column Chart in ASP.NET" Language="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="DynamicGoogleColumnChart._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(drawColumnChart);
function drawColumnChart() {
var options = {
title: "SALES BY CATEGORY",
titleTextStyle: { color: 'blue', fontSize: 18, bold: true },
width: 900,
height: 500,
bar: {groupWidth: "95%"},
legend: { position: "none"},
hAxis: { title: 'CATEGORY', titleTextStyle: { color: 'blue', fontSize: 15, italic: false, bold: true}},
vAxis: { title: 'VALUE', titleTextStyle: { color: 'blue', fontSize: 15, italic: false, bold: 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.ColumnChart($("#Column Chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<h3>
How to create dynamic Google Column Chart in ASP.NET
</h3>
<br />
<div id="Column Chart">
</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 DynamicGoogleColumnChart
{
public partial class _Default : System.Web.UI.Page
{
#region"Services"
[WebMethod()]
public static List<object> GetChartData()
{
SqlDataProvider objSQL = newSqlDataProvider();
DataTable objBind = objSQL.FillTable("Pro_SalesByCategory");
List<object> chartData = new List<object>();
chartData.Add(new object[] { "CategoryName", "Amount" });
foreach (DataRowrow in objBind.Rows)
{
chartData.Add(new object[] { row["CategoryName"], row["Amount"] });
}
return chartData;
}
#endregion
}
}
VB.NET Code
'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
Imports System.Web.Services
Namespace DynamicGoogleColumnChart
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_SalesByCategory")
Dim chartData As New List(Of Object)()
chartData.Add(New Object() {"CategoryName", "Amount"})
For Each row As DataRow In objBind.Rows
chartData.Add(New Object() {row("CategoryName"), row("Amount")})
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