[Solution]Fill the color between two line charts.

[amitks2015]

I am able to achieve this by implementing a custom FillFormatter and a LineChartRenderer. Hope this solution helps someone.

1. Implement a custom FillFormator which return the dataset of other line.

public class MyFillFormatter implements IFillFormatter {
private ILineDataSet boundaryDataSet;

public MyFillFormatter() {
    this(null);
}
//Pass the dataset of other line in the Constructor 
public MyFillFormatter(ILineDataSet boundaryDataSet) {
    this.boundaryDataSet = boundaryDataSet;
}

@Override
public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {
    return 0;
}

//Define a new method which is used in the LineChartRenderer
public List<Entry> getFillLineBoundary() {
    if(boundaryDataSet != null) {
        return ((LineDataSet) boundaryDataSet).getValues();
    }
    return null;
}}

2. Implement a custom LineChartRenderer to draw and fill the enclosed path.

public class MyLineLegendRenderer extends LineChartRenderer {
public MyLineLegendRenderer(LineDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler) {
    super(chart, animator, viewPortHandler);
}

//This method is same as it's parent implementation
@Override
protected void drawLinearFill(Canvas c, ILineDataSet dataSet, Transformer trans, XBounds bounds) {
    final Path filled = mGenerateFilledPathBuffer;

    final int startingIndex = bounds.min;
    final int endingIndex = bounds.range + bounds.min;
    final int indexInterval = 128;

    int currentStartIndex = 0;
    int currentEndIndex = indexInterval;
    int iterations = 0;

    // Doing this iteratively in order to avoid OutOfMemory errors that can happen on large bounds sets.
    do {
        currentStartIndex = startingIndex + (iterations * indexInterval);
        currentEndIndex = currentStartIndex + indexInterval;
        currentEndIndex = currentEndIndex > endingIndex ? endingIndex : currentEndIndex;

        if (currentStartIndex <= currentEndIndex) {
            generateFilledPath(dataSet, currentStartIndex, currentEndIndex, filled);

            trans.pathValueToPixel(filled);

            final Drawable drawable = dataSet.getFillDrawable();
            if (drawable != null) {

                drawFilledPath(c, filled, drawable);
            } else {

                drawFilledPath(c, filled, dataSet.getFillColor(), dataSet.getFillAlpha());
            }
        }
        iterations++;
    } while (currentStartIndex <= currentEndIndex);
}
//This is where we define the area to be filled.
private void generateFilledPath(final ILineDataSet dataSet, final int startIndex, final int endIndex, final Path outputPath) {

    //Call the custom method to retrieve the dataset for other line
    final List<Entry> boundaryEntry = ((MyFillFormatter)dataSet.getFillFormatter()).getFillLineBoundary();

    final float phaseY = mAnimator.getPhaseY();    
    final Path filled = outputPath;
    filled.reset();

    final Entry entry = dataSet.getEntryForIndex(startIndex);

    filled.moveTo(entry.getX(), boundaryEntry.get(0).getY());
    filled.lineTo(entry.getX(), entry.getY() * phaseY);

    // create a new path
    Entry currentEntry = null;
    Entry previousEntry = null;
    for (int x = startIndex + 1; x <= endIndex; x++) {

        currentEntry = dataSet.getEntryForIndex(x);
        filled.lineTo(currentEntry.getX(), currentEntry.getY() * phaseY);

    }

    // close up
    if (currentEntry != null && previousEntry!= null) {
        filled.lineTo(currentEntry.getX(), previousEntry.getY());
    }

    //Draw the path towards the other line 
    for (int x = endIndex ; x > startIndex; x--) {
        previousEntry = boundaryEntry.get(x);
        filled.lineTo(previousEntry.getX(), previousEntry.getY() * phaseY);
    }

    filled.close();
}}

3.At the end from the activity
Set the MyFillFormatter to one of the LineDataSet passing other LineDataSet as argument.

lineDataSet2.setFillFormatter(new MyFillFormatter(LineDataSet1));
mChart.setRenderer(new MyLineLegendRenderer(mChart, mChart.getAnimator(), mChart.getViewPortHandler()));

[LiHexiang]

CombinedChart can be used?

[alsonpr]

I get this error. java.lang.ClassCastException: com.github.mikephil.charting.formatter.DefaultFillFormatter cannot be cast to com.nepget.bmi.Activities.MyFillFormatter. Anyone who can help?

[Kaveriph]

Hi,
I get the same error as above mentioned by alsonp
java.lang.ClassCastException: com.github.mikephil.charting.formatter.DefaultFillFormatter cannot be cast to com.nepget.bmi.Activities.MyFillFormatter.
I tried making the MyFillFormatter extend DefaultFillFormatter
No luck !!
Please help

[amitks2015]

@Kaveriph did you try to implement IFillFormatter directly instead of extending your class from DefaultFillFormatter?
I have provided the code snippet above where MyFillFormatter implements IFillFormatter.

[LiHexiang]

@Kaveriph did you try to implement IFillFormatter directly instead of extending your class from DefaultFillFormatter?
I have provided the code snippet above where MyFillFormatter implements IFillFormatter.

Great ! you are right!

[kasogg]

is there a solution for cubic bezier?

[kasogg]

is there a solution for cubic bezier?

public class CubicFillLinearChartRenderer extends LineChartRenderer {

public CubicFillLinearChartRenderer(LineDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler) {
    super(chart, animator, viewPortHandler);
}

@Override
protected void drawCubicFill(Canvas c, ILineDataSet dataSet, Path spline, Transformer trans, XBounds bounds) {
    if (mXBounds.range < 1) {
        super.drawCubicFill(c, dataSet, spline, trans, bounds);
        return;
    }

    final LineDataSet bottomDataSet = ((MyFillFormatter) dataSet.getFillFormatter()).getFillLineDataSet();
    float phaseY = mAnimator.getPhaseY();
    mXBounds.set(mChart, bottomDataSet);
    float intensity = bottomDataSet.getCubicIntensity();

    final int firstIndex = mXBounds.min;
    final int lastIndex = mXBounds.min + mXBounds.range;
    final int maxIndex = bottomDataSet.getEntryCount() - 1;

    final Entry firstEntry = bottomDataSet.getEntryForIndex(firstIndex);
    final Entry lastEntry = bottomDataSet.getEntryForIndex(lastIndex);

    cubicFillPath.lineTo(lastEntry.getX(), lastEntry.getY());

    Entry prevPrev;
    Entry prev = bottomDataSet.getEntryForIndex(Math.min(lastIndex + 1, maxIndex));
    Entry cur = bottomDataSet.getEntryForIndex(Math.min(lastIndex, maxIndex));
    Entry next;
    int nextIndex;

    if (cur == null) return;

    float prevDx;
    float prevDy;
    float curDx;
    float curDy;

    for (int j = lastIndex - 1; j >= firstIndex; j--) {
        prevPrev = prev;
        prev = cur;
        cur = bottomDataSet.getEntryForIndex(j);

        nextIndex = Math.max(j - 1, 0);
        next = bottomDataSet.getEntryForIndex(nextIndex);

        prevDx = (cur.getX() - prevPrev.getX()) * intensity;
        prevDy = (cur.getY() - prevPrev.getY()) * intensity;
        curDx = (next.getX() - prev.getX()) * intensity;
        curDy = (next.getY() - prev.getY()) * intensity;

        cubicFillPath.cubicTo(prev.getX() + prevDx, (prev.getY() + prevDy) * phaseY, cur.getX() - curDx,
                (cur.getY() - curDy) * phaseY, cur.getX(), cur.getY() * phaseY);
    }
    cubicFillPath.lineTo(firstEntry.getX(), firstEntry.getY());
    cubicFillPath.close();

    trans.pathValueToPixel(spline);

    final Drawable drawable = dataSet.getFillDrawable();
    if (drawable != null) {
        drawFilledPath(c, spline, drawable);
    } else {
        drawFilledPath(c, spline, dataSet.getFillColor(), dataSet.getFillAlpha());
    }

}

}

[LiHexiang]

Thank you vary much ! 李鹤翔 lihexiang2012@163.com

…

在 2019年7月29日，下午12:13，KasoGG ***@***.***> 写道： is there a solution for cubic bezier? `public class CubicFillLinearChartRenderer extends LineChartRenderer { public CubicFillLinearChartRenderer(LineDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler) { super(chart, animator, viewPortHandler); } @OverRide protected void drawCubicFill(Canvas c, ILineDataSet dataSet, Path spline, Transformer trans, XBounds bounds) { if (mXBounds.range < 1) { super.drawCubicFill(c, dataSet, spline, trans, bounds); return; } final LineDataSet bottomDataSet = ((MyFillFormatter) dataSet.getFillFormatter()).getFillLineDataSet(); float phaseY = mAnimator.getPhaseY(); mXBounds.set(mChart, bottomDataSet); float intensity = bottomDataSet.getCubicIntensity(); final int firstIndex = mXBounds.min; final int lastIndex = mXBounds.min + mXBounds.range; final int maxIndex = bottomDataSet.getEntryCount() - 1; final Entry firstEntry = bottomDataSet.getEntryForIndex(firstIndex); final Entry lastEntry = bottomDataSet.getEntryForIndex(lastIndex); cubicFillPath.lineTo(lastEntry.getX(), lastEntry.getY()); Entry prevPrev; Entry prev = bottomDataSet.getEntryForIndex(Math.min(lastIndex + 1, maxIndex)); Entry cur = bottomDataSet.getEntryForIndex(Math.min(lastIndex, maxIndex)); Entry next; int nextIndex; if (cur == null) return; float prevDx; float prevDy; float curDx; float curDy; for (int j = lastIndex - 1; j >= firstIndex; j--) { prevPrev = prev; prev = cur; cur = bottomDataSet.getEntryForIndex(j); nextIndex = Math.max(j - 1, 0); next = bottomDataSet.getEntryForIndex(nextIndex); prevDx = (cur.getX() - prevPrev.getX()) * intensity; prevDy = (cur.getY() - prevPrev.getY()) * intensity; curDx = (next.getX() - prev.getX()) * intensity; curDy = (next.getY() - prev.getY()) * intensity; cubicFillPath.cubicTo(prev.getX() + prevDx, (prev.getY() + prevDy) * phaseY, cur.getX() - curDx, (cur.getY() - curDy) * phaseY, cur.getX(), cur.getY() * phaseY); } cubicFillPath.lineTo(firstEntry.getX(), firstEntry.getY()); cubicFillPath.close(); trans.pathValueToPixel(spline); final Drawable drawable = dataSet.getFillDrawable(); if (drawable != null) { drawFilledPath(c, spline, drawable); } else { drawFilledPath(c, spline, dataSet.getFillColor(), dataSet.getFillAlpha()); } } }` — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3016?email_source=notifications&email_token=ACNPGRH2SRK3ZCTZ7TY42GTQBZU6RA5CNFSM4DH4UA22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD27Q44Q#issuecomment-515837554>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACNPGRHGXAOBQGZ77BCME5TQBZU6RANCNFSM4DH4UA2Q>.

[Narender-350]

is there a solution for cubic bezier?

public class CubicFillLinearChartRenderer extends LineChartRenderer {

public CubicFillLinearChartRenderer(LineDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler) {
    super(chart, animator, viewPortHandler);
}

@Override
protected void drawCubicFill(Canvas c, ILineDataSet dataSet, Path spline, Transformer trans, XBounds bounds) {
    if (mXBounds.range < 1) {
        super.drawCubicFill(c, dataSet, spline, trans, bounds);
        return;
    }

    final LineDataSet bottomDataSet = ((MyFillFormatter) dataSet.getFillFormatter()).getFillLineDataSet();
    float phaseY = mAnimator.getPhaseY();
    mXBounds.set(mChart, bottomDataSet);
    float intensity = bottomDataSet.getCubicIntensity();

    final int firstIndex = mXBounds.min;
    final int lastIndex = mXBounds.min + mXBounds.range;
    final int maxIndex = bottomDataSet.getEntryCount() - 1;

    final Entry firstEntry = bottomDataSet.getEntryForIndex(firstIndex);
    final Entry lastEntry = bottomDataSet.getEntryForIndex(lastIndex);

    cubicFillPath.lineTo(lastEntry.getX(), lastEntry.getY());

    Entry prevPrev;
    Entry prev = bottomDataSet.getEntryForIndex(Math.min(lastIndex + 1, maxIndex));
    Entry cur = bottomDataSet.getEntryForIndex(Math.min(lastIndex, maxIndex));
    Entry next;
    int nextIndex;

    if (cur == null) return;

    float prevDx;
    float prevDy;
    float curDx;
    float curDy;

    for (int j = lastIndex - 1; j >= firstIndex; j--) {
        prevPrev = prev;
        prev = cur;
        cur = bottomDataSet.getEntryForIndex(j);

        nextIndex = Math.max(j - 1, 0);
        next = bottomDataSet.getEntryForIndex(nextIndex);

        prevDx = (cur.getX() - prevPrev.getX()) * intensity;
        prevDy = (cur.getY() - prevPrev.getY()) * intensity;
        curDx = (next.getX() - prev.getX()) * intensity;
        curDy = (next.getY() - prev.getY()) * intensity;

        cubicFillPath.cubicTo(prev.getX() + prevDx, (prev.getY() + prevDy) * phaseY, cur.getX() - curDx,
                (cur.getY() - curDy) * phaseY, cur.getX(), cur.getY() * phaseY);
    }
    cubicFillPath.lineTo(firstEntry.getX(), firstEntry.getY());
    cubicFillPath.close();

    trans.pathValueToPixel(spline);

    final Drawable drawable = dataSet.getFillDrawable();
    if (drawable != null) {
        drawFilledPath(c, spline, drawable);
    } else {
        drawFilledPath(c, spline, dataSet.getFillColor(), dataSet.getFillAlpha());
    }

}

}

Getting error Cannot resolved emthod 'getFillLineDataSet'

[Narender-350]

I am getting same class converstion
exception (java.lang.ClassCastException: com.github.mikephil.charting.formatter.DefaultFillFormatter cannot be cast to com.example.graph.MyFillFormatter ) .What it is the solution here

[mplch]

Same problem here.
Have failed to find any newer post about how to draw area between two curves in Kotlin.
The latter two Java classes seem to work fine though.

dataSet3.fillFormatter = MyFillFormatter(dataSet2) dataSet3.setDrawFilled(true) lineChart.renderer = MyLineChartRenderer( lineChart, lineChart.animator, lineChart.viewPortHandler )