How to add custom charts or polling results to your popups

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, 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.