Very simple example of data binding from Charts-kt to an external UI element.
Bind charts to external UI
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.layout.*
import io.data2viz.geom.*
import kotlin.random.Random
import kotlinx.browser.document
import org.w3c.dom.*
val divId = "infoDiv"
val randomPoints = (1 .. 400).map{ Point(Random.nextDouble(), Random.nextDouble()) }
fun main() {
// Creating a UI element on top of page, we'll use it to display information
val div = document.createElement("div")
div.id = divId
div.innerHTML = "Roll over the plots to get their position."
document.body!!.appendChild(div)
val vc = newVizContainer().apply {
size = Size(700.0, 500.0)
}
val myChart = vc.chart(randomPoints) {
val xPosition = quantitative( { domain.x } )
val yPosition = quantitative( { domain.y } )
plot(xPosition, yPosition)
}
// Bind our data point to a UI element
myChart.onHighlight { highlightEvent ->
document.getElementById(divId)!!.apply {
// Selected the first "Datum" from the HighlightEvent
val datum: Datum<Point> = highlightEvent.data.first()
// The Datum.domain is a io.data2viz.geom.Point
val point: Point = datum.domain
innerHTML = "Highlighting point #${datum.indexInData}: X=${point.x}, Y=${point.y}"
}
}
}
Sketch created by
pierre
comments