Discovery Tips&Tricks #1 - Synchronization of zoom and focus between charts -

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

// 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 { 'title' 'My Dashboard with zoom & focus sync' 'vars' { 'gts' $gtsList WRAP // Pass our gtsList to tiles } 'tiles' [ { '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" ] } %> } { '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" ] } %> } ] }

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!