AndroidPlot customize joints

Question

I currently tried to make my plot look like this:

But I do not know how to customize the point to have black stroke around orange fill, so my points are now "glued" to the lines.

Or, at least how to make it look like this (outer circle of the same color as line).

Any help?

Answer 1

I believe the bottom image uses a custom LineAndPointRenderer, which is also what you would need to use to reproduce the topmost image.

Here's a quick and dirty example of how you could do this. First create a custom Formatter that will hold the new formatting values needed:

    /**
     * A LineAndPointFormatter with the addition of paint to be used to "stroke" vertices.
     */
    class MyLineAndPointFormatter extends LineAndPointFormatter{
        private Paint strokePaint;

        /**
         * Some quick and dirty hard-coded params
         */
        public MyLineAndPointFormatter() {
            super(Color.RED, Color.RED, null, null);
            strokePaint = new Paint();
            strokePaint.setColor(Color.BLACK);
            strokePaint.setStrokeWidth(PixelUtils.dpToPix(2));
            strokePaint.setStyle(Paint.Style.STROKE);
            strokePaint.setAntiAlias(true);
        }

        public Paint getStrokePaint() {
            return strokePaint;
        }

        @Override
        public Class<? extends SeriesRenderer> getRendererClass() {
            return MyLineAndPointRenderer.class;
        }

        @Override
        public SeriesRenderer getRendererInstance(XYPlot plot) {
            return new MyLineAndPointRenderer(plot);
        }
    }

Next, the custom Renderer:

    /**
     * A LineAndPointRenderer that can stroke vertices.
     */
    class MyLineAndPointRenderer extends LineAndPointRenderer<MyLineAndPointFormatter> {

        public MyLineAndPointRenderer(XYPlot plot) {
            super(plot);
        }

        /**
         * Overridden draw method to get the "vertex stroke" effect.  99% of this is copy/pasted from
         * the super class' implementation. 
         * @param canvas
         * @param plotArea
         * @param series
         * @param formatter
         */
        @Override
        protected void drawSeries(Canvas canvas, RectF plotArea, XYSeries series, LineAndPointFormatter formatter) {
            PointF thisPoint;
            PointF lastPoint = null;
            PointF firstPoint = null;
            Paint  linePaint = formatter.getLinePaint();

            Path path = null;
            ArrayList<Pair<PointF, Integer>> points = new ArrayList<Pair<PointF, Integer>>(series.size());
            for (int i = 0; i < series.size(); i++) {
                Number y = series.getY(i);
                Number x = series.getX(i);

                if (y != null && x != null) {
                    thisPoint = ValPixConverter.valToPix(
                            x,
                            y,
                            plotArea,
                            getPlot().getCalculatedMinX(),
                            getPlot().getCalculatedMaxX(),
                            getPlot().getCalculatedMinY(),
                            getPlot().getCalculatedMaxY());
                    points.add(new Pair<PointF, Integer>(thisPoint, i));
                } else {
                    thisPoint = null;
                }

                if(linePaint != null && thisPoint != null) {

                    // record the first point of the new Path
                    if(firstPoint == null) {
                        path = new Path();
                        firstPoint = thisPoint;
                        // create our first point at the bottom/x position so filling
                        // will look good
                        path.moveTo(firstPoint.x, firstPoint.y);
                    }

                    if(lastPoint != null) {
                        appendToPath(path, thisPoint, lastPoint);
                    }

                    lastPoint = thisPoint;
                } else {
                    if(lastPoint != null) {
                        renderPath(canvas, plotArea, path, firstPoint, lastPoint, formatter);
                    }
                    firstPoint = null;
                    lastPoint = null;
                }
            }
            if(linePaint != null && firstPoint != null) {
                renderPath(canvas, plotArea, path, firstPoint, lastPoint, formatter);
            }

            Paint vertexPaint = formatter.getVertexPaint();
            Paint strokePaint = ((MyLineAndPointFormatter)formatter).getStrokePaint();
            PointLabelFormatter plf = formatter.getPointLabelFormatter();
            if (vertexPaint != null || plf != null) {
                for (Pair<PointF, Integer> p : points) {
                    PointLabeler pointLabeler = formatter.getPointLabeler();

                    // if vertexPaint is available, draw vertex:
                    if(vertexPaint != null) {
                        canvas.drawPoint(p.first.x, p.first.y, vertexPaint);
                    }

                    // if stroke is available, draw stroke:
                    if(strokePaint != null) {
                        // you'll probably want to make the radius a configurable parameter
                        // instead of hard-coded like it is here.
                        canvas.drawCircle(p.first.x, p.first.y, 4, strokePaint);
                    }

                    // if textPaint and pointLabeler are available, draw point's text label:
                    if(plf != null && pointLabeler != null) {
                        canvas.drawText(pointLabeler.getLabel(series, p.second), p.first.x + plf.hOffset, p.first.y + plf.vOffset, plf.getTextPaint());
                    }
                }
            }
        }
    }

And finally, to use these new pieces in your Activity:

MyLineAndPointFormatter format = new MyLineAndPointFormatter();
plot.addSeries(series, format);

Here's what it looks like when used with the SimpleXYPlot example:

It could be prettier by thickening up the lines, picking a better background color etc, but you get the idea.