MPAndroidChart 中的可滚动折线图

Question

I am creating an application and use the MPAndroidChart library to draw line chart. I am putting Dates on x-axis and number on y-axis. I am not able to scroll line chart horizontally when there are more data. My snippet is here:

    XAxis xAxis = chart.getXAxis();
    xAxis.setTextSize(8f);
    xAxis.setTextColor(Color.BLACK);
    xAxis.setDrawGridLines(false);
    xAxis.setPosition(xAxis.getPosition());
    xAxis.setDrawAxisLine(true);
 //   xAxis.setSpaceBetweenLabels(1);
    xAxis.setLabelRotationAngle(-90.0f);

    YAxis leftAxis = chart.getAxisLeft();
    leftAxis.setTextColor(Color.BLACK);
    leftAxis.setDrawGridLines(true);
    leftAxis.setValueFormatter(new DefaultYAxisValueFormatter(0));

    YAxis rightAxis = chart.getAxisRight();
    rightAxis.setTextColor(Color.BLACK);
    rightAxis.setDrawGridLines(true);
    rightAxis.setValueFormatter(new DefaultYAxisValueFormatter(0));
     LineDataSet barDataSet1 = null;
    if (valueSet1 != null && valueSet1.size() > 0) {
        barDataSet1 = new LineDataSet(valueSet1, "Sended");
        barDataSet1.setColor(Color.BLACK);
        barDataSet1.setCircleColor(Color.BLACK);
        barDataSet1.setCircleSize(2.0f);
        barDataSet1.setLineWidth(1.0f);
        barDataSet1.setValueTextColor(Color.BLACK);
        barDataSet1.setValueTextSize(10.0f);
        barDataSet1.setDrawCubic(true);

    }


    ArrayList dataSets = new ArrayList<>();
    if (barDataSet1 != null)
        dataSets.add(barDataSet1);

    LineData data = new LineData(xDatelist, dataSets);
    if (data != null)
        chart.setData(data);
    chart.setPinchZoom(true);

    chart.setScrollContainer(true);
    chart.setHorizontalScrollBarEnabled(true);
    chart.setScaleXEnabled(true);
    chart.setDescription("Send/Received files");
    chart.invalidate();

Still I am not able to scroll graph when there is more data then date gets compressed on x-axis. How can I solve this issue?

Answer 1

You can add your chart inside HorizontalScrollView to make it scroll. But to do so, you first need to calculate your chart view's desired height and width and programatically set it to chartview.

In the below code, I have temporary set it to some default value to check scrolling behaviour.

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_above="@+id/seekBar1"
    android:fillViewport="true"
    android:scrollbars="horizontal"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:orientation="vertical" >

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/chart1"
            android:layout_width="1000dp"
            android:layout_height="300dp"
            />
    </LinearLayout>
</HorizontalScrollView>

Answer 2

A better approach would be to use the following methods with your chart:

chart.moveViewToX()

chart.setVisibleXRangeMaximum()

Answer 3

This worked for me.

// we can modify viewport, Scrolling the data from right to left
// allow 30 values to be displayed at once on the x-axis not allow more value 
chart.setVisibleXRangeMaximum(30); 
// set the left edge of the chart to x-index 20
// moveViewToX(...) also calls invalidate()
chart.moveViewToX(20); 

Check this for more information read this

I hope it'll help you....!

Answer 4

chart.setData(...); // first set the data.

// now modify viewport chart.setVisibleXRangeMaximum(7); // allow 7 values to be displayed at once on the x-axis, not more.