สร้างรายงานแผนภูมิด้วย Microsoft Chart Controls ตอน ผูกข้อมูลบน Microsoft Chart Controls


 

สวัสดีครับ สำหรับบทความฉบับนี้ เป็นบทความการสร้างรายงานแผนภูมิกราฟด้วย Microsoft Chart Controls ตอนที่สอง ต่อเนื่องจากตอนที่แล้ว และ ผู้เขียนได้ขอบอนุญาตการเผยแพร่จาก CODE IT: [CODE IT MAGAZINE APRIL-MAY 2009] เป็นที่เรียบร้อยแล้ว คิดว่าน่าจะเป็นประโยชน์สำหรับเพื่อนๆ GreatFriends ติดตามได้เลยครับ…

สำหรับนักพัฒนาหลายๆ ท่านคงคุ้นเคยกับการพัฒนาแอพพลิเคชัน ไม่ว่าจะเป็นเว็บแอพพลิเคชัน หรือวินโดวส์แอพพลิเคชัน การนำเสนอข้อมูลมักจะเป็นรายงานในรูปแบบของคอลัมน์ และแถวเป็นส่วนใหญ่ และหากนักพัฒนาจะนำเสนอข้อมูลให้กับผู้ใช้งานระดับผู้บริหารแล้ว รายงานในรูปแบบคอลัมน์ และแถวคงไม่ผ่านการพิจรณาเป็นแน่ เนื่องจากว่ารายงานสำหรับผู้บริหาร ต้องเป็นรายงานที่ดูได้ง่าย และได้ข้อมูลเร็ว รายงานส่วนใหญ่สำหรับผู้บริหารจึงเป็นลักษณะของแผนภูมิกราฟ เพื่อจุดประสงค์ในการตัดสินใจ ที่รวดเร็วนั่นเอง

และเป็นโชคดีของเหล่านักพัฒนา ที่ไมโครซอฟท์ได้ออกชุดคอมโพเนนต์ Microsoft Chart Control ให้นักพัฒนาสามารถใช้เครื่องมือ VS2008 สร้างรายงานแผนภูมิกราฟได้ฟรีๆ โดยไม่เสียค่าใช้จ่ายใดๆ และแน่นอนคุณอาจคิดว่า ของฟรีไม่มีในโลก หรือของฟรีไม่ใช่ผลิตภัณฑ์ที่ดีแน่ๆ แต่นั่นไม่ใช่กรณีสำหรับ Microsoft Chart Control เป็นแน่ เพราะคุณสามารถใช้ชุดคอมโพเนนต์ ดังกล่าวในการสร้างแผนภูมิกราฟได้อย่างง่ายๆ และสวยงาม สามารถแสดงแผนภูมิกราฟได้ทั้งสองมิติ(2D) และสามมิติ(3D) และสามารถสร้างแผนภูมิกราฟในแบบต่าง ได้มากถึง 25 แบบ สามารถพัฒนาได้ทั้งบนเว็บแอพพลิเคชัน ( ASP.NET) และ วินโดวส์แอพพลิเคชัน มันยัง สนับสนุนการใช้งาน AJAX สำหรับเว็บแอพพลิเคชัน ได้ด้วย เรียกได้ว่าเป็นของฟรีที่เต็มเปี่ยมด้วยคุณภาพ และสำหรับบทความนี้ ผู้เขียนขอนำเสนอการผูกข้อมูลบน Microsoft Chart Controls เพื่อออกรายงานแผนภูมิกราฟบนเว็บแอพพลิเคชัน โดยดึงข้อมูลจากฐานข้อมูล Northwind ดังขั้นตอนที่จะกล่าวต่อไปนี้

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

  • ขั้นตอนที่ หนึ่ง: องค์ประกอบแผนภูมิ
  • ขั้นตอนที่ สอง: สร้างโปรเจ็กต์ Chart คอนโทรล ด้วย ASP.NET Web Site
  • ขั้นตอนที่ สาม: ผูกข้อมูลใส่ Chart คอนโทรล
  • ขั้นตอนที่ สี่: ปรับแต่งพรอเพอร์ตี้ Chart คอนโทรล
  • ขั้นตอนที่ ห้า: ใส่โค้ดเพื่อเปลี่ยนรูปแบบแผนภูมิกราฟ
  • ขั้นตอนที่ หก: ทดสอบรายงานแผนภูมิกราฟ

    ขั้นตอนที่ หนึ่ง: องค์ประกอบแผนภูมิ

    1

    รูปที่ 1 องค์ประกอบแผนภูมิ (ขอขอบคุณรูปภาพ จากตัวอย่างโปรเจ็กต์ (Sample Project))

    จากรูปที่ 1 กล่าวได้ว่า

  • Axis Label: ป้ายข้อความของแกน
  • Axis Title: ชื่อของแกน
  • Chart Area: แผนภูมิรูปภาพประกอบด้วยหนึ่งหรือมากกว่าหนึ่งแผนภูมิพื้นที่ซึ่งเป็นมุมฉากพื้นที่ที่ใช้เพื่อวางชุดป้ายข้อความ
  • Chart Picture: แผนภูมิรูปภาพเป็นภาพพื้นผิวทั้งหมด
  • Chart Series: เป็นกลุ่มหรือชุดข้อมูล แต่ละชุดมีการเชื่อมโยงกับชนิดของแผนภูมิ
  • Legend: ป้ายสำหรับแผนภูมิ สามารถมีได้ไม่จำกัดจำนวน
  • Grid Lines: ตะแกรงบรรทัดเพื่อบ่งบอกขอบเขตของแท่งแผนภูมิ และช่วยให้อ่านแผนภูมิได้ง่ายขึ้น
  • Tick Marks: เครื่องหมายที่เกิดขึ้นร่วมกับตะแกรงบรรทัด
  • Plot Area: พื้นที่ในการสร้างแผนภูมิ คุณสามารถกำหนดคุณสมบัติผ่านเมธอด ChartArea.InnerPlotPosition
  • Title: ชื่อหลักของแผนภูมิสามารถ
  • Value Label: ป้ายพิเศษสำหรับบ่งบอกข้อมูลของแผนภูมิกราฟ

     

    ขั้นตอนที่ สอง:สร้างโปรเจ็กต์ Chart คอนโทรล ด้วย ASP.NET Web Site

    ให้ท่านผู้อ่านหยิบเครื่องมือ VS2008 ขึ้นมา แล้วทำการสร้างโปรเจ็กต์ด้วยเทมเพลต ASP.NET Web Site โดยเลือกแหล่งเก็บข้อมูลโปรเจ็กต์ (Location) เป็น File System เลือกพาธตามต้องการ ในบทความนี้ขอเก็บไว้ที่ E:ArticleCODE_IT_Article17-03-2009MSChartControls และ เลือกภาษาที่ใช้เป็น Visual C# และเมื่อท่านผู้อ่านได้ทำการติดตั้งชุดคอมโพเนนต์ Microsoft Chart Control ตามที่ผู้เขียนได้นำเสนอไปในนิตยสาร CODE IT ฉบับก่อนหน้า ในบทความที่ชื่อว่า สร้างรายงานแผนภูมิกราฟด้วย Microsoft Chart Controls ตอนรู้จัก Microsoft Chart Controls จะทำให้บนเครื่องมือ VS2008 มี Chart คอนโทรลขึ้นมาให้เราสามารถใช้งานได้ เพียงท่านผู้อ่านทำการลากคอนโทรลดังกล่าวไปวางบนเว็บฟอร์ม เช่นเดียวกับการใช้งานคอนโทรลอื่นๆ ที่เราต่างคุ้นเคยกัน เช่น คอนโทรล GridView คอนโทรล DetailsView เป็นต้น

    ก่อนอื่นให้ท่านผู้อ่านทำการสร้างตาราง(Table) ขึ้นมาหนึ่งตาราง ใช้เป็นตัวแบ่งขอบเขตในการวางคอนโทรลต่างๆ เพื่อง่ายในการจัดวางคอนโทรลต่างๆ ดังนี้:

    โดยใช้เมาส์คลิกบนเมนูบาร์ ของเครื่องมือ VS2008 ทำการเลือกเมนู Table=>Insert Table VS2008 จะนำท่านผู้อ่านเข้าสู่หน้าต่าง Insert Table ให้ทำการระบุขนาดแถว(Rows:) และคอลัมน์(Columns:) ลงไป จำนวน Rows:=4 และ Coilumns:=2 โดยกำหนดให้แถวแรกให้มี 1 Column วิธีการรวมสองคอลัมน์เป็นหนึ่งคอลัมน์ สำหรับเครื่องมือ VS2008 สามารถกระทำได้ง่ายๆ ดังนี้: ใช้เมาส์คลิกเลือกแถวแรกทั้งแถว แล้วคลิกเมาส์ขวา ทำการเลือกเมนู Modify=>Merge Cells ก็เป็นการรวมคอลัมน์เรียบร้อย จากนั้นทำการวางคอนโทรลต่างๆ ดังนี้:

  • แถวที่หนึ่ง: วางคอนโทรล Chart1
  • แถวที่สอง: คอลัมน์หนึ่งใส่ป้ายชื่อเป็น SkinStyle คอลัมนสอง วางคอนโทรล RadioButtonList และกำหนด ListItem ดังนี้
  • Sunken
  • Emboss
  • FrameThin1
  • FrameThin2
  • แถวที่สาม: คอลัมน์หนึ่งใส่ป้ายชื่อเป็น Show as 2D/3D คอลัมนสอง วางคอนโทรล RadioButtonList และกำหนด ListItem ดังนี้
  • 2D
  • 3D
  • แถวที่สี่: คอลัมน์หนึ่งใส่ป้ายชื่อเป็น Chart Type: คอลัมนสอง วางคอนโทรล RadioButtonList และกำหนด ListItem ดังนี้
  • Column
  • Bar
  • Pie
  • Line

    เมื่อท่านผู้อ่านทำการวางคอนโทรลต่างเป็นที่เรียบร้อยแล้ว หน้าจอผลการออกแบบจะเป็นดังรูปที่ 2

     

    2

    รูปที่ 2 หน้าจอการออกแบบแอพพลิเคชัน

     

    ขั้นตอนที่ สาม: ผูกข้อมูลใส่ Chart คอนโทรล

    การผูกข้อมูล(Data Binding) บน Chart คอนโทรล ซึ่งคอนโทรลมีความสามารถในการสนับสนุนการผูกข้อมูลจากหลายแหล่งข้อมูล ตัวอย่างเช่น ชุดข้อมูลค่าแกน X (Series X) สามารถจะผูกกับชุดข้อมูลอาร์เรย์ของสตริง และค่า Y สามารถจะผูกกับข้อมูลจากอ็อบเจ็กต์ DataReader เป็นต้น ท่านผู้อ่านสามารถศึกษาหาข้อมูลเพิ่มเติมจากตัวอย่างโปรเจ็กต์ในเมนู :=> Working with Chart Data และในลำดับต่อไปนี้ ผู้เขียนขอนำเสนอการผูกข้อมูลบน Chart คอนโทรล แบบง่ายๆ ดังนี้

    การผูกข้อมูลบน Chart คอนโทรลท่านผู้อ่านสามารถกระทำได้ขณะการออกแบบ (design-time) โดยคลิกเมาส์ลงบนสมาร์ทแท็ก (smart tag) แล้วเลือก <New data source…> ใน drop-down list ดังรูปที่ 3

     

    3

    รูปที่ 3 การผูกข้อมูลบน Chart คอนโทรล ขณะการออกแบบ (design-time)

    เมื่อเราทำการเลือก <New data source…> เครื่องมือ VS2008 จะนำเราเข้าสู่เส้นทางการเลือกแหล่งข้อมูลดังรูปที่ 4 ดังนี้

  • หน้าต่าง Data Source Configuration Wizard :> Choose a Data Source Type ให้เลือก Database แล้วทำการตั้งชื่อ Data source ID ในบทความใช้ชื่อ SqlDataSource1 คลิกปุ่ม Next
  • หน้าต่าง Choose Your Data Connection ท่านผู้อ่านทำการสร้าง Connection ชี้ไปที่ฐานข้อมูล คลิกปุ่ม Next
  • หน้าต่าง Save the Connection String to the Application Configuration File ให้ตั้งชื่อ connection ตามต้องการในบทความนี้ผู้เขียนขอใช้ชื่อดีฟอลต์ เป็น NorthwindConnectionString คลิกปุ่ม Next
  • หน้าต่าง Configure the Select Statement ให้เลือกวิว(View) Category Sales for 1997 คลิกปุ่ม Next
  • หน้าต่าง Test Query ท่านผู้อ่านสามารถกดปุ่ม Test Query เพื่อทดสอบดูตัวอย่างข้อมูล จากนั้นคลิกปุ่ม Finish

     

    4

    รูปที่ 4 ตัวช่วยการสร้างกำหนดแหล่งข้อมูล (Data Source Configuration Wizard)

     

    ขั้นตอนที่ สี่: ปรับแต่งพรอเพอร์ตี้ Chart คอนโทรล

    เมื่อท่านผู้อ่านทำการผูกข้อมูลใส่ Chart เป็นที่เรียบร้อยแล้วลำดับถัดไป เป็นการปรับแต่งพรอเพอร์ตี้ของ Chart คอนโทรล ให้ท่านผู้อ่านทำการปรับแต่งพรอเพอร์ตี้ต่างๆ ตามรายการในตารางดังนี้

    ตาราง: การปรับแต่งพรอเพอร์ตี้ Chart คอนโทรล

    image

    หลังจากการปรับแต่งพรอเพอร์ตี้ของ Chart คอนโทรลเป็นที่เรียบร้อย จะได้ผลหน้าจอเป็นดังรูปที่ 5

     

    5

    รูปที่ 5 หน้าจอการปรับแต่งพรอเพอร์ตี้ของ Chart คอนโทรล

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

     

    ขั้นตอนที่ ห้า: ใส่โค้ดเพื่อเปลี่ยนรูปแบบแผนภูมิกราฟ

     

    Default.aspx.cs

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.UI;

    using System.Web.UI.WebControls;

    using System.Web.UI.DataVisualization.Charting;

    public partial class _Default : System.Web.UI.Page

    {

    protected void Page_Load(object sender, EventArgs e)

    {

    if (!IsPostBack)

    {

    skinStyle();

    chartType();

    Show3D();

    }

    }

    //เปลี่ยน SkinStyle

    protected void RadioButtonList0_SelectedIndexChanged(object sender, EventArgs e)

    {

    skinStyle();

    chartType();

    Show3D();

    }

    //Show as 2D/3D

    protected void RadioButtonList2_SelectedIndexChanged(object sender, EventArgs e)

    {

    skinStyle();

    chartType();

    Show3D();

    }

    //เปลี่ยน Chart Type

    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)

    {

    skinStyle();

    chartType();

    Show3D();

    }

    private void skinStyle()

    {

    if (RadioButtonList0.Items[0].Selected)//None

    Chart1.BorderSkin.SkinStyle = BorderSkinStyle.None;

    else if (RadioButtonList0.Items[1].Selected)//Raised

    Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Raised;

    else if (RadioButtonList0.Items[2].Selected)//Sunken

    Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Sunken;

    else if (RadioButtonList0.Items[3].Selected)//Emboss

    Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

    else if (RadioButtonList0.Items[4].Selected)//FrameThin1

    Chart1.BorderSkin.SkinStyle = BorderSkinStyle.FrameThin1;

    else if (RadioButtonList0.Items[5].Selected)//FrameThin2

    Chart1.BorderSkin.SkinStyle = BorderSkinStyle.FrameThin2;

    }

    private void chartType()

    {

    if (RadioButtonList1.Items[0].Selected)//Column

    Chart1.Series["Series1"].ChartType = SeriesChartType.Column;

    else if (RadioButtonList1.Items[1].Selected)//Bar

    Chart1.Series["Series1"].ChartType = SeriesChartType.Bar;

    else if (RadioButtonList1.Items[2].Selected)//Pie

    Chart1.Series["Series1"].ChartType = SeriesChartType.Pie;

    else if (RadioButtonList1.Items[3].Selected)//Line

    Chart1.Series["Series1"].ChartType = SeriesChartType.Line;

    }

    private void Show3D()

    {

    if (RadioButtonList2.Items[0].Selected)///2D

    Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;

    else//3D

    Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

    }

    }

    ใส่โค้ดเป็นที่เรียบร้อยแล้ว เราไปดูรายงานแผนภูมิกราฟผ่านเบนาว์เซอร์กันเลยครับ

     

     

  • ขั้นตอนที่ หก: ทดสอบดูรายงานแผนภูมิกราฟ

    หลังจากทำการใส่โค้ดเป็นที่เรียบร้อยแล้ว ให้ทำการรันแอพพลิเคชัน เพื่อดูผลรายงานแผนภูมิกราฟผ่านเบราว์เซอร์ เราจะได้รายงานดังรูปที่ 6 และท่านผู้อ่านสามารถทำการปรับเปลี่ยนรูปแบบกราฟต่างๆ โดยคลิกเลือก SkinStyle, Show as 2D/3D และ ChartType ทำให้เราได้หน้าจอรายงานแผนภูมิกราฟต่างๆ ดังรูปที่ 7

     

    6

    รูปที่ 6 รายงานแผนภูมิกราฟ

     

    7

    รูปที่ 7 รายงานแผนภูมิกราฟ(ต่อ)

    ครับท้ายสุดนี้ ผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้คงเป็นประโยชน์แก่ท่านผู้อ่านได้บ้าง ไม่มากก็น้อย แล้วพบกันโอกาสหน้าครับ

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

    แหล่งดาวน์โหลดซอร์สโค้ด:

  • http://www.windowsitpro.net/code
  • http://janawat.spaces.live.com/default.aspx : เข้าไปที่ไฟล์ โฟลเดอร์สาธารณะ [CODE IT MAGAZINE]

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

  • http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx
  • CODE IT MAGAZINE APRIL-MAY 2009
  •  

    หัวข้อที่เกี่ยวข้อง:

  • สร้างรายงานแผนภูมิกราฟด้วย Microsoft Chart Controls ตอนรู้จัก: Microsoft Chart Controls
  • Article – VS2010 Chart Control DataBinding
  • Screencast – ASP.NET 3.5 Chart Control โดย: คุณบรรพต

     

    ผู้เขียน:
    ว่าที่รต. นุชิต อรรจนวรรจน์


    Microsoft MVP,  Community Leader, CodeIT Columnist,
    Blog: http://janawat.spaces.live.com, E-Mail: nuchitrwi@hotmail.com
    swp_logo_nec53 

    ให้คำปรึกษา , ออกแบบ และพัฒนา Business Applications

    Application Services Centers|
    – Services Management
    – Call Center
    Data Exchange Applications|
    – Data Exchange
    – Data Transfer
    Rich Internet Applications (RIA)|
    – AJAX
    – Silverlight

     

  • เกี่ยวกับ

    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

    เขียนใน Uncategorized
    One comment on “สร้างรายงานแผนภูมิด้วย Microsoft Chart Controls ตอน ผูกข้อมูลบน Microsoft Chart Controls
    1. boilza พูดว่า:

      มีประโยชน์อย่างยิ่งครับ ตอนนี้กำลังหัดใช้ 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: