How to add charts made with data from your data tab to your popups or 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.

In this article

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 and 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. (Columns I-K in the below screenshot)

2
Next, add custom HTML to your popups by selecting Custom in the Popup content settings. 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 ({{}}) refer back to the data tab and pull through data from that column. The way we draw the custom charts is by drawing a bar with the width of the value from the column. We're also supplying coloring information in one of our columns, as we will be using that to color the different headers.

3
The example above uses the following popup main content:  
Note 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

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

1
In the Data tab, create new columns for the data you would like to visualize as charts in your panels and 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. (Columns I-K in the below screenshot)

2
Next, add custom HTML to your panels by selecting Custom" in the Panel content settings. 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 ({{}}) refer back to the data tab and pull through data from that column. The way we draw the custom charts is by drawing a bar with the width of the value from the column. We're also supplying coloring information in one of our columns, as we will be using that to color the different headers.

3
The example above uses the following panel main content:  

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.