MPAndroidChartでリアルタイム更新したときX軸を時間表示したい

Question

MPAndroidChartのRealtimeLineChartActivity.javaをほとんどそのまま使っています。
X軸にリアルタイム時間表示したいのですが、
X軸をValueFormatterで現在時刻を与えるとX軸のラベルが下記のようにすべてが同じ時間になってしまいます。
addEntryはメインアクティビティのスレッドで1秒ごとにコールされます。

現実
データ1　　データ2　　データ3　データ4
21:00:01　21:00:01　21:00:01　21:00:01 ←1秒ごとに更新されるがラベルが全部同じ現在時間になってしまう。

　理想
データ1　　データ2　　　データ3　データ4
21:00:01　　21:00:02　21:00:03　21:00:04　←更新のたびに古いデータのラベルは変わってほしくない。

createSetメソッド内のLineData dataに同様にValueFormatterをセットしても結果が変わりませんでした。

mpandroidchartバージョンは3.1.0です。

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProvider;

import com.example.myapplication.R;
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.components.YAxis.AxisDependency;
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.formatter.ValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;


import com.example.myapplication.databinding.FragmentMainBinding;

import java.text.SimpleDateFormat;
import java.time.format.DateTimeFormatter;
import java.util.Date;

/**
 * A placeholder fragment containing a simple view.
 */
public class GraphFragment extends Fragment {

    private static final String ARG_SECTION_NUMBER = "section_number";

    private PageViewModel pageViewModel;
    private FragmentMainBinding binding;

    private LineChart chart;

    public static GraphFragment newInstance() {
        GraphFragment fragment = new GraphFragment();
        Bundle bundle = new Bundle();
//        bundle.putInt(ARG_SECTION_NUMBER, index);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        pageViewModel = new ViewModelProvider(this).get(PageViewModel.class);

        initChart();
    }

    @Override
    public View onCreateView(
            @NonNull LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        binding = FragmentMainBinding.inflate(inflater, container, false);
        View root = binding.getRoot();
        chart = root.findViewById(R.id.chart1);
        return root;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        binding = null;
    }

    public void initChart(){
//        chart = findViewById(R.id.chart1);

        // enable description text
        chart.getDescription().setEnabled(true);

        // enable touch gestures
        chart.setTouchEnabled(true);

        // enable scaling and dragging
        chart.setDragEnabled(true);
        chart.setScaleEnabled(true);
        chart.setDrawGridBackground(false);

        // if disabled, scaling can be done on x- and y-axis separately
        chart.setPinchZoom(true);

        // set an alternative background color
        chart.setBackgroundColor(Color.LTGRAY);

        LineData data = new LineData();
        data.setValueTextColor(Color.WHITE);

        // add empty data
        chart.setData(data);

        XAxis xl = chart.getXAxis();
        xl.setTextColor(Color.WHITE);
        xl.setDrawGridLines(false);
        xl.setAvoidFirstLastClipping(true);
        xl.setEnabled(true);
　　　　//X軸のラベルを時刻にする
        xl.setValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value){
                Date date = new Date();
                SimpleDateFormat sdf = new SimpleDateFormat("MM:dd:ss");
                return sdf.format(date);
            }
        });

        YAxis leftAxis = chart.getAxisLeft();
        leftAxis.setTextColor(Color.WHITE);
        leftAxis.setAxisMaximum(100f);
        leftAxis.setAxisMinimum(0f);
        leftAxis.setDrawGridLines(true);

        YAxis rightAxis = chart.getAxisRight();
        rightAxis.setEnabled(false);
    }

    public void addEntry() {
        LineData data = chart.getData();

        if (data != null) {

            ILineDataSet set = data.getDataSetByIndex(0);
            // set.addEntry(...); // can be called as well

            if (set == null) {
                set = createSet();
                data.addDataSet(set);
            }

            data.addEntry(new Entry(set.getEntryCount(), (float) (Math.random() * 40) + 30f), 0);
            data.notifyDataChanged();

            // let the chart know it's data has changed
            chart.notifyDataSetChanged();

            // limit the number of visible entries
            chart.setVisibleXRangeMaximum(120);
            // chart.setVisibleYRange(30, AxisDependency.LEFT);

            // move to the latest entry
            chart.moveViewToX(data.getEntryCount());

            // this automatically refreshes the chart (calls invalidate())
            // chart.moveViewTo(data.getXValCount()-7, 55f,
            // AxisDependency.LEFT);
        }
    }

    private LineDataSet createSet() {

        LineDataSet set = new LineDataSet(null, "Dynamic Data");
        set.setAxisDependency(AxisDependency.LEFT);
        set.setColor(ColorTemplate.getHoloBlue());
        set.setCircleColor(Color.WHITE);
        set.setLineWidth(2f);
        set.setCircleRadius(4f);
        set.setFillAlpha(65);
        set.setFillColor(ColorTemplate.getHoloBlue());
        set.setHighLightColor(Color.rgb(244, 117, 117));
        set.setValueTextColor(Color.WHITE);
        set.setValueTextSize(9f);
        set.setDrawValues(false);
        return set;
    }
}

Comments

[jimbe]

> X軸にリアルタイム時間表示したいのですが、X軸をValueFormatterで現在時刻を与えると ～

そのようにコーディングすることでリアルタイムにX軸に時間が表示されるという仕様や情報があるのでしょうか。
それとも「そうすれば表示されるのでは」とご自身でお考えになってやってみたがならなかった…ということでしょうか。

[luckyclock]

参考サイトは data.addXValue(format.format(date))
を使用していますが、現行バージョンだとaddXvalueが使えなくなっています。
旧バージョンでできているので現バージョンでもできるのでは？と考えました。

[jimbe]

お使いのバージョン情報をご質問に追記して頂けますか。

Answer 1

古い記事ですが、参考になるでしょうか。

MPAndroidChartを使って「リアルタイム更新のセンサーデータ時系列グラフ」のサンプルを作ってみた

---

XAxis xl に設定している ValueFormatter の getFormattedValue メソッドにおきまして、パラメータ value を全く使わずに現在時刻をそのまま(文字列化して)返しているのが問題ではないでしょうか。
普通に考えて、このメソッドは X 軸の各ポイントでそのポイントを value として呼ばれるでしょうから、それが常に現在時では X=0 でも X=1 でも x=2 でも・・・全て同じとなるでしょう。
x 軸が例えば特定時刻からの秒数としてデータ(Entry?)が表現されているであれば、まず時刻を保存した上でその時刻に x を秒として加算して文字列化して返す・・・といった処理が必要なのではないかと思います。

Comments

[luckyclock]

おっしゃるようにvalueを使わないとダメでした。
getFormattedValue はEntry1回で表示するのラベル分よびだされvalueに応じた時刻を返さないといけないですね。
entryに対応した時刻データを保持して、valueを時刻に変換する処理を作成します。
まだ作りきっていないのですが、一旦ベストアンサーで〆たいと思います。