Skip to main content

Using URL state settings (Premium feature)

Flourish Team
Updated

This help doc provides some examples of URL hashes you can use to control different settings across a variety of templates using URL settings.

If you haven't read our help doc that explains what URL settings are and how you use them, head here first to read our overview help doc.

NOTE: Please reach out to your Customer Success Manager if you are interested in using this advanced feature.

The example below shows a projection map of London boroughs with three visualizations inside the panels that each use the URL state in the different ways:

  • a column chart that highlights the bar for that region in a different color
  • a line chart with a pre-selected filter showing the line for that region (as well as some specific reference lines)
  • a table with a pre-filled search field showing only rows for that region

In this article

In this article, we'll show you the hashes used to achieve each of these embedded charts. If you want to see what the original JSON state object for them looked like, you can paste the hash into a URL decoder like this one.

To retrieve the encoded JSON state object from a story, you can save the following code snippet as a bookmarklet:

javascript:(function(){alert(encodeURIComponent(JSON.stringify(Flourish.app.current_preview_slide.state)))})();
1
A column chart with a highlighted bar
    • Make a column chart where the region names for the bars match the region names in your map
    • Under Colors settings, choose the Color Mode called By row
    • Edit the color palette to have just one color with the Extend option disabled. All the columns other than your highlighted one will be shaded in this single color.
    • Add the setting called color.categorical_custom_palette to the URL settings box

    • Publish your chart, and copy the following iframe in a panel.

                <iframe src='https://flo.uri.sh/visualisation/VIS_ID/embed#%7B%22color%22%3A%7B%22categorical_custom_palette%22%3A%22{{FILTER}}%3A%23HEX_CODE%22%7D%7D'
          title='Interactive or visual content' class='flourish-embed-iframe'
          frameborder='0' scrolling='no' style='width:100%;height:600px;'
          sandbox='allow-same-origin allow-forms allow-scripts allow-downloads
          allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation'></iframe>
      • Replace VIS_ID with the id of the column chart you made.
      • Replace FILTER with the column header of your regions column in your map and replace HEX_CODE with the HEX code of the color you want to use to highlight your bar.
2
A line chart with a pre-selected multi-series filter
  • Make a line chart where the headers of your Values columns match the names of the regions in your map 
  • Under Controls & filters, select a Max series to show. If you want just a single line shown at any point make this 1, but if you want the user to be able to add extra lines to compare regions, make this more than 1.
  • Edit the color palette to have just one color with the Extend option disabled
  • Add the setting called series_filter to the URL settings box
  • Publish your chart, and copy the following iframe in a panel. 
              <iframe src='https://flo.uri.sh/visualisation/VIS_ID/embed#%7B%22series_filter%22%3A%5B%22{{FILTER}}%22%5D%7D'
          title='Interactive or visual content' class='flourish-embed-iframe'
          frameborder='0' scrolling='no' style='width:100%;height:600px;'
          sandbox='allow-same-origin allow-forms allow-scripts allow-downloads
          allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation'></iframe>
  • Replace VIS_ID with the id of the line chart you made.
  • Replace FILTER with the column header of your regions column in your map.
  • If you want to add a reference line that always appears in the initial view, first add a color override (perhaps a grey shade) for this region, and then use the following iframe instead. 
              <iframe src='https://flo.uri.sh/visualisation/VIS_ID/#%7B%22series_filter%22%3A%5B%22{{FILTER}}%22%2C%22REFERENCE%22%5D%7D'
          title='Interactive or visual content' class='flourish-embed-iframe'
          frameborder='0' scrolling='no' style='width:100%;height:600px;'
          sandbox='allow-same-origin allow-forms allow-scripts allow-downloads
          allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation'></iframe>
  • Replace REFERENCE with the name of your reference line region.
3
A table with a pre-filled search field
  • Make a table containing a column with values that match the region names in your map
  • Make sure the search box is enabled under the Row filter/search settings
  • Add the setting called search_val to the URL settings box
  • Publish your chart, and copy the following iframe in a panel. 
              <iframe src='https://flo.uri.sh/visualisation/VIS_ID/embed#%7B%22search_val%22%3A%22{{FILTER}}%22%7D'
          title='Interactive or visual content' class='flourish-embed-iframe'
          frameborder='0' scrolling='no' style='width:100%;height:600px;'
          sandbox='allow-same-origin allow-forms allow-scripts allow-downloads
          allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation'></iframe>
  • Replace FILTER with the column header of your regions column in your map.

Related articles