Open In App

Android – Point Graph Series with Kotlin

Improve
Improve
Like Article
Like
Save
Share
Report

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: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:



Last Updated : 30 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads