สวัสดีครับ บทความนี้เป็นบทความที่ 25 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์
Learn 30 Android Libraries in 30 days
สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ
สำหรับวันนี้ขอนำเสนอเรื่อง EazeGraph ตัวนี้เป็น Library ที่เอาไว้แสดง Graph บน Android ะครับ คล้ายๆกับ AChartEngine และ Android GraphView แต่จุดเด่นของ Library นี้คือเน้นความสวยงามครับ สำหรับ Graph แต่ละชนิดที่ใช้ได้ใน Library ก็ได้แก่
- LineChart
- BarChart
- Stacked Bar Chart
- PieChart
Installation
ขั้นตอนการติดตั้ง เปิดไฟล์ build.gradle
ขึ้นมา แล้วเพิ่ม dependencies ลงไปดังนี้
กด Sync Gradle เป็นอันเรียบร้อย
Usage
การใช้งาน EazeGraph ในบทความนี้ ผมขอทำตัวอย่าง แค่ 3 ตัวอย่างนะครับ คือ PieChart, BarChart และ LineChart ส่วน Stacked Bar Chart มันก็คล้ายๆกับ BarChart ก็เลยไม่ทำ ไปอ่านเพิ่มเติมใน Docs ของมันเลยครับ
Pie Chart
การสร้าง PieChart จำเป็นต้องมีคลาส ดังนีครับ
PieChart
: เป็น Container เอาไว้เก็บข้อมูลสำหรับแสดง Chart
PieModel
: เป็นก้อน Slice ของ Pie 1 PieModel คือ Pie 1 ชิ้น สร้างได้โดย new PieChart("name", value, color)
parameter คือชื่อ ค่าที่ต้องการ และสี (เป็น int เช่น 0xffff0000
หรือ `Color.parseColor(“#ff0000”))
ตัวอย่างเลเอาท์ XML ของ Pie Chart
วิธีการเรียกใช้งานจากคลาส Java
Bar Chart
การสร้าง BarChart จำเป็นต้องมีคลาสดังนี้
BarChart
: เป็น Container เอาไว้เก็บข้อมูลและแสดงผลแบบ Bar Chart
BarModel
: เป็นชนิดข้อมูลแบบ Bar 1 BarModel คือข้อมูล 1 แท่ง สร้างได้โดย new BarModel("name", value, color)
parameter เหมือนกับการสร้าง PieModel
ตัวอย่างเลเอาท์ XML ของ Bar Chart คือ
วิธีการเรียกใช้งานจากคลาส Java คือ
Line Chart
การสร้าง LineChart ต้องใช้คลาสดังนี้
ValueLineChart
: เป็น Container เอาไว้เก็บข้อมูล และแสดง Line Chart
ValueLineSeries
: เป็นเหมือนกลุ่มข้อมูล คล้ายๆกับ Array ของข้อมูล
ValueLinePoint
: เป็นข้อมูลแต่ละจุด เช่น แกน x = 1, x = 2, x = 3 มีค่า 2, 3, 4 ตามลำดับ วิธีการสร้างก็คือ new ValueLinePoint(name, value)
parameter คือ ชื่อ และ ค่าที่ต้องการ
ตัวอย่างไฟล์เลเอาท์ XML ของ LineChart คือ
วิธีการเรียกใช้งานจากคลาส Java คือ
เมื่อพอรู้รายละเอียดการใช้งานคร่าวๆแล้ว มาลองสร้างโปรเจ็คกันดูเลยครับ (หากใครต้องการรายละเอียดของ Chart เพิ่มเติม อ่าน Docs ประกอบนะครับ)
Create Project
ตัวโปรเจ็คนี้ ผมจะทำการสร้างโดยใช้ ViewPager จากนั้นก็แสดง Fragment แต่ละอย่าง แบ่งเป็น PieChartFragment, BarChartFragment และ LineChartFragment นะครับ สำหรับใครที่ไม่รู้วิธีการสร้าง ViewPager อ่านได้จากบทความนี้ประกอบครับ สอนการใช้งาน ViewPager
เริ่มแรกผมทำการสร้าง เลเอาท์หลักขึ้นมาก่อน ผมตั้งชื่อว่า activity_eazegraph.xml
ภายในมีแค่ ViewPager อันเดียว ดังนี้
จากนั้นสร้างคลาส Activity หลักขึ้นมา ชื่อว่า EazeGraphActivity.java
ทำการ binding ViewPager จากไฟล์ xml
ต่อมาสร้าง Adapter ขึ้นมาโดย extends FragmentStatePagerAdapter
เพื่อใช้เปลี่ยน Fragment เวลาเราเลื่อน ViewPager ตั้งชื่อคลาสว่า MyPagerAdapter
อยู่ภายในคลาส EazeGraphActivity
ดังนี้
จากด้านบนผมทำการสร้าง ViewPager ทั้งหมด 3 หน้า เมื่ออยู่ที่หน้าแรก จะทำการโหลด PieChartFragment
มาแสดง หากเลื่อนไปหน้าสอง ก็จะโชว์ BarChartFragment
และเลื่อนไปหน้าสุดท้าย ก็จะโชว์ LineChartFragment
ส่วนในเมธอด onCreate()
ก็ทำการสร้างออปเจ็ค MyPagerAdapter
ขึ้นมา แล้วให้ ViewPager ทำการ setAdapter()
ซะ เมื่อถึงตอนนี้ โค๊ดด้านบน error แน่นอน เพราะว่ายังไม่ได้สร้าง Fragment ซักอัน :D
ต่อมาสร้าง Fragment แต่ละอันเลย เริ่มจาก
PieChartFragment
ไฟล์เลเอาท์ xml
ตัวคลาส Java
ด้านบนเป็นการสร้าง Pie Chart โดยใช้ข้อมูล Android Dashboard มาแสดง
BarChart
ไฟล์เลเอาท์ xml
ไฟล์ BarChartFragment.java
LineChart
ไฟล์เลเอาท์ xml
ไฟล์ LineChart.java
เมื่อลองรันโปรแกรม จะได้หน้าตาแบบนี้
สรุป
จริงๆ หากใครเคยเขียน Graph/Chart ด้วย Library ตัวอื่น จะรู้สึกว่ามันคล้ายๆกันมาก วิธีการเขียน ชนิดของกราฟ แตกต่างกันบ้างเล็กน้อย หลังจากลองใช้ตัวนี้ก็รู้สึกว่า หน้าตามันสวยดี แถมมี Animation ด้วย จริงๆ AChartEngine ก็ทำได้นะ แต่ต้องปรับแต่งนานสมควร สำหรับใครที่อยากให้กราฟมันหน้าตาสวยงาม ก็ลอง EazeGraph ดูได้ครับ
สุดท้าย Source Code เหมือนเดิม จริงๆ ก็ก็อปมาแปะในบทความเกือบครบละนะ
Happy Coding :D