Advance

สร้างกราฟให้โดนใจด้วยบริการ Google Charts

VN:F [1.9.22_1171]
VN:F [1.9.22_1171]

ขึ้นชื่อว่า Google หลังจากที่เขย่าวงการเครือข่ายสังคมออนไลน์โดยเปิดตัวโครงการ Google+ ออกมาแล้ว หลายคนที่ได้ทดลองสมัครใช้งานไปได้ซักพัก ก็เริ่มที่จะมีคำถามในหัวเช่นเดียวกับผู้เขียนว่า แล้ว Google มีบริการอะไรอีก หรือเปล่าหากสังเกตที่เมนูด้านบนหน้าเว็บไซต์ www.google.com ก็จะเห็นเมนูนำทางมากมายปรากฏขึ้นมา ซึ่งส่วนมากเป็นชื่อบริการของ Google ที่พวกเราต่างเคยเข้าไปใช้งานมาบ้างแล้วแทบทั้งหมด ตั้งแต่ Google Docs, Google Mail, Google Sites บริการจัดการป้ายโฆษณาอย่าง Google Adsense และ Google Adword หรือแม้กระทั่ง Google Analytics ที่เป็นเครื่องมือวิเคราะห์สถิติเว็บไซต์ อีกทั้งบริการอีกมากมาย แต่หลายคนอาจจะยังไม่รู้ว่ามีอีกบริการหนึ่งที่น่าสนใจ และสามารถนำมาประยุกต์ใช้กับระบบงานภายใน หรือภายนอกองค์กรบนแพลตฟอร์มของเว็บไซต์ หรือโปรแกรมมิ่งบนเว็บไซต์ที่อยู่ภายใต้โครงการ Google Labs ซึ่งบริการดังกล่าวจะเป็นบริการที่จะช่วยให้หน้าจอการรายงานทุกรูปแบบเป็นไปอย่างมีประสิทธิภาพ และบริการที่ว่านั่นก็คือบริการ Google Charts นั่นเอง

Google Charts คืออะไร?

 

Google Charts คืออะไร?

Google Charts เป็นเครื่องมือที่ในการสร้างแผนภูมิรูปภาพ หรือที่เราเรียกว่ากราฟ (Graphs) หรือชาร์ต (Charts) ที่เราเอาไว้นำเสนอรายงานต่างๆ โดยบริการของ Google Charts นี้สามารถเรียกใช้ในรูปแบบของ Visualization API หรือส่วนต่อประสานโปรแกรมของ Google ที่จะแปลงข้อมูลจากฐานข้อมูลสถิติต่างๆ จากเว็บไซต์ของคุณให้แสดงผลออกมาเป็นรูปแบบแผนภูมิที่ เรียบง่าย ไปจนถึงรูปแบบที่มีลำดับขั้นของข้อมูลที่ซับซ้อน หรือมีขนาดใหญ่ โดยอาศัยหลักการเชื่อมต่อสื่อสาร ส่ง-รับ ข้อมูลบนสถาปัตยกรรมอินเทอร์เน็ตแบบ Client-Server

ภายใต้ชุดพัฒนาของส่วนต่อประสานโปรแกรมอย่าง Visualization API ของ Google ทำให้สามารถนำชุดข้อมูลสถิติที่อยู่ในรูปของตาราง (Spread Sheets) มาทดสอบผ่านหน้าจอทดสอบก่อนนำไปใช้งานร่วมกับบริการ Google Docs หรือประยุกต์ให้ซับซ้อนขึ้นมาหน่อยโดยการพัฒนาร่วมกับการเขียนโปรแกรมเพื่อดึงข้อมูลจากฐานข้อมูลขึ้นมาเป็นค่าตัวแปร เพื่อให้แสดงผลเป็นกราฟ หรือแผนภูมิที่สวยงามผ่านโปรแกรมท่องเว็บไซต์อย่างเว็บบราวเซอร์ได้ทุกประเภทที่เป็นเว็บบราวเซอร์มาตรฐาน

รูปแบบที่หลากหลายของบริการ Google Charts

รูปแบบแผนภูมิรูปภาพ หรือกราฟ ที่สร้างขึ้นจาก API ของ Google Charts นั้นพัฒนาจากภาษา JavaScript ทำให้สะดวกในการนำไปใช้กับเอกสารประเภท HTML หรือเอกสารสำหรับแสดงหน้าเว็บไซต์ทุกประเภท อีกทั้ง Google Charts ยังมีรูปแบบของกราฟ หลากหลายรูปแบบให้เลือกนำไปใช้ในการประกอบหน้าจอรายงานสถิติให้เหมาะสมกับชุดข้อมูล และสถานการณ์ที่ต้องนำข้อมูลไปใช้ เช่น Pie chart, Line Charts, Bars Charts และรูปแบบต่างๆ อีกมากมาย ทำให้ง่ายต่อกลุ่มผู้พัฒนาเว็บไซต์ที่สามารถนำ Scripts ในการแสดงผลของกราฟที่ Google Charts สร้างขึ้นมา นำไปใช้ร่วมกับรูปแบบดีไซน์ภายในเว็บไซต์ของตน

 

รูปแบบที่หลากหลายของบริการ Google Charts

รูปแบบกราฟ หรือแผนภูมิของ Google Charts สามารถเลือกปรับรูปแบบให้มีการโต้ตอบ หรือเอนิเมชันเล็กน้อย พร้อมกับระบบ Dashboard ที่ง่ายต่อการบริหารจัดการกราฟ และเก็บชุดข้อมุลกราฟที่คุณได้สร้างไว้บนบริการ Google Charts เพื่อความสะดวกในการกลับมานำ Script ของ Google Charts ไปใช้บนหน้าเว็บไซต์ของคุณได้ตลอดเวลา นอกจากรูปแบบการโต้ตอบ และ Dashboard ในการควบคุมแล้ว มาตรฐานของภาษาโปรแกรมบน Script ของ Google Charts ที่สร้างขึ้นนั้นยังรองรับเทคโนโลยีเปิดในอนาคตอย่าง HTML5 และยังทำงานข้ามแพลตฟอร์มไปแสดงผลบนหน้าจอสมาร์ทโฟนระบบปฏิบัติการ Andriod, ระบบปฏิบัติการ iOS ของ Apple อย่าง iPhone และ iPad โดยไม่ต้องติดตั้งส่วนเสริม หรือ Plug-in เพิ่มลงในสมาร์ทโฟนเลย

 

วิธีการนำ Google Charts มาใช้ยากเกินไปหรือไม่?

มาถึงบรรทัดนี้ผู้อ่านหลายท่านเริ่มสนใจในตัว API ของ Google Charts แต่ยังมีหลายคนที่กังวลในเรื่องการนำมาใช้ เพราะขึ้นชื่อว่าเป็น Script ที่ถูกสร้างขึ้นมานั้นต้องมีการข้องเกี่ยวกับการเขียนโปรแกรมแน่นอนผู้เขียนขอยืนยันว่า การนำบริการ Google Charts มาใช้ร่วมกับหน้าเว็บไซต์ของธุรกิจ หรือหน้าจอรายงานต่างๆ บนโปรแกรมที่พัฒนาบนเว็บไซต์นั้น ไม่ยากถึงขั้นที่ต้องเรียนรู้ภาษาโปรแกรม เพียงแค่มีพื้นฐานในเรื่อง HTML อย่างเดียวก็เพียงพอแล้ว อีกทั้งอย่ามองว่าบริการ Google Charts นั้นเป็นชุด API ที่รองรับการสร้างแผนภูมิ หรือกราฟร่วมกับข้อมูลบนฐานข้อมูลบนเซิร์ฟเวอร์บนเว็บไซต์เพียงอย่างเดียว ข้อมูลดิบที่อยู่ในรูปของ ไฟล์เอกสาร Excels ในเครื่องคอมพิวเตอร์ของคุณผู้อ่าน ที่ได้ย้ายขึ้นมาเก็บไว้บนบริการ Google Docs ก็สามารถนำมาใช้งานร่วมได้หากว่าเบื่อหน้าตา ของแผนภูมิพื้นฐานเดิมๆ ของ โปรแกรมจำพวก Office หรือ Google Docs แล้วอยากลองมาเปลี่ยนใช้กราฟสวยงามของ Google Charts แล้วนำมาไว้บนหน้า Blog ไฟล์เอกสาร HTML หรือ เว็บไซต์ของคุณอย่างง่าย อีกทั้งได้รูปแบบกราฟที่แก้ไขได้ทันทีโดยไม่ต้องสร้างใหม่ยุ่งยากซ้ำซ้อน

เพียงแค่เข้าไปแก้ชุดข้อมูลตัวเลข และตัวแปร แล้วก็อัพเดตกราฟใหม่ แล้วทำการดึง Script ตัวใหม่ที่ได้มาใช้ก็พอแล้วเอาเป็นว่าผู้เขียนพาไปสาธิต วิธีการใช้งานเล็กน้อยให้เห็นกันดีกว่า

 

เริ่มต้นใช้งาน Google Charts

ก่อนอื่นเลยให้เราเข้าไปที่เว็บไซต์ http://code.google.com/apis/chart/ จะพบกันหน้าเว็บไซต์เรียบง่าย และข้อความในการบอกถึงการนพ API ของ Google Charts ไปใช้จะได้ประโยชน์อะไรบ้าง ซึ่งส่วนมากแล้วก็ตามที่ผมยกตัวอย่างข้างต้นมา เล็กน้อยๆ ที่เข้ามาเสริมประสิทธิภาพของ Google Charts ก็น่าจะเป็นการรองรับ HTML5 ครับ เพราะช่วงหลังการพัฒนาแอพพลิเคชันบน อุปกรณ์แท็บเล็ตได้รับความนิยมโดยเฉพาะเจ้า iPad ที่ไม่รองรับ Flash Player เอาซะเลย พวกบริการกราฟสถิติแบบโต้ตอบได้เลยไม่สามารถแสดงผล ดังนั้น Google เลยต้องจับมารวมกับ การแสดงผลให้อยู่ในรูปที่รองรับมาตรฐานของแท็บเล็ต นั่นคือแปลง แอนิเมชันให้เป็น HTML5 นั่นเอง

อธิบายคุณสมบัติของ Google Charts

เมื่อลองศึกษาในส่วนของคุณสมบัติเด่น และอ่านเอกสารประกอบการใช้งานของ API Google Charts เสร็จแล้วก็เริ่มใช้งานได้ทันที โดยไปที่ปุ่ม Get Start สีน้ำเงินบนหน้าเว็บไซต์ ทำการเข้าระบบด้วยบัญชี Google Account ของคุณครับ

 

หน้าจอ Quick Start

 

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

การปรับแต่งข้อมูลใน Google Chart API

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

การปรับแต่งข้อมูลใน Google Chart API

 

อธิบายเบื้องต้นเกี่ยวกับการตั้งค่า ของกราฟ : จะเห็นว่าชุดข้อมูลในกราฟ หรือ แผนภาพวงกลมนี้จะมีข้อมูลอยู่ 5 ชุดให้สังเกตที่ ฟังก์ชัน ที่แสดงผลว่า “// Create the data table” แล้วไปแก้ไขที่ ชุดข้อมูล ที่เห็น ‘Mushrooms’, 3 เปลี่ยนตัวเลข หรือเปลี่ยนชื่อ ไม่ก็เพิ่มชุดข้อมูลเข้าไปเลย กราฟที่แสดงผลก็จะมีค่าข้อมูลที่ต่างออกไป โดยมันจะคำนวณสัดส่วนจากตัวเลขของเราให้เป็น เปอร์เซ็นต์โดยอัตโนมัติ

ส่วนการแสดงผล ขนาดความกว้าง และสูง ของแผนภูมินั้น ในเบื้องต้นชุด Script มาตรฐานจะกำหนดให้ที่ขนาดความกว้าง 400 Pixels และ ยาว 300 Pixels ซึ่งถ้าผู้อ่านต้องการปรับแต่งขนาดของมันให้ใหญ่ขึ้น สามารถเข้าไปแก้ไขที่ ฟังก์ชัน “//Set chart option” เพื่อแก้ไขตัวเลขของค่า Width และ Height ให้ได้ขนาดตามต้องการเลยครับ

หากว่ายังไม่เข้าใจเท่าไรนักสามารถเลือกเมนู ด้านซ้ายที่เขียนว่า Preparing the Data หน้าเว็บไซต์จะทำการอธิบายวิธีการแก้ไขข้อมูล และเปรียบเทียบให้เห็นเป็นตาราง อย่างละเอียดสำหรับผู้เริ่มต้นที่สนใจได้ศึกษากันได้ทันที

หากสงสัยให้กด เมนู Preparing Data บนด้านซ้าย จะพบหน้าจอการอธิบายข้อมูล และสร้างกราฟ พร้อมตัวอย่าง

 

ตัวอย่าง และ เครื่องมือสร้างชุดข้อมูลออนไลน์พร้อมใช้

ถ้าขึ้นชื่อว่าเป็น API แล้วล่ะก็ต้องมี Library และ Tools ในการสร้างกราฟ แบบออนไลน์เพื่อได้ Script ที่พร้อมใช้แสดงเป็นข้อมูลของเราได้ทันที ดังนั้น Google จึงสร้าง Tools หรือเครื่องมือในการ สร้างกราฟในรูปแบบข้อมูลของเราขึ้นมาให้ได้ทดสอบใช้กัน เพียงแค่ไปที่เมนู Example & Tools แล้วเข้าไปที่ Playground หรือ สนามเด็กเล่นครับ

Playground หรือ สนามเด็กเล่น

Playground หรือ สนามเด็กเล่นคือ เครื่องมือในการสร้างกราฟ ออนไลน์โดยอ้างอิงกับ API ของ Google Charts เพียงตัวเดียวหน้าจอแรกที่ปรากฏ จะมีอยู่ 3 หน้าจอ ด้านซ้ายบนเป็นรูปแบบกราฟที่เราต้องการใช้แสดงผลให้ทำการเลือก หน้าจอขวาบนจะเป็น Scripts ที่เราสามารถลองแก้ไขข้อมูล ตัวเลข และตัวอักษรให้เป็นข้อมูลของเราได้ และ หน้าจอสุดท้ายคือหน้าจอใหญ่ด้านล่างเป็นหน้าจอแสดงผล กราฟที่ถูกสร้างขึ้น หลังจากแก้ไข Script แล้วทำการ Run Code ก็จะได้กราฟที่แสดงข้อมูลที่เราแก้ไข ปรากฏขึ้นมา ทันที

การ Run Code

 

จะเห็นว่า API Google Charts ของ Google ตัวนี้เป็นเครื่องมือที่จะช่วยให้ การนำเสนอข้อมูล สถิติขององค์กร หรือ งานวิจัยถูกนำมาแสดงไว้บนหน้าเว็บไซต์ และ แอพพลิเคชันที่รองรับ HTML5 ได้อย่างสะดวก เพราะนอกจากจะสร้างกราฟแบบกำหนดเองได้แล้ว นักพัฒนายังสามารถเขียนโปรแกรมในการแก้ไข และเชื่อมต่อกับกราฟ ผ่าน API ของ Google Charts ได้สะดวกอีกด้วย อีกทั้งการประมวลผลของฟังก์ชันทุกฟังก์ชันบน Google Charts ล้วนทำงานอยู่บน Cloud computing ซึ่งนั่นน่าจะเป็นสัญญาณบอกเหตุ เกี่ยวกับนวัตกรรมที่จะก้าวไปในยุคต่อไปว่าแนวโน้มของมันจะปรากฏอยู่บนแพลตฟอร์มตัวไหนมากที่สุด

 

Google Charts บนสื่อออนไลน์ในอนาคต

สื่อออนไลน์ในปัจจุบัน และอนาคตที่ใกล้เข้ามา ถูกเปลี่ยนการนำเสนอไปอยู่ในรูปแบบดิจิตอล เช่น E-Reader หรือ Interactive Book ที่ปรากฏเป็น แพลตฟอร์มเว็บไซต์กึ่งแอพพลิเคชัน ที่รองรับอุปกรณ์พกพาจำพวกแท็บเล็ต ดังตัวอย่างรูปข้างล่างเป็นเอกสาร HTML5 ที่นำ Google Charts มาประกอบกับหน้าเอกสารทำให้ข้อมูล ข่าวที่นำเสนอมีสถิติที่อัพเดท Real-Time ตรงกับข้อมูลเวลาจริงที่สุด ทำให้คอนเท็นต์ของเนื้อหาที่มีสถิติส่วนนี้ อัพเดต ตามเวลาจริง แม้จะมีการขึ้นเนื้อหาคอนเท็นต์เป็นเวลานานแล้วก็ตาม นั่นแปลว่ากลุ่มที่จะได้ประโยชน์จาก API Google Chart มากที่สุด

ตัวอย่าง Google Charts กับ HTML5

 

น่าจะเป็นกลุ่มของ บริษัทที่เกี่ยวกับการลงทุน ที่มี Company Profile ที่เป็นสัดส่วนปันผล เคลื่อนไหวตลอดปี กลุ่มของบริษัทในการวิจัย หรือ Research สถิติข้อมูลมากมายมาเก็บไว้เป็น Data Center และ สำนักข่าวที่มีการทำ ข้อมูลเป็น Special Report ในหลายประเด็น ที่พร้อมใจพัฒนาแอพพลิเคชันที่รองรับ HTML5

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

งานเขียนของผมตัวนี้ได้ถูกตีพิมพ์ใน นิตยสาร E-commerce Magazine ฉบับเดือน กันยายน 2011

The following two tabs change content below.

Banyapon Poolsawasd

Tinker Tailor Solider Spy at Daydev Co., Ltd.
Founder, ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด) อาจารย์คณะเทคโนโลยีสารสนเทศ ภาควิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม มหาวิทยาลัยธุรกิจบัณฑิตย์

Comments

comments

About Banyapon Poolsawasd

Founder, ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด) อาจารย์คณะเทคโนโลยีสารสนเทศ ภาควิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม มหาวิทยาลัยธุรกิจบัณฑิตย์

Leave a Reply