How to visualize data as charts in your popups and panels

This help doc covers adding custom polling results or charts made with data in your datasheet. If you'd like to read a more basic help doc on how to add images, videos and links to your popups or panels, you can do that here.

Hover over the different areas to display the example.

Embedding charts made with data in your datasheet in your popups

To display charts made with data from your data tab in your popups,

1

In the Data tab, create new columns for the data you would like to visualize as charts in your popups. Then, add them to the "Metadata for popups" binding in the Select columns to visualise panel. In our example, we're using the percentages at which US counties voted for which party. 

2

We're also supplying coloring information in one of our columns, as we will be using that to color the different headers. This is optional.

3

Next, add custom HTML to your popups by selecting Custom in the Popup content settings. 

TIP: Make sure that you are adding custom popup content under Popups and panels for regions, and not points.

4

The way we draw the custom popup bars is by using custom CSS. We need to draw a bar that is as wide as the value provided in our percentage columns (in the example above, columns H-J). 

NOTE: You can copy the custom HTML supplied below and tweak it to match your column names and colors. Remember that column names supplied in curly brackets {{Column_name}} refer back to the data tab and pull through data from that column.

WARNING: The column header in the Data tab and the one you provide in curly brackets in the popups (such as {{County, state}}) need to match exactly.

5

The example above uses the following popup main content:  

6

Let's look at the code above. You'll notice that each bar has a class of party-bar that has additional styling added. The most crucial element is the width which uses the value from each relevant column, followed by a percentage symbol %. In this way, we transform our values into percentages which determine the width of your bar.

Meanwhile, under the overall style section, we have set our list elements to be 100px wide.

7

You can adjust the code to suit your own visualization. Note that this example also has extra styles added for styling the popup on mobile. This is important to add when your popup text is overflowing the popup on mobile displays.

Embedding charts made with data in your datasheet in your panels

Adding charts in your panels uses the same logic as the steps provided in the section above. However, we have added a few styling changes to the snippet code, to accommodate the larger width of the panels.

Click anywhere on the map below to open a panel.

TIP: Remember to choose custom panels for regions, and not points.

Embedding non-percentage charts made with data in your datasheet in your panels

Both examples above are using a percentage to fill a div, but what if your data  doesn't contain percentages? In that case, you will need to multiply your data in order to fill the bars. In our example below, we used scores from 1 to 10 and multiplied them by 8 in order to fill the bars.

The example above uses the following panel main content:

Embedding Flourish charts in your popups and panels

You can also embed Flourish charts in your popups or panels. Learn more about this here.