How to add custom charts or polling results to your popups

You might want to display more complex data or charts within a popup. 

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

    1
    Adding custom charts made with data in your datasheet

    Hover over the different areas to display the example.

    In the Data tab, create new columns for the data you would like to visualize in your popups and select to visualize them in your popups in the "Select columns to visualise" panel

    Next, Add custom HTML to your popups by selecting "Custom content". The example above uses the following popup content:

     
    <div class="photo">
    <img src="{{photo_url}}" width="50" />
    </div>
    
    
    <h3>{{Name}}</h3>
    MP before election: {{fullname}}, {{partydisp}}<br/>
    Majority in {{last_vote}}: {{majority}}<br/>
    Swing needed to beat: {{REQSWING}}%<br/>
    
    
    <!-- RESULTS -->
    <br/><strong>Results in {{last_vote}} ({{result17}})</strong>
    <div id='election-popup'>
    <ul>
    <li class=" {{first17}}"> <span class='party-name'>{{first17}}</span> <span class='party-bar' style='display: inline-block; width: {{FIRSTPCT}}%'>&nbsp;</span> <span class='party-value'>{{FIRSTPCT}}%</span> </li>
    <li class="{{second17}}"> <span class='party-name'>{{second17}}</span> <span class='party-bar ' style='width: {{SECONDPCT}}%'>&nbsp;</span> <span class='party-value'>{{SECONDPCT}}%</span> </li>
    <li class="{{third17}}"> <span class='party-name'>{{third17}}</span> <span class='party-bar' style='width: {{THIRDPCT}}%;'>&nbsp;</span> <span class='party-value'> {{THIRDPCT}}%</span> </li>
    </ul>
    </div>
    
    
    EU Referendum result: {{EULEAVE}}% Leave, {{EUREMAIN}}% Remain<br/>
    Turnout in 2017: {{turnout17}}%<br/>
    Time results called in 2017: {{just_time}} ({{dec_order}}/650 constituencies)
    
    
    <style>
    h3 {
      margin: 0;
    }
    .photo {
      float: right;
    }
    .photo img {
      border: 1px solid darkgray;
      width: 50px;
      min-height: 30px;
      background-color: #ccc;
    }
    
    
    #election-popup { 
      margin-bottom: 10px;
    }
    #election-popup ul { 
      width: 210px;
      padding: 0;
      margin-bottom: 0; 
    }
    #election-popup li {
      list-style: none;
      padding: 0;
      margin-top: 4px;
      padding-left: 75px;
      position: relative; 
      width: 180px;
      white-space: nowrap;
    }
    #election-popup .party-name {
      display: inline-block;
      width:75px;
      position: absolute;
      left:0;
      font-size: 11px; 
    }
    .party-bar {
      width: 0;
      display: inline-block;
      vertical-align: top;
      height: 14px;
      background-color: #ccc;
    }
    #election-popup .party-value {
      font-size: 11px; 
    }
    @media(max-width: 420px) {
     .flourish-popup-content {
        transform: scale(0.8); 
        left: 0 !important;
        top: 0 !important;
      }
      img {
        display: none;
      }
    }
    
    
    /* Party colours */
    .Lab {
      color: #ed1e0e;
    }
    .Lab .party-bar {
      background-color: #ed1e0e;
    }
    .Con {
      color: #0575c9;
    }
    .Con .party-bar {
      background-color: #0575c9
    }
    .LD {
      color: #fe8300;
    }
    .LD .party-bar {
      background-color: #fe8300;
    }
    .Ind {
      color: #f3a6b2;
    }
    .Ind .party-bar {
      background-color: #f3a6b2;
    }
    .Green {
      color: #78c31e;
    }
    .Green .party-bar {
      background-color: #78c31e;
    }
    .PC {
      color: #4e9f2f;
    }
    .PC .party-bar {
      background-color: #4e9f2f;
    }
    .DUP {
      color: #c0153d;
    }
    .DUP .party-bar {
      background-color: #c0153d;
    }
    .SNP {
      color: #ebc31c;
    }
    .SNP .party-bar {
      background-color: #ebc31c;
    }
    .SF {
      color: #fe8300;
    }
    .SF .party-bar {
      background-color: #fe8300;
    }
    .Spk {
     color: #076796;
    }
    .Spk .party-bar {
      background-color: #076796;
    }
    </style>
    		
    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.

    Click here to duplicate this example.

    2
    Adding other published Flourish charts to your popups
    You can also add an iframe in your popup and link to a different Flourish visualization within that iframe. To do this, start by copying the iframe embed code from a published visualization:
    Then, add that embed code to the custom popup area like in the following example. The actual link in this example has been replaced with {{Chart}}, so that each row can show a different chart in its popup.

    <iframe src='{{Chart}}' frameborder='0' scrolling='no' style='width:100%;'></iframe><div style='width:100%!;margin-top:4px!important;text-align:right!important;'></div><br>
    		

    Once you've added this, make sure you add a link to a published Flourish visualization in each row of the "Chart" column in your datasheet, and that the "Chart" column has been added to the "Metadata for popups" data binding.

    Here's an example of what this could look like:

    Click here to duplicate this example.