[Android] MPAndroidChart 를 이용하여 Line Graph 만들기

setting.gradle

dependencyResolutionManagement {
    ..
    repositories {
        ..
        maven { url 'https://jitpack.io' }
        ..
    }
}

build.gradle(Module)

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

 

XML에 넣을 LineChart 객체

<com.github.mikephil.charting.charts.LineChart
            android:id="@+id/chart"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_margin="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

 

그래프 초기 설정 함수

private fun initGraph( lineChart: LineChart ) {
        // LineChart 선언 (종류는 다양한데, 여기서는 선형 그래프인 LineChart를 사용해보자)
        val chart: LineChart

        // XML에서 생성해둔 View를 id를 통해 연결
        chart = binding.chart

        // 바 차트 설정

        // 차트 회색 배경 설정 (default = false)
        lineChart.setDrawGridBackground(false)
        // 막대 그림자 설정 (default = false)
//        lineChart.setDrawBarShadow(false)
        // 차트 테두리 설정 (default = false)
        lineChart.setDrawBorders(false)

        val description = Description()
        // 오른쪽 하단 모서리 설명 레이블 텍스트 표시 (default = false)
        description.isEnabled = false
        lineChart.description = description

        // X, Y 바의 애니메이션 효과
        lineChart.animateY(1000)
        lineChart.animateX(1000)

        // 바텀 좌표 값
        val xAxis: XAxis = lineChart.xAxis
        // x축 위치 설정
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        // 그리드 선 수평 거리 설정
        xAxis.granularity = 1f
        // x축 텍스트 컬러 설정
        xAxis.textColor = Color.RED
        // x축 선 설정 (default = true)
        xAxis.setDrawAxisLine(false)
        // 격자선 설정 (default = true)
        xAxis.setDrawGridLines(false)

        val leftAxis: YAxis = lineChart.axisLeft
        // 좌측 선 설정 (default = true)
        leftAxis.setDrawAxisLine(false)
        // 좌측 텍스트 컬러 설정
        leftAxis.textColor = Color.BLUE

        val rightAxis: YAxis = lineChart.axisRight
        // 우측 선 설정 (default = true)
        rightAxis.setDrawAxisLine(false)
        // 우측 텍스트 컬러 설정
        rightAxis.textColor = Color.GREEN

        // 바차트의 타이틀
        val legend: Legend = lineChart.legend
        // 범례 모양 설정 (default = 정사각형)
        legend.form = Legend.LegendForm.LINE
        // 타이틀 텍스트 사이즈 설정
        legend.textSize = 20f
        // 타이틀 텍스트 컬러 설정
        legend.textColor = Color.BLACK
        // 범례 위치 설정
        legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM
        legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER
        // 범례 방향 설정
        legend.orientation = Legend.LegendOrientation.HORIZONTAL
        // 차트 내부 범례 위치하게 함 (default = false)
        legend.setDrawInside(false)

    }

 

차트에 데이터를 넣어주는 함수

// 차트 데이터 설정
    private fun initGraphData(lineChart: LineChart) {

        // Zoom In / Out 가능 여부 설정
        lineChart.setScaleEnabled(false)

        val valueList = ArrayList<Entry>()
        val title = "걸음 수"

        // 임의 데이터
        valueList.add(Entry(230101f, 245f))
        valueList.add(Entry(230102f, 245f))
        valueList.add(Entry(230103f, 265f))
        valueList.add(Entry(230104f, 285f))
        valueList.add(Entry(230105f, 300f))
        valueList.add(Entry(230106f, 305f))
        
        /*
        // X축을 날짜로 표시하는 방법1

        val labels = ArrayList<String>()
        labels.add("2023-01-01")
        labels.add("2023-01-02")
        labels.add("2023-01-03")
        labels.add("2023-01-04")
        labels.add("2023-01-05")
        labels.add("2023-01-06")
        labels.add("2023-01-07")

        binding.chart.xAxis.valueFormatter = IndexAxisValueFormatter(labels)
        
        // 해당 코드를 이용해 X축 라벨에 String값을 사용할수있다. 이 방법이 정석은 아닌것같지만..

        */
        
        /*
        // X축을 날짜로 표시하는 방법2
        
        binding.chart.xAxis.valueFormatter = TimeAxisValueFormat()
        방법1 말고 해당 방법을 사용하려면 아래 ChartAxisValueFormat 클래스 파일을 추가해야한다.
        
        */

        val barDataSet = LineDataSet(valueList, title)
        // 바 색상 설정 (ColorTemplate.LIBERTY_COLORS)
        barDataSet.setColors(
            Color.rgb(207, 248, 246), Color.rgb(148, 212, 212), Color.rgb(136, 180, 187),
            Color.rgb(118, 174, 175), Color.rgb(42, 109, 130))

        val data = LineData(barDataSet)
        lineChart.data = data
        lineChart.invalidate()
    }

 

위에 명시해놓은 [X축을 날짜로 표시하는 방법2]를 사용하려면 아래 클래스 파일을 추가해야한다.

value에는 내가 입력한 X값의 최솟값 ~ 최댓값이 들어가는데 같은 간격으로 반복되어 해당 클래스를 호출하는듯하다.
ex) x축의 최소값이 0, 최대값이 10이고 5개까지 표시된다고 하면 value값에는 1,3,5,7,9가 들어가는듯하다. 뇌피셜 주의!

그래서 필자는 x값에 yyMMdd형식으로 값을 넣어주었다.

return값에 year를 주석처리 한 이유는 연까지 나오면 차트가 지저분해보여서 ㅋㅋㅋ;

import com.github.mikephil.charting.formatter.IndexAxisValueFormatter

// 그래프의 X축을 날짜로 나오게 하기 위한 클래스

class ChartAxisValueFormat : IndexAxisValueFormatter() {

    override fun getFormattedValue(value: Float): String {
        val year = value.toLong().toString().substring(0,2)
        val month = value.toLong().toString().substring(3,4)
        val day = value.toLong().toString().substring(5,6)

        val date = /*year + "년 " + */month + "월 " + day + "일"

        return date
    }
}

 

위 과정을 모두 마친후 아래와같이 사용하면 차트가 나올것이다.
(ViewBinding 설명 생략 아래에 링크 해놓은 이전에 작성해놓은 글 참고)

initGraph(binding.chart)
initGraphData(binding.chart)

 

2021.06.02 - [프로그래밍/Android] - [Android] View Binding

[Android] View Binding

 

위 과정을 모두 수행한 후 성공적으로 나오는 그래프

 

X축을 날짜로 바꾸고싶다면 아래 글을 참고

MPAndroidChart x축 시간으로 변경하기

포스팅 시점으로 최신 라이브러리인 3.1.0 버전을 사용하겠습니다.

    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

 

TimeAxisValueFormat.kt

x축을 날짜-시간 형식으로 포맷할 클래스를 만들어 해결합니다.

class TimeAxisValueFormat : IndexAxisValueFormatter() {

    override fun getFormattedValue(value: Float): String {

        // Float(min) -> Date
        var valueToMinutes = TimeUnit.MINUTES.toMillis(value.toLong())
        var timeMimutes = Date(valueToMinutes)
        var formatMinutes = SimpleDateFormat("HH:mm")

        return formatMinutes.format(timeMimutes)
    }
}

해당 클래스는 MPAndroidChart 라이브러리에서 제공하는 IndexAxisValueFormatter 클래스를 상속 받습니다.

상속받은 클래스의 getFormattedValue()로 오버라이딩 하여 원하는 형식으로 변경할 수 있습니다.

제가 그리고자 했던 그래프는 x축에 24시간을 나타내야 하기 때문에 다음과 같이 수정했습니다.

1. value(Float형) : minutes → milliseconds
2. milliseconds → Date형
3. Date형 → SimpleDateFormat("원하는 형태")

 

😅 SimpleDateForamt("HH:MM")으로 하면 원하는 결과가 나오지 않아요!

이미 아시는 분들도 계시겠지만, "HH:mm"으로 해야 '시:분' 형식으로 나오게 됩니다.

"HH:MM"으로 한다면 '시:월'으로 나타나 모든 분이 1로 표시됩니다. 저는 이걸 헷갈리고 계속 헤맷답니다ㅎㅎ

 

날짜 형식으로 원하는 분들은 첫번째 과정에서 TimeUnit.DAYS 변경하고 SimpleDateFormat을 변경하면 되겠죠?

TimeUnit은 쉽게 시간을 계산할 수 있도록 Java에서 제공하는 라이브러리로 다음과 같은 예시를 들 수 있습니다.

TimeUnit.SECONDS.toHours()
TimeUnit.DAYS.toMinues()
TimeUnit.MILLISENDS.toSeconds()

 

ChartFragment.kt

    val xAxis = chart.xAxis
    xAxis.valueFormatter = TimeAxisValueFormat()
    xAxis.setDrawLabels(true)  // Label 표시 여부
    xAxis.axisMinimum = -240f  // 오전 5시
    xAxis.axisMaximum = 1200f

• valueFormatter : 위에서 정의한 Formatter 클래스
• axisMinimum : 최소값
• axisMaximum : 최대값

👆 axisMinimum을 -240f로 지정한 이유?

처음에 최소값을 0f로 지정했더니 기본 값이 오전 9시로 표시되었습니다.

저의 경우, 시작점을 오전 5시로 하고 싶었기 때문에 다음과 같이 조정하여 표시하였습니다!

 

 

MPAndroidChart 확대 결과

 

---

reference >

• https://stackoverflow.com/questions/41426021/how-to-add-x-axis-as-datetime-label-in-mpandroidchart
• https://codechacha.com/ko/java-convert-milliseconds-using-timeunit/

 

 

 

https://junyoung-developer.tistory.com/174

[Android] MPAndroidChart : x축 시간, 날짜로 변경하기

 

---

참고 : https://hanyeop.tistory.com/432

[Android] MPAndroidChart 라이브러리 사용하여 막대차트 그리기

 

나중에 참고할만한 링크 : https://velog.io/@hyehyes/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-MPAndroidChart%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-LineChart-%EC%82%AC%EC%9A%A9