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 while showing underlying data in popups or panels that include simple bar charts. Similarly, you may want to 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.

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 the    Info for popups column binding. 

NB. If your chart has one of our new "data typing" column types, the column must be set to "text" for this to work correctly.

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.

NOTE: We are rolling out a new way to embed charts in popups and panels. Instead of pasting the full iframe embed code to the popup's custom content text box, you will simply have to type {{visualisation/1234}}, replacing that string of numbers with your visualization's ID. You can also specify a width and a height adding it to the code like so: {{visualisation/1234/100%/300px}}. Check out this help doc to see which templates have this new feature.

Embedding charts in your panels

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.

Embedding charts in your popups and panels based on a matching value

Say, for example, that you have a map that colors regions based on a value and you want to show data that's specific to that country on your popups. You can achieve that by following these steps:

1

Make sure that the visualization that you want embedded on your popups or panels has a dropdown menu with all the records you want it to match to. This can be achieved with a Line chart with a row filter, for example.

2

Create a story and add a slide for every single option on the dropdown. Set the Navigation style to None, publish the story, and under More options, select iframe as your embed format and copy the embed code, just like in the previous cases.

3

On the base visualization, add a new column to your data, call it ID. Make sure that the order of the records in this visualization matches the order of the slides on the story. Then, number your records based on their matching slide, starting from 0. For example, if you have 34 slides on your story, your records will be numbered from 0 to 33. Bind it to the  Info for popups / Metadata for popups column binding. 

4

Go to the Popups and panels settings and set them to Custom. Then paste your iframe code on the Custom main content textbox. In the code, right after the word embed add #slide-{{ID}}. This will connect to the ID column in the data and will pull the slide that matches that number.

Here's an example of a map with chart on popups that match the country: