Mpandroidchart: Cubic linechart going out of render bounds

[MaxMaes]

I got a chart with values ranging from 0-100 set to render cubiq with an intensity of 0.2f (as was default and makes nice curves). The resulting chart however renders the top value as more than 100 and lower value as less than 0. Is it possible to make the chart peak at it's max and render the min at 0?
The dataset and chart is configured as following:

LineDataSet set2 = new LineDataSet(yVals2, "Bezetting dit jaar");
set2.setColor(Color.argb(255, 254, 162, 95));
set2.setFillColor(Color.argb(51, 254, 162, 95));
set2.setDrawCircles(false);
set2.setDrawFilled(true);
set2.setDrawValues(false);
set2.setDrawCubic(true);
set2.setCubicIntensity(0.2f);

LineData data = new LineData(xVals, sets);
coverageChart.setData(data);
coverageChart.disableScroll();
coverageChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
coverageChart.getAxis(YAxis.AxisDependency.RIGHT).setEnabled(false);
coverageChart.setDescription("");
coverageChart.setDrawGridBackground(false);
coverageChart.getAxisLeft().setDrawGridLines(false);
coverageChart.getXAxis().setDrawGridLines(false);
coverageChart.getLegend().setEnabled(false);
coverageChart.invalidate();

[PhilJay]

That is weird, I cannot reproduce the issue.

Can you show me the full class where you setup the chart?

[MaxMaes]

Hi Phil,
Unfortunatly, I cannot provide a full class. The code that defines/interacts with the chart is as following:

Layout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="7dp">

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

 </LinearLayout>

Values and looks setup:

private void updateGraph(HashMap<Integer, Coverage> thisYearCoverage, HashMap<Integer, Coverage> lastYearCoverage, Coverage prevWeek, Coverage currentWeek, Coverage nextWeek) {
        View v = getView();
        if(v != null) {
            final LineChart coverageChart = (LineChart) v.findViewById(R.id.coverage_chart);
            ArrayList<Entry> yVals1 = new ArrayList<>();
            ArrayList<Entry> yVals2 = new ArrayList<>();
            String[] xVals = new String[]{"Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sept", "Okt", "Nov", "Dec"};
            for (int i = 0; i < 12; ++i) {
                if(lastYearCoverage.containsKey(i)) {
                    yVals1.add(new Entry((float) lastYearCoverage.get(i).calculateCoverage(), i));
                } else {
                    yVals1.add(new Entry(0, i));
                }
                if(thisYearCoverage.containsKey(i)) {
                    yVals2.add(new Entry((float) thisYearCoverage.get(i).calculateCoverage(), i));
                } else {
                    yVals2.add(new Entry(0, i));
                }
            }
            LineDataSet set1 = new LineDataSet(yVals1, "Last year");
            set1.setColor(Color.argb(255, 225, 225, 225));
            set1.setFillColor(Color.argb(51, 225, 225, 225));
            //set1.setColor(Color.argb(255, 1,120,186));
            //set1.setFillColor(Color.argb(51, 1,120,186));
            set1.setDrawCircles(false);
            set1.setDrawFilled(true);
            set1.setDrawValues(false);
            set1.setDrawCubic(true);
            set1.setCubicIntensity(0.2f);

            LineDataSet set2 = new LineDataSet(yVals2, "This year");
            set2.setColor(Color.argb(255, 254, 162, 95));
            set2.setFillColor(Color.argb(51, 254, 162, 95));
            set2.setDrawCircles(false);
            set2.setDrawFilled(true);
            set2.setDrawValues(false);
            set2.setDrawCubic(true);
            set2.setCubicIntensity(0.2f);

            ArrayList<ILineDataSet> sets = new ArrayList<>();
            sets.add(set1);
            sets.add(set2);
            LineData data = new LineData(xVals, sets);
            coverageChart.setData(data);
            coverageChart.disableScroll();
            coverageChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
            coverageChart.getAxis(YAxis.AxisDependency.RIGHT).setEnabled(false);
            coverageChart.setDescription("");
            coverageChart.setDrawGridBackground(false);
            //coverageChart.getAxisLeft().setDrawGridLines(false);
            coverageChart.getXAxis().setDrawGridLines(false);
            coverageChart.getLegend().setEnabled(false);
            coverageChart.invalidate();
}

With the current data in my system this generates the following chart:

However, when I remove the 0 entry, the graph looks as following:

I need the graph to curve to it's max instead of interpolate between 2 points as seen below with static data.

yVals2.add(new Entry(0, 0));
yVals2.add(new Entry(100, 1));
yVals2.add(new Entry(100, 2));
yVals2.add(new Entry(0, 3));

Result:

What I hope to achieve (photoshop attempt):

[PhilJay]

@danielgindi since you wrote the code for the cubic lines, any idea? :-)

I guess the "cut-off" could also be related to the padding in your layout.

[danielgindi]

Hi guys!

A cubic bezier is actually doing exactly what you are describing. That's the way it is. It's not a bug, it's not a feature, it's _math_.

But - on master, you'll see a new feature for an "horizontal" bezier.
You set the dataset's mode, ds.setMode(HORIZONTAL_BEZIER).
That will calculate the control points on the horizontal axis only, and prevent them from having any effect on the vertical axis.
This will most probably achieve the effect you are looking for.

@PhilJay the original implementation for cubic beziers stayed the same, there's just the new feature which we need to point out for the people, in the next release notes ;-)

[MaxMaes]

Thanks for pointing this out @danielgindi! I'll update my code as soon as the new version becomes available.