CODEWITHSUNDEEP
iosswiftchartsmpandroidchart
bias
bias

Reputation: 1474

MpAndroidChart (or another iOS/Swift chart tool) use gradient based on 3rd variable

In matlab I can iterate through data points and plot each line segment with a colormap based on a 3rd variable see image below

Is there a way to do this in MpAndroidChart (or another tool usable in iOS)?

So far, I'm able to create a LineChartDataSet for each point with a programmatic color, but then it doesn't render the lines (as each data set is independent). This would allow me to create a scatter chart with circles that have a color/heat map but not a line chart.

Example gradient based on 3rd variable

Upvotes: 0

Views: 454

Answers (1)

Cook Chen
Cook Chen

Reputation: 537

You can change the sdk code to draw gradient lines. Take line chart for example, the line is drawn by LineChartRenderer, in function drawLinear, and colour is set by mRenderPaint.setColor(dataSet.getColor(j)); So, change this line to your own gradient colour then the line is gradient. the result likes this and gif diff is append after picture: enter image description here

code change like this:

diff --git a/MPChartLib/src/main/java/com/github/mikephil/charting/renderer/LineChartRenderer.java b/MPChartLib/src/main/java/com/github/mikephil/charting/renderer/LineChartRenderer.java
index 5ee04e2e..cee10568 100644
--- a/MPChartLib/src/main/java/com/github/mikephil/charting/renderer/LineChartRenderer.java
+++ b/MPChartLib/src/main/java/com/github/mikephil/charting/renderer/LineChartRenderer.java
@@ -3,8 +3,10 @@ package com.github.mikephil.charting.renderer;
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
 import android.graphics.Color;
+import android.graphics.LinearGradient;
 import android.graphics.Paint;
 import android.graphics.Path;
+import android.graphics.Shader;
 import android.graphics.drawable.Drawable;
 
 import com.github.mikephil.charting.animation.ChartAnimator;
@@ -370,7 +372,9 @@ public class LineChartRenderer extends LineRadarRenderer {
                     continue;
 
                 // get the color that is set for this line-segment
-                mRenderPaint.setColor(dataSet.getColor(j));
+                //mRenderPaint.setColor(dataSet.getColor(j));
+                Shader shader = new LinearGradient(0, 0, 0, 200 , Color.RED, Color.BLUE, Shader.TileMode.MIRROR);
+                mRenderPaint.setShader(shader);
 
                 canvas.drawLines(mLineBuffer, 0, pointsPerEntryPair * 2, mRenderPaint);
             }
@@ -413,7 +417,9 @@ public class LineChartRenderer extends LineRadarRenderer {
 
                     final int size = Math.max((mXBounds.range + 1) * pointsPerEntryPair, pointsPerEntryPair) * 2;
 
-                    mRenderPaint.setColor(dataSet.getColor());
+                    //mRenderPaint.setColor(dataSet.getColor());
+                    Shader shader = new LinearGradient(0, 0, 200, 200 , Color.RED, Color.BLUE, Shader.TileMode.MIRROR);
+                    mRenderPaint.setShader(shader);
 
                     canvas.drawLines(mLineBuffer, 0, size, mRenderPaint);
                 }

gradient line by Draw line with gradient

Upvotes: 0

Related Questions