PhoneGap @en @en

Web Chart’s collection for HTML5 Mobile App, good for PhoneGap and Cordova

พอดีตอนสอนหลักสูตรสร้าง iOS และ Android App ด้วย HTML5 มีหัวข้อน่าสนใจว่า ถ้าเราต้องการสร้าง Mobile application ด้วย HTML5 แต่อยากแสดงข้อมูลแบบ Chart (พวกกราฟแท่ง หรือกราฟเส้น) จะทำได้ยังไง

คำถามน่าสนใจไหมล่ะ?​ 🙂

ถ้าเข้าใจแนวคิดของ PhoneGap และ Cordova แล้ว คำถามนี้ไม่ยากเลย นั่นคือเราสามารถหา Chart framework ที่เป็น Web Chart (พวกเดียวกับที่เราใช้บน Web application) ใช้งาน

เพียงแต่ Web Chart นั้นต้องไม่อ้วน เทอะทะ กินทรัพยากร กินแรมบนเครื่อง ซึ่งผมก็ลองหา และรวบรวมมาให้ลองเอาไปใช้กันในที่นี้

Flot (ฟรี)

Chart plugin เรียกใช้งานได้ผ่าน JQuery และเป็นตัวที่นักพัฒนา HTML5 Application หลายคนนิยม

เข้าไปดูวิธีใช้งานและ Download จากที่นี่

Flot Chart
ตัวอย่างของ Flot Chart

JQPlot (free)

Another chart plugin for JQuery

JQPlot Chart
A lot of chart type, provides by JQPlot

Highcharts (Free/Paid)

Hightcharts claims that their engine optimize and work well on mobile web browser. So it is a good choice if you are planning to visualize data on mobile phone or tablet.

HighCharts
Example of HighCharts’s chart

JQuery Sparkline (free)

You may need to show just tiny graph and chart, following behind your data. Sparkline is your best choice.

JQuery Sparkline
Tiny graph but looks professional, by JQuery Sparkline

ZoomChart (Paid)

One of the powerful web chart I’ve tried. Optimized for mobile web application. Its high price may keep you away from this tools, but I encourage you to try their feature before make decision

ZoomChart
A lot of chart and map to play in ZoomCahrt, yes, it has a cost.

Reference – StackOverflow

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

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

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save