Making bars with GraphView

Question

I have been using Graphview for some time and mostly LineGraph and PointGraph, link to GraphView can be found here: Link to GraphView.

But now I need a LineGraph that would fill the whole 0-100 and 100-200 when needed. For example when the point is 70, it would fill the whole 0-100 space, which would look something like this.

Another requirement is that is still needs to be like a LineGraph since it needs to be able to move to the right.

Does anyone have an idea how this could be done using GraphView or if it can be done at all with GraphView.

Or maybe if I set the point to be 50 and line thickness so it would cover exactly +/- 50 then it would also be the same but the problem here is that the line thickness is different on every screen.

Answer 1

You can use a custom shape for the PointGraphSeries to get the effect that you like. In the following code I am creating a custom rectangle. This can give you some ideas on what to do:

int mX = 0;

private void addPoints(double point, PointsGraphSeries<DataPoint> series) {
    point = Math.floor(point / 100) * 100;
    DataPoint dataPoint = new DataPoint(mX++, point);
    series.appendData(dataPoint, false, 100);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    GraphView graph = findViewById(R.id.graph);
    // Set manual X bounds
    graph.getViewport().setXAxisBoundsManual(true);
    graph.getViewport().setMinX(0);
    graph.getViewport().setMaxX(10);


    // Set manual Y bounds
    graph.getViewport().setYAxisBoundsManual(true);
    graph.getViewport().setMinY(0);
    graph.getViewport().setMaxY(1000);

    // Set up the number of division for horizontal and vertical units
    graph.getGridLabelRenderer().setNumHorizontalLabels(11);
    graph.getGridLabelRenderer().setNumVerticalLabels(11);

    PointsGraphSeries<DataPoint> series = new PointsGraphSeries<>();

    series.setCustomShape(new PointsGraphSeries.CustomShape() {
        @Override
        public void draw(Canvas canvas,
                         Paint paint,
                         float x,
                         float y,
                         DataPointInterface dataPoint) {
            canvas.drawRect(x, y - 100, x + 175, y, paint);
        }
    });

    int[] points = {450, 512, 323, 240, 70, 790};
    for (int i = 0; i < points.length; i++) {
        addPoints(points[i], series);
    }

    graph.addSeries(series);
}

This will give you the following picture based on the provided points: