How to embed charts in your popups or panels

There may be times when you want to highlight more data that you can show in your main visualization. For example, in a Projection map you may want to shade regions in a categorical color palette but be able to show underlying data in popups or panels that include simple bar charts. Similarly, you could highlight data from a specific year in your main visualization, but include popups with line charts that show changes over time.

The example below embeds a chart in panels in the Radar template. While the main visualization remains clear and uncluttered, the user can click on parts of the visualization to dive deeper into the data themselves.

In this article

The custom content mode on popups and panels lets you add images, other content and customize styling. But you can also use HTML to embed charts in your popups and panels. 

Embedding charts in your popups

    1
    Get started by creating your visualization with your data and settings.
    2
    In the popups settings, select Custom content
    3
    Create a visualization that you would like to embed, publish this and copy the iframe embed code

    4
    Paste the iframe embed code into the Popup custom main content text area. You should now see the same chart appear in all your popups.

    5
    Adjust the height of your chart by editing the height property in your embed code.

    6
    If you would like to display a different chart for each series, replace the ID of the embed code with {{ID}}, add a column in your data tab called ID and input the IDs of the visualizations you would like to display. Make sure your ID column is bound to Info for popups column binding.

    Here's an example of a separate chart for each popup:

    7
    You can also add charts made with data from your data tab to your popups.



Embedding charts in your panels

Please note popup panels are currently only available in our Radar and Projection map templates. 

    1

    Get started by creating your visualization with your data and settings in the Radar or Projection map template.

    2
    In the popups settings, select either Panel for just panel popups, or Both to add popups when you hover over a data point and panels when you click on it. 
    Next, in the panels settings click Custom content.

    3

    Create a visualization that you would like to embed, publish this and copy the iframe embed code.

    4

    Paste the iframe embed code into the Panel custom main content text area. You should now see the same chart appear in all your panels. 

    5

    Adjust the height of your chart by editing the height property in your embed code.

    6

    If you would like to display a different chart for each series, replace the ID of the embed code with {{ID}}, add a column in your data tab called ID and input the IDs of the visualizations you would like to display. Make sure your ID column is bound to Info for popups column binding.

    7

    Panels are also available in our Projection map template, so you can add charts to your panels in the same way, choosing different embeds for specific regions.