Bind external UI to Charts-kt

import io.data2viz.charts.* import io.data2viz.charts.dimension.* import io.data2viz.charts.chart.* import io.data2viz.charts.chart.mark.* import io.data2viz.charts.viz.* import io.data2viz.charts.core.* import io.data2viz.charts.core.SelectionMode import io.data2viz.charts.core.Datum import io.data2viz.geom.* import io.data2viz.color.* import io.data2viz.charts.layout.* import kotlin.random.Random import kotlinx.browser.document import org.w3c.dom.* val numPoint = 200 val randomPoints = (1 .. numPoint).map{ Point(Random.nextDouble(), Random.nextDouble()) } lateinit var myChart: Chart<Point> fun main() { // Creating a UI element on top of page, we'll use it to display information val button = document.createElement("button") button.innerHTML = "Click me to highlight a random point" button.addEventListener("click", { highlightRandomPoint() }) document.body!!.appendChild(button) val vc = newVizContainer().apply { size = Size(700.0, 500.0) } myChart = vc.chart(randomPoints) { config { // Disable user-input highlight & selection from the chart events { highlightMode = HighlightMode.None selectionMode = SelectionMode.None } // Display a red cursor cursor { show = true strokeColor = Colors.Web.red } } val xPosition = quantitative( { domain.x } ) val yPosition = quantitative( { domain.y } ) plot(xPosition, yPosition) { strokeColorHighlight = constant(Colors.Web.red) } } } private fun highlightRandomPoint() { val randIndex = (1 + (Random.nextDouble() * numPoint).toInt())%200 myChart.highlight(listOf(randomPoints[randIndex])) }
pierre avatar

Sketch created by

pierre

Very simple example of binding an external UI element action to Charts-kt.

comments