เมื่อต้องการสร้างเมนู ให้แทรกข้อมูลลงในตาราง DASHBOARD_MENU ตามค่าเหล่านี้

เมื่อต้องการสร้าง chart widget ให้แทรกข้อมูลลงในตาราง WIDGET_PREF ตามค่าเหล่านี้

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

มี 2 วิธีในการสร้างแดชบอร์ดในแพลตฟอร์ม ONEWEB

การใช้ Widget Dashboard นี่เป็นวิธีการสร้างแดชบอร์ดแบบเก่าในแพลตฟอร์ม ONEWEB ONEWEB ยังคงสนับสนุน widget นี้ และด้วยเหตุนี้แดชบอร์ดที่มีอยู่ทั้งหมดจึงยังสามารถทำงานบน ONEWEB เวอร์ชันใหม่กว่าได้

การใช้ Charts extension ใน Page Designer จากเวอร์ชัน 4.0.0.19 Page Designer มี charts extensionสำหรับ ONEWEB การใช้ส่วนขยายนี้ ผู้ใช้สามารถสร้างแผนภูมิหรือกราฟแบบไดนามิกที่สามารถรวมไว้ในหน้าเว็บหรือแอพพลิเคชันมือถือได้อย่างง่ายดาย

เราจะดูวิธีสร้าง widget chart ใหม่ในหน้า dashboard ด้วยเทมเพลตของหน้าที่มีอยู่

ข้อกําหนดเบื้องต้น (Prerequisites) ก่อนที่คุณจะเริ่ม tutorial ตรวจสอบให้แน่ใจว่า workstation ของคุณตรงตามข้อกำหนดต่อไปนี้

• เครื่องมือไคลเอ็นต์ฐานข้อมูลเพื่อเชื่อมต่อกับฐานข้อมูลเพื่อเลือก (select), แทรก (insert), อัปเดต (update ) และ ลบ (delete) ข้อมูลในสคีมาแดชบอร์ด

• เว็บเบราว์เซอร์ (แนะนำให้ใช้ Chrome)

เมื่อต้องการสร้างเพจ ให้แทรกข้อมูลลงในตาราง PAGE ตามค่าเหล่านี้

เมื่อต้องการเพิ่ม chart widget บนเพจ ให้แทรกข้อมูลลงในตาราง PAGE_WIDGET_PREF ตามค่าเหล่านี้

ไปที่หน้าแดชบอร์ด http://:/LightWidget/dashboard.do

จากนั้นคลิกหน้า Training ที่คุณกำหนดค่าไว้ ควรแสดงหน้าจอดังรูปนี้

Widget Dashboard เป็นเครื่องมือที่ช่วยให้คุณสร้างแผนภูมิหรือแดชบอร์ดพื้นฐานโดยการกำหนดค่าได้อย่างง่ายดาย

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

ส่วนประกอบหน้าแดชบอร์ดหลัก

ส่วนประกอบของ Widget dashboard

หากต้องการเพิ่มอีกชุด ให้เปลี่ยนประเภทแผนภูมิกลับเป็นแผนภูมิเส้น

• หากต้องการเปลี่ยนประเภทแผนภูมิจาก Pie เป็น Line อัปเดตคอลัมน์ DASHTYPE ของตาราง DASH_WIDGET_PROP ที่บันทึกเป็น "line"

• ในการเปลี่ยนประเภทชุดจากแผนภูมิวงกลมเป็นเส้นตรง อัปเดตคอลัมน์ CHART_TYPE ของตาราง DASH_WIDGET_CHART_PROP ที่บันทึกเป็น "line"

• แทรก record อื่นลงในตาราง DASH_WIDGET_CHART_PROP ตามค่าเหล่านี้

คลิกหน้า training อีกครั้ง หน้าจอควรแสดงเป็นภาพด้านล่าง แผนภูมิใหม่แสดงการเปรียบเทียบรายได้ระหว่างกรุงเทพฯ และเชียงใหม่เป็นรายไตรมาส

เมื่อต้องการกำหนดค่า chart ให้แทรกข้อมูลลงในตาราง DASH_WIDGET_PROP ตามค่าเหล่านี้

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

เมื่อต้องการแก้ไขชุดข้อมูล ให้อัพเดตข้อมูลในตาราง DASH_WIDGET_CHART_PROP ตามไฮไลต์สีส้มเพื่อเปลี่ยนข้อมูล

คลิกหน้า training อีกครั้ง ควรแสดงหน้าจอดังรูปนี้

แผนภูมิใหม่แสดงรายได้ของกรุงเทพมหานครเปรียบเทียบในแต่ละไตรมาส

หากต้องการเปลี่ยนประเภทแผนภูมิจากเส้นเป็นวงกลม อัพเดตคอลัมน์ DASHTYPE ของตาราง DASH_WIDGET_PROP บันทึกเป็น "pie"

หากต้องการเปลี่ยนประเภทจาก Line เป็น Pie อัพเดตคอลัมน์ CHART_TYPE ของตาราง DASH_WIDGET_CHART_PROP บันทึกเป็น "pie"

คลิกหน้า training อีกครั้ง หน้าจอควรแสดงเป็นภาพด้านล่าง แผนภูมิใหม่แสดงการเปรียบเทียบรายได้ระหว่างกรุงเทพฯ และต่างจังหวัด โดยหนึ่งในสี่ในแผนภูมิวงกลม

เมื่อต้องการกำหนดค่าชุดข้อมูล ให้แทรกข้อมูลลงในตาราง DASH_WIDGET_CHART_PROP ตามค่าเหล่านี้

คลิกหน้า training อีกครั้ง หน้าจอควรแสดงเป็นภาพด้านล่าง

กราฟแสดงการเปรียบเทียบรายได้ในไตรมาสแรกของแต่ละจังหวัด

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

สร้างหน้าปกติในแอพพลิเคชันของคุณและออกแบบโครงร่างตามต้องการ เพิ่มส่วนขยายแผนภูมิจากแท็บส่วนประกอบแล้วลากไปยังผืนผ้าใบบนหน้า

ผู้ใช้สามารถกำหนดค่าคุณสมบัติของแผนภูมิเพื่อเลือก chart type, title, style และ color scheme สำหรับแผนภูมิ

ใช้ยังสามารถให้ข้อมูลแบบ static สำหรับการโหลดครั้งแรก

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

จากเวอร์ชัน 4.0.0.19 ตัวออกแบบหน้ามีส่วนขยายแผนภูมิเพื่อออกแบบแผนภูมิแบบไดนามิกบนหน้าเว็บหรือแอพพลิเคชันมือถือ ผู้ใช้ต้องติดตั้งส่วนขยายแผนภูมิที่มาเป็นแพ็คเกจด้วยเครื่องมือ ONEWEB Page Designer

หากต้องการเปลี่ยนสีของชุดข้อมูล ให้อัปเดตคอลัมน์ FIELD_COLOR ของตาราง DASH_WIDGET_CHART_PROP ของกรุงเทพฯ เป็น "สีเขียว"

คลิกหน้า training อีกครั้ง ควรแสดงหน้าจอดังรูปนี้ ผังใหม่จะเปลี่ยนสีกรุงเทพฯ เป็นสีเขียว

เปลี่ยนแผนภูมิเป็นแบบเรียงซ้อนของคอลัมน์ (column stack)

• แทรก record อื่นลงในตาราง DASH_WIDGET_CHART_PROP ตามค่าเหล่านี้

• หากต้องการเปลี่ยนประเภทจาก Line เป็น Column อัปเดตคอลัมน์ CHART_TYPE ของตาราง DASH_WIDGET_CHART_PROP จาก 2 รายการก่อนหน้าเป็น "คอลัมน์

  เพื่อสร้างกลุ่มซ้อน BANGKOK อัปเดตคอลัมน์ STACK_GROUP ของตาราง DASH_WIDGET_CHART_PROP ของ BANGKOK เป็น "BANGKOK

• หากต้องการเพิ่มเชียงใหม่ลงในกลุ่มซ้อน UP_COUNTRY อัปเดตคอลัมน์ STACK_GROUP ของตาราง DASH_WIDGET_CHART_PROP ของ CHIANGMAI เป็น "UP_COUNTRY

• หากต้องการเปลี่ยนประเภทแผนภูมิเป็นคอลัมน์แบบสแตก อัปเดตคอลัมน์ DASHTYPE ของตาราง DASH_WIDGET_PROP ของวิดเจ็ตเป็น "stacked_group_column

• หากต้องการเปลี่ยนประเภทแผนภูมิเป็นคอลัมน์แบบสแตกอัปเดตคอลัมน์ DASHTYPE ของตาราง DASH_WIDGET_PROP ของวิดเจ็ตเป็น "stacked_group_column

คลิกหน้า training อีกครั้ง หน้าจอควรแสดงลักษณะเหมือนภาพนี้ แผนภูมิใหม่แสดงการเปรียบเทียบรายได้ระหว่างกรุงเทพฯ และต่างจังหวัดตามไตรมาสในแผนภูมิคอลัมน์

หากต้องการเปลี่ยนสีวงกลม ให้แทรกข้อมูลลงในตาราง DSH_WIDGET_DATA_COLOR ตามค่าเหล่านี้

Record 1

Record 2

Record 3

Record 4

คลิกหน้า training อีกครั้ง หน้าจอควรแสดงเป็นภาพด้านล่าง มีการเปลี่ยนสีในแต่ละไตรมาส

ในการรวมองค์ประกอบแผนภูมิเข้ากับข้อมูลจาก Microflow ผู้ใช้เพียงเรียก Microflow และใช้คุณสมบัติการเชื่อมต่อกับข้อมูลในองค์ประกอบแผนภูมิเพื่อเชื่อมต่อกับข้อมูลจาก Microflow

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

แต่สำหรับแผนภูมิวงกลม ข้อมูลจาก Microflow ควรเป็นไปตามรูปแบบด้านล่าง

ผู้ใช้สามารถดึงข้อมูลจากฐานข้อมูลโดยใช้โหนดฐานข้อมูลหรือจากระบบอื่นโดยใช้โหนด WebServices