Creating your first Android chart app, part 1

Let's see step-by-step how to integrate Charts-kt in an Android application.

In this tutorial you will :

  1. Create a minimal android application with one activity
  2. Configure your build to import the needed libraries
  3. Create your first chart

What do you need?

  • 15 minutes
  • JDK 1.8 (or later)
  • Android Studio or Intellij Idea with Android plugin activated (tested with Android Studio 4.1.3)

Creating the Android project

From Android Studio (or Intellij idea), start by select create new project and choose Empty Activity.

Creating%20your%20first%20Android%20chart%20app,%20part%201/CleanShot_2021-04-15_at_11.52.002x.png

Click next, give a name and choose the minimum SDK you want to use for your app.

In our case, we choose API 17 to have a charts application compatible with more than 99% of devices (it's also the minimum version allowed for Charts.kt).

Creating%20your%20first%20Android%20chart%20app,%20part%201/Untitled.png

Click Finish and wait for the ide to finish the synchronization of the project. Validate your project by running the application in the emulator.

Creating%20your%20first%20Android%20chart%20app,%20part%201/Untitled%201.png

You should see the resulting Hello World

Creating%20your%20first%20Android%20chart%20app,%20part%201/Untitled%202.png

Importing the libraries

First, edit the build.gradle file at the root of the project to add the following maven repositories.

allprojects{ repositories{ google() jcenter() maven{ url "https://maven.pkg.jetbrains.space/data2viz/p/maven/dev" } maven{ url "https://maven.pkg.jetbrains.space/data2viz/p/maven/public" } } }

Next, edit the build.gradle file of the module to add the following dependencies:

dependencies{ implementation 'io.data2viz.charts:core:1.1.0-eap1' implementation 'io.data2viz.d2v:viz:0.8.12' coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:1.1.5' ...

You also need to add the following parameter in the defaultConfig section:

// Required when setting minSdkVersion to 20 or lower multiDexEnabled true

Relaunch the application to validate your new settings.

Create the chart view

Now you are going to add the code that contains your first chart.

The code is a view. You can copy the following code directly in the MainActity.kt file (click on the "+" button to see the whole file):

package com.example.firstchartapp import android.content.Context import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import io.data2viz.charts.chart.Chart import io.data2viz.charts.chart.chart import io.data2viz.charts.chart.discrete import io.data2viz.charts.chart.mark.area import io.data2viz.charts.chart.quantitative import io.data2viz.geom.Size import io.data2viz.viz.VizContainerView class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(CanadaChart(this)) } } class CanadaChart(context: Context) : VizContainerView(context) { private val chart: Chart<PopCount> = chart(canPop) { size = Size(vizSize, vizSize) title = "Population of Canada 1851–2001 (Statistics Canada)" // Create a discrete dimension for the year of the census val year = discrete({ domain.year }) // Create a continuous numeric dimension for the population val population = quantitative({ domain.population }) { name = "Population of Canada (in millions)" } // Using a discrete dimension for the X-axis and a continuous one for the Y-axis area(year, population) } override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) chart.size = Size(vizSize, vizSize * h / w) } } const val vizSize = 500.0 data class PopCount(val year: Int, val population: Double) val canPop = listOf( PopCount(1851, 2.436), PopCount(1861, 3.23), PopCount(1871, 3.689), PopCount(1881, 4.325), PopCount(1891, 4.833), PopCount(1901, 5.371), PopCount(1911, 7.207), PopCount(1921, 8.788), PopCount(1931, 10.377), PopCount(1941, 11.507), PopCount(1951, 13.648), PopCount(1961, 17.78), PopCount(1971, 21.046), PopCount(1981, 23.774), PopCount(1991, 26.429), PopCount(2001, 30.007) )

Note that you may need to synchronize your IDE to take the last modification of the gradle files:

Creating%20your%20first%20Android%20chart%20app,%20part%201/CleanShot_2021-04-15_at_13.59.502x.png

You now have to replace the content view of the activity by the chart's view.

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(CanadaChart(this)) }

Relaunch your application and you should now view the chart.

Creating%20your%20first%20Android%20chart%20app,%20part%201/CleanShot_2021-04-15_at_14.03.292x.png

Notice the chart and axes updates when you change the phone's orientation.

Creating%20your%20first%20Android%20chart%20app,%20part%201 CleanShot_2021-04-15_at_14.04.292x.png