Skip to content

Basic graph view implementation for line/area charts written in Kotlin

License

Notifications You must be signed in to change notification settings

esaounkine/airgraph-android

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AirGraph

Basic custom graph view implementation for line/area charts

Goals

This library facilitates the creation of line and area charts using Canvas.

Having tried quite a few libraries to build graphs, the author came to the conclusion that the comfiest tool to build a graph is the bare bone Android Canvas along with Paint and Path. Hence the mere goals of this library are to:

  • give a primer of Canvas use
  • give an primer of Kotlin use in Android
  • help kickstart an own Canvas graph

Usage

Fork this repo and import it into the project as a dependent module or download the .kt and .xml files and put them into a project.

There are no third party dependencies.

  • Add the GraphView into a fragment
<air.graph.line.GraphView
        android:id="@+id/weather_report_graph"
        style="@style/RemainderVertical.AirGraph"
        app:graph_title="Weather Report"/>
  • The style RemainderVertical.AirGraph is defined in the styles.xml
<style name="RemainderVertical">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">0dp</item>
    <item name="android:layout_weight">1</item>
</style>

<!-- AirGraph default settings -->
<style name="RemainderVertical.AirGraph">
    <item name="android:background">@color/graph_background</item>
    <item name="line_color">@color/graph_line</item>
    <item name="area_color">@color/graph_area</item>
    <item name="grid_color">@color/graph_grid</item>
    <item name="text_color">@color/graph_text</item>
    <item name="mark_color">@color/graph_mark</item>
    <item name="title_text_size">13sp</item>
    <item name="title_x_offset">10dp</item>
    <item name="title_y_offset">10dp</item>
    <item name="label_text_size">10sp</item>
    <item name="line_width">2dp</item>
    <item name="grid_line_width">1dp</item>
    <item name="end_point_marker_radius">5dp</item>
    <item name="end_point_label_text_size">20sp</item>
    <item name="end_point_label_x_offset">10dp</item>
    <item name="end_point_label_y_offset">20dp</item>
    <item name="vertical_offset">50dp</item>
    <item name="horizontal_offset">0dp</item>
</style>

The colors used in the style definition are available in the airgraph_colors.xml file in the project

  • Hook up to the AirGraph view in the Fragment onCreateView method
var weatherReportGraph: GraphView? = null

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    val view = inflater.inflate(..., container, false)

    weatherReportGraph = view.findViewById(R.id.weather_report_graph) as GraphView

    return view
}
  • Fill the values of the graph. For instance, here's the weather report for the past few days.
val temperatureMap = mapOf(
        "Mar 14" to 36f,
        "Mar 15" to 35f,
        "Mar 16" to 35f,
        "Mar 17" to 33f
)

weatherReportGraph?.labels = temperatureMap.map { entry -> entry.key }
weatherReportGraph?.values = temperatureMap.values().toArrayList()
weatherReportGraph?.endPointLabel = "${temperatureMap.entrySet().last().getValue()} °C"
  • Invalidate the View at onResume() to trigger Android to draw the View
weatherReportGraph?.invalidate()

Output

airgraph output

Properties description

Here's a cheatsheet to show all the XML or Java/Kotlin properties.

There are three layout/style irrelevant properties: values, labels and endPointLabel - these must be set up in the code.

airgraph properties cheatsheet

Future tasks

  • Support for unbound number of labels/values
  • Optional Y-axis labels

About

Basic graph view implementation for line/area charts written in Kotlin

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages