# CurveGraphView **Repository Path**: baijuncheng-open-source/curve-graph-view ## Basic Information - **Project Name**: CurveGraphView - **Description**: CurveGraphView组件为图形视图,是一种高度可定制和高性能的自定义视图,用于渲染曲线图 - **Primary Language**: Java - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-06-17 - **Last Updated**: 2021-12-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # CurveGraphView A highly customizable and performant custom view to render curved line graph. ## Preview ![image](images/image.gif) ## 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? #### Methods a Step 1: Compile the project and copy the HAR package generated in the Build directory of the GraphView folder into the project lib folder Step 2. Add the following code inside Gradle of Entry (just Demo) ``` implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) ``` Step 3. Add CurveGraphView to your layout file ``` ``` Step 4: remote maven repo integration 1.add mavenCentral dependency at repositories in your project build.gradle ``` allprojects { repositories { mavenCentral() } } ``` 2.add library dependency at your module build.gradle ``` implementation 'com.gitee.baijuncheng-open-source:curve-graph-view:1.0.0' ``` ## How to customize the view. ``` curveGraphView = (CurveGraphView) findComponentById(com.example.curvegraphview.ResourceTable.Id_cgv); try { curveGraphView.configure( new CurveGraphConfig.Builder(this) .setAxisColor(com.example.graphview.ResourceTable.Color_Blue) .setVerticalGuideline(4) .setHorizontalGuideline(2) .setGuidelineColor(com.example.graphview.ResourceTable.Color_Red) .setNoDataMsg(" No Data ") .setxAxisScaleTextColor(com.example.graphview.ResourceTable.Color_Black) .setyAxisScaleTextColor(com.example.graphview.ResourceTable.Color_Black) .setAnimationDuration(2000) .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. ``` final GraphData gd = GraphData.builder(this) .setPointMap(pointMap) .setGraphStroke(com.example.graphview.ResourceTable.Color_Black) .setGraphGradient(com.example.curvegraphview.ResourceTable.Color_gradientStartColor2, com.example.curvegraphview.ResourceTable.Color_gradientEndColor2) .animateLine(true) .setPointColor(com.example.graphview.ResourceTable.Color_Red) .setPointRadius(5) .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 = (CurveGraphView) findComponentById(com.example.curvegraphview.ResourceTable.Id_cgv); try { curveGraphView.configure( new CurveGraphConfig.Builder(this) .setAxisColor(com.example.graphview.ResourceTable.Color_Blue) .setVerticalGuideline(4) .setHorizontalGuideline(2) .setGuidelineColor(com.example.graphview.ResourceTable.Color_Red) .setNoDataMsg(" No Data ") .setxAxisScaleTextColor(com.example.graphview.ResourceTable.Color_Black) .setyAxisScaleTextColor(com.example.graphview.ResourceTable.Color_Black) .setAnimationDuration(2000) .build() ); } catch (NotExistException e) { e.printStackTrace(); } catch (WrongTypeException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } PointMap pointMap = new PointMap(); pointMap.addPoint(1, 200); pointMap.addPoint(3, 400); pointMap.addPoint(4, 100); pointMap.addPoint(5, 600); final GraphData gd = GraphData.builder(this) .setPointMap(pointMap) .setGraphStroke(com.example.graphview.ResourceTable.Color_Black) .setGraphGradient(com.example.curvegraphview.ResourceTable.Color_gradientStartColor2, com.example.curvegraphview.ResourceTable.Color_gradientEndColor2) .animateLine(true) .setPointColor(com.example.graphview.ResourceTable.Color_Red) .setPointRadius(5) .build(); PointMap p2 = new PointMap(); p2.addPoint(0, 440); p2.addPoint(1, 0); p2.addPoint(2, 100); p2.addPoint(3, 0); p2.addPoint(4, 400); p2.addPoint(5, 200); final GraphData gd2 = GraphData.builder(this) .setPointMap(p2) .setGraphStroke(com.example.graphview.ResourceTable.Color_Green) .setGraphGradient(com.example.curvegraphview.ResourceTable.Color_gradientStartColor, com.example.curvegraphview.ResourceTable.Color_gradientEndColor) .animateLine(true) .build(); EventRunner runner = EventRunner.create(true); if (runner == null) { return; } new EventHandler(runner).postTask(new Runnable() { @Override public void run() { curveGraphView.setData(5, 600, gd, gd2); } }, 250); ``` # License Copyright 2019 Swapnil Tiwari Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language admin permissions and limitations under the License.