Chart as another view of Numbers

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

ผมพยายามสำรวจโปรแกรมต่าง ๆ ที่เอากราฟมาใส่เป็นส่วนประกอบ แล้วตั้งคำถามว่า อะไรคือสิ่งที่ผู้ออกแบบโปรแกรมคาดหวังต่อผู้ใช้
 
คาดหวังว่าจะใช้กราฟเป็นเครื่องมือสำคัญ? หรือขอแค่เกิดความรู้สึกว่าเจ๋งดี? เผื่อว่าจะเป็นปัจจัยที่ใช้ตัดสินว่า ยังไงโปรแกรมที่มีกราฟก็ดูดีกว่าโปรแกรมที่ไม่มี
 
เล่ามาทั้งหมด จึงมาจบตรงที่เหตุผลง่าย ๆ ที่ไม่อาจปฏิเสธ
 
"ยังไงโปรแกรมที่มีกราฟก็ดูดีกว่าโปรแกรมที่ไม่มี" 
 
นึกถึงคำใน Thinking Fast and Slow 
 
บ่อยครั้งที่คนเราตัดสินอะไรบางอย่างจากความรู้สึก จากรูปลักษณ์ภายนอกที่มองเห็น ไม่ใช่ด้วยเหตุผลความคุ้มค่าหรือประโยชน์ใช้สอยทุกครั้งตามทฤษฏีนักเศรษฐศาสตร์
 
ต่อต้านไม่สำเร็จก็ต้องเข้าร่วม จึงกลายเป็นเรื่องราวของ ChartJS ที่เอามาผนวกในโปรแกรม มีรายละเอียดระหว่างทางหลายอย่างที่อยากบันทึกไว้เป็นร่องรอยการเรียนรู้
 
Fence my words
 
เรื่องหนึ่งที่คิดไว้ว่าต้องเจอแน่ ๆ เมื่อเอากราฟมาผนวกในโปรแกรม คือ การถูกเปรียบเทียบกับบรรดาโปรแกรมที่มีอยู่แล้วอย่าง Excel, Sheets แล้วจะมีคำถามเปรียบเทียบว่าน่าจะทำอย่างโน้นได้
 
มีอาจารย์ท่านหนึ่งสอนนักศึกษาพรีเซนต์งาน ก่อนที่จะนำเสนอไอเดีย ให้เริ่มจากล้อมรั้วคำสำคัญที่จะนำเสนอก่อน ว่าเรื่องที่จะกล่าวถึงในเจตนาของคุณหมายถึงสิ่งนี้ และไม่ได้หมายถึงสิ่งนั้น เพื่อให้ผู้ฟังมีกรอบความเข้าใจตรงกัน
 
กราฟในโปรแกรม ไม่ใช่กราฟแบบที่ใช้ใน Excel, Sheets หรือโปรแกรมที่ใช้วิเคราะห์ข้อมูลต่าง ๆ ที่สามารถยุบ, ย่อ, คำนวณ, ตัดต่อ หรือหมุนมิติต่าง ๆ ได้ตามใจผู้ใช้
 
เจตนาของผมเพียงใช้เพื่อนำเสนอมิติที่มีอยู่แล้วในรายงาน แค่แสดงผลตัวเลขในรูปแบบของกราฟ 
 
บางครั้งเมื่อเราเห็นตัวเลขยอดขาย 1.2 ล้าน, 1.0 ล้าน และ 6 แสน อาจนึกไม่ออกว่าแตกต่างกันขนาดไหน แต่เมื่อแสดงตัวเลขนั้นเป็นกราฟ อาจช่วยให้เห็นภาพชัดเจนกว่า

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

การเพิ่มมิติด้วยการเทียบกราฟแบบนี้ สำหรับผมพอลองทำตัวอย่างออกมาแล้วก็รู้สึกว่าดีเกินคาด ที่สำคัญกราฟแต่ละตัวยังคงความเรียบง่ายของตัวเอง แต่พอลองทำเป็น 3 กราฟหรือมากกว่านั้น เหมือนห้องคอนโทรลที่เอาจอมาเรียงต่อกันเยอะ ๆ กลับกลายเป็นดูยาก ต้องใช้เวลาทำความเข้าใจ สูญเสียโฟกัสไป เหมาะกับการวาง layout แบบถาวร ดูซ้ำ ๆ จนเคยชินมากกว่า เมื่อไหร่ที่สลับตำแหน่งก็จะสับสน แปลกดีเหมือนกัน
 
Chart Type
 
ผมเชื่อว่า แม้แต่ความถนัดในการดูแผนภูมิที่เป็นกราฟของแต่ละคนก็ไม่เหมือนกัน บางคนอาจถนัดดูแท่ง แต่บางคนดูเส้น วงกลม หรืออื่น ๆ
 
จากข้อมูลเดียวกัน (จากรายงาน) ความสามารถเลือกเปลี่ยนรูปแบบกราฟได้เอง จึงเป็นหนึ่งในเงื่อนไขสำคัญที่ต้องมีในโปรแกรม
 
สำหรับ ChartJS แบ่งประเภทของ chart ออกแบบ 3 แนวใหญ่ ๆ
 
กลุ่มที่สามารถแสดงข้อมูลบางส่วน ได้แก่ Bar, Line และ HorizontalBar
 
กลุ่มที่ต้องแสดงข้อมูลทั้งหมด 100% เพื่อให้เป็นสัดส่วนเปรียบเทียบ ได้แก่ Pie, Doughnut
 
กลุ่มที่ก้ำกึ่งระหว่าง 2 กลุ่มแรก สารภาพว่าผมดูไม่เป็น จึงนึกไม่ออกว่าควรใช้กับข้อมูลลักษณะไหนบ้าง ได้แก่ PolarArea และ Radar (แต่ก็สวยดี)

จากรายงานที่เป็นตาราง หากมีจำนวนรายการมากจะแสดงกราฟได้เพียงกลุ่มแรก Bar, Line และ HorizontalBar จึงกำหนดว่ารายงานที่มีไม่เกิน 12 รายการ (เจตนาใช้เลขนี้เพราะคิดถึงรายงานเปรียบเทียบ 12 เดือน) จึงสามารถแสดงกราฟรูปแบบอื่น เพราะสามารถแสดงสัดส่วนเปรียบเทียบระหว่างข้อมูล 12 รายการได้ครบถ้วน
 
Number Format (Tick Label)
 
ปัญหาแรกที่เจอในกราฟ คือ การแสดงค่าตัวเลขบนเส้นแกน สมมติว่ายอดขาย 10 ล้านบาท การแสดงเป็นตัวเลข 10,000,000 นอกจากยาวยืดแล้ว ยังมีความรู้สึกว่าอ่านยาก
 
โชคดีที่ ChartJS มีความสามารถให้เขียนฟังก์ชั่นแสดงข้อความ tick สำหรับแกน x (xAxes) และแกน y (yAxes) ตามที่ต้องการได้ สำหรับ Bar, Line และ HorizontalBar

 
Pie และ Doughnut ไม่มีแกนจึงไม่มี tick การตั้งค่าจึงแตกต่างกัน
 
PolarArea และ Radar ไม่มีแกน x, y แต่มีเส้นแกนเดียว สามารถเขียนฟังก์ชั่นได้เช่นกัน เพียงใช้วิธีตั้งค่าแตกต่างกันออกไปอีก
 
จึงใช้ฟังก์ชั่นย่อเลข เพื่อให้แสดงเป็นค่าตัวเลขแบบสั้น ๆ แทน ใครอยากดูเลขแบบละเอียดไปดูเอาเองในรายงาน
 
เลขหลักพันล้านขึ้นไป แปลงให้เป็น 0.0 b (billion)
เลขหลักล้านขึ้นไป แปลงให้เป็น 0.0 m (million)
เลขหลักพันขึ้นไป แปลงเป็น 0.0 k (kilo)
 
Tooltip Label
 
การแสดงตัวเลขใน Tooltip ใช้ฟังก์ชั่นย่อตัวเลขเหมือนกับ Tick
 
ปัญหาของ Tooltip อยู่ตรงที่กราฟแต่ละกลุ่ม มีรายละเอียดไม่เท่ากัน
 
กรณีของ Bar, Line, HorizontalBar แสดงชื่อ legend (เช่น ชื่อเดือน) เป็น title และชื่อ Series (เช่น ยอดขาย) อยู่ใน Tooltip ครบถ้วน
 
เช่น
 
สิงหาคม 2566 ยอดขาย: 9.3 m (8%)

พอมาเป็น Tooltip ใน Pie, Doughnut, PolarArea และ Radar กลับไม่มี Legend title ทำให้ต้องเขียนโค้ดสำหรับฟังก์ชั่นไม่เหมือนกัน ปรับเพิ่มข้อความไว้ภายใน label ของ series แทน กลายเป็นคำว่า "ยอดขาย" + ชื่อเดือน จึงพออ่านรู้เรื่องว่าเป็นกราฟเกี่ยวกับอะไร
 
เช่น
 
ยอดขาย สิงหาคม 2566: 9.3 m (8%)

นอกจากนี้ ยังมีตัวเลข % แสดงใน Tooltip อยู่ท้ายข้อความ เป็นการคำนวณสัดส่วนเทียบกับยอดรวมทั้งหมด กรณีของกราฟวงกลมทั้งหลายเข้าใจไม่ยาก เพราะอัตราทั้งหมดจะรวมเป็น 100% เต็มวงกลมพอดี
 
แต่กรณีของ Bar, Line และ HorizontalBar กราฟที่แสดงเป็นเพียงบางส่วนของรายการทั้งหมดในรายงาน ตรงนี้มาจากคำแนะนำว่าควรหาวิธีคำนวณแบบพิเศษ ตัวเลข % นี้จึงต้องคำนวณเทียบกับยอดทั้งหมดที่มีในรายงาน (รวมรายการที่ไม่แสดงในกราฟด้วย) ไม่ใช่สัดส่วนเทียบกับรายการเท่าที่มีในกราฟ นั่นเป็นเหตุผลที่ตัดการแสดงสัดส่วนแบบกราฟวงกลมออก เมื่อไม่สามารถแสดงรายการทั้งหมดได้
 
Color Scheme
 
ปัญหาต่อมา Pie และ Donut หากใช้สีเดียวกันแสดงนอกจากไม่สวยแล้วยังดูยากด้วย จึงต้องจัดชุดลำดับของสีที่ดูดี (ในความคิดของผม) ให้ได้ 12 สีตามจำนวนรายการสูงสุดที่กำหนดไว้
 
หลังจากหา ชุดสี ที่มีอยู่แล้วมาลองใช้แล้วก็ยังไม่ถูกใจ ไม่ตรงกับคอนเซปท์ที่ต้องการ ในที่สุดผมก็เลือกจัดชุดสีเอง เป็นโทนพาสเทลไม่เหมือนใคร แอบหวังให้จดจำได้ว่านี่คือชุดสีของกราฟจากโปรแกรมนี้ 
colors: [
'rgba(0,190,214,1.0)', 'rgba(56,142,60,1.0)', 'rgba(174,234,0,1.0)',
'rgba(161,136,127,1.0)', 'rgba(255,23,68,1.0)', 'rgba(255,151,118,1.0)',
'rgba(138,43,226,1.0)', 'rgba(218,112,214,1.0)', 'rgba(0,0,128,1.0)',
'rgba(109,161,224,1.0)', 'rgba(128,0,0,1.0)', 'rgba(184,134,11,1.0)',
],
 
นอกจากชุดของสีสำหรับ element ของข้อมูลในกราฟวงกลมแล้ว ชุดสีนั้นยังใช้กับ series ของข้อมูลในกราฟประเภทอื่นด้วย เช่น แสดงตัวเลขจำนวนออเดอร์ เทียบกับยอดที่สั่งจัดสินค้าของทีม OP (Order Processing) จะเห็นว่าสีฟ้า ที่เป็นลำดับแรกในกราฟวงกลม เป็นสีฟ้าเดียวกับที่แสดงในกราฟแท่งของเลขชุดแรก และสีเขียวเป็นสีสำหรับเลขชุดลำดับที่สอง
 

กราฟวงกลมสร้างชุดสีสำหรับแสดงมากกว่า 1 series แตกต่างกัน ใช้วิธีกำหนดค่า alpha (ความโปร่งใส) ใน rgba ของ 12 สีชุดแรก ทำให้ดูเหมือนมีความเข้มของเฉดสีไม่เท่ากันแทน

สรุป
 
กราฟในโปรแกรมใช้สำหรับสะท้อนภาพตัวเลข เพื่อเป็นตัวเลือกในการดูรายงานที่มีอยู่เดิมในโปรแกรม แต่ไม่ใช้สำหรับสร้างแผนภูมิวิเคราะห์สิ่งที่ไม่มีในรายงาน โมเดลของรายงานออกมายังไงกราฟก็ออกมาอย่างนั้นตรงไปตรงมา เน้นจุดเด่นที่ความไม่ซับซ้อน และเลือกเปลี่ยนรูปแบบได้ง่าย
 
วัตถุประสงค์สำคัญของการมีกราฟในโปรแกรม เพื่อแสดงภาพของ "ความปกติ" ให้ผู้ใช้เสียเวลาเปิดจอนั้นมาดูเพียงแค่แว๊บเดียว แล้วเห็นว่า วันนี้​ (หรือสัปดาห์นี้) ตัวเลขที่เฝ้าติดตามยังอยู่ในเกณฑ์ปกติ
 
บางทีคุณค่าอาจอยู่ที่ทำอย่างไรจึงใช้เวลาอยู่กับมันน้อยที่สุด ไม่ใช่ใช้งานมาก ๆ ขลุกอยู่นาน ๆ
 
อ้างอิง
 
Angular-ChartJS
 
https://github.com/jtblin/angular-chart.js
 
Awesome ChartJS
 
https://github.com/chartjs/awesome

 
NumeralJS (number format)
 
http://numeraljs.com/#format
 
ChartJS (custom tick label)
 
https://www.chartjs.org/docs/2.9.4/axes/labelling.html#creating-custom-tick-formats
 
ChartJS (custom tooltip label)
 
https://www.chartjs.org/docs/2.9.4/configuration/tooltip.html#label-callback
 
ChartJS colorschemes
 
https://github.com/nagix/chartjs-plugin-colorschemes