Here is a simple way to synchronize zoom and focused datapoints between tiles through a Discovery dashboard.
Discovery is a dashboard solution for Warp 10. It allows you to create highly dynamic dashboards from your time series data while being fully customizable.
Before you start this tutorial, learn more about Discovery.
Principles
The easiest way to achieve synchronization of zoom and focus across charts is to use special events:
For Zoom:
{ 'tags' [ 'chart1' ] 'type' 'zoom' }
For Focus:
{ 'tags' [ 'chart1' ] 'type' 'focus' }
Chart #1 has to send its focus and zoom event to chart #2, and chart #2 sends its events to chart #1.
For this sample, we generate a random GTS and pass it as a variable from the dashboard to the tiles. You can read this post to learn how to create a custom tile for Discovery.
Random data generation
Nothing new or complicated. We generate 4 random GTS.
// Random GTS
NOW 'now' STORE
[ 1 4 <%
'i' STORE NEWGTS 'gts-' $i TOSTRING + RENAME 'g' STORE // create and name a GTS
1 20 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR // Add random values
$g
%> FOR ] 'gtsList' STORE
Dashboard definition
At first, we have to define a gts
variable that holds our random GTS list.
{
'title' 'My Dashboard with zoom & focus sync'
'vars' {
'gts' $gtsList WRAP // Pass our gtsList to tiles
}
'tiles' [
]
}
Read more about Discovery: Discovery Explorer – The dashboards server |
Tiles definition
A first tile will emit events for the second and listen to events coming from the other one:
{
'type' 'scatter' 'x' 0 'y' 0 'w' 6 'h' 1
// listen at focus and zoom events transmitted on "chart1" channel
'options' { 'eventHandler' 'type=(zoom|focus),tag=chart1' }
'macro' <%
{
'data' $gts UNWRAP
'events' [
{ 'tags' [ 'chart2' ] 'type' 'zoom' } // send zoom event on channel "chart2"
{ 'tags' [ 'chart2' ] 'type' 'focus' } // send focus event on channel "chart2"
]
}
%>
}
Same principle for the second tile:
{
'type' 'area' 'x' 6 'y' 0 'w' 6 'h' 1
// listen at focus and zoom events transmitted on "chart2" channel
'options' { 'eventHandler' 'type=(zoom|focus),tag=chart2' }
'macro' <%
{
'data' $gts UNWRAP
'events' [
{ 'tags' [ 'chart1' ] 'type' 'zoom' } // send zoom event on channel "chart1"
{ 'tags' [ 'chart1' ] 'type' 'focus' } // send focus event on channel "chart1"
]
}
%>
}
All together: https://snapshot.senx.io/0005de1c34ee08d4-0-1-6e258b2619a94891
The result
Discover more articles and tutorials about Discovery.
→ Discovery Tips&Tricks #2: Reproduce the WarpStudio Plot view → Discovery Tips&Tricks #3: Build a form → Discovery Tips&Tricks #4: Production-ready! |
Read more
Real-Time Monitoring: Setting Up Alerts, Notifications & Dashboard
Demystifying LevelDB
Add a download button to your Discovery dashboard
Senior Software Engineer