Very simple example of binding an external UI element action to Charts-kt.
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]))
}
Sketch created by
pierre
comments