Android – Serie de gráficos de puntos con Kotlin

Los gráficos se utilizan para representar grandes cantidades de datos en una forma fácil de leer. Hay varios gráficos que se utilizan para mostrar datos, como gráficos de barras simples, gráficos de barras de grupo, series de gráficos de puntos y otros. En este artículo, veremos la implementación de Point Graph Series en aplicaciones de Android usando Kotlin. 

Nota : si está buscando implementar Point Graph Series en Android usando Java. Point Graph Series en Android usando Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Cómo crear/iniciar un nuevo proyecto en Android Studio

Paso 2: Agregar dependencia a build.gradle (Módulo: aplicación)

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.    

implementation 'com.jjoe64:graphview:4.2.2'

Después de agregar la dependencia anterior, ahora sincronice su proyecto y ahora avanzaremos hacia la implementación de nuestro GraphView.  

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. Se agregan comentarios en el código para conocer en detalle. 

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

Paso 4: trabajar con el archivo MainActivity.kt

Vaya a aplicación > java > nombre del paquete de su aplicación > archivo MainActivity.kt y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

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)
        )
    }
  
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: