Android – Point Graph Series with Kotlin
Graphs are used to represent vast amounts of data in an easily readable form. There are several graphs used to display data such as simple bar graphs, group bar graphs, point graph series, and others. In this article, we will take a look at the implementation of Point Graph Series in Android applications using Kotlin.
Note: If you are looking to implement Point Graph Series in Android using Java. Check out the following article: Point Graph Series in Android using Java
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Add dependency to build.gradle(Module:app)
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
implementation 'com.jjoe64:graphview:4.2.2'
After adding the above dependency now sync your project and we will now move towards the implementation of our GraphView.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Comments are added in the code to get to know in detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?> <!--on below line we are creating a swipe to refresh layout--> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent" android:fillViewport = "true" android:orientation = "vertical" tools:context = ".MainActivity" > <!--text view for displaying heading--> < TextView android:id = "@+id/idTVHead" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_margin = "4dp" android:gravity = "center" android:padding = "4dp" android:text = "@string/app_name" android:textAlignment = "center" android:textColor = "@color/purple_200" android:textSize = "20sp" android:textStyle = "bold" /> <!--graph view to display our graph--> < com.jjoe64.graphview.GraphView android:id = "@+id/idGraphView" android:layout_width = "match_parent" android:layout_height = "match_parent" android:layout_below = "@id/idTVHead" /> </ RelativeLayout > |
Step 4: Working with the MainActivity.kt file
Navigate to app > java > your app’s package name > MainActivity.kt file and add the below code to it. Comments are added in the code to get to know in detail.
Kotlin
package com.gtappdevelopers.kotlingfgproject import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import com.jjoe64.graphview.GraphView import com.jjoe64.graphview.series.DataPoint import com.jjoe64.graphview.series.PointsGraphSeries class MainActivity : AppCompatActivity() { // on below line we are creating // variables for our graph view lateinit var graphView: GraphView override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // on below line we are initializing // our variable with their ids. graphView = findViewById(R.id.idGraphView) // on below line we are creating a new data // point series for our point graph series. // we are calling get data point method to add // data point to our point graph series val series: PointsGraphSeries<DataPoint> = PointsGraphSeries<DataPoint>(getDataPoint()) // on below line we are adding series to graph view graphView.addSeries(series) // on below line we are setting scrollable // for point graph view graphView.viewport.isScrollable = true // on below line we are setting scalable. graphView.viewport.isScalable = true // on below line we are setting scalable y graphView.viewport.setScalableY( true ) // on below line we are setting scrollable y graphView.viewport.setScrollableY( true ) // on below line we are setting shape for series. series.shape = PointsGraphSeries.Shape.POINT // on below line we are setting size for series. series.size = 12f // on below line we are setting color for series. series.color = R.color.purple_200 } private fun getDataPoint(): Array<DataPoint> { // creating a variable for data point. // at last we are returning // the data point class. return arrayOf( // on below line we are adding a new // data point to our Data Point class. DataPoint( 0.0 , 1.0 ), DataPoint( 1.0 , 2.0 ), DataPoint( 2.0 , 3.0 ), DataPoint( 3.0 , 5.0 ), DataPoint( 4.0 , 1.0 ), DataPoint( 4.0 , 3.0 ), DataPoint( 5.0 , 3.0 ), DataPoint( 6.0 , 2.0 ) ) } } |
Now run your application to see the output of it.
Output:
Contact Us