Open In App

Point Graph Series in Android

Last Updated : 14 Feb, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

We have seen using a simple line graph and BarChart implementation in Android to represent data in the graphical format. Another graphical format for representing data is a point graph series. In this article, we will take a look at the implementation of the Point Graph Series in Android. 

What we are going to build in this article? 

We will be building a simple application in which we will be displaying sample data in a point graph view in Android. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java/Kotlin language. 

GraphBar


Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note that select Java/Kotlin as the programming language.

Directory Structure of the Application:

Directory_Structure


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.github.PhilJay:MPAndroidChart:v3.1.0'

After adding the above dependency now sync your project and we will now move towards the implementation of our GraphView.  

- Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.

allprojects {
  repositories
   {
   …   
   maven { url "https://jitpack.io" }
     }
}

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. Below is the code for the activity_main.xml file. 

activity_main.xml:

XML 
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/idLineChart"
        android:layout_width="350sp"
        android:layout_height="700sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.491"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.335" />

    <Button
        android:id="@+id/refresh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Refresh"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/idLineChart" />

</androidx.constraintlayout.widget.ConstraintLayout>

Design UI:

Layout_1



Step 4: Working with the MainActivity file

Go to the MainActivity file and refer to the following code. Below is the code for the MainActivity file. Comments are added inside the code to understand the code in more detail.

MainActivity File:

Java 
package com.gfg.graph_series;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Description;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    LineChart lineChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lineChart = findViewById(R.id.idLineChart);

        // creating a new data set for our line chart.
        LineDataSet lineDataSet = new LineDataSet(getDataPoints(), "Data Points");

        // below line is to set color for our line chart.
        lineDataSet.setColor(getResources().getColor(R.color.green));
        lineDataSet.setCircleColor(getResources().getColor(R.color.green));

        // below line is to set circle radius for our data points.
        lineDataSet.setCircleRadius(6f);
        lineDataSet.setLineWidth(1f);

        // below line is to set value text size for data points.
        lineDataSet.setValueTextSize(12f);

        // below line is to create line data.
        LineData lineData = new LineData(lineDataSet);
        lineChart.setData(lineData);

        // below line is to customize the description of the chart.
        Description description = new Description();
        description.setText("Sample Line Chart");
        description.setTextSize(14f); 
        lineChart.setDescription(description);

        // Customize the legend
        Legend legend = lineChart.getLegend();
        legend.setTextSize(12f); 
        legend.setTextColor(Color.BLACK); 

        // Customize the axes
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setTextSize(12f); 
        xAxis.setTextColor(Color.BLACK); 

        YAxis yAxis = lineChart.getAxisLeft();
        yAxis.setTextSize(12f); 
        yAxis.setTextColor(Color.BLACK); 

        // Optional: Set the right Y-axis to be disabled
        lineChart.getAxisRight().setEnabled(false);

        // Set up the refresh button
        Button refreshButton = findViewById(R.id.refresh);
        refreshButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                zoomOutChart();
            }
        });
    }

    private ArrayList<Entry> getDataPoints() {
        // creating a variable for data points.
        ArrayList<Entry> dataPoints = new ArrayList<>();

        // adding data points to the list.
        dataPoints.add(new Entry(0, 1));
        dataPoints.add(new Entry(1, 2));
        dataPoints.add(new Entry(2, 3));
        dataPoints.add(new Entry(3, 5));
        dataPoints.add(new Entry(4, 1));
        dataPoints.add(new Entry(4, 3));
        dataPoints.add(new Entry(5, 3));
        dataPoints.add(new Entry(6, 2));

        // returning the data points.
        return dataPoints;
    }

    private void zoomOutChart() {
        // Reset the zoom level to show the entire dataset
        lineChart.setVisibleXRangeMinimum(0); 
        lineChart.setVisibleXRangeMaximum(6); 
        lineChart.fitScreen(); 
        lineChart.invalidate();
    }
}
Kotlin 
package com.gfg.graph_kotlin

import android.graphics.Color
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.github.mikephil.charting.charts.LineChart
import com.github.mikephil.charting.components.Description
import com.github.mikephil.charting.components.Legend
import com.github.mikephil.charting.components.XAxis
import com.github.mikephil.charting.components.YAxis
import com.github.mikephil.charting.data.Entry
import com.github.mikephil.charting.data.LineData
import com.github.mikephil.charting.data.LineDataSet

class MainActivity : AppCompatActivity() {
    private lateinit var lineChart: LineChart

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        lineChart = findViewById(R.id.idLineChart)

        // creating a new data set for our line chart.
        val lineDataSet = LineDataSet(dataPoints, "Data Points")

        // below line is to set color for our line chart.
        lineDataSet.color = resources.getColor(R.color.green, theme)
        lineDataSet.setCircleColor(resources.getColor(R.color.green, theme))

        // below line is to set circle radius for our data points.
        lineDataSet.circleRadius = 6f
        lineDataSet.lineWidth = 1f

        // below line is to set value text size for data points.
        lineDataSet.valueTextSize = 12f

        // below line is to create line data.
        val lineData = LineData(lineDataSet)
        lineChart.data = lineData

        // below line is to customize the description of the chart.
        val description = Description()
        description.text = "Sample Line Chart"
        description.textSize = 14f
        lineChart.description = description

        // Customize the legend
        val legend: Legend = lineChart.legend
        legend.textSize = 12f
        legend.textColor = Color.BLACK

        // Customize the axes
        val xAxis: XAxis = lineChart.xAxis
        xAxis.textSize = 12f
        xAxis.textColor = Color.BLACK

        val yAxis: YAxis = lineChart.axisLeft
        yAxis.textSize = 12f
        yAxis.textColor = Color.BLACK

        // Optional: Set the right Y-axis to be disabled
        lineChart.axisRight.isEnabled = false

        // Set up the refresh button
        val refreshButton: Button = findViewById(R.id.refresh)
        refreshButton.setOnClickListener { zoomOutChart() }
    }

    private val dataPoints: ArrayList<Entry>
        get() {
            // creating a variable for data points.
            val dataPoints = ArrayList<Entry>()

            // adding data points to the list.
            dataPoints.add(Entry(0f, 1f))
            dataPoints.add(Entry(1f, 2f))
            dataPoints.add(Entry(2f, 3f))
            dataPoints.add(Entry(3f, 5f))
            dataPoints.add(Entry(4f, 1f))
            dataPoints.add(Entry(4f, 3f))
            dataPoints.add(Entry(5f, 3f))
            dataPoints.add(Entry(6f, 2f))

            // returning the data points.
            return dataPoints
        }

    private fun zoomOutChart() {
        // Reset the zoom level to show the entire dataset
        lineChart.setVisibleXRangeMinimum(0f)
        lineChart.setVisibleXRangeMaximum(6f)
        lineChart.fitScreen()
        lineChart.invalidate()
    }
}

Explanation in the Point Graph Series Program

  • Setup and Initialization: The program creates a LineChart using the MPAndroidChart library in an Android app. It sets up the chart in onCreate() and displays it in activity_main.xml.
  • Data Preparation: The getDataPoints() method generates a list of data points (Entry objects) that represent the values to be plotted on the line chart.
  • Chart Customization: The chart's appearance is customized using LineDataSet and LineData. It sets line color, circle size, label text size, and customizes the chart description, legend, and axes.
  • Axes Customization: The X and Y axes are styled with specific text sizes and colors. The right Y-axis is disabled for a cleaner look.
  • Zoom Reset Feature: The app includes a Refresh button that resets the zoom level of the chart to show the full dataset using the zoomOutChart() method.
  • User Interaction: Users can interact with the chart by zooming and scrolling. Clicking the Refresh button redraws the chart to its original view.

Now run your app and see the output of the app.

Output:



Next Article
How to Create Group BarChart in Android?

C
chaitanyamunje
Improve
Article Tags :
Practice Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox