Background For Each Series Graphview

Im using Graphview and work fine, but now i have a problem. I would like to have a background for each series that is added to the graph, and not for all series Is this possible?

Solution 1:

This is currently (5 August 2014) not possible on the original GraphView library.

I needed this functionality, so I forked the library and implemented the functionality myself. You can find the updated code on the feature/series_specific_styles branch of my fork:

• https://github.com/mobiRic/GraphView/tree/feature/series_specific_styles

Hopefully in future these changes will be pulled into the original library.

---

The actual code changes are relatively simple.

• Added required background fields to GraphViewSeries.GraphViewSeriesStyle

• Updated LineGraphView.drawSeries() to look for these fields instead of relying on its own internal values.

I have included full updates below, but the easiest way to view them is on the commit page:

• allow different background for each series

---

Here is the updated GraphViewSeriesStyle class:

staticpublicclassGraphViewSeriesStyle {
    publicintcolor=0xff0077cc;
    publicintthickness=3;
    private ValueDependentColor valueDependentColor;

    privatefinal Paint paintBackground;
    privateboolean drawBackground;
    privateboolean drawDataPoints;
    privatefloatdataPointsRadius=10f;

    publicGraphViewSeriesStyle() {
        super();

        paintBackground = newPaint();
        paintBackground.setColor(Color.rgb(20, 40, 60));
        paintBackground.setStrokeWidth(4);
        paintBackground.setAlpha(128);
    }

    publicGraphViewSeriesStyle(int color, int thickness) {
        super();
        this.color = color;
        this.thickness = thickness;

        paintBackground = newPaint();
        paintBackground.setColor(Color.rgb(20, 40, 60));
        paintBackground.setStrokeWidth(4);
        paintBackground.setAlpha(128);
    }

    public ValueDependentColor getValueDependentColor() {
        return valueDependentColor;
    }

    /**
     * the color depends on the value of the data.
     * only possible in BarGraphView
     * @param valueDependentColor
     */publicvoidsetValueDependentColor(ValueDependentColor valueDependentColor) {
        this.valueDependentColor = valueDependentColor;
    }

    publicbooleangetDrawBackground() {
        return drawBackground;
    }

    publicvoidsetDrawBackground(boolean drawBackground) {
        this.drawBackground = drawBackground;
    }

    public Paint getPaintBackground() {
        return paintBackground;
    }

    publicintgetBackgroundColor() {
        return paintBackground.getColor();
    }

    /**
     * sets the background colour for the series. This is not the background
     * colour of the whole graph.
     */publicvoidsetBackgroundColor(int color) {
        paintBackground.setColor(color);
    }

    publicfloatgetDataPointsRadius() {
        return dataPointsRadius;
    }

    publicbooleangetDrawDataPoints() {
        return drawDataPoints;
    }

    /**
     * sets the radius of the circles at the data points.
     * @see #setDrawDataPoints(boolean)
     * @param dataPointsRadius
     */publicvoidsetDataPointsRadius(float dataPointsRadius) {
        this.dataPointsRadius = dataPointsRadius;
    }

    /**
     * You can set the flag to let the GraphView draw circles at the data points
     * @see #setDataPointsRadius(float)
     * @param drawDataPoints
     */publicvoidsetDrawDataPoints(boolean drawDataPoints) {
        this.drawDataPoints = drawDataPoints;
    }
}

---

Here is the updated LineGraphView.drawSeries() method:

publicvoiddrawSeries(Canvas canvas, GraphViewDataInterface[] values, float graphwidth, float graphheight, float border, double minX, double minY, double diffX, double diffY, float horstart, GraphViewSeriesStyle style) {
    // draw backgrounddoublelastEndY=0;
    doublelastEndX=0;

    // draw data
    paint.setStrokeWidth(style.thickness);
    paint.setColor(style.color);


    PathbgPath=null;
    if ((drawBackground) || (style.getDrawBackground())) {
        bgPath = newPath();
    }

    lastEndY = 0;
    lastEndX = 0;
    floatfirstX=0;
    for (inti=0; i < values.length; i++) {
        doublevalY= values[i].getY() - minY;
        doubleratY= valY / diffY;
        doubley= graphheight * ratY;

        doublevalX= values[i].getX() - minX;
        doubleratX= valX / diffX;
        doublex= graphwidth * ratX;

        if (i > 0) {
            floatstartX= (float) lastEndX + (horstart + 1);
            floatstartY= (float) (border - lastEndY) + graphheight;
            floatendX= (float) x + (horstart + 1);
            floatendY= (float) (border - y) + graphheight;

            // draw data pointif (drawDataPoints) {
                //fix: last value was not drawn. Draw here now the end values
                canvas.drawCircle(endX, endY, dataPointsRadius, paint);
            } elseif (style.getDrawDataPoints()) {
                canvas.drawCircle(endX, endY, style.getDataPointsRadius(), paint);
            }

            canvas.drawLine(startX, startY, endX, endY, paint);
            if (bgPath != null) {
                if (i==1) {
                    firstX = startX;
                    bgPath.moveTo(startX, startY);
                }
                bgPath.lineTo(endX, endY);
            }
        } elseif ((drawDataPoints) || (style.getDrawDataPoints())) {
            //fix: last value not drawn as datapoint. Draw first point here, and then on every step the end values (above)floatfirst_X= (float) x + (horstart + 1);
            floatfirst_Y= (float) (border - y) + graphheight;
            if (drawDataPoints) {
                canvas.drawCircle(first_X, first_Y, dataPointsRadius, paint);
            } elseif (style.getDrawDataPoints()) {
                canvas.drawCircle(first_X, first_Y, style.getDataPointsRadius(), paint);
            }
        }
        lastEndY = y;
        lastEndX = x;
    }

    if (bgPath != null) {
        // end / close path
        bgPath.lineTo((float) lastEndX, graphheight + border);
        bgPath.lineTo(firstX, graphheight + border);
        bgPath.close();
        if (style.getDrawBackground()) {
            canvas.drawPath(bgPath, style.getPaintBackground());
        } else {
            canvas.drawPath(bgPath, paintBackground);
        }
    }
}

---

For interest, that branch also allows data points to be configured for each series - code changes visible here:

• allow datapoint styling for each series