[Android] MPAndroidChart ライブラリーでグラフを描画

グラフを表示を一から作ると結構大変なので他の物をさがしました。MPAndroidChartです。
　

Android Studio
2021.2.1

MPAndroidChart

　
こちらに MPAndroidChart 設定等の説明があります。サンプルコードもあります。

以前はACHartEngineを使っていましたが、サポートが無くなったようです。無料ライブラリーのリスクの一面ですね。
　
Android Studio 3.0 から設定が変わりました。このライブラリーについての他の説明（2017/10以前）では、そのままやるとエラーとなったので、サンプルコードから切り出してみました。なるべく本質的なところがわかりやすいように簡略化しました。

Android 2021 あたりでちょっとした修正が必要となりました。
　
チャートの種類は幾つもあるのですがLineChartを選び、
元々400行＋αのところを100行程度までにしました。足りないと思うかたは上記サイトから探してください。
　

目次
1. marvenのリポジトリを指定
2. サンプルコード
3. 加速度センサーチャート

marvenのリポジトリを指定

maven { url "https://jitpack.io" }

1	maven { url "https://jitpack.io" }

以前はこれは build.gradle に設定していたのですが
Arctic Fox　あたりから setting.gradle に設定場所が移動しました

ただ紛らわしいのは似たような設定場所が2つあるので注意!です（間違えて焦りました)

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url "https://jitpack.io" }
    }
}
rootProject.name = "TestMPAndroidChart"
include ':app'

pluginManagement {

repositories {

gradlePluginPortal()

google()

mavenCentral()

}

dependencyResolutionManagement {

repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)

repositories {

google()

mavenCentral()

maven { url "https://jitpack.io" }

}

rootProject.name = "TestMPAndroidChart"

include ':app'

　
build.gradle (Module…)

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

}

...

dependencies {

...

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

}

サンプルコード

　
まとめたコードです。
MainActivity.java

//package your.package.name;

/*
Copyright 2018 Philipp Jahoda

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

<div class="blog-card external-blog-card blog-card-thumbnail-left cf"><div class="blog-card-thumbnail"><a href="http://www.apache.org/licenses/LICENSE-2.0" class="blog-card-thumbnail-link" rel="nofollow"><img src="https://s0.wordpress.com/mshots/v1/http%3A%2F%2Fwww.apache.org%2Flicenses%2FLICENSE-2.0?w=100&h=100" alt="" class="blog-card-thumb-image" height="100" width="100" /></a></div><div class="blog-card-content"><div class="blog-card-title"><a href="http://www.apache.org/licenses/LICENSE-2.0" class="blog-card-title-link" rel="nofollow">http://www.apache.org/licenses/LICENSE-2.0</a></div><div class="blog-card-excerpt"></div></div><div class="blog-card-footer"><div class="blog-card-site"><span class="blog-card-favicon"><img src="//www.google.com/s2/favicons?domain=www.apache.org" class="blog-card-favicon-img" alt="" width="16" height="16" /></span>www.apache.org</div></div></div>

Unless required by applicable law or agreed to in writing, software distributed
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
either express or implied. See the License for the specific language governing permissions
and limitations under the License.
 */

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import java.util.ArrayList;

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;


public class MainActivity extends AppCompatActivity {

    private LineChart mChart;

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

        mChart = findViewById(R.id.line_chart);

        // Grid背景色
        mChart.setDrawGridBackground(true);

        // no description text
        mChart.getDescription().setEnabled(true);

        // Grid縦軸を破線
        XAxis xAxis = mChart.getXAxis();
        xAxis.enableGridDashedLine(10f, 10f, 0f);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

        YAxis leftAxis = mChart.getAxisLeft();
        // Y軸最大最小設定
        leftAxis.setAxisMaximum(150f);
        leftAxis.setAxisMinimum(0f);
        // Grid横軸を破線
        leftAxis.enableGridDashedLine(10f, 10f, 0f);
        leftAxis.setDrawZeroLine(true);

        // 右側の目盛り
        mChart.getAxisRight().setEnabled(false);

        // add data
        setData();

        mChart.animateX(2500);
        //mChart.invalidate();

        // dont forget to refresh the drawing
        // mChart.invalidate();
    }

    private void setData() {
        // Entry()を使ってLineDataSetに設定できる形に変更してarrayを新しく作成
        int[] data = {116, 111, 112, 121, 102, 83,
                99, 101, 74, 105, 120, 112,
                109, 102, 107, 93, 82, 99, 110,
        };

        ArrayList<Entry> values = new ArrayList<>();

        for (int i = 0; i < data.length; i++) {
            values.add(new Entry(i, data[i], null, null));
        }

        LineDataSet set1;

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

            set1 = (LineDataSet) mChart.getData().getDataSetByIndex(0);
            set1.setValues(values);
            mChart.getData().notifyDataChanged();
            mChart.notifyDataSetChanged();
        } else {
            // create a dataset and give it a type
            set1 = new LineDataSet(values, "DataSet");

            set1.setDrawIcons(false);
            set1.setColor(Color.BLACK);
            set1.setCircleColor(Color.BLACK);
            set1.setLineWidth(1f);
            set1.setCircleRadius(3f);
            set1.setDrawCircleHole(false);
            set1.setValueTextSize(0f);
            set1.setDrawFilled(true);
            set1.setFormLineWidth(1f);
            set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f));
            set1.setFormSize(15.f);

            set1.setFillColor(Color.BLUE);

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

//package your.package.name;

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed

under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,

either express or implied. See the License for the specific language governing permissions

and limitations under the License.

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.graphics.Color;

import android.graphics.DashPathEffect;

import java.util.ArrayList;

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;

public class MainActivity extends AppCompatActivity {

private LineChart mChart;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mChart = findViewById(R.id.line_chart);

// Grid背景色

mChart.setDrawGridBackground(true);

// no description text

mChart.getDescription().setEnabled(true);

// Grid縦軸を破線

XAxis xAxis = mChart.getXAxis();

xAxis.enableGridDashedLine(10f, 10f, 0f);

xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

YAxis leftAxis = mChart.getAxisLeft();

// Y軸最大最小設定

leftAxis.setAxisMaximum(150f);

leftAxis.setAxisMinimum(0f);

// Grid横軸を破線

leftAxis.enableGridDashedLine(10f, 10f, 0f);

leftAxis.setDrawZeroLine(true);

// 右側の目盛り

mChart.getAxisRight().setEnabled(false);

// add data

setData();

mChart.animateX(2500);

//mChart.invalidate();

// dont forget to refresh the drawing

// mChart.invalidate();

}

private void setData() {

// Entry()を使ってLineDataSetに設定できる形に変更してarrayを新しく作成

int[] data = {116, 111, 112, 121, 102, 83,

99, 101, 74, 105, 120, 112,

109, 102, 107, 93, 82, 99, 110,

};

ArrayList<Entry> values = new ArrayList<>();

for (int i = 0; i < data.length; i++) {

values.add(new Entry(i, data[i], null, null));

}

LineDataSet set1;

if (mChart.getData() != null &&

mChart.getData().getDataSetCount() > 0) {

set1 = (LineDataSet) mChart.getData().getDataSetByIndex(0);

set1.setValues(values);

mChart.getData().notifyDataChanged();

mChart.notifyDataSetChanged();

} else {

// create a dataset and give it a type

set1 = new LineDataSet(values, "DataSet");

set1.setDrawIcons(false);

set1.setColor(Color.BLACK);

set1.setCircleColor(Color.BLACK);

set1.setLineWidth(1f);

set1.setCircleRadius(3f);

set1.setDrawCircleHole(false);

set1.setValueTextSize(0f);

set1.setDrawFilled(true);

set1.setFormLineWidth(1f);

set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f));

set1.setFormSize(15.f);

set1.setFillColor(Color.BLUE);

ArrayList<ILineDataSet> dataSets = new ArrayList<>();

dataSets.add(set1); // add the datasets

// create a data object with the datasets

LineData lineData = new LineData(dataSets);

// set data

mChart.setData(lineData);

}

　
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="16dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="@string/app_name"
        android:textSize="20sp"
        android:gravity="center"
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/line_chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:padding="16dp"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:text="@string/app_name"

android:textSize="20sp"

android:gravity="center"

android:layout_margin="5dp"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<com.github.mikephil.charting.charts.LineChart

android:id="@+id/line_chart"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

　
LineChartActivity1.javaを元にしていますが

チャートの拡大・縮小
チャートの表示領域のスクロール
X座標・Y座標のスタイル
ポイントの数値表示、アイコン表示
最大値・最小値の表示
その他

これらの機能は省きましたので、使いたい場合はコードから探してください。

加速度センサーチャート

　
このMPAndroidChartを使って加速度センサーのX,Y,Z軸をチャートにしてみました。
　

その他のLibraryページ

Jsoup: HTML parser
AndroidBootstrap：カスタムUI
MPAndroidChart：グラフを描画