Serie de gráficos de puntos en Android

Hemos visto el uso de un gráfico de líneas simple y la implementación de BarChart en Android para representar datos en formato gráfico. Otro formato gráfico para representar datos es una serie de gráficos de puntos. En este artículo, veremos la implementación de Point Graph Series en Android. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos datos de muestra en una vista de gráfico de puntos en Android. qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

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.    

implementación ‘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. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--graph view to display our graph-->
    <com.jjoe64.graphview.GraphView
        android:id="@+id/idGraphView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
      
</LinearLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

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;
  
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our variable for graph view.
        GraphView 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.
        PointsGraphSeries<DataPoint> series = new PointsGraphSeries<>(getDataPoint());
          
        // below line is to add series
        // to our graph view.
        graphView.addSeries(series);
          
        // below line is to activate
        // horizontal scrolling.
        graphView.getViewport().setScrollable(true);
          
        // below line is to activate horizontal 
        // zooming and scrolling.
        graphView.getViewport().setScalable(true);
          
        // below line is to activate vertical and 
        // horizontal zoom with scrolling.
        graphView.getViewport().setScalableY(true);
          
        // below line is to activate vertical scrolling.
        graphView.getViewport().setScrollableY(true);
          
        // below line is to set shape 
        // for the point of graph view.
        series.setShape(PointsGraphSeries.Shape.TRIANGLE);
          
        // below line is to set 
        // the size of our shape.
        series.setSize(12);
          
        // below line is to add color 
        // to our shape of graph view.
        series.setColor(R.color.purple_200);
    }
  
    private DataPoint[] getDataPoint() {
        // creating a variable for data point.
        DataPoint[] dataPoints = new DataPoint[]
                {
                        // on below line we are adding a new
                        // data point to our Data Point class.
                        new DataPoint(0, 1),
                        new DataPoint(1, 2),
                        new DataPoint(2, 3),
                        new DataPoint(3, 5),
                        new DataPoint(4, 1),
                        new DataPoint(4, 3),
                        new DataPoint(5, 3),
                        new DataPoint(6, 2)
                };
        // at last we are returning
        // the data point class.
        return dataPoints;
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación.

Producción: