Fill line chart with a Drawable

can be used for gradients, pictures, etc.

MPChartExample/res/drawable/fade_red.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:angle="90"
+        android:startColor="#00ff0000"
+        android:endColor="#ffff0000" />
+</shape>

MPChartExample/src/com/xxmassdeveloper/mpchartexample/LineChartActivity1.java

@@ -3,7 +3,9 @@ package com.xxmassdeveloper.mpchartexample;
 
 import android.graphics.Color;
 import android.graphics.Typeface;
+import android.graphics.drawable.Drawable;
 import android.os.Bundle;
+import android.support.v4.content.ContextCompat;
 import android.util.Log;
 import android.view.Menu;
 import android.view.MenuItem;
@@ -358,11 +360,9 @@ public class LineChartActivity1 extends DemoBase implements OnSeekBarChangeListe
         set1.setCircleRadius(3f);
         set1.setDrawCircleHole(false);
         set1.setValueTextSize(9f);
-        set1.setFillAlpha(65);
-        set1.setFillColor(Color.BLACK);
-//        set1.setDrawFilled(true);
-        // set1.setShader(new LinearGradient(0, 0, 0, mChart.getHeight(),
-        // Color.BLACK, Color.WHITE, Shader.TileMode.MIRROR));
+        Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red);
+        set1.setFillDrawable(drawable);
+        set1.setDrawFilled(true);
 
         ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
         dataSets.add(set1); // add the datasets

MPChartLib/src/com/github/mikephil/charting/data/LineDataSet.java

@@ -4,6 +4,7 @@ package com.github.mikephil.charting.data;
 import android.content.Context;
 import android.graphics.Color;
 import android.graphics.DashPathEffect;
+import android.graphics.drawable.Drawable;
 
 import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
 import com.github.mikephil.charting.utils.ColorTemplate;
@@ -42,6 +43,10 @@ public class LineDataSet extends LineRadarDataSet<Entry> implements ILineDataSet
 
     private boolean mDrawCircleHole = true;
 
+    /** the drawable to be used for filling the line surface*/
+    protected Drawable mFillDrawable;
+
+
     public LineDataSet(List<Entry> yVals, String label) {
         super(yVals, label);
 
@@ -326,4 +331,32 @@ public class LineDataSet extends LineRadarDataSet<Entry> implements ILineDataSet
     public FillFormatter getFillFormatter() {
         return mFillFormatter;
     }
+
+
+    /**
+     * sets the color that is used for filling the line surface
+     * disables filling with a drawable
+     * @param color
+     */
+    @Override
+    public void setFillColor(int color) {
+        super.setFillColor(color);
+        mFillDrawable = null;
+    }
+
+    /**
+     * sets the drawable to be used for filling the line surface. The drawable is used
+     * instead of the solid color
+     * @param drawable
+     */
+    @Override
+    public void setFillDrawable(Drawable drawable) {
+        mFillDrawable = drawable;
+    }
+
+    @Override
+    public Drawable getFillDrawable() {
+        return mFillDrawable;
+    }
+
 }

MPChartLib/src/com/github/mikephil/charting/data/realm/implementation/RealmLineDataSet.java

@@ -3,8 +3,8 @@ package com.github.mikephil.charting.data.realm.implementation;
 import android.content.Context;
 import android.graphics.Color;
 import android.graphics.DashPathEffect;
+import android.graphics.drawable.Drawable;
 
-import com.github.mikephil.charting.data.Entry;
 import com.github.mikephil.charting.data.realm.base.RealmLineRadarDataSet;
 import com.github.mikephil.charting.formatter.DefaultFillFormatter;
 import com.github.mikephil.charting.formatter.FillFormatter;
@@ -17,7 +17,6 @@ import java.util.List;
 
 import io.realm.RealmObject;
 import io.realm.RealmResults;
-import io.realm.dynamic.DynamicRealmObject;
 
 /**
  * Created by Philipp Jahoda on 21/10/15.
@@ -66,6 +65,8 @@ public class RealmLineDataSet<T extends RealmObject> extends RealmLineRadarDataS
 
     private boolean mDrawCircleHole = true;
 
+    /** the drawable to be used for filling the line surface*/
+    protected Drawable mFillDrawable;
 
     /**
      * Constructor for creating a LineDataSet with realm data.
@@ -332,4 +333,15 @@ public class RealmLineDataSet<T extends RealmObject> extends RealmLineRadarDataS
     public FillFormatter getFillFormatter() {
         return mFillFormatter;
     }
+
+    @Override
+    public void setFillDrawable(Drawable drawable) {
+        mFillDrawable = drawable;
+    }
+
+    @Override
+    public Drawable getFillDrawable() {
+        return mFillDrawable;
+    }
+
 }

MPChartLib/src/com/github/mikephil/charting/interfaces/datasets/ILineDataSet.java

@@ -1,6 +1,7 @@
 package com.github.mikephil.charting.interfaces.datasets;
 
 import android.graphics.DashPathEffect;
+import android.graphics.drawable.Drawable;
 
 import com.github.mikephil.charting.data.Entry;
 import com.github.mikephil.charting.formatter.FillFormatter;
@@ -81,4 +82,16 @@ public interface ILineDataSet extends ILineRadarDataSet<Entry> {
      * @return
      */
     FillFormatter getFillFormatter();
-}
+
+
+    /**
+     * Sets the drawable to be used for filling
+     * @param drawable
+     */
+    void setFillDrawable(Drawable drawable);
+
+    /**
+     * @return the drawable used for filling
+     */
+    Drawable getFillDrawable();
+}

MPChartLib/src/com/github/mikephil/charting/renderer/LineChartRenderer.java

@@ -5,6 +5,7 @@ import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Path;
+import android.graphics.drawable.Drawable;
 
 import com.github.mikephil.charting.animation.ChartAnimator;
 import com.github.mikephil.charting.buffer.CircleBuffer;
@@ -85,7 +86,7 @@ public class LineChartRenderer extends LineScatterCandleRadarRenderer {
 
             if (width > 0 && height > 0) {
 
-                mDrawBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444);
+                mDrawBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
                 mBitmapCanvas = new Canvas(mDrawBitmap);
             } else
                 return;
@@ -125,6 +126,22 @@ public class LineChartRenderer extends LineScatterCandleRadarRenderer {
         mRenderPaint.setPathEffect(null);
     }
 
+    /**
+     * Draws the provided path in filled mode with the provided drawable.
+     */
+    protected void drawFilledPath(Canvas c, Path filledPath, Drawable drawable) {
+        c.save();
+        c.clipPath(filledPath);
+
+        drawable.setBounds((int) mViewPortHandler.contentLeft(),
+                (int) mViewPortHandler.contentTop(),
+                (int) mViewPortHandler.contentRight(),
+                (int) mViewPortHandler.contentBottom());
+        drawable.draw(c);
+
+        c.restore();
+    }
+
     /**
      * Draws a cubic line.
      *
@@ -252,6 +269,11 @@ public class LineChartRenderer extends LineScatterCandleRadarRenderer {
 
         trans.pathValueToPixel(spline);
 
+        final Drawable drawable = dataSet.getFillDrawable();
+        if (dataSet.getFillDrawable() != null) {
+            drawFilledPath(c, spline, drawable);
+            return;
+        }
         drawFilledPath(c, spline, dataSet.getFillColor(), dataSet.getFillAlpha());
     }
 
@@ -349,6 +371,12 @@ public class LineChartRenderer extends LineScatterCandleRadarRenderer {
 
         trans.pathValueToPixel(filled);
 
+        final Drawable drawable = dataSet.getFillDrawable();
+        if (drawable != null) {
+            drawFilledPath(c, filled, drawable);
+            return;
+        }
+
         drawFilledPath(c, filled, dataSet.getFillColor(), dataSet.getFillAlpha());
     }
 

README.md

@@ -93,6 +93,9 @@ Features
  - **LineChart (cubic lines)**
 ![alt tag](https://raw.github.com/PhilJay/MPChart/master/screenshots/cubiclinechart.png)
 
+ - **LineChart (gradient fill)**
+![alt tag](https://raw.github.com/PhilJay/MPChart/master/screenshots/line_chart_gradient.png)
+
  - **Combined-Chart (bar- and linechart in this case)**
 ![alt tag](https://raw.github.com/PhilJay/MPChart/master/screenshots/combined_chart.png)