CurveGraphView

A highly customizable and performant custom view to render curved line graph.

Packed with features

• Add multiple line graphs within one graph plane.
• Extensible styling options.
• Performant and light weight.

How to integrate the library in your app?

Step 1: Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

Step 2. Add the dependency

dependencies {
    implementation 'com.github.swapnil1104:CurveGraphView:{current_lib_ver}'
}

Step 3. Add CurveGraphView to your layout file

 <com.broooapps.graphview.CurveGraphView
        android:id="@+id/cgv"
        android:layout_width="0dp"
        android:layout_height="250dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

How to customize the view.

curveGraphView = findViewById(R.id.cgv);

curveGraphView.configure(
    new CurveGraphConfig.Builder(this)
            .setAxisColor(R.color.Blue)                                             // Set number of values to be displayed in X ax
            .setVerticalGuideline(4)                                                // Set number of background guidelines to be shown.
            .setHorizontalGuideline(2)
            .setGuidelineColor(R.color.Red)                                         // Set color of the visible guidelines.
            .setNoDataMsg(" No Data ")                                              // Message when no data is provided to the view.
            .setxAxisScaleTextColor(R.color.Black)                                  // Set X axis scale text color.
            .setyAxisScaleTextColor(R.color.Black)                                  // Set Y axis scale text color
            .setAnimationDuration(2000)                                             // Set Animation Duration
            .build()
);

How to provide data to the view.

Create PointMap object

The graph view points the plot with keeping 2 values in mind, span and value span relates to the x-coordinate, and value relates to the y-coordinate. Create the object by providing values as shown below.

PointMap pointMap = new PointMap();
        pointMap.addPoint(0, 100);
        pointMap.addPoint(1, 500);
        pointMap.addPoint(5, 800);
        pointMap.addPoint(4, 600);

Create GraphData object for each PointMap

A GraphData object expects a PointMap, strokeColor of the graph, and an optional gradientColor. Create a GraphData object as shown below.

GraphData gd = GraphData.builder(this)
       .setPointMap(pointMap)                                                   // PointMap datqa
       .setGraphStroke(R.color.Black)                                           // Graph line stroke color
       .setGraphGradient(R.color.BlueViolet, R.color.RoyalBlue)                 // Graph fill gradient color
       .setStraightLine(true)                                                   // true for straight line; false for curved line graph
       .setPointRadius(10)                                                      // set point radius
       .setPointColor(R.color.Red)                                              // set point color
       .animateLine(true)                                                       // Trigger animation for the particular graph line!
       .build();

Provide the array of GraphData to CurveGraphView

Provide the above constructed data to CurveGraphView via the curveGraphView.setData(int span, int maxVal, GraphData... gds) method. dscription of the params:

• span: is the range from 0...<span_value> i.e. this is the range of x-axis.
• maxVal: is the maximum plottable value for Y axis.
• gds... : is the array of GraphData objects.

Sample Code

curveGraphView = findViewById(R.id.cgv);

curveGraphView.configure(
        new CurveGraphConfig.Builder(this)
                .setAxisColor(R.color.Blue)                                             // Set X and Y axis line color stroke.
                .setIntervalDisplayCount(7)                                             // Set number of values to be displayed in X ax
                .setGuidelineCount(2)                                                   // Set number of background guidelines to be shown.
                .setGuidelineColor(R.color.GreenYellow)                                 // Set color of the visible guidelines.
                .setNoDataMsg(" No Data ")                                              // Message when no data is provided to the view.
                .setxAxisScaleTextColor(R.color.Black)                                  // Set X axis scale text color.
                .setyAxisScaleTextColor(R.color.Black)                                  // Set Y axis scale text color
                .setAnimationDuration(2000)                                             // Set animation duration to be used after set data.
                .build()
);


PointMap pointMap = new PointMap();
pointMap.addPoint(0, 100);
pointMap.addPoint(1, 500);
pointMap.addPoint(4, 600);
pointMap.addPoint(5, 800);

GraphData gd = GraphData.builder(this)
        .setPointMap(pointMap)
        .setGraphStroke(R.color.Black)
        .setGraphGradient(R.color.BlueViolet, R.color.RoyalBlue)
        .build();

PointMap p2 = new PointMap();
p2.addPoint(0, 140);
p2.addPoint(1, 700);
p2.addPoint(2, 100);
p2.addPoint(3, 0);
p2.addPoint(4, 190);

GraphData gd2 = GraphData.builder(this)
        .setPointMap(p2)
        .setGraphStroke(R.color.Green)
        .setGraphGradient(R.color.gradientStartColor, R.color.gradientEndColor)
        .build();


//TODO(Swapnil) Optimize the setting logic code.
/** This needs to be done, onMeasure of Layout isn't called if setData is called in onCreate 
  * If anyone can take this up as their first issue, it'd be great!
  */
new Handler().postDelayed(new Runnable() {
    @Override
    public void run() {
        curveGraphView.setData(5, 1000, gd, gd2);
    }
}, 250);