สร้างกราฟอย่างง่ายใน ASP.NET

ไปหน้าแรก | สารบัญ | Laploy.comระเบียนบทความ | บทความจากลาภลอย

 

สร้างกราฟอย่างง่ายใน ASP.NET

 

ต่อไปนี้เป็นแบบฝึกหัดสร้างกราฟเส้นอย่างง่ายในหน้าเว็บแบบ ASP.NET โดยใช้ control สำเร็จรูปชื่อ WebChart สอนวิธีเขียนโปรแกรมภาษา C# เพื่อกำหนดค่าของกราฟ เป็นแบบฝึกที่ละขั้น (step by step approach) อย่างง่ายที่สุดสำหรับมือใหม่

“สวัสดีค่ะอาจารย์ หนูพึ่งเริ่มหัดเขียนเว็บ อยากให้อาจารย์ช่วยแนะนำขั้นตอนการสร้างกราฟได้มั่ยค่ะ หนูลองดูจากตัวอย่างที่อาจารย์ให้แล้ว หนูยังไม่ค่อยเข้าใจเลยค่ะ เพราะไม่รู้ว่าต้องประกาศอะไรตรงไหนบ้าง ลองทำแล้วแต่เออเร่อเพียบเลยค่ะ อยากให้อาจารย์ช่วยแนะนำด้วยนะค่ะ พอดีต้องทำเวบส่งอาจารย์ อยากได้ที่เขียนคำสั่ง SQL จากฐานข้อมูลก็ออกมาเป็นกราฟเลยอ่าค่ะ รบกวนอาจารย์ช่วยตอบหน่อยนะค่ะ ขอบคุณอย่างสูงค่ะ”

ผู้อ่านชื่อคุณ “มือใหม่” โพสข้อความไว้ในกระดานสนทนา (www.laploy.com/gbook) ตามข้อความที่ท่านเห็นข้างบน ผู้เขียนจึงตัดสินใจรับใช้โดยเขียนเป็นบทความนี้ เกลือกว่าท่านผู้อ่านท่านอื่นที่ประสบปัญหาแบบเดียวกันจะได้รับประโยชน์ด้วย

บทความนี้สอนวิธีสร้างกราฟเส้นในหน้าเว็บ ASP.NET ด้วยภาษา C# โดยใช้ control ชื่อ WebChart เจตนาเขียนสำหรับผู้เริ่มต้น จึงเขียนให้อ่านง่ายที่สุด และโค้ดตัวอย่างมีจำนวนบรรทัดน้อยที่สุด ผลลัพธ์ที่ได้จากการทำตามบทความนี้จะเป็นกราฟในหน้าเว็บที่มีหน้าตาดังนี้

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

การสร้างกราฟบนหน้าเว็บ

การเขียน Web application ด้วยภาษา C# ให้มีกราฟตามข้อมูลในฐานข้อมูล สามารถทำได้หลายวิธีเช่น

• นิยามคลาสสร้างกราฟโดยใช้ DirectX
• นิยามคลาสสร้างกราฟโดยใช้ GDI+
• สร้างกราฟโดยใช้ Crystal Report
• สร้างกราฟโดยใช้ Chart control

ถ้าเป็น chart ที่ไม่ซับซ้อนนักผู้เขียนจะใช้วิธีสุดท้าย เพราะไม่เสียเวลามาก chart control ดีๆ มีหลายตัว ที่ผู้เขียนใช้บ่อยคือ WebChart Control เพราะใช้งานได้ง่าย อ่อนตัวเพียงพอแก่ความต้องการทั่วๆ ไป และที่สำคัญคือฟรี ท่านสามารถเยี่ยมชมเว็บไซต์ของผู้สร้าง WebChart ได้ที่เว็บไซต์ http://www.carlosag.net และอาจดาวน์โหลดคู่มือและตัวอย่างโค้ดมาตรวจสอบดู

WebChart เป็น control ที่ดี มีความสามารถสูง มีลูกเล่นมาก แต่ในบทความนี้ผู้เขียนจะแนะนำวิธีใช้ WebChart อย่างพื้นฐานที่สุด

วิธีใช้งาน WebChart อย่างง่ายสุด

ตัว control เป็นไฟล์นามสกุล .dll เพียงไฟล์เดียว เป็นไฟล์ชื่อ WebChart.dll ที่ท่านสามารถดาวน์โหลดได้จากเว็บไซต์ http://www.laploy.com/download ต่อไปนี้เป็นขึ้นตอนการสร้างหน้าเว็บและการเขียนโปรแกรมภาษา C# เพื่อใช้งาน WebChart อย่างง่ายที่สุด

วิธีติดตั้ง WebChart

ต่อไปนี้เป็นขึ้นตอนการติดตั้ง control ชื่อ WebChart ที่เราจะนำมาใช้สร้างกราฟ การติดตั้งทำได้ง่าย ไม่ต้องรันโปรแกรมเซตอัพ หรือ install เพียงแค่ก็อปปี้ไฟล์ WebChart.dll ไปไว้ในโฟลเดอร์ c:\WebChart เท่านั้น ขั้นตอนโดยละเอียดเป็นดังนี้

  1. ดาวน์โหลดไฟล์ WebChart.zip จากเว็บไซต์ www.laploy.com/download
  2. นำไฟล์ WebChart.zip มาคลายออกจะพบว่าภายในมีไฟล์ชื่อ WebChart.dll
  3. สร้างโฟลเดอร์ชื่อ WebChart ไว้ที่รูทไดเรคทอรีของฮาร์ดดิสก์ หรือที่ c:\ หรือที่โฟลเดอร์ใดก็ได้ที่ท่านต้องการ
  4. นำไฟล์ WebChart.dll ไปใส่ไว้ในโฟลเดอร์ดังกล่าว

การติดตั้ง WebChart ทำได้ง่ายมากเพียงแค่ก็อปปี้ไฟล์ WebChart.dll ไปไว้ในโฟลเดอร์ c:\WebChart หรือโฟลเดอร์อื่นๆ ที่ต้องการเท่านั้น

สร้างเว็บไซต์ใหม่

ต่อไปนี้เป็นวิธีสร้างเว็บไซต์ใหม่ เป็นการสร้างเว็บไซต์แบบ ASP.NET ธรรมดา เราจะสร้างเว็บนี้ไว้ในคอมพิวเตอร์ของเราในโฟลเดอร์ชื่อ c:\WebChartTest เพื่อใช้ทดสอบการสร้างกราฟด้วย WebChart

ขั้นตอนการสร้างเว็บไซต์ใหม่ใน Microsoft Visual Studio .NET 2005 (ต่อไปจะเรียกย่อว่า MSVS)มีดังนี้

  1. สร้างโฟลเดอร์ชื่อ WebChartTest (หรือชื่อะไรก็ได้ที่ท่านต้องการ) ไว้ที่รูทไดเรคทอรีของฮาร์ดดิสก์ หรือที่ c:\ หรือที่โฟลใดก็ได้ที่ท่านต้องการ
  2. เปิดโปรแกรม MSVS
  3. เลือกเมนู File/New/Web Site… เพื่อสร้างเว็บไซต์ใหม่
  4. ในกรอบข้อความ New Web Site เลือก template แบบ ASP.NET Web Site
  5. ในช่อง Language เลือกภาษา C#
  6. กดปุ่ม Browse… แล้วเลือกโฟลเดอร์ชื่อ WebChartTest ที่เราสร้างไว้แล้วในข้อ 2
  7. ถึงตอนนี้ MSVS จะสร้างเว็บไซต์ว่างๆ ให้โดยมีหน้าเว็บหนึ่งหน้าชื่อ default.aspx

เมื่อสร้างเว็บไซต์ใหม่เสร็จแล้ว ใน Solution Explorer จะมีโครงสร้างอย่างที่เห็นในภาพนี้

วิธีนำ WebChart ใส่ใน Visual Studio

การใช้งาน WebChart ทำได้ง่ายด้วยการลากและหยอดใส่หน้าเว็บด้วย web page designer ของ MSVS โดยมีวิธีทำเหมือน Server Control อื่นๆ ของ .NET (เช่น TextBox) แต่ก่อนที่จะทำเช่นนั้นได้ ท่านจะต้องนำ WebChart ไปใส่ไว้ใน toolbox ของ MSVS เสียก่อน

ขั้นตอนการนำ WebChart ไปใส่ไว้ใน toolbox ของ MSVS มีดังนี้

  1. ถ้าไม่เห็น Solution Explorer (SE) ให้เปิด SE โดยเลือกเมนู View/Solution Explorer
  2. ดับเบิ้ลคลิกที่ไอคอน default.aspx ใน SE เพื่อเปิดหน้าเว็บนี้ใน web page designer ของ MSVS
  3. ถ้าไม่เห็น Toolbox ให้เปิดโดยเลือกเมนู View/Toolbox
  4. คลิกขวาบริเวณว่างใน Toolbox แล้วเลือกรายการ Choose Items…
  5. ในกรอบข้อความ Choose Toolbox Items (CTI) กดปุ่ม Browse…
  6. ในกรอบข้อความ Open ให้ไปที่โฟลเดอร์ c:\WebChart แล้วกดที่ไอคอนไฟล์ WebChart.dll
  7. กดปุ่ม Open
  8. กดปุ่ม OK ใน CTI เมื่อท่านทำถึงขั้นตอนนี้ท่านจะเห็นไอคอน ChartControl ปรากฏใน ToolBox

เมื่อนำ WebChart มาใส่ใน MSVS สำเร็จท่านจะพบว่ามีสองอย่างเพิ่มขึ้น อย่างแรกคือใน SE (กรอบซ้าย) ในโฟลเดอร์ Bin มีไฟล์ WebChart.dll ปรากฏขึ้น อย่างที่สองคือใน ToolBox จะมีไอคอน ChartControl ปรากฏขึ้น

วิธีนำ WebChart มาใส่ในหน้าเว็บ

ถึงตอนนี้เราก็พร้อมที่จะนำ WebChart มาใส่ในหน้าเว็บได้แล้ว วิธีนำWebChart มาใส่ในหน้าเว็บทำได้ง่ายเหมือนcontrol อื่นๆ ของ MSVS ขั้นตอนโดยละเอียดเป็นดังนี้

1. ดูให้แน่ใจว่าท่ากำลังเปิดหน้า Default.aspx อยู่ใน web page designer ของ MSVS
2. ดับเบิ้ลคลิกที่ไอคอน ChartControl

เมื่อทำตามขั้นตอนการนำ WebChart มาใส่ในหน้าเว็บแล้วจะมีภาพเช่นนี้บนหน้าจอ ที่เห็นเป็นตารางและมีเส้นกราฟคือ control ชื่อ ChartControl1

เขียนโปรแกรมสร้างกราฟ

เมื่อนำ WebChart ใส่ในหน้าเว็บได้แล้ว และในกรอบ SE ในโฟลเดอร์ Bin มีไฟล์ WebChart.dll ปรากฏขึ้นแล้ง เป็นสัญญาณแสดงว่าเราก็พร้อมจะเขียนโปรแกรมเพื่อควบคุม WebChart ได้แล้ว

เราอาจใช้ WebChart สร้างกราฟได้หลายแบบ แต่ในแบบฝึกหัดนี้จะแสดงวิธีสร้างกราฟเส้นอย่างง่าย ข้อมูลที่ใช้สร้างกราฟจะนำมาจาก array หากท่านต้องการใช้ข้อมูลจากฐานข้อมูล (เช่น MS SQL) ก็สามารถดัดแปลงโค้ดได้ง่าย เช่นคัดลอกข้อมูลจากฐานข้อมูลใส่ใน array ก่อน หรือจะนำข้อมูลจากฐานข้อมูลไปใช้พล็อตกราฟโดยตรงเลยก็ได้

โค้ดภาษา C# ทั้งหมดจะอยู่ในไฟล์ Default.aspx.cs เพียงไฟล์เดียว ผู้เขียนจับทั้ง solution บีบเป็นไฟล์ zip ไว้เพื่อท่านสามารถไปทดลองเล่นดูได้เลย (ชื่อไฟล์ ChartControlTest.zip ดาวน์โหลดจากเว็บไซต์ www.laploy.com/download)

ส่วนประกาศรวม namespace

ใส่ส่วนประกาศรวม namespace ดูให้แน่ใจว่ามี namespace เหล่านี้ปรากฏอยู่ ถ้าไม่มีให้พิมพ์เพิ่ม

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using WebChart;

ส่วนนิยามสมาชิกแบบ filed

ในคลาส Default ของหน้าเว็บตัวอย่างนี้เราต้องการ filed สมาชิกเพียงสามตัว filed แรกคือ myLine1 ทำหน้าที่เป็นตัวแปรอ้างอิง object ภาพเส้นกราฟที่เราจะแสดงใน ChartControl1 ตัวแปร myString เป็น array ของ string ทำหน้าที่เก็บข้อความที่เราจะใช้แสดงกำกับข้อมูลแต่ละจุดในกราฟ สุดท้ายคือตัวแปร myData เป็น array ของข้อมูลตัวเลขจำนวนเต็ม เก็บข้อมูลที่เราจะนำไปพล็อตกราฟแต่ละจุด

    private LineChart myLine1;
    string[] myString = new string[] 
    { 
        "Sun", "Mon", "Tue", "Wen", 
        "Thu", "Fri", "Sat" 
    };
    int[] myData = new int[] { 0, 5, 12, 8, 15, 12, 30 };

สวนนิยามสมาชิกแบบ method

เนื่องจากคลาสนี้เป็นคลาสหน้าเว็บ จึงไม่จำเป็นต้องมีสมาชิกแบบ property สมาชิกแบบที่สองซึ่งเป็นแบบสุดท้ายในคลาสนี้คือ method ซึ่งมีทั้งหมดเพียงสาม method คือ

Page_Load : เป็น method ที่ทำงานเมื่อหน้าเว็บนี้ถูกโหลด
GenGraph: ทำหน้าที่พล็อตจุด
InitGraph: ทำหน้าที่กำหนดค่าเริ่มต้นให้ ChartControl1 และ filed สมาชิก myLine1

ต่อไปเป็นคำอธิบายโค้ดในแต่ละ method โดยละเอียด

Page_Load

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

    protected void Page_Load(object sender, EventArgs e)
    {
        InitGraph();
        GenGraph();
    }

InitGraph

Method InitGraph ทำหน้าที่กำหนดค่าเริ่มต้นให้แก่ ChartControl1 และ filed สมาชิก myLine1 บรรทัดแรกสร้าง object จากคลาส LineChart ซึ่งอยู่ใน namespace WebChart บรรทัดถัดมากำหนด property Color ของ myLine1 เป็นสีดำโดยใช้ค่าจาก struct Color ซึ่งถูกนิยามไว้ใน namespace System.Drawing

ถัดมาทำหน้าที่เซต property ชื่อ Legend ซึ่งทำหน้าที่แสดงคำอธิบายข้อมูล (จะมีประโยชน์มากกว่านี้เมื่อมีกราฟหลายๆ เส้น) บรรทัดถัดมาเซต property LineMaker.Size ทำหน้าที่กำหนดขนาดของจุดแสดงตำแหน่งข้อมูลให้มีขนาด 5 พิกเซล บรรทัดต่อมาเรียก mothod Add ของคลาส WebChart เพื่อนำ object myLine1 ไปใส่ไว้เพราะ WebChart ทำหน้าที่เป็น object collection

    private void InitGraph()
    {
        myLine1 = new LineChart();
        myLine1.Line.Color = Color.Black;
        myLine1.Legend = "Weekly hit-rate";
        myLine1.LineMarker.Size = 5;
        ChartControl1.Charts.Add(myLine1);
        ChartControl1.RedrawChart();
    }

คำสั่งบรรทัดสุดท้ายเรียก mothod RedrawChat ของคลาส WebChart เพื่ออัพเดตภาพกราฟให้แสดงภาพตามการเซต property ต่างๆ แต่เรายังไม่ได้ใส่ค่าและพล็อตเส้นกราฟ

GenGraph

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

    private void GenGraph()
    {
        for (int i = 0; i < myData.Length; i++)
            myLine1.Data.Add(new ChartPoint(myString[i], myData[i]));
        ChartControl1.RedrawChart();
    }

บรรทัดแรกกำหนดการทำงานวนซ้ำด้วยคำสั่ง for จำนวนรอบในการวนซ้ำเท่ากับจำนวน array element (ตัวอย่างนี้จะวนซ้ำเจ็ดรอบ) ภายใน loop มีคำสั่งบรรทัดเดียวทำหน้าที่เรียก method ชื่อ Data.Add ของ object myLine1 เพื่อนำข้อมูลของแต่ละจุด หรือ ChartPoint ไปใส่ใน myLine1

คำว่า ChartPoint เป็น type ที่นิยามไว้ใน namespace WebChart ทำหน้าที่รับข้อมูลที่จะนำไปพล็อตกราฟ โดยรับอาร์กิวเม้นต์สองตัวคือ xvalue เป็น string ทำหน้าที่แสดงข้อความประกอบข้อมูล อีกตัวคือ yvalue เป็น float ทำหน้าที่เก็บตัวข้อมูล

คำสั่งบรรทัดสุดท้ายเรียก mothod RedrawChat ของคลาส WebChart เพื่ออัพเดต ChartControl1 ให้แสดงภาพกราฟเส้นตามข้อมูลที่เรากำหนด

สรุปเรื่องสร้างกราฟอย่างง่ายใน ASP.NET

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

Post a comment or leave a trackback: Trackback URL.

ความเห็น

  • นิติศักดิ์  On ตุลาคม 29, 2009 at 11:00 am

    ขอบคุณคับ มีประโยชน์ต่อผมมากเลยกำลังทำโปรเจคพอดีเลย

  • Supawan S.  On พฤศจิกายน 24, 2009 at 2:01 pm

    สามารถ สั่งพิมพ์หรือ export เป็นไฟล์อย่างอื่นได้ไหมค่ะ เช่น excel …ขอบคุณมากๆค่ะ

  • สาริกา  On มีนาคม 17, 2010 at 10:43 am

    ขอบคุณมากก้าบบบบ

ใส่ความเห็น

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

%d bloggers like this: