CurveGraphView

Additional

Language
Java
Version
2.1 (May 24, 2020)
Created
Jan 4, 2020
Updated
May 23, 2020 (Retired)
Owner
Swapnil Tiwari (swapnil1104)
Contributors
Swapnil Tiwari (swapnil1104)
Zihad Rizky Edwin Fikri (zihadrizkyef)
2
Activity
Badge
Generate
Download
Source code

Advertisement

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