Giter Club home page Giter Club logo

curvegraphview's Introduction

CurveGraphView

Android Arsenal

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

Animation demo Animation with straight & curved Animation with opaque color Animated and non animated graph Horizontal guidelines

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

curvegraphview's People

Contributors

swapnil1104 avatar zihadrizkyef avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

curvegraphview's Issues

Setting Legend

How can you set a legend with colour and description programmatically?

Graph labels

I want vertical labels to the left side and also i want x and y both axis
can you please help me to achieve this?

Not really smooth

Hi swapnil, i try to implement this curve :

image

But i got this :

image

I think this is because you choose wrong control point for method cubicTo
Can you please fix it?

Min SDK 19

Hi Swapnil, your library is awesome

But i have a question, why i cannot use it in SDK 19?

not found .setHorizontalGuideline in version 2.0.4

Describe the bug
version library: 2.0.4
.setHorizontalGuideline(2) //unresolve referece: setHorizontalGuideline

    curveGraphView.configure(
        CurveGraphConfig.Builder(this)
            .setAxisColor(R.color.md_blue_400) // Set number of values to be displayed in X ax
            .setGuidelineColor(R.color.md_grey_500)
            .setGuidelineCount(3)
            .setHorizontalGuideline(2) //unresolve  referece: setHorizontalGuideline

How to set the vertical origin?

Is it possible to set the vertical origin? I haven't found how to do it.
For example, I want the vertical axis to go from 20 to 25 only.
Thank you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.