Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swapnil1104/curvegraphview
A highly customizable and performant custom view to render curved line graph.
https://github.com/swapnil1104/curvegraphview
android-development android-library animation curvegraph custom-view graph graphview linegraph
Last synced: about 3 hours ago
JSON representation
A highly customizable and performant custom view to render curved line graph.
- Host: GitHub
- URL: https://github.com/swapnil1104/curvegraphview
- Owner: swapnil1104
- License: apache-2.0
- Created: 2020-01-04T09:21:42.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-23T18:53:27.000Z (over 4 years ago)
- Last Synced: 2024-11-16T04:26:12.209Z (1 day ago)
- Topics: android-development, android-library, animation, curvegraph, custom-view, graph, graphview, linegraph
- Language: Java
- Homepage:
- Size: 683 KB
- Stars: 357
- Watchers: 7
- Forks: 57
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# CurveGraphView
[](https://jitpack.io/#swapnil1104/CurveGraphView)
[](https://jitpack.io/#swapnil1104/CurveGraphView)
[](https://android-arsenal.com/details/1/8037)
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
```
```
## 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... 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);
```