A simple example of 2 synchronized charts: layout, highlight, zoom & pan. Mouse wheel to zoom-in. ALT+mouse to pan. Roll-over to highlight. the documentation can be found here: https://www.notion.so/data2viz/Synchronize-charts-display-5bf7cd4b18944ca4a9d6c148edf6a974
How-to Synchronize 2 charts
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.layout.*
import io.data2viz.charts.core.*
import io.data2viz.geom.*
import io.data2viz.color.*
val width = 600.0
val height = 300.0
fun main() {
// Creating 2 VizContainers for our charts
val vc1 = newVizContainer().apply {
size = Size(width, height)
}
val vc2 = newVizContainer().apply {
size = Size(width, height)
}
// Creating the 2 charts
val chart1 = createChart(vc1, set1)
val chart2 = createChart(vc2, set2)
// Creating a SizeManager to synchronize the charts' widths
sizeManager().vSynchro().addAllCharts(chart1, chart2)
// Syncing the zoom, pan & highlight between the charts
chart1.onHighlight { evt -> chart2.highlight(evt.data) }
chart2.onHighlight { evt -> chart1.highlight(evt.data) }
chart1.onZoom { evt -> chart2.zoom(evt.zoomOriginX, evt.zoomOriginY, evt.zoomFactorX, evt.zoomFactorY) }
chart2.onZoom { evt -> chart1.zoom(evt.zoomOriginX, evt.zoomOriginY, evt.zoomFactorX, evt.zoomFactorY) }
chart1.onPan { evt -> chart2.pan(evt.panX, evt.panY) }
chart2.onPan { evt -> chart1.pan(evt.panX, evt.panY) }
}
private fun createChart(vc: VizContainer, dataset:List<Stock>): Chart<Stock> {
return vc.chart(dataset) {
config {
events {
// Switch the cursor mode to column
triggerMode = TriggerMode.Column
// Enable only X-axis zoom & pan
zoomMode = ZoomMode.X
panMode = PanMode.X
}
// Display the cursor and set it to "vertical"
cursor {
show = true
type = CursorType.Vertical
}
}
val day = quantitative( { domain.day.toDouble() } )
val closingPrice = quantitative( { domain.closingPrice } )
// Plot values
line(day, closingPrice) {
curve = MarkCurves.Curved
// set limits, so user can only zoom-in
x {
min = 1.0
max = 32.0
}
}
}
}
data class Stock(val day: Int, val closingPrice: Double)
val set1 = listOf(
Stock(1,92.830017),
Stock(2,92.512085),
Stock(3,97.305908),
Stock(4,98.011322),
Stock(5,99.490204),
Stock(6,98.095734),
Stock(7,96.590485),
Stock(8,93.003815),
Stock(9,93.609863),
Stock(10,93.073364),
Stock(11,94.712708),
Stock(12,91.130981),
Stock(13,94.988434),
Stock(14,95.115601),
Stock(15,94.518982),
Stock(16,91.285034),
Stock(17,93.038635),
Stock(18,94.722656),
Stock(19,93.00882),
Stock(20,92.536896),
Stock(21,92.204041),
Stock(22,93.585083),
Stock(23,92.736603),
Stock(24,94.528961),
Stock(25,95.006348),
Stock(26,93.893066),
Stock(27,90.495178),
Stock(28,89.966125),
Stock(29,88.994965),
Stock(30,84.921448),
Stock(31,86.312408),
Stock(32,82.536926)
)
val set2 = listOf(
Stock(1,124592.472351),
Stock(2,124488.438568),
Stock(3,124594.121613),
Stock(4,124688.751556),
Stock(5,124580.480347),
Stock(6,124697.350616),
Stock(7,124397.469849),
Stock(8,125101.339661),
Stock(9,125204.096741),
Stock(10,125301.935791),
Stock(11,125498.120605),
Stock(12,125506.883606),
Stock(13,125609.620819),
Stock(14,125707.564178),
Stock(15,125812.124542),
Stock(16,125720.127472),
Stock(17,125127.991333),
Stock(18,125225.845276),
Stock(19,125333.99231),
Stock(20,126432.924255),
Stock(21,126537.270966),
Stock(22,126635.929688),
Stock(23,126740.683777),
Stock(24,126854.985748),
Stock(25,126849.014587),
Stock(26,126851.652435),
Stock(27,126951.329529),
Stock(28,126950.554565),
Stock(29,126941.836273),
Stock(30,127738.542694),
Stock(31,127833.838287),
Stock(32,127237.787628)
)
Sketch created by
pierre
comments