การสร้าง chart ใน Grails

11ก.พ.08

ณ ตอนนี้ใน Grails นั้นมี plugin ในการสร้าง chart อยู่สองตัวก็คือ

• Google Chart Plugin
• JFreeChart Eastwood Plugin

โดยในตัวแรกนั้น (Google Chart Plugin) จะช่วยอำนวยความสะดวกในการใช้งาน Google Chart API

โดยจากปกตินั้น จะส่ง URL ไปที่ Google Chart พร้อมด้วย property ต่างๆที่เหมาะสมตามความต้องการ แต่สำหรับบางคนการทำลักษณะนี้อาจจะไม่สะดวก และค่อนข้างยุ่งยาก เพราะว่าเราต้องใส่ property ต่างๆของ chart ที่เราต้องการลงไปใน URL ซึ่งชื่อของ property ต่างๆก็ลำบากต่อการจำ เพราะว่ามันไม่ได้เขียนเต็มๆนี่สิ มันดันย่อมาซะงั้น เช่น chl, cht หรือ chd อะไรทำนองนี้ อีกทั้งเราต้องมาเขียนลักษณะของ url ให้ถูกต้องอีก คือแต่ละ property หลักบางครั้งอาจต้องคั่นด้วยเครื่องหมาย & และ property ย่อยๆก็ยังต้องคั่นด้วยเครื่องหมาย | (pipe) หรือ , (comma) อีก

แต่ว่า Google Chart Plugin ตัวนี้ ทำให้เราใช้ Google Chart API ผ่าน g Tag ของ Grails ได้เลย เช่น

<g:pieChart title=’Sample Pie Chart’ colors=“${colors}​”
labels=“${labels}​” fill=“${‘bg,s,efefef’}​” dataType=’text’ data=’${values3}’ />

เอา tag นี้ไปแปะในไฟล์ .gsp ได้เลย…

จาก code ตัวอย่าง เราจะเห็นได้ว่า เราสามารถกำหนดค่าต่างๆลงใน property ของ Tag ได้เลยตรงๆ และชื่อ property ก็ง่ายต่อการจำ ไม่ได้เป็นคำย่อเหมือนกับการส่ง URL ไปโดยตรง code ดูชัดเจนมากขึ้น

ไม่ว่าจะยังไงซะ ผมก็ไม่ชอบอยู่ดี ให้ผมส่ง URL ไปที่ Google ตรงๆยังจะสะดวกว่าอีก คงเป็นเพราะผมชินกับการใช้ Gogole Chart API ไปแล้วล่ะ

อย่างไรก็ตาม ไม่ว่าจะใช้ Google Chart Plugin หรือส่ง URL ไปตรงๆเลย ก็ยังมีข้อเสียตรงที่ว่า ถ้าเราไม่ได้เชื่อมต่อ Internet แล้ว เราก็ไม่สามารถสร้าง Chart ได้

เอาล่ะ…เข้ามาถึงเรื่องที่จะเขียนจริงๆครั้งนี้ได้ซะที

Plugin ตัวที่สองที่จะพูดถึงก็คือ JFreeChart Eastwood Plugin ตัวนี้เกิดมาเพื่อแก้ปัญหาตอนที่เราไม่ได้เชื่อมต่อ Internet นี่แหละ เพราะมันจะทำตัวในลักษณะ Emulate Google Chart API ซึ่งทำให้จากเดิมเราจะส่ง URL ไปง้อให้ Google เค้าช่วยสร้าง Chart ให้ แต่เมื่อใช้ Plugin ตัวนี้ก็ไม่จำเป็นอีกต่อไป ตรงกันข้าม เราสามารถส่ง URL ลักษณะเดียวกับที่เราส่งไปให้ Google Chart มาที่เครื่องเราเองได้เลย

ตัวอย่างเช่นจากเดิมส่ง Request ไปง้อ Google โดย

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250×100&chl=Hello|World

หลังจากที่เราไม่ง้อ Google แล้ว ก็ส่งแบบนี้ได้เลย

http://localhost:8080/ชื่อโปรเจคเรา/chart?cht=p3&chd=s:hW&chs=250×100&chl=Hello|World

หรือถ้าลงเป็น plugin ของ Grails Project ของเราเอง แล้วเราต้องการเอา Chart มาแปะที่หน้าเวปของเรา เพื่อความยืดหยุ่นก็จะเขียนได้ว่า

${request.contextPath}/chart?cht=p3&chd=s:hW&chs=250×100&chl=Hello|World
มันจะได้ค่ามาลักษณะเดียวกับ Google คือเป็นภาพ Chart ตาม parameter ที่เราส่งไป

ส่วนการติดตั้ง Plugin ตัวนี้ไม่ยากสามารถทำได้ 2 ทางคือ

ที่ CLI พิมพ์

$>grails install-plugin eastwood-chart

หรือถ้ามี plugin ตัวนี้อยู่แล้ว ก็แค่ copy ไปวางไว้ใน folder ชื่อ plugins(ถ้าไม่มีให้สร้างขึ้นมาใหม่เอง) ที่อยู่ที่ root ของ Grails Project ของเรา

จากนั้นทดสอบการทำงานโดย Browse ไปที่

http://localhost:8080/โปรเจคของเรา/plugins/eastwood-chart-เวอร์ชั่นของeastwoodchart/test.gsp

plugin ตัวที่สองนี้ ทำให้คนที่เคยใช้ Google Chart API อยู่แล้วไม่จำเป็นต้องศึกษาวิธีการใช้งานใหม่ สามารถใช้งานได้แบบเดิมๆ หรือสามารถศึกษาวิธีการใช้งาน Google Chart API ได้ ที่นี่

จากเดิมก่อนหน้านี้ ผมเคยพยายามใช้ JFreeChart API สำหรับ Java Application แล้ว แต่ Resource มันน้อยเหลือเกิน และทีสำคัญกว่าจะได้ Chart มาแต่ละอันเขียน Code มือหงิกเลย แต่หลังจากที่ได้มาพบกับ EastWood Chart Plugin ตัวนี้แล้ว รู้สึกสบายใจ ไม่ต้องเสี่ยงอาการมือหงิกอีกต่อไป เขียน Code น้อยลงเยอะเลย Resource และวิธีใช้ก็อ่านได้จาก Google Chart API ได้ตรงๆเลย

Filed under: grails   |  3 Comments
Tags: grails, tutorial