บันทึกวิธีำทำ และปัญหายิบย่อยของการเขียน asp.net สร้าง chart ด้วย Microsoft Chart Controls 3.5

ก่อนอื่น

1. หาก Framework ของเราไม่ใช่เวอร์ชั่น 3.5 ให้ลงตัว dotnetfx35setup.exe ก่อน(ถ้าไม่ใช่ Framework v 3.5 ตอน install MSChart.exe มันจะขึ้น error ฟ้อง)
   
2. แล้ว install ตัว MSChart.exe
3. ต่อไป install ตัว MSChart_VisualStudioAddOn.exe เพื่อให้ visual studio 2008 ของเรามีตัว Chart Tool
4. ถ้าในฐานข้อมูลไม่มี database ฟรีที่ชื่อ Northwind ล่ะก็ ให้ไปดาวน์โหลด Northwind Database ได้ที่นี่ download northwind database (อย่า งง เมื่อเห็นว่าเป็น database สำหรับ sql 2000 แล้วไฟล์ก็ดันชื่อ SQL2000SampleDb.msi ที่จริงก็ใช้ได้แหละ เมื่อโหลดมาแล้ว ให้ Double Click ไฟล์นั้นเลย ก็ next next เรื่อยๆ พอเสร็จ ให้ไปดูที่ drive c จะมีโฟล์เดอร์ที่ชื่อ SQL Server 2000 Sample Databases แปลว่า ok ละ หลังจา่กนั้นเปิด Microsoft Sql Server Menagement Studio Express ขึ้นมา เลือก File > Open > File .. แล้วก็ Browns หาไฟล์ไฟล์ instnwnd.sql ในโฟลเดอร์ SQL Server 2000 Sample Databases แล้วก็เสร็จค่ะ ปล.จากที่ค้นหาวิธี import ฐานเค้าไม่ได้สอนแบบนี้นะ เค้าต้อง config อะไรซักอย่างก่อน แต่ทำตามแล้วมันไม่เวิร์คก็เลยลองวิธีนี้ดู ก็ใช้ได้ ยังไม่เจอปัญหา)
   

(ลิงค์ดาวน์โหลดไฟล์ต่างๆ ดาวน์โหลดวิธีสอนก็อยู่ในเว็บ http://www.narisa.com/forums/index.php?showtopic=27332 นี้หมด ต้องขอขอบคุณคนในบอร์ดนี้มากๆ จากใจเลย)

ขั้นตอน

- เมื่อเตรียมทรัพยากรพร้อมหมดแล้ว
- ก็เขียนคำสั่ง ดังนี้

(อันนี้ลอกมาจาก vdo มันติด error)
select
year(Orders.ShippedDate) as SaleOfYear,
Month(Orders.ShippedDate) as Month#,
DateName(Month,Orders.ShippedDate) as SaleOfMonth,
sum([Order Details].Quantity * [Order Details].UnitPrice) as TotalSale
FROM Orders inner join [Order Details] on Orders.OrderID = [Order Detail].OrderID
group by
Month(Orders.ShippedDate),DATENAME(Month,Orders.ShippedDate),Year(Orders.ShippedDate)
having (Year(Orders.ShippedDate)=1997 or Year(Orders.ShippedDate)=1996 and
Month(Orders.ShippedDate)>6)
Order by 1,2

(อันนี้เขียนขึ้นใหม่ ใช้ได้)

select year(t1.ShippedDate) as SaleOfYear, Month(t1.ShippedDate) as Month#, DateName(Month,t1.ShippedDate) as SaleOfMonth,sum(t2.Quantity + t2.UnitPrice) as TotalSale
from Orders as t1,[Order Details] as t2
where t1.OrderID=t2.OrderID
group by
Month(t1.ShippedDate),DATENAME(Month,t1.ShippedDate),Year(t1.ShippedDate)
having (Year(t1.ShippedDate)=1997 or Year(t1.ShippedDate)=1996 and
Month(t1.ShippedDate)>6)
Order by 1,2

- แล้วก็เปิด visual studio 2008 ขึ้นมา new website ใหม่มาเลยก็ได้ วิธีเหมือนใหน vdo เดี๊ยะๆ สร้างไฟล์ index.aspx ขึ้นมา
- แล้วพิมพ์คำสั่งเหมือน vdo เอาตามนั้นเลย
- ในหน้าโค๊ด ที่เขียนจะมีโค๊ดดังนี้ ซึ่งจะแตกต่างจาก vdo ที่สอนเพราะคนสอนเค้าใช้ ado.net entity data model แต่เรา่ยังไม่ได้ศึกษา เอาไว้ก่อน ก็ใช้คำสั่งง่ายๆ ดังนี้

code ทั้งหมดในหน้า index.aspx.vb

Imports System.Web.UI.DataVisualization.Charting
Imports System.Data
Imports System.Data.SqlClient

Partial Class web_chart_index
Inherits System.Web.UI.Page
Dim conn As New SqlConnection(ConfigurationManager.ConnectionStrings("northwindConnectionString").ConnectionString)
Dim qr As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
qr = "select year(t1.ShippedDate) as SaleOfYear, Month(t1.ShippedDate) as Month#, DateName(Month,t1.ShippedDate) as SaleOfMonth,sum(t2.Quantity + t2.UnitPrice) as TotalSale from Orders as t1,[Order Details] as t2 where t1.OrderID=t2.OrderID group by Month(t1.ShippedDate),DATENAME(Month,t1.ShippedDate),Year(t1.ShippedDate) having (Year(t1.ShippedDate)=1997 or Year(t1.ShippedDate)=1996 and Month(t1.ShippedDate)>6) Order by 1,2"
Dim da As New SqlDataAdapter(qr, conn)
Dim dt As New DataTable
da.Fill(dt)
For i As Integer = 0 To dt.Rows.Count - 1
If Me.Chart1.Series.FindByName(dt.Rows(i).Item("SaleOfYear")) Is Nothing Then
Me.Chart1.Series.Add(dt.Rows(i).Item("SaleOfYear"))
Me.Chart1.Series(dt.Rows(i).Item("SaleOfYear").ToString).ChartType = SeriesChartType.Line
End If
Me.Chart1.Series(dt.Rows(i).Item("SaleOfYear").ToString).Points.AddXY(dt.Rows(i).Item("SaleOfMonth").ToString, dt.Rows(i).Item("TotalSale").ToString)
Next

End Sub
End Class

ที่สำคัญต้องเพิ่ม ในหน้า web.config
ใน <เฮท ที ที พี แฮนเดอร์> ให้เพิ่ม
ไปก็อปโค๊ดที่ลิงนี้ละกัน blogger มันไม่ยอมให้วางโค๊ดนี้
http://stackoverflow.com/questions/302820/net-3-5-chart-controls-exception-error-executing-child-request-for-chartimg-axd


ที่จริง vdo บอกแค่นี้แล้วรันก็ผ่านเลย แต่พอเราทำก็ติด error Invalid temp directory in chart handler configuration [c:\TempImageFiles\].

ก็ search กันอีกรอบ บอกว่าใน ไฟล์ web.config ต้องเพิ่มอีกบรรทัด


ใน <แอพ เซตติ้ง> ให้เพิ่มดังนี้
ไปก็อปโค๊ดที่ลิงนี้ blogger ไม่ยอมให้วางโค๊ดนี้อีกแล้ว (ตรงคำตอบของSirn Tran)
http://social.msdn.microsoft.com/Forums/en-US/MSWinWebChart/thread/92238582-9445-4d15-a5a7-5f24fd4bf646


แค่นี้ก็รันผ่านแล้ว
แต่กราฟที่ออกมาไม่เหมือนกับใน vdo ซักเท่าไหร่ ยังไม่้ได้เช็ค แต่ขอบันทึกวิธีทำก่อนที่จะลืม แล้วค่อยมาต่อค่ะ ....




ลิงค์ที่เกี่ยวข้อง
- วีดีโอสอน โหลดจากเว็บ gratefriend http://www.greatfriends.biz/webboards/msg.asp?id=108932
- http://www.narisa.com/forums/index.php?showtopic=27332