สร้างรายงานแผนภูมิกราฟด้วย Microsoft Chart Controls ตอนรู้จัก: Microsoft Chart Controls


 

สวัสดีครับ สำหรับบทความฉบับนี้ เป็นบทความที่เขียนให้ นิตยสาร CODE IT นานพอสมควร  และได้ขอบอนุญาตการเผยแพร่จาก CODE IT เรียบร้อยแล้ว คิดว่าน่าจะเป็นประโยชน์สำหรับเพื่อนๆ GreatFriends ติดตามได้เลยครับ…

 

เมื่อปลายปี 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) ก็ได้ และสำหรับการสร้างแผนภูมิ และกราฟบนเว็บแล้ว เซิร์ฟเวอร์คอนโทรล(server control) จะควบคุมการสร้างรูปภาพ ที่มีการอ้างอิงจากเพจ HTML ของเครื่องไคลเอ็นต์ ที่มีการใช้แท็ก <img/> เป็นองค์ประกอบ(element)เอาต์พุต โดยแท็ก <asp:chart/> คอนโทรลเป็นเซิร์ฟเวอร์คอนโทรลสนับสนุนความสามารถในการใช้แคชกับแผนภูมิรูปภาพ รวมทั้งบันทึกข้อมูลดังกล่าวลงดิสก์ โดยไม่ต้องมีเซิร์ฟเวอร์ซอฟต์แวร์อื่นๆ ที่จะติดตั้งและจะทำงานกับเพจมาตรฐาน ASP.NET และสนับสนุนการทำงานกับ AJAX ทำให้นักพัฒนาสามารถสร้างรายงานแผนภูมิกราฟแบบ Real Time ได้

การใช้งานชุดคอมโพเนนต์ดังกล่าว เครื่องคอมพิวเตอร์ของท่านผู้อ่านต้องมีทรัพยากรดังต่อไปนี้

 

สิ่งที่จำเป็น (Prerequisites)

และในบทความนี้ผู้เขียนได้ทำการดาวน์โหลดตัวอย่างโปรเจ็กต์ ที่มีทั้งเป็นเว็บแอพพิเคชัน และวิโดวส์แอพพลิเคชันจาก Microsoft Chart Controls Sample Project: http://code.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591

เพื่อเป็นการแนะนำคร่าวๆ ดังขั้นตอนต่อไปนี้

 

ขั้นตอนติดตั้งชุดคอมโพเนนต์ Microsoft Chart Controls

 

เปิดตัวอย่างโปรเจ็กต์เว็บแอพพลิเคชัน

เมื่อท่านผู้อ่านทำการติดตั้งคอมโพเนนต์ที่จำเป็นในขั้นตอนที่หนึ่ง, สอง และทำการดาวน์โหลดตัวอย่างมาไว้ในเครื่องเรียบร้อยแล้วลำดับต่อไปเราไปดูตัวอย่างโปรเจ็กต์ เพื่อศึกษาและปรับใช้งานกันต่อไป เราไปดูโปรเจ็กต์ที่เป็นเว็บกันก่อนครับ ให้ท่านผู้อ่านหยิบเครื่อง VS2008 ขึ้นมาแล้วปที่เมนู File=>Open Web Site… จากนั้นเลือกโฟลเดอร์ที่เราได้วางตัวอย่างโปรเจ็กต์ที่โหลดไว้แล้วก่อนหน้านี้ ในบทความนี้ผู้เขียนวางไว้ที่โฟลเดอร์ E:Download 2008Microsoft Chart ControlsWebSamplesWebSamples ดังรูปที่ 1

 

1

รูปที่ 1: เปิดตัวอย่างโปรเจ็กต์เว็บแอพพลิเคชัน

เมื่อท่านผู้อ่านเปิดโปรเจ็กต์ขึ้นมาเป็นที่เรียบร้อยแล้ว ทำการคลิกเมาส์ขวาลงบน ไฟล์ default.aspx แล้วเลื่อนเมาส์ไปเลือกเมนู Set As Start Page เพื่อกำหนดให้แสดงไฟล์ default.aspx เป็นเพจแรก จากนั้นรันโปรเจ็กต์ ท่านผู้อ่านจะได้หน้าแรกดังรูปที่ 2

 

2

รูปที่ 2: หน้าแรกที่จากการรันตัวอย่างโปรเจ็กต์เว็บ

ท่านผู้อ่านสามารถคลิกเมาส์ลงบนเมนูต่างๆ เพื่อท่องไปยังตัวอย่างของแผนภูมิกราฟต่างๆ ได้ ซึ่งมีดังนี้

 

ประเภทแผนภูมิ

 

3

รูปที่ 3

  • Bar and columns
  • Line
  • Area
  • Pie and Doughnut
  • Point
  • Range
  • Circular
  • Accumulation
  • Data Distribution
  • Financial

ตัวอย่างแผนภูมิกราฟแบบ Bar and columns แสดงดังรูปที่ 4

 

4

รูปที่ 4: ตัวอย่างประเภทแผนภูม และกราฟ

สนับสนุนการทำงานกับ AJAX ได้

 

5

รูปที่ 5: ทำงานกับ AJAX

รวมถึงสามารถสร้างกราฟแบบ Real Time ได้

 

6

รูปที่ 6: สร้างกราฟ Real Time

 

เปิดโปรเจ็กต์ตัวอย่างวินโดวส์แอพพลิเคชัน

การเปิดตัวอย่างโปรเจ็กต์ที่เป็นวินโดวส์แอพพลิเคชัน ให้ท่านผู้อ่านดับเบิ้ลคลิกเมาส์ลงบนไฟล์ WinFormsChartSamples.csproj ในโฟลเดอร์ที่ได้วางไฟล์ตัวอย่างโปรเจ็กต์ไว้ แล้วทำการรันโปรเจ็กต์ ท่านผู้อ่านจะได้หน้าจอดังรูป

 

รูปที่ 7: หน้าแรกจากการรันตัวอย่างโปรเจ็กต์วินโดวส์แอพพลิเคชัน

และท่านผู้อ่านสามารถท่องไปดูตัวอย่างแผนภูมิกราฟต่างๆ ตามเมนูบนหน้าจอ เช่นดังรูปที่ 7

 

8

รูปที่ 8: ตัวอย่างแผนภูมิกราฟต่างๆ

ในบทความนี้ ขอแนะนำชุดคอมโพเนนต์ Microsoft Chart Control เพียงคร่าวๆ เพียงเท่านี้ หวังว่าคงเป็นประโยชน์กับท่านผู้อ่านได้บ้าง ไม่มากก็น้อย บทความในตอนต่อไปพบกับการนำชุดคอมโพเนนต์ดังกล่าวไปประยุกต์ใช้งานกับข้อมูลจริง ตอนผูกข้อมูลบน Microsoft Chart Controls แล้วพบกันครับ

หากเกิดข้อผิดพลาดประการใดในบทความนี้ ผู้เขียนขอน้อมรับความผิดพลาดทั้งหมดนั้นไว้แต่เพียงผู้เดียว และยินดีน้อมรับฟังคำชี้แนะ เพื่อแก้ไข และเปลี่ยนแปลง ให้ดีขึ้นในครั้งต่อๆ ไป และหากท่านผู้อ่านพบปัญหาในการอ่านบทความ หรือปัญหาในด้านการโปรแกรมมิ่ง สามารถเข้าไปพบกับผู้เขียน และเพื่อนๆ บนชุมชนออนไลน์ http://www.greatfriends.biz เพื่อแลกเปลี่ยนประสบการณ์ สาระ ความรู้ กันและกัน และไปเยี่ยมกล่าวคำทักทายกันได้บน Blog ส่วนตัว: กรรมกรซอฟต์แวร์ http://janawat.spaces.live.com

 

แหล่งข้อมูลอ้างอิง:

 

ผู้เขียน


  ว่าที่รต. นุชิต อรรจนวรรจน์

  Microsoft MVP, Community Leader, CodeIT Columnist

  Blog: http://janawat.spaces.live.com, E-Mail: nuchitrwi@hotmail.com

  Nuchit’s Profile

ให้คำปรึกษา, ออกแบบ และพัฒนา Business Applications
Application Services Centers| Data Exchange Applications| Rich Internet Applications (RIA)
– Services Management – Data Exchange – AJAX
– Call Center – Data Transfer – Silverlight

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
3 comments on “สร้างรายงานแผนภูมิกราฟด้วย Microsoft Chart Controls ตอนรู้จัก: Microsoft Chart Controls
  1. Nuchit พูดว่า:

    ติดตามตอนที่ 2 เร็วๆ นี้ครับ

  2. Nuchit พูดว่า:

    ติดตามตอนที่ 2 ได้แล้วครับ:> http://janawat.spaces.live.com/blog/cns!7D608959D854CB28!4456.entry

  3. nopparin พูดว่า:

    เยื่อมค่ะ กำลังศึกษา เรื่องการใช้ chart control เลยค่ะ เนื่องโปรเจคจบ ได้ ใช้น่ะค่ะ

ใส่ความเห็น

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: