Data Visualization นำเสนอข้อมูลเป็นรูป/กราฟแบบไหนดี ? กับข้อมูลที่มีอยู่

การสือสารที่มีอรรถรสสำหรับการมอง/อ่าน ที่ข้อมูลครบถ้วนโดยมีมิติ มุมมองและการเปรียบเทียบ จบในหน้าเดียวหรือรูปเดียว คือนิยาม Data Visualization ของผมครับ เราก็มาดูกันครับ เอาข้อมูลแบบไหนมาชนกับ Data Visualization แบบไหนถึงจะตรงประเด่นการนำเสนอข้อมูลด้วยภาพ ต้องการเปรียบเทียบข้อมูล (Comparison) กลุ่มนี้ก็จะมี Bar Chart Line Chart Bubble Chart Grouped Bar Table Pivot Table Bar Chart และ Grouped Bar ใช้เปรียบเทียบข้อมูลตามเงื่อนไขที่สนใจ ใช้เปรียบเทียบมิติจำนวนข้อมูลที่สนใจกับช่วงที่สนใจ เช่น เปรียบเทียบเป้าหมายที่ตั้งไว้กับข้อมูลที่ทำได้จริงในแต่ละเดือน, จำนวนนักศึกษา ในแต่ละปีการศึกษา เป็นต้น Line Chart ใช้เปรียบเทียบเพื่อดูแนวโน้มของข้อมูล ใช้เปรียบเทียบมิติของข้อมูล ในเชิงต้องการดูเพื่อเปรียบเทียบการเปลี่ยนแปลง ดูแนวโน้ม (Trends) โดยอาจจะเทียบกับมิติของเวลา (Time Series) และยังนำไปใช้ร่วมกับ machine learning เพื่อพยากรณ์ข้อมูลในอนาคตได้ด้วย เช่น ข้อมูลการถอนรายวิชาในแต่ละเดือนเปรีบเทียบ 3 ปีที่ผ่านมา จำนวนนักเรียนที่สมัครเข้าเรียนใน มอ. แยกตามโครงการ 5 ปีที่ผ่านมา เป็นต้น ตัวอย่างเป็นเปอร์เซ็นต์นักศึกษาเพศชายกับเพศหญิง Bubble Chart ใช้แสดงข้อมูลที่มีความสัมพันธ์กันแบบ 3 มิติ ใช้เปรียบเทียบแบบ 3 มิติข้อมูล เช่น แกน X แสดง จำนวนอาจารย์แกน Y แสดง จำนวนเงินค่าลงทะเบียนขนาดและจำนวนแต่ละฟอง แทน คณะและจำนวนนักศึกษาถ้าเปรียบเทียบแบบนี้ก็จะเห็นความสัมพันธ์ของข้อมูลทั้ง 3 ข้อมูลและสามารถตั้งเป้าหมาย หาค่ามากที่สุด น้อยที่สุดที่สนใจได้ Table ใช้เปรียบเทียบข้อมูลแบบแนวตั้ง เป็นการเปรียบเทียบพื้นฐานที่สุดเลย เป็นการเปรียบเทียบชุดข้อมูลที่ไม่ซับซ้อน เช่น Pivot Table ใช้เปรียบเทียบข้อมูลแนวนอน เหมาะสำหรับการเปลี่ยนเทียบข้อมูลเพื่อหาความแตกต่างตามแนวนอน มักจะใช้กับเวลา เดือน ปี เป็นแนวนอนและรายการข้อมูลที่สนใจเป็นแนวตั้งที่สามารถ Filter ได้ เช่น จำนวนค่าลงทะเบียนในแต่ละปีแยกตามคณะ 5 ปีที่ผ่านมาเป็นแนวนอนและรายชื่อคณะเป็นแนวตั้งที่สามารถ Filter ได้ เป็นต้น ต้องการดูการกระจาย (Distribution) สามารถใช้เมื่อต้องการดูความถี่ของข้อมูลว่ามีลักษณะการกระจายตัวอย่างไร HistogramLine HistrogramScatter PlotBox Plot Histogram แสดงความสัมพันธ์ระหว่างข้อมูล ดูการการจายความถี่ของข้อมูล Scatter Plot แสดงการกระจายของการจับคู่ข้อมูล เหมาะสำหรับแสดงการจับคู่ข้อมูลเพื่อดูการกระจายผลเช่น การวัดผลก่อนเรียนและหลังเรียน การวัดผลการทดลองสองกลุ่มทดลอง การวัดน้ำหนักสองครั้งจากคนเดียวกัน 100 คนในวิธีควบคุมอาหาร เป็นต้น จะเห็นอะไรจาก Scatter Plot -แนวโน้มของข้อมูลระหว่างตัวแปร-ความผิดปกติจากภาพรวม -กลุ่มก้อนภาพรวมของข้อมูล Box Plot เพื่อดูการกระจายของข้อมูลและมีค่าต่างๆประกอบอยู่ในกราฟคือ ค่ากลาง ค่าการการะจาย ค่ามากสุด น้อยที่สุดและข้อมูลห่างกลุ่มมาก (Outlier) Box Plot Chart จะมีข้อมูลแบ่งออกเป็น 3 ช่วงคือ25% (Q1) คือข้อมูล 25% แรกจากค่าต่ำขึ้นมา50% (Q2) คือข้อมูลตัวที่มากกว่า 25% จนถึงตัวที่ 75% โดยแสดงออกมาในรูป สี่เหลี่ยมผืนผ้า75% (Q3) คือข้อมูล 50% ของข้อมูลอยู่ เขียนแทนด้วยเส้นตรงอยู่ภายในรูปสี่เหลี่ยมผืนผ้า ค่านี้คือค่าค่ากลางของข้อมูลทั้งหมด (Median) และตรงค่า เฉลี่ย (Mean) จะแทนด้วย เครื่องหมายบวกสำหรับตัวอย่างที่น่าจะยกได้สำหรับการศึกษาอาจจะเป็นผลการเรียนของนุักศึกษา ดูการแบ่งสัดส่วน (Composition) ต้องการเห็นภาพรวมพร้อมกับส่วนต่างๆที่สนใจ TreemapDonut ChartStacked Area ChartStacked BarPie ChartWaterfall Chart Treemap เป็น Chart ตารางสี่เหลี่ยม โดยใช้สีแยกกลุ่มของข้อมูล และขนาดของสีสี่เหลี่ยมบอกถึงปริมาณของข้อมูลแต่ละกลุ่ม เป็นกราฟที่ดูง่ายเข้าใจในทันทีที่เห็น Pie Chart Pie Chart เป็น Chart ที่แสดงสัดส่วนของข้อมูลดังเดิมที่เข้าใจง่าย เห็นการแยกสัดส่วนตามสีของแต่ละส่วน (เหมือนพิสซ่ามากกว่าพาย) ดูความสัมพันธ์ (Relationship) ของข้อมูล HeatmapWorldmapColumn/Line

Read More »

ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView จาก Code Behind

จากบทความ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery ท่านผู้อ่านที่ได้เข้าไปอ่านแล้วอาจจะมีคำถามว่าถ้าไม่อยากใช้ jQuery ล่ะ เนื่องด้วยสาเหตุอะไรก็แล้วแต่ วันนี้ผมก็จะมานำเสนอการซ่อน/แสดงคอลัมน์ใน ASP.NET GridView อีกวิธี ซึ่งจะเป็นการควบคุมจาก code behind ที่เป็นภาษา C# หรือ VB.NET ในที่นี่ผู้เขียนจะใช้ภาษา C# ซึ่งจะมีขั้นตอนต่างๆ ดังต่อไปนี้ 1. ตัวอย่างโค้ด HTML จะมีการแก้ไขเพิ่มขึ้นอีกเล็กน้อยจากบทความเดิม โดยสิ่งที่เพิ่มขึ้นมาจะอยู่ที่ CheckBox คือ AutoPostBack=”true” เพื่อให้มีการ PostBack ทุกครั้งที่มีการคลิก Checkbox OnCheckedChanged=”chkCallNo_CheckedChanged” คือ event ที่อยู่ใน code behind ที่จะถูกเรียกใช้เมื่อมีการคลิก 2. โค้ดในส่วนของการจำลองข้อมูล สามารถใช้โค้ดเดิมจากบทความเก่าได้เลย 3. เพิ่มโค้ดใน chkCallNo_CheckedChanged เพื่อควบคุมการซ่อน/แสดงคอลัมน์ที่ต้องการ โดย gvBib.Columns[3].Visible จะเป็นการกำหนดให้คอลัมน์ที่ 3 ของ Gridview แสดงผลหรือไม่ ซึ่งก็คือคอลัมน์ CallNo นั่นเอง (จะเริ่มนับตั้งแต่ 0) 4. ทดสอบการใช้งาน 5. จะเห็นว่าระบบสามารถทำงานได้ตามความต้องการ คอลัมน์จะซ่อน/แสดงได้ตามเงื่อนไขที่เราเลือกจาก checkbox แต่จะสังเกตเห็นว่า ทุกครั้งที่มีการเลือก checkbox ระบบจะ refresh หน้าจอใหม่ทุกครั้ง ซึ่งถ้าในหน้าจอที่เรากำลังทำงานมีข้อมูลอื่นๆ อีกหลายอย่าง ก็จะถูกโหลดซ้ำโดยไม่จำเป็น เพื่อแก้ไขปัญหานี้ ASP.NET จะมีเครื่องมือที่เรียกว่า UpdatePanel ซึ่งจะทำงานในแบบ Partial Load ได้ตามตามเงื่อนไขที่เรากำหนด โดยเราจะต้องปรับแก้โค้ด HTML เพิ่มเติมดังนี้ สิ่งที่เพิ่มเติมเข้ามาคือ ScriptManager สำหรับใช้ควบคุมการทำงาน UpdatePanel UpdatePanel ใช้ครอบ component หรือพื้นที่ที่เราต้องให้สามารถทำ Partial Load ได้ ในที่นี่คือเราครอบ Gridview นั่นเอง Triggers จะเป็นการกำหนดเพื่อให้เกิด Partial Load ตาม control และ event ที่ได้ระบุเอาไว้ ในที่นี้คือ จะโหลดเมื่อ chkCallNo เกิด event CheckdChanged ซึ่งก็คือเหตุการณ์คลิกนั่นเอง ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง จะเห็นว่าหลังจากมีการปรับแก้โค้ดไปแล้ว ทุกครั้งที่มีการคลิก CheckBox และมีการซ่อน/แสดงคอลัมน์ จะไม่มีการ refresh หน้าจออีกแล้ว เพราะ UpdatePanel ที่เราได้เพิ่มเข้าไปจะควบคุมให้มีการโหลดข้อมูลใหม่เฉพาะ component ที่อยู่ภายใน UpdatePanel เท่านั้น จากบทความนี้ก็จะเป็นวิธีการซ่อน/แสดงคอลัมน์ใน Gridview อีกทางเลือกหนึ่ง ที่ผู้อ่านสามารถนำไปประยุกต์ใช้กับงานของตัวเองได้ ในกรณีที่เราไม่อยากเพิ่ม jQuery เข้ามาในโครงการที่กำลังทำ หรือเห็นว่าไม่ถนัดในการใช้งาน jQuery ก็ตามแต่ ซึ่งผู้อ่านสามารถเลือกแนวทางได้เองตามอัธยาศัย สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx http://theheing.blogspot.com/2012/04/ajax-updatepanel-control.html

Read More »

ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery

การแสดงผลข้อมูลใน Gridviews ในบางสถานการณ์เราต้องการซ่อนข้อมูลบางคอลัมน์ออกไปก่อนตามเงื่อนไขใดๆ และเมื่อเงื่อนไขเปลี่ยนเราก็จะแสดงข้อมูลในคอลัมน์ที่ถูกซ่อนนั้นออกมา ในบทความนี้ผู้เขียนจะแสดงตัวอย่างการ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วยชุดคำสั่ง jQuery โดยมีขั้นตอนดังต่อไปนี้ 1. เพิ่มโค้ด HTML ดังตัวอย่างด้างล่าง ซึ่งเป็นโค้ดที่แสดง Checkbox เพื่อใช้เลือกแสดงคอลัมน์ CallNo และ ASP.NET GridView ที่มีข้อมูล 5 คอลัมน์ 2. เพิ่มโค้ดใน event Page_Load ในหน้า code behind เพื่อจำลองข้อมูลที่จะใช้แสดงใน GridView เนื่องจากโค้ดตัวอย่างมีการใช้งาน class DataTable และ DataColumn ซึ่งอยู่ใน namespace System.Data เพราะฉะนั้นจะต้อง Import namespace นี้ด้วย 3. เพิ่มโค้ด jQuery เพื่อควบคุมการแสดง/ซ่อน คอลัมน์ เมื่อมีการคลิก เลือก/ยกเลิก เช็คบ๊อก (โดยในบทความนี้ผู้เขียนขออนุญาตข้ามขั้นตอนการติดตั้ง jQuery ออกไป) ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง และเมื่อคลิกเช็คบ๊อก Show CallNo ออก คอลัมน์ CallNo ใน Gridview ก็จะหายไป จากตัวอย่างโค้ดในบทความนี้ จะเห็นว่าการซ่อนหรือแสดงคอลัมน์ด้วย jQuery ไม่ได้มีความยุ่งยาก สามารถนำไปประยุกต์ใช้กับงานของท่านได้ ซึ่งผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้น่าจะมีประโยชน์กับท่านผู้อ่านไม่มากก็น้อย สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx

Read More »

กำหนด Lexer สำหรับ Full Text Search บน ฐานข้อมูล Oracle เพื่อค้นหาภาษาไทยให้ถูกต้อง

เนื่องจากระบบสืบค้นที่ดูแลอยู่เจอปัญหาค้นหาเลขไทย “๑ ๒ ๓ …” ไม่เจอ หลังจากตรวจสอบจนแน่ใจแล้วว่าก่อนจะส่งคำสั่ง Query ไปยังฐานข้อมูลไม่ได้เผลอตัดเลขไทยออกที่ขั้นตอนไหน จึงทำการตรวจสอบคำสั่งที่ใช้ในการค้นหา พบว่าใช้ฟังก์ชัน SELECT * FROM THAI_LIBRARY WHERE CONTAINS(BOOK_NAME, ‘๑๐๐ ปีชาติไทย’, 1) > 0; จากคำสั่ง (ที่สมมุติขึ้น) ด้านบนจะเห็นได้ว่าใช้ CONTAINS ซึ่งเป็นฟังก์ชันที่อยู่ในกลุ่ม Oracle Text ซึ่งฟังก์ชันนี้จะค้นหาคำใกล้เคียงจาก Index แล้วคืนค่า Score มาให้เราเพื่อใช้เป็นเงื่อนไขพิจารณาว่าจะใช้ข้อมูลรายการนั้นหรือไม่ ที่มาภาพ ภาพด้านบนแสดงขั้นตอนการสร้าง Oracle Text Index เนื่องจากระบบจัดเก็บข้อมูลเป็น Text อยู่แล้วจึงไม่มีการกำหนด Fillter, Sectioner ทำให้จุดที่ต้องตรวจสอบว่า เลขไทยเราหายไปจาก Index ได้ยังไงเหลืออยู่คือ Lexer ที่จะเป็นตัวกำหนด Wordlist, Stoplist ในการทำ Index ต่อไป ไปดูว่ามี Lexer อะไรบ้าง จากตารางด้านบน เนื่องจากฐานข้อมูลของระบบที่ดูแลอยู่ประกอบไปด้วย ภาษาไทย ภาษาอังกฤษ เป็นหลัก และอาจจะมีภาษาอื่นๆปนอยู่ด้วย Lexer ที่น่าจะใช้ได้คือ AUTO_LEXER, MULTI_LEXER, WORLD_LEXER หลังจากได้ทดสอบกำหนดค่า Lexer ให้กับฐานข้อมูล และทดสอบค้นหาด้วย เลขไทย พบว่าจะต้องใช้ WORLD_LEXER จึงจะสามารถรองรับกรณีนี้ได้ โดยใช้คำสั่งดังนี้ EXEC CTX_DDL.CREATE_PREFERENCE(‘WorldLex’, ‘world_lexer’); DROP INDEX USER01.IDXFT_THAI_LIBRARY_BOOKNAME; CREATE INDEX USER01.IDXFT_THAI_LIBRARY_BOOKNAME ON USER01.THAI_LIBRARY(BOOK_NAME)INDEXTYPE IS CTXSYS.CONTEXTPARAMETERS(‘LEXER WorldLex STOPLIST CTXSYS.EMPTY_STOPLIST SYNC(ON COMMIT)’)NOPARALLEL; USER01 คือ User ของฐานข้อมูล Oracle THAI_LIBRARY คือ ชื่อตาราง BOOK_NAME คือ ชื่อคอลัมภ์ ที่ต้องการทำ Index IDXFT_THAI_LIBRARY_BOOKNAME ชื่อ ตาราง index ผลพลอยได้ จากการปรับในครั้งนี้พบว่าเดิมต้องทำการตัดคำให้เรียบร้อย (เนื่องจากค่า Default คือ Basic Lexer ที่แบ่งคำด้วยช่องว่างเท่านั้น) เพื่อค้นหา แต่เมื่อปรับ Lexer ให้ถูกต้องสามารถส่งคำค้นเป็นประโยคยาวๆ ไปค้นหาได้เลย หวังว่าบทความนี้จะเป็นประโยชน์กับท่านที่ใช้งาน Full Text Search ของ Oracle และประสบปัญหาคล้ายๆกันนี้ครับ

Read More »

Bootstrap Modal Full Screen

หลายๆ ท่านที่เคยใช้งาน Bootstrap เป็น Frontend Framework น่าจะเคยใช้ modal กันมาบ้าง ซึ่ง modal เป็นจาวาสคลิปต์ปลั๊กอิน มีไว้สำหรับการแสดงผลข้อมูล ทั้งรูปภาพ ข้อความ หรือแบบฟอร์มรับข้อมูล ( html input form ) ในลักษณะป๊อปอัพ ซึ่ง modal ของ bootstrap สามารถแสดงผลได้หลายขนาด ทั้งแบบปกติ แบบเล็ก และแบบใหญ่ ขึ้นอยู่กับ class ที่เราสามารถระบุเพิ่มเข้าไปว่าต้องการให้แสดงผลเป็นแบบไหน ตัวอย่างโค้ด modal dialog และปุ่มสำหรับเปิด modal จะได้ผลลัพธ์ดังรูป ถ้าต้องการให้ modal แสดงผลใหญ่ขึ้นหรือเล็กลง ให้ระบุ modal-lg modal-sm หลัง modal-dialog ดังตัวอย่าง ถ้าเราต้องการให้ modal สามารถแสดงผลแบบเต็มจอ (full screen) จะไม่สามารถทำได้ (อ้างอิงจากเวอร์ชัน 3.3 ที่ผู้เขียนใช้งาน แต่จากการตรวจสอบล่าสุดพบว่าเวอร์ชัน 5.0 สามารถทำได้แล้ว) แต่เราจะใช้ความรู้ในเรื่อง css มาปรับแต่งเพิ่มเติมเพื่อให้สามารถแสดงผลได้ตามความต้องการ โดยเราจะต้องเพิ่ม css class ที่ระบุคุณสมบัติที่จำเป็น ดังตัวอย่าง ระบุ class fullscreen ไว้ด้านหลัง modal-dialog modal จะได้แสดงผลเต็มจอดังรูป และเพื่อให้การแสดงผล modal มีความยืดหยุ่นและมีการทำงานใกล้เคียงกับ dialog ของ Windows ทั่วไป คือสามารถขยายให้เป็น full screen และย่อให้กลับมาขนาดเท่าเดิม โดยสิ่งที่เราต้องทำเพิ่มคือ เพิ่มปุ่ม fullscreen เมื่อ modal แสดงผลอยู่ในสภาพปกติ เมื่อคลิกปุ่ม fullscreen จะเปลี่ยนการแสดงผล modal ให้เป็นแบบ fullscreen ซ่อนปุ่ม fullscreen และแสดงผลปุ่ม restore แทน เพิ่มปุ่ม restore เมื่อ modal แสดงผลในรูปแบบ fullscreen เมื่อคลิกปุ่ม restore จะเปลี่ยนการแสดงผล modal กลับไปเป็นสภาพปกติ ซ่อนปุ่ม restore และแสดงผลปุ่ม fullscreen แทน โดยมีขั้นตอนดังต่อไปนี้ 1. เพิ่มปุ่ม fullscreen และปุ่ม restore ใน div class=”modal header” จะเห็นว่าปุ่มที่เพิ่มขึ้นมาจะมีการระบุชื่อ class “restore-dialog” และ “fullscreen-dialog” ซึ่งจะใช้ในการอ้างถึงในโค้ด jQuery ที่ใช้ควบคุมการทำงานเมื่อมีการคลิกปุ่มนั้นๆ 2. เนื่องจากผู้เขียนใช้ icon ที่อยู่ใน font awesome ดังนั้นจะต้องเพิ่ม link style sheet เพื่ออ้างไปถึงไฟล์ css ของ font awesome ภายนอกไซต์ที่กำลังพัฒนา (CDN) โดยไปเพิ่มไว้ใน tag <head></head> 3. เพิ่มชุดคำสั่ง jQuery 4. ทดสอบ ก็จะได้ผลลัพธ์ดังภาพ จะเห็นว่ามีปุ่ม fullscreen แสดงอยู่ เมื่อกด modal จะแสดงผลเป็น fullscreen ดังภาพ และเมื่อกดปุ่ม restore หน้าจอ modal ก็จะแสดงผลกลับไปเป็นเหมือนเดิม หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อย น่าจะพอเป็นแนวทางให้ผู้อ่านนำไปประยุกต์ใช้กับงานของตัวเองนะครับ สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.jquery-az.com/minimize-maximize-modal-of-bootstrap-by-using-jquery-3-demos/ https://getbootstrap.com/docs/3.3/javascript/#modals

Read More »