Creates zoomable and scrollable graphs based on function or custom draw

AXGraphView

AXGraphView allows you to create scalable and scrolling charts.

Screenshot

Example (GIF)

Contents

Installation

AXGraphView is available in JCenter, so you just need to add it as a dependency (module format).

Berceau

Implementation com.aghajari.graphview:AXGraphView:1.0.2.

Maven

com.aghajari.graphview
AXGraphView
1.0.2
pom

1. Adding a look at the layout :

1. Defining diagram parameters

AXGraphView graphView = findViewById(R.id.graph_view) ;
options AXGraphOptions = new options 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. Adding a graphic 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 just use the Graph Formula Parser :

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

FormulaParser

Currently I am using this evaluation method to analyze the formula in the example AXGraphView, you can also use other libraries to analyze and draw the formula in AXGraphView.

Diagrams

• Changing the axis position :
  You can change the default position of the axis in the options.

options.axis = new PointF(-300,AXGraphOptions.DEFAULT) ;

• Deactivating the drawing of axes 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.axisPaint.setColor (Color.RED);
options.textPaint.setColor (Color.RED);
options.gridLinePaint.setColor (Color.GRAY) ;

Graphic area

You can restrict the area to images.

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 ;
}
}) ;

User-defined points

You can specify a particular point in the table.

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) AXGraphPointType.EMPTY;
super.getPointType(x, y);
}
}) return;

Conversion

You can move (x&y) or scale (x&y) the function in the diagram!

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

Multiform

You can also draw different elements together.

The HeartGraphFormula public class extends AXGraphMultiFormula {

@Override
public float[] multifunction function(float x) {
returns a new float[] {
function1(x),
function2(x)
} ;
}

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

floatfunction2(float x) {
return (float)(Math.acos(1 – Math.abs(x)) – Math.PI);
}
}

Go away:

User drawing

You can draw user-defined shapes with AXGraphCanvas (per x,y diagram):

CircleGraphFormula (click to expand)
public class CircleGraphFormula expands with PaintedGraphFormula {

private float r;
private corner int;
Paint

public CircleGraphFormula(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 by 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(WinkelR) * r ;
final float y = (float) Math.sin(WinkelR) * r ;

float r2 = r/5 ;
paint.setStyle(Paint.Style.STROKE) ;
canvas.drawArc(-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
}
}

Familiar charts

Graph with multiple formulas

Author

GitHub

Related Tags:

graphview, graphview download, android graphview real time example, picture box with zooming and scrolling, graph view summary features, d3 scrollable chart, scrollable horizontal bar chart d3, d3 vertical scroll