VS2010 Chart Control DataBinding


เมื่อปลายปี 2008 ไมโครซอฟได้ออกชุดคอมโพเนนต์ (charting component) ในชื่อ Microsoft Chart Control ซึ่งมันอาศัยพื้นฐาน (based on) บน Dundas Chart Control version 5.5 สำหรับใช้พัฒนาบน .NET Framework 3.5  และVisual Studio 2008 และมันถูกใส่มาพร้อมใน .NET Framework 4.0 ซึ่งคอมโพเนนต์ดังกล่าวยอมให้นักพัฒนา สร้างรายงานที่มีแผนภูมิ และกราฟ ได้อย่างรวดเร็วโดยปราศจากการใส่โค้ดใดๆ และที่สำคัญเป็นเครื่องมือฟรีสำหรับสร้างแผนภูมิ และกราฟ บนเว็บเพจ (ASP.NET) หรือโปรแกรมบนวินโดวส์ (Windows Form)  นักพัฒนาสามารสร้างรายงานแผนภูมิ หรือกราฟกับข้อมูลที่มีความซับซ้อนเช่น การวิเคราะห์เกี่ยวกับสถิติ หรือการเงิน ได้ง่ายขึ้น โดยสามารถสร้างแผนภูมิ และกราฟได้ทั้งในรูปแบบ 2 มิติ (2D) และ 3 มิติ(3D) สามารถประกาศแผนภูมิข้อมูล(chart data) แบบสแตติก(statically) หรือใช้การผูกข้อมูลแบบไดนามิก (dynamically) ก็ได้ อ้างอิงจาก:> บทความที่ผู้เขียนเคยเขียนลงใน CodeIT ฉบับเดือน มีนาคม-เมษายน 2552

ภาพตัวอย่างกราฟ ส่วนหนึ่งของ Chart control

7

ขอบคุณภาพจาก CodeIT ฉบับเดือน มีนาคม-เมษายน 2552

ซึ่ง Chart control ใน VS2008 เรารู้จักในชื่อ Microsoft Chart Controls ซึ่งเราต้องดาวน์โหลดมาติดตั้งเพิ่มเติม มาใน VS2010 มันรวมมาให้ในเครื่องมือเรียบร้อยแล้วสามารถเรียกใช้งานได้ทันที และการใช้งานก็กระทำได้ง่ายๆ เช่นกัน ไปดูวิธีการใช้งานกันครับ

1. สร้างโปรเจ็กต์ ASP.NET Web Site ที่ Toolbox เราจะเห็น Chart control ดังรูป

1 

2. ทำการลากไปวางบน WebForm

2

3. ทำการผูกข้อมูลให้มัน โดยคลิกบนเมนู Chart Task จะเห็นมี 2 เมนูคือ Choose Data Source: และ Cahrt Type

3

4. เลือกเมนู Choose Data Source เพื่อกำหนดแหล่งข้อมูลให้มัน => เลือก SQL DataBase เพื่อเลือกแหล่งข้อมูลเป็น MS SQL ผ่าน ConnectioString นั่นเอง => คลิก OK

 4

5. เลือก DB Server และ DB Name => Next => Next

5 6

6. เลือกข้อมูลที่ต้องการ นำไปแสดงด้วยกราฟ ในที่นี้ผู้เขียนใช้ข้อมูลจาก View Category Sales for 1997 เป็น View รายงานการขายตามประเภทสินค้าในปี 1997 =>Next => คลิก Test Query เพื่อทดสอบดูข้อมูล => Finish

7 8

7. เมื่อกำหนด DataSource เรียบร้อย ให้เรากลับไปที่ Chart Task อีกครั้ง จะเห็นมีเมนูเพิ่มขึ้นมาอีก 2 เมนูคือ X Value Member และ Y Value Members

โดยกำหนดค่าต่างๆ ดังนี้:

  • Chart Type: ประเภทกราฟ ให้เป็น Column (กราฟแท่ง)
  • X Value Member = ใส่ฟิลด์ CategoryName
  • Y Value Members = ใส่ฟิลด์ CategorySales

9

8. ทดสอบรันเพื่อดูรายงานกราฟ เราจะได้รายงานดังรูป (ความสวยงามในบทความไม่ได้กล่าวถึง)

10

การสร้างรายงานด้วยกราฟใน VS2010 สามารถทำได้ง่ายด้วยการใช้งาน  Chart control ดังกล่าว และที่สำคัญไม่มีโค้ดอีกเช่นเคย ได้จากการกำหนดพรอเพอร์ตีด้วยการคลิก Next เท่านั้นครับ

 

แหล่งข้อมูลดาวน์โหลด:
http://cid-7d608959d854cb28.skydrive.live.com/embedicon.aspx/SourcesCode/01-13-2010_WebApplication1_Chart.zip 

แหล่งข้อมูลอ้างอิง:
CodeIT ฉบับเดือน มีนาคม-เมษายน 2552

ผู้เขียน:
nano_mvp_2009_1

Advertisements
เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Web Application

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: