Many chart parameters are linked to dimension, like strokeWidth for a line, you can use this to bind this parameter to something completely off your dataset, like a property of your model. Here, we are using this behavior to display or hide some limit lines, depending on a Boolean data stored in our model (showLines). Then to simulate a "refresh call" we just call the pan function and pan by 0% (which means the visuals don't move).
How-to update a chart state
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.charts.layout.*
import io.data2viz.geom.*
import io.data2viz.color.*
import io.data2viz.math.*
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()) }.sortedBy { it.x }
var showLines = true
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 to enable or disable limit lines"
button.addEventListener("click", {
hideShowLines()
})
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 {
zoomMode = ZoomMode.X
selectionMode = SelectionMode.None
highlightMode = HighlightMode.None
}
// Display a red cursor
cursor {
show = true
strokeColor = Colors.Web.red
}
}
val xPosition = quantitative( { domain.x } )
val yPosition = quantitative( { domain.y } )
val limitLow = yPosition.child( { 0.20 } )
val limitHi = yPosition.child( { 0.80 } )
plot(xPosition, yPosition) {
strokeColor = discrete( {
if (showLines && (domain.y < 0.2 || domain.y > 0.8)) Colors.Web.red
else Colors.Web.blue
} )
}
line(xPosition, limitLow) {
strokeLine = constant(doubleArrayOf(6.0, 10.0))
strokeWidth = discrete( { if (showLines) 1.0 else null } )
strokeColor = constant(Colors.Web.darkred)
}
line(xPosition, limitHi) {
strokeLine = constant(doubleArrayOf(6.0, 10.0))
strokeWidth = discrete( { if (showLines) 1.0 else null } )
strokeColor = constant(Colors.Web.darkred)
}
}
}
private fun hideShowLines() {
showLines = showLines.not()
myChart.pan(0.pct, 0.pct)
}
Sketch created by
pierre
comments