Skip to content

Latest commit

 

History

History
358 lines (287 loc) · 11 KB

README.md

File metadata and controls

358 lines (287 loc) · 11 KB
Raw

AXGraphView

AXGraphView

Platform API Maven Central Join the chat at https://gitter.im/Aghajari/community

AXGraphView creates zoomable and scrollable graphs.

Screenshot

Preview (GIF)

Table of Contents

Installation

AXGraphView is available in the mavenCentral(), so you just need to add it as a dependency (Module gradle)

Gradle

implementation 'io.github.aghajari:AXGraphView:1.1.0'

Maven

<dependency>
  <groupId>io.github.aghajari</groupId>
  <artifactId>AXGraphView</artifactId>
  <version>1.1.0</version>
  <type>pom</type>
</dependency>

Quick Start

  1. Add view to your layout :
<com.aghajari.graphview.AXGraphView
    android:id="@+id/graph_view"
    android:background="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  1. Set Graph Options
AXGraphView graphView = findViewById(R.id.graph_view);
AXGraphOptions options = new AXGraphOptions(this);

options.scrollEnabled = true;
options.xDividerIntervalInPx = 100;
options.xDividerInterval = 0.5f;
options.yDividerIntervalInPx = 100;
options.yDividerInterval = 0.5f;
options.maxZoom = 6f;
options.minZoom = 0.5f
options.drawAxis = true;
...

graphView.setGraphOptions(options);
  1. Add Graph Formula
graphView.addFormula(new AXGraphFormula() { // x^2
    @Override
    public float function(float x) {
        return (float) Math.pow(x,2);
    }
});

graphView.addFormula(new AXGraphFormula() { 
    @Override
    public float function(float x) { // x^3
        return (float) Math.pow(x,3);
    }
});

Or simply use Graph Formula Parser :

graphView.addFormula(new GraphFormulaParser(this,"(x)^2"));
graphView.addFormula(new GraphFormulaParser(this,"(x)^3"));

FormulaParser

Currently i'm using this Eval Method for parsing a formula in sample of AXGraphView, you can also use other libraries to parse the formula and draw it in AXGraphView.

Graph Axis

  • Change Axis Position : You can change the default axis position in options.

Image

options.axis = new PointF(-300,AXGraphOptions.DEFAULT);
  • Disable drawing Axis and grid lines :
options.drawAxisX = false;
options.drawAxisY = false;
options.drawGridXLines = false;
options.drawGridYLines = false;
options.drawAxisXDivider = false;
options.drawAxisYDivider = false;
options.drawXText = false;
options.drawYText = false;
  • Change axis color :
options.axisPaint.setColor(Color.RED);
options.textPaint.setColor(Color.RED);
options.gridLinePaint.setColor(Color.GRAY);

Domain of Graph

You can limit domain of the Graph.

Image

graphView.addFormula(new AXGraphFormula() { // x^2
    @Override
    public float function(float x) {
        return (float) Math.pow(x,2);
    }
    
    @Override
    public boolean isInDomain(float x) {
        return Math.abs(x) < 1;
    }
});

Custom Points

You can customize an Specific Point in Graph.

graphView.addFormula(new AXGraphFormula() { // Sin(x)

    @Override
    protected void init() {
        super.init();
        addCustomFunctionPoint(1);
        addCustomFunctionPoint(-1);
        addCustomPoint(0,3);
    }
    
    @Override
    public float function(float x) {
        return (float) Math.sin(x);
    }
    
    @Override
    public AXGraphPointType getPointType(float x, float y) {
        if (x==0) return AXGraphPointType.EMPTY;
        return super.getPointType(x, y);
    }
});

Transform

You can move(x&y) or change scale(x&y) of the function on graph!

formula.applyTransformMove(3f,2.5f);
formula.applyTransformScale(1.5f,1.5f);

MultiFormula

You can also draw multi functions together.

public class HeartGraphFormula extends AXGraphMultiFormula {

@Override
    public float[] multiFunction(float x) {
        return new float[] {
                function1(x),
                function2(x)
        };
    }

    public float function1(float x) {
        return (float) Math.sqrt(1 - Math.pow(Math.abs(x) - 1,2));
    }

    public float function2(float x) {
        return (float) (Math.acos(1 - Math.abs(x)) - Math.PI);
    }
}

Output :

Custom Draw

You can draw custom shapes using AXGraphCanvas (by graph x,y) :

Image

CircleGraphFormula (click to expand) 

public class CircleGraphFormula extends PaintedGraphFormula {

    private float r;
    private int angle;
    Paint paint;

    public CircleGraphFormula(Context context,float r,int angle){
        super(context);
        this.r = r;
        this.angle = angle;
        paint = new Paint();

        getGraphPaint().setStyle(Paint.Style.STROKE);
        getPointPaint().setColor(getGraphPaint().getColor());
        setPointCircleRadius(getPointCircleRadius()*1.2f);

        addCustomPoint(0,r);
        addCustomPoint(0,-r);
        addCustomPoint(r,0);
        addCustomPoint(-r,0);
    }

    @Override
    protected boolean onDraw(AXGraphCanvas canvas) {
        canvas.setRadiusFromAxis(true);
        canvas.drawCircle(0,0,r, getGraphPaint());

        if (angle!=0) {
            float angleR = (float) Math.toRadians(angle);
            String text = angle+"°";

            paint.setColor(Color.parseColor("#03DAC5"));
            paint.setStrokeWidth(getGraphPaint().getStrokeWidth());
            final float x = (float) Math.cos(angleR) * r;
            final float y = (float) Math.sin(angleR) * r;

            float r2 = r/5;
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawArc(-r2,-r2,r2,r2,-angle,angle,true,paint);

            paint.setStyle(Paint.Style.FILL);
            paint.setTextSize(canvas.findGraphX(r)/10);
            canvas.drawText(text,r2,r2/1.5f, Gravity.CENTER_VERTICAL|Gravity.LEFT,paint);

            canvas.drawLine(0,0,x,0,paint);
            paint.setPathEffect(new DashPathEffect(new float[] {20f/canvas.getGraphScale(),20f/canvas.getGraphScale()}, 0f));
            canvas.drawLine(x,y,x,0,paint);
            canvas.drawLine(0,y,x,y,paint);
            paint.setPathEffect(null);

            paint.setColor(canvas.getGraphView().getContext().getResources().getColor(R.color.colorPrimary));
            canvas.drawLine(0,0,x,y,paint);

            int savedColor = getPointPaint().getColor();
            getPointPaint().setColor(paint.getColor());
            drawPoint(canvas,x,y, AXGraphPointType.CUSTOM);
            getPointPaint().setColor(savedColor);
        }
        return true; //skip drawing function
    }

    @Override
    public float function(float x) {
        return Float.POSITIVE_INFINITY; //undefined
    }
}

Famous Graphs

Name Formula AXGraphView
Quadratic x^2
Cubic x^3
Quadratic And Cubic x^2 , x^3
Homographic 1/x
Square √x
Cubic Root 3√x
Cubic Root 3√(x^2)
Bracket [x]
Absolute Value |x|
|x+1| - |x-1| |x+1| - |x-1|
Exponential 2^x
Logarithm log(x)
Sine sin(x)
Cosine cos(x)
Sine And Cosine sin(x) , cos(x)
Tangent tan(x)
Cotangent cot(x)
Tangent And Cotangent tan(x) , cot(x)

Multi Formula Graphs

Name AXGraphView
Heart
Captain America
Superman
Batman
The Flash
Wonder Woman

Author

  • Amir Hossein Aghajari

License

Copyright 2021 Amir Hossein Aghajari
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.



LCoders | AmirHosseinAghajari
Amir Hossein Aghajari • Email • GitHub