เขียน Android: การใช้วาด Chart ด้วย MPAndroidChart

เขียน Android: การใช้วาด Chart ด้วย MPAndroidChart

ในการแสดงข้อมูลบ้างครั้งในรูปแบบ Chart หรือว่ากราฟก็จะสามารถอธิบายได้ง่ายกว่า และหาใน application android นั้นก็จะมี library ที่ช่วยสร้างกราฟ แผนภูมิทางคณิตศาสตร์ต่างๆ วันนี้ผมเลยมาแนะนำการใช้งาน MPAndroidChart ในการสร้าง Chart เบื้องต้นอย่างง่ายๆกันครับ

เริ่มแรกให้ทำการสร้าง Project ขึ้นมาใหม่ตั้งชื่อตามแต่ต้องการ หรือจะทำให้ Project เดิมที่มีอยู่ก็ได้นะครับ แต่ในบทความนี้จะสร้าง Project ขึ้นมาใหม่แล้วทำการสร้าง Chart ใน MainAcitivity เลยระครับ

เริ่มแรกหลังจากสร้าง Project เสร็จก็ต้องทำการ add repositories ของเจ้า MPAndroidChart ก่อนเพื่อทำการ download library มาไว้ใช้งานใน project

เขียน ANDROID: การใช้วาด CHART ด้วย MPANDROIDCHART

โดยเพิ่ม maven { url “https://jitpack.io” }  ในส่วน build.gradle ของ Project ตามรูปภาพด้านบน

 

เขียน ANDROID: การใช้วาด CHART ด้วย MPANDROIDCHART

ต่อจากนั้นก็เพิ่ม compile ‘com.github.PhilJay:MPAndroidChart:v3.0.2’ ใน build.gradle ของ Module เมื่อเพิ่มเสร็จแล้วก็ให้ทำการแก้ไข layout ที่จะใช้งานซึ่งของผมก็คือ activity_main.xml เพื่อทำการใส่ component ที่เป็น Chart ใน layout โดยมีโค้ดดังนี้


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.thaicodingexample.simplechart.MainActivity">

<TextView
android:id="@+id/txt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/mychart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/txt_title"/>

</RelativeLayout>

สังเกตว่า component chart นั้นจะใช้ com.github.mikephil.charting.charts.LineChart ซึ่งถ้าเราไม่เพิ่ม repositories ก็จะเกิด error ขึ้นได้ครับ

เมื่อทำการแก้ไขเสร็จแล้วตอนมาจะเป็น code ในส่วนของ MainActivity.java โดยมีโค้ดดังนี้


package com.thaicodingexample.simplechart;

import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private LineChart mChart;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mChart = (LineChart)findViewById(R.id.mychart);
mChart.setDrawGridBackground(false);
mChart.setDragEnabled(true);
mChart.setScaleEnabled(true);
mChart.setScaleXEnabled(true);
mChart.setScaleYEnabled(true);
mChart.setPinchZoom(true);

&amp;amp;amp;amp;nbsp;

XAxis xAxis = mChart.getXAxis();
xAxis.enableGridDashedLine(10f,10f,0f);
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setTextSize(12);
leftAxis.removeAllLimitLines();
leftAxis.enableGridDashedLine(10f, 10f, 0f);
leftAxis.setDrawZeroLine(false);

leftAxis.setDrawLimitLinesBehindData(true);

mChart.getAxisRight().setEnabled(false);

initialData();
}

private void initialData()
{
ArrayList<Entry> values = new ArrayList<Entry>();
int count = 10;
int range = 20;
for (int i = 0; i < count; i++) {

float val = (float) (Math.random() * range) + 3;
values.add(new Entry(i, val));
}

LineDataSet set1;
if (mChart.getData() != null &amp;amp;amp;amp;&amp;amp;amp;amp; mChart.getData().getDataSetCount() > 0) {
set1 = (LineDataSet)mChart.getData().getDataSetByIndex(0);
set1.setValues(values);
mChart.getData().notifyDataChanged();
mChart.notifyDataSetChanged();
}else{
set1 = new LineDataSet(values, "DataSet 1");

set1.setDrawIcons(false);

// set the line to be drawn like this "- - - - - -"
set1.enableDashedLine(10f, 5f, 0f);
set1.enableDashedHighlightLine(10f, 5f, 0f);
set1.setColor(Color.BLACK);
set1.setCircleColor(Color.BLACK);
set1.setLineWidth(1f);
set1.setCircleRadius(3f);
set1.setDrawCircleHole(false);
set1.setValueTextSize(9f);
set1.setDrawFilled(true);
set1.setFormLineWidth(1f);
set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f));
set1.setFormSize(15.f);

set1.setFillColor(Color.BLACK);

ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
dataSets.add(set1); // add the datasets

// create a data object with the datasets
LineData data = new LineData(dataSets);

// set data
mChart.setData(data);
}

}
}

สังเกตโค้ดใน onCreate จะเป็นการกำหนดลักษณของ chart ที่เราจะสร้างขึ้นโดยตัวแปร mChart นั้นจะเป็นตัวแปรที่ถูกกำหนดให้เก็บค่า component chart จาก layout ที่เราแก้ไขไปก่อนหน้านี้ จากนั้นก็กำหนดรูปแบบ chart ต่างๆที่เราต้องการไม่ว่าจะเป็น

  • setDrawGridBackground(false) เป็นการปิดแสดงตาราง grid
  • setScaleXEnabled(true), setScaleYEnabled(true) ขยายแกน x และ y
  • setPinchZoom(true) เปิดการใช้งาน PinchZoom

จากนั้นก็จะกำหนดรูปแบบเส้นแกน x, y สังเกตโค้ดในส่วนของตัวแปร xAxis และ leftAxis

โดยคำสั่ง  xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); จะเป็นการกำหนดให้แกน x อยู่ด้านล่างซึ่ง chart บ้างประเภทอาจจะต้องการแกนอยู่ด้านบน

  • enableGridDashedLine จะเป็นการกำหนดขนาดเส้นปะตามแนวแกน x, y
  • setDrawZeroLine จะเป็นกำหนดว่าแกน y ให้เริ่มที่เส้น 0 หรือไม่

หลังจาก code ในส่วนของ oncreate  เป็นการกำหนดรูปแบบของ Chart แล้ว ต่อมาจะเป็นการกำหนดค่าให้ chart เพื่อทำการวาดเส้นกราฟ โดยผมจะทำผ่าน method

initialData()

ซึ่่งสังเกตว่าเริ่มต้น method จะเป็นการประกาศตัวแปร ArrayList<Entry> values = new ArrayList<Entry>(); เพื่อเอาไว้เก็บค่า x, y เอาไปวาดในกราฟ โดยผมจะใช้ code for จาก i = 0 ถึง count ซึ่งมีค่าเท่ากับ 10 ซึ่งจะเป็นค่า  x ส่วนค่า y นั้นผมจะทำการ random ตัวเลขที่ไม่เกิน range ซึ่งมี่ค่าเท่ากับ 20 นั้นจะทำให้เราได้ค่า y ไม่เกิน 20 จากนั้นก็ทำการวนลูปเพิ่มค่าลงไป

values.add(new Entry(i, val));

เพื่อเราได้ชุดข้อมูลขึ้นมาแล้วต่อมาก็คือกราฟเส้นตรงที่จะมาพล็อตกราฟ แต่ทว่าก่อนหน้านี้เรากำหนดแค่ char โดยรวมกับแกน x, y ไม่ได้กำหนดลักษณะให้เส้นกราฟ เพราะฉะนั้นเมื่อกำหนดชุดข้อมูลในเส้นกราฟแล้วก็ต้อง set ลักษณะให้ด้วยด้วย

ในโค้ดจะเห็นว่ามี if else ซึ่งเป็นการ check ว่าตัวแปร mChart เคยกำหนดข้อมูลหรือไม่


if (mChart.getData() != null &amp;amp;&amp;amp; mChart.getData().getDataSetCount() > 0)

{

.....

}

else{

...

}

ถ้าเคยกำหนดแล้วก็แค่ notifyDataSetChanged ใหม่อีกครั้ง แต่ถ้ายังไม่เคยก็จะเป็นการกำหนดเส้นข้อมูลเป็นไปตามโค้ด MainActivity.java เลยครับ

จุดสังเกต ตัวแปร values นั้นจะถูกกำหนดให้กับตัวแปรเส้นกราฟคือ set1 หลังจากนั้นก็จะกำหนดรูปแบบต่างๆไม่ว่าจะเป็นสี ขนาดของเส้น ขนาดข้อความแต่ละจุด จากนั้นก็จะมีการประกาศตัวแปร data ซึ่งเป็น  LineData แล้วค่อย set ให้ mChart เพราะโดยปกติแล้ว Chart สามารถมีเส้นกราฟมากกว่า 1 เส้นได้อยู่แล้ว ถ้าหากเราต้องการเพิ่มเส้นกราฟก็แค่ประกาศตัวแปร แบบ LineDataSet ขึ้นมาแล้วกำหนดชุดข้อมูลให้มันแล้ว add ให้กับตัวแปร data แค่นั้นเอง

เมื่อลองรันดูก็ได้ผลลัพธ์ดังรูปครับ

เขียน ANDROID: การใช้วาด CHART ด้วย MPANDROIDCHART

 

ก็เป็นอันเสร็จสิ้นสำหรับตัวอย่างง่ายๆในการสร้าง chart ด้วย library ที่มีชื่อว่า MPAndroidChart ผมก็ขอจบบทความไว้เพียงเท่านี้ครับ

Download SourceCode

Add a Comment

Your email address will not be published. Required fields are marked *