How to create Dynamic Kendo Gantt Chart in ASP.Net ตอนที่ 2

หลังจากที่เราเกริ่นกันไปใน ตอนแรก เกี่ยวกับ web ui controller มาถึงตอนที่สอง ตอนนี้จะเขียนถึงการวาดกราฟขึ้นมาจากข้อมูลที่เราได้จาก ตอนแรก ซึ่งตอนนี้จะเป็นโค้ดและวิธีเกี่ยวกับ Java Script ทั้งนั้น

1.Java Script ก็เขียนฟังชั่นค์ ในการเรียกข้อมูลโดยใช้ Ajax Call ซึ่งถ้าได้ข้อมูลมาแล้วก็จะสั่งให้ฟังค์ชั่น สำหรับการเรนเดอร์ฟังชั่นต่อไป ดังภาพข้างนี้นี้

2.หลังจากที่ได้ข้อมูลมาแล้ว ก็จะมาทำการสร้างหัวคอลัมน์ใน Grid กัน ซึ่งในตัวอย่างนี้ใช้ วันเริ่มต้น กับวันสุดท้าย จากวันที่ที่เลือกมา จากนั้นก็สร้าง ตัวแปรแบบ Array ขึ้นมาเก็บชื่อของแต่ละคอลัมน ์ซึ่งส่วนที่สำคัญคือการ ทำ Group Header เป็นการ group ชั่วโมง ต่อ วัน

3. เขียนสริปต์เพื่อที่จะสร้าง Template จากนั้นข้อมูลที่ได้จากในนี้จะถูกนำไปวาดลงในกริด

4. ใช้ ฟังค์ชั่นนี้ในการเขียนตารางและ return ค่ากลับไปที่ template ฟังค์ชั่นนี้จะทำงานเกี่ยวกับการหา คอลัมน์ที่มาจากจำนวนชั่วโมงในหนึ่งวันนั้น แล้วก็จะวาดเส้นให้ ซึ่งก่อนนั้นเราต้องหา งานที่ไม่ซ้ำกันใน หนึ่งชั่วโมงให้ได้ก่อน แล้วก็จะนำไปใช้ในการทำ tooltip ดังโค้ดตัวอย่างข้างล่างนี้

ก็จะทำการ Loop เพื่อหางานที่ไม่ซ้ำกันในหนึ่งชั่วโมงในหนึ่งวัน

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

หลังจากที่วาดตารางเสร็จแล้ว เราก็จะ set ค่ามันเป็น 0 เพื่อเริ่มนับวันต่อไป

ส่วนนี้จะเป็นฟังชั่นที่ไว้ใช้ในการเลือกเฉพาะค่า ที่ไม่เหมือนใครเท่านั้น

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