Creating your first Kotlin JS chart app, part 1

Let's see step-by-step how to create a Kotlin JS application that uses Charts-kt.

This tutorial will help you understand how to:

  1. Set up a Kotlin Javascript project
  2. Import the libraries you need using your licence keys
  3. Create your first chart and launch it

What do you need?

  • 15 minutes
  • JDK 1.8 (or later)
  • Intellij Community or Ultimate (tested with IntelliJ 2020.3.*)

Creating the Kotlin JS project

IntelliJ IDEA is the editor of choice for a Kotlin project. This tutorial works with the community (free) edition of IDEA as well as the ultimate edition.

Let's start by creating a new Kotlin project, and choose Browser Application.

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

Choose the name and location of your project.

As for the build system, Gradle is the preferred option but Maven also works.

We'll choose Gradle Kotlin for this tutorial, you can change it if you're more comfortable with Groovy.

Choose Java 8 or later as your project JDK.

For this tutorial we'll also use kotlinx.html, a convenient DSL to create HTML elements, so check the box:

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

Checking the project

Finish the project creation wizard, you should have a client.kt file and an index.html.

You also should have 2 run configurations available: BrowserDevelopmentRun and BrowserProductionRun. Run the first one, you should get this result:

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

Note that these configurations are launched in continuous mode (with the --continuous argument), so making a change and saving will reload the app.

Simply change the text in the client.kt file, you should see the result updated immediately:

Creating%20your%20first%20Kotlin%20JS%20chart%20app,%20part%201/Untitled%203.png

Importing the libraries

Creating%20your%20first%20Kotlin%20JS%20chart%20app,%20part%201/Untitled%204.png

First, let's add in the gradle.properties file of the project, two properties for the versioning of our libraries:

// choose the last stable versions! d2vVersion=0.10.4 chartsVersion=1.0.12-RC2

The EAP version of charts is for development use only and displays a watermark on every chart but it did not require any license.

Then add this code in the build.gradle.kts file at the root of your project to specify the repositories, credentials, and versions used.

val d2vVersion: String by project val chartsVersion: String by project repositories { maven{ url = uri("https://maven.pkg.jetbrains.space/data2viz/p/maven/dev") } maven{ url = uri("https://maven.pkg.jetbrains.space/data2viz/p/maven/public") } mavenCentral() } dependencies { implementation ("io.data2viz.d2v:d2v-core-js:$d2vVersion") implementation ("io.data2viz.charts:core:$chartsVersion") }

Note that you're importing the charts-kt library, but also the core module of the data2viz open-source library which contains a lot of basic stuff you'll need to create your charts.

Creating%20your%20first%20Kotlin%20JS%20chart%20app,%20part%201/Untitled%205.png

Stop your application, then reload your Gradle project by clicking on your Gradle tab's "refresh" button. You should get a BUILD SUCCESSFUL result.

Creating your first application

Now let's dive into the code and create a very simple chart to check that everything is working as expected.

Create a MyFirstChart.kt file and paste this code:

import io.data2viz.charts.chart.chart import io.data2viz.charts.chart.mark.dot import io.data2viz.charts.chart.quantitative import io.data2viz.charts.viz.newVizContainer import io.data2viz.geom.Size import kotlinx.html.div import kotlinx.html.dom.append import org.w3c.dom.Node private val width = 300.0 private val height = 300.0 private val values = listOf(1.0, 2.0, 3.0, 4.0, 5.0) fun Node.myFirstChart() { append { div { newVizContainer().apply { size = Size(width, height) chart(values) { val values = quantitative({ domain }) dot(values, values) } } } } }

Using the kolinx.html DSL, we append to a given Node a new div tag, and in this div, we instantiate a VizContainer on which we can create a chart.

Charts-kt is a multiplatform library and the exact same code can run on multiple environments. To make this possible, Charts-kt offers the VizContainer, an element that "hides" the platform specificities and provides a place for the chart to be drawn.

Then change the main() function to call your myFirstChart() function:

fun main() { window.onload = { document.body?.myFirstChart() } }

Launch again your BrowserDevelopmentRun task and check the result (refresh your page if needed) you should see your first dot chart:

Creating%20your%20first%20Kotlin%20JS%20chart%20app,%20part%201/Untitled%206.png