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 Tips & Tricks

Before you start, everything you need to know about Discovery is here.

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.

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" ] } %> } ] }

Read more articles and tutorials about Discovery.