gradient color for Line Chart inside AchartEngine

Question

I am Using AchartEngine to Draw a Line Chart.

What I have Done: I want to Make The LineGraph with Using Achart Engine. But with Different Color Gradient enabled like we do in Barchart.

I have Make the Line chart with No Worries.

I know Gradient is only supported by the range bar chart in Achart Engine. But though there should be some Workaround for this if any one have.

I have Do My Code is As Below :

public GraphicalView graph(Context context) {
        String[] titles = new String[] { "Nike Line Graph" };
        List<double[]> values = new ArrayList<double[]>();

        values.add(new double[] { 14230, 12300, 14240, 15244, 14900, 12200,
                11030, 12000, 12500, 15500, 14600, 15000 });


        int length = values.get(0).length;

        Log.d("****length*********", "" + length);

        int[] colors = new int[] { Color.GREEN };
        PointStyle[] styles = new PointStyle[] { PointStyle.POINT };

        XYMultipleSeriesRenderer renderer = buildRenderer(colors, styles);
        setChartSettings(renderer, "Monthly sales in the last 2 years",
                "Month", "Units sold", 0.75, 12.25, 10000, 19000,
                Color.argb(0x00, 0x01, 0x01, 0x01),
                Color.argb(0x00, 0x01, 0x01, 0x01));

        renderer.setChartTitleTextSize(20);
        renderer.setTextTypeface("sans_serif", Typeface.BOLD);
        renderer.setLabelsTextSize(0f);
        renderer.setLabelsColor(Color.argb(0x00, 0x01, 0x01, 0x01));
        renderer.setAxisTitleTextSize(15);
        renderer.setApplyBackgroundColor(true);
        renderer.setBackgroundColor(Color.argb(0x00, 0x01, 0x01, 0x01));
        renderer.setLegendTextSize(15);
        renderer.setScale(10);
        renderer.setShowAxes(false);
        renderer.setXLabelsColor(Color.argb(0x00, 0x01, 0x01, 0x01));
        renderer.setYLabelsColor(0, Color.argb(0x00, 0x01, 0x01, 0x01));
        renderer.setMarginsColor(Color.argb(0x00, 0x01, 0x01, 0x01));

        renderer.setPanEnabled(false, false);
        renderer.setZoomEnabled(false, false);
        length = renderer.getSeriesRendererCount();
        SimpleSeriesRenderer r1 = new SimpleSeriesRenderer();

        r1.setGradientEnabled(true);
        r1.setGradientStart(-50, Color.BLACK);
        r1.setGradientStop(50, Color.GREEN);



        Log.d("****length*********", "" + length);

        for (int i = 0; i < length; i++) {
            XYSeriesRenderer r = (XYSeriesRenderer) renderer
                    .getSeriesRendererAt(i);
            r.setLineWidth(5f);
        }

        GraphicalView v = ChartFactory.getCubeLineChartView(context,
                buildBarDataset(titles, values), renderer, 0.5f);
        return v;

    }

With Having the Method :

protected XYMultipleSeriesRenderer buildRenderer(int[] colors,
            PointStyle[] styles) {
        XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
        setRenderer(renderer, colors, styles);
        return renderer;
    }

    protected void setRenderer(XYMultipleSeriesRenderer renderer, int[] colors,
            PointStyle[] styles) {
        renderer.setAxisTitleTextSize(16);
        renderer.setChartTitleTextSize(20);
        renderer.setLabelsTextSize(15);
        renderer.setLegendTextSize(15);
        renderer.setPointSize(5f);

        renderer.setMargins(new int[] { 20, 30, 15, 20 });
        int length = colors.length;
        for (int i = 0; i < length; i++) {

             XYSeriesRenderer r = new XYSeriesRenderer();
              r.setColor(colors[i]);
             r.setPointStyle(styles[i]);    
             renderer.addSeriesRenderer(r);     

        }

What I am Getting this is ScreenShot as Below :

enter image description here

What i Want :

enter image description here

Question : I want to Add Gradient colors to this Line chart. from one color to another.

Any Help would be Highly Appreciated.

Thank in Advance.

hi, did you find your answer? I am looking for same. – Mr. Sajid Shaikh Feb 04 '14 at 06:56 — Mr. Sajid Shaikh, Feb 04 '14 at 06:56
allready solved ?? This is what i need too. – Kevin Feb 22 '14 at 05:00 — Kevin, Feb 22 '14 at 05:00

score 0 · Answer 1 · answered Mar 13 '13 at 15:35

0

Use several series, each series having its own color.

answered Mar 13 '13 at 15:35

Dan D.

32,246
5
63
79

score 0 · Answer 2 · answered Feb 04 '14 at 07:12

If you are still looking for answer & any one finds this question same, so answer is yes we can set gradient to line chart. Solution was to subclass LineChart and override the drawSeries method same as following

 @Override
    public void drawSeries(Canvas canvas, Paint paint, float[] points,
                    SimpleSeriesRenderer seriesRenderer, float yAxisValue, int seriesIndex, int startIndex) {
            int length = points.length;
            XYSeriesRenderer renderer = (XYSeriesRenderer) seriesRenderer;
            float lineWidth = paint.getStrokeWidth();
            paint.setStrokeWidth(renderer.getLineWidth());
            if (renderer.isFillBelowLine() || renderer.isGradientEnabled()) {
                    int pLength = points.length;
                    float[] fillPoints = new float[pLength + 4];
                    System.arraycopy(points, 0, fillPoints, 0, length);
                    fillPoints[0] = points[0] + 1;
                    fillPoints[length] = fillPoints[length - 2];
                    fillPoints[length + 1] = yAxisValue;
                    fillPoints[length + 2] = fillPoints[0];
                    fillPoints[length + 3] = fillPoints[length + 1];
                    float max = 0;
                    for (int i = 0; i < length + 4; i += 2) {
                            if (fillPoints[i + 1] < 0) {
                                    fillPoints[i + 1] = 0;
                            }
                            else if (fillPoints[i + 1] > max) {
                                    max = fillPoints[i + 1];
                            }
                    }
                    paint.setStyle(Style.FILL);
                    if (renderer.isGradientEnabled()) {
                            Shader s = paint.getShader();
                            // Create gradient from values set in renderer
                            paint.setShader(new LinearGradient(0, (float)(renderer.getGradientStartValue() * max), 0, (float)(renderer.getGradientStopValue() * max),
                                            renderer.getGradientStartColor(), renderer.getGradientStopColor(), Shader.TileMode.MIRROR));
                            drawPath(canvas, fillPoints, paint, true);
                            // Restore paint's shader to previous value (null)
                            paint.setShader(s);
                    }
                    else {
                            paint.setColor(renderer.getFillBelowLineColor());
                            drawPath(canvas, fillPoints, paint, true);
                    }
            }
            paint.setColor(seriesRenderer.getColor());
            paint.setStyle(Style.STROKE);
            drawPath(canvas, points, paint, false);
            paint.setStrokeWidth(lineWidth);
    }

If you want to look using raw paste data use following code :

@Override
public void drawSeries(Canvas canvas, Paint paint, float[] points, 
        SimpleSeriesRenderer seriesRenderer, float yAxisValue, int seriesIndex, int startIndex) {
    int length = points.length;
    XYSeriesRenderer renderer = (XYSeriesRenderer) seriesRenderer;
    float lineWidth = paint.getStrokeWidth();
    paint.setStrokeWidth(renderer.getLineWidth());
    if (renderer.isFillBelowLine() || renderer.isGradientEnabled()) {
        int pLength = points.length;
        float[] fillPoints = new float[pLength + 4];
        System.arraycopy(points, 0, fillPoints, 0, length);
        fillPoints[0] = points[0] + 1;
        fillPoints[length] = fillPoints[length - 2];
        fillPoints[length + 1] = yAxisValue;
        fillPoints[length + 2] = fillPoints[0];
        fillPoints[length + 3] = fillPoints[length + 1];
        float max = 0;
        for (int i = 0; i < length + 4; i += 2) {
            if (fillPoints[i + 1] < 0) {
                fillPoints[i + 1] = 0;
            }
            else if (fillPoints[i + 1] > max) {
                max = fillPoints[i + 1];
            }
        }
        paint.setStyle(Style.FILL);
        if (renderer.isGradientEnabled()) {
            Shader s = paint.getShader();
            // Create gradient from values set in renderer
            paint.setShader(new LinearGradient(0, (float)(renderer.getGradientStartValue() * max), 0, (float)(renderer.getGradientStopValue() * max), 
                    renderer.getGradientStartColor(), renderer.getGradientStopColor(), Shader.TileMode.MIRROR));
            drawPath(canvas, fillPoints, paint, true);
            // Restore paint's shader to previous value (null)
            paint.setShader(s);
        }
        else {
            paint.setColor(renderer.getFillBelowLineColor());
            drawPath(canvas, fillPoints, paint, true);
        }
    }
    paint.setColor(seriesRenderer.getColor());
    paint.setStyle(Style.STROKE);
    drawPath(canvas, points, paint, false);
    paint.setStrokeWidth(lineWidth);
}

If its help you let me know. OR you allready solved it then let me know how you did this.

gradient color for Line Chart inside AchartEngine

2 Answers2