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

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

Android Studio
2024.1.1

MPAndroidChart

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

以前はACHartEngineを使っていましたが、サポートが無くなったようです。無料ライブラリーのリスクの一面ですね。
　
ライブラリー設定が変わりましたので、また色々やらないとエラーになってしまいますが
とりあえずチャートを出すことができたので以下に覚書として記述しておきます
　
チャートの種類は幾つもあるのですがLineChartを選び、
元々400行＋αのところを100行程度までにしました。足りないと思うかたは上記サイトから探してください。
　

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

mavenのリポジトリを指定

最初に、Gradle Scripts にある settings.gradle.kts にmavenの記述を入れます

settings.gradle.kts

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}

dependencyResolutionManagement {

repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)

repositories {

google()

mavenCentral()

maven { url = uri("https://jitpack.io") }

}

以前はこう書いていましたがktsになって変わったようです

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

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

同じく、libs.versions.toml に MPAndroidChart を参考に
以下の設定を行います
大文字で始めるとエラーになるので小文字にします

libs.versions.toml

[versions]
...
mpandroidchart = "v3.1.0"

[libraries]
...
mpandroidchart = { group = "com.github.PhilJay", name = mpandroidChart", version.ref = "mpandroidchart" }


[plugins]
...

[versions]

...

mpandroidchart = "v3.1.0"

[libraries]

...

mpandroidchart = { group = "com.github.PhilJay", name = mpandroidChart", version.ref = "mpandroidchart" }

[plugins]

...

これでdependenciesの設定ができます

build.gradle (Module…)

...
dependencies {
    ...
    implementation(libs.mpandroidchart)

}

...

dependencies {

...

implementation(libs.mpandroidchart)

}

以上で Sync Now, Try Again でエラーが出なければ次に進みます

サンプルコード

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

//package com.example.testmpandroidchart;

import android.os.Bundle;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

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);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        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();

        // don't 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

//package com.example.testmpandroidchart;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

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);

EdgeToEdge.enable(this);

setContentView(R.layout.activity_main);

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);

return insets;

});

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();

// don't 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"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/line_chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        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"
        app:layout_constraintVertical_bias="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

<androidx.constraintlayout.widget.ConstraintLayout

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:id="@+id/main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

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

android:id="@+id/line_chart"

android:layout_width="match_parent"

android:layout_height="match_parent"

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"

app:layout_constraintVertical_bias="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

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

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

加速度センサーチャート

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

その他のLibraryページ

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