Embedded Drilldown Example

The following is a simplified example on how to create an event listener in order to implement a Drilldown in an embedded chart. 

Refer here for our official documentation on our Embeds
Refer to this community post to see how to easily generate an embed URL. 
Refer to this article to learn more about Postmessages. 

After successfully embedding your dashboard onto your webpage, you'll want to

  1. create a function that can generate a url for the iframe src,
  2. create an event listener,
  3. parse the filters and create a new array to use in the child filter  

Note: Be sure to conceal your api key when actually implementing this on your own websites. 

Example:

    // function that creates source url
    const periscopeUrl = (apiKey, data) => {

        // Set the path and escape the querystring
        const escapedQS = escape(JSON.stringify(data))
        const path = `/api/embedded_dashboard?data=${escapedQS}`

        // Use SHA to generate signature with API key
        const sha = new jsSHA('SHA-256', 'TEXT')
        sha.setHMACKey(apiKey, 'TEXT')
        sha.update(path)
        const signature = sha.getHMAC('HEX')

        // Build and return final periscope URL
        const url = `https://app.periscopedata.com${path}&signature=${signature}`
        return url
    }


    // Drilldown listener
    const receiveMessage = (event) => {
      if (typeof event.data == 'object' && event.data.event_type == "drilldown") {
        const data = {
          dashboard: event.data.destination_dashboard_id,
          embed: 'v2',
          filters: filterValues(event.data.filter_values),
        }
        iframe.src = periscopeUrl(YOUR_API_KEY, data);
      }
    }


    // Parse drilldown filter values and create new filter array
    const filterValues = (values) => {
      output = []
      values.forEach(obj => {
        output.push({'name': obj.filter_name, 'value': obj.column_value})
      })
      return output
    }


    // Listen for POST messages from Periscope
    window.addEventListener("message", receiveMessage, false)
Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like3 Follow
  • 3 Likes
  • 2 wk agoLast active
  • 76Views
  • 1 Following