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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมื่อต้องการกำหนดค่าชุดข้อมูล ให้แทรกข้อมูลลงในตาราง 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 อีกครั้ง หน้าจอควรแสดงลักษณะเหมือนภาพนี้ แผนภูมิใหม่แสดงการเปรียบเทียบรายได้ระหว่างกรุงเทพฯ และต่างจังหวัดตามไตรมาสในแผนภูมิคอลัมน์

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

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

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

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

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

Record 1

Record 2

Record 3

Record 4

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

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

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