Zoom sync. only on X-axis

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.* import io.data2viz.math.* 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, 100.pct) } chart2.onZoom { evt -> chart1.zoom(evt.zoomOriginX, evt.zoomOriginY, evt.zoomFactorX, 100.pct) } chart1.onPan { evt -> chart2.pan(evt.panX, 0.pct) } chart2.onPan { evt -> chart1.pan(evt.panX, 0.pct) } } 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.XY panMode = PanMode.XY } cursor { show = true type = CursorType.Vertical } } val day = quantitative( { domain.day.toDouble() } ) val closingPrice = quantitative( { domain.closingPrice } ) // Plot values line(day, closingPrice) { marker = constant(null) 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,126392.472351), Stock(2,126388.438568), Stock(3,126394.121613), Stock(4,126388.751556), Stock(5,126380.480347), Stock(6,126397.350616), Stock(7,126397.469849), Stock(8,126401.339661), Stock(9,126404.096741), Stock(10,126401.935791), Stock(11,126398.120605), Stock(12,126406.883606), Stock(13,126409.620819), Stock(14,126407.564178), Stock(15,126412.124542), Stock(16,126420.127472), Stock(17,126427.991333), Stock(18,126425.845276), Stock(19,126433.99231), Stock(20,126432.924255), Stock(21,126437.270966), Stock(22,126435.929688), Stock(23,126440.683777), Stock(24,126454.985748), Stock(25,126449.014587), Stock(26,126451.652435), Stock(27,126451.329529), Stock(28,126450.554565), Stock(29,126441.836273), Stock(30,126438.542694), Stock(31,126433.838287), Stock(32,126437.787628) )
pierre avatar

Sketch created by

pierre

Bind 2 charts zoom & pan, but only alongside the X-axis. You can zoom/pan in both directions but only the X direction is bound.

comments