Creating a popup with multiple tabs

There may be times when you want to provide more information in a popup than what fits in a normal-sized popup. For these use cases, we have a solution to create a multi-tabbed popup.

You may have better luck in copying the finish code at the bottom of the article and replacing only the visualizations with your own.

NOTE: The code for the samples in this article is from the QlikMaps 2.1 Demo QVW, which is available on the qlikmaps download site.

Create the content for each tab of the popup

For instance, if you wanted to set a header with some data, with a bar chart visualization as the first tab and a streetview visualization on the second tab, you would create those three pieces separately and combine them once complete.

Header table 

 <table width="380">
  <tbody>
   <tr>
    <td style="text-align:center; font-size:18px;"><b>' & [Trade Name] & '</b></td>
   </tr>
   
   <tr>
    <td style="text-align:center;"> <b>Sales</b>: ' & num(sum(Receipts), '$#,###.') & '</td>
   </tr>
  </tbody>
 </table>

Bar chart visualization 

  <img src="http://chart.apis.google.com/chart' &
    '?chbh=a' &  //bar width
    '&chxr=0,10,100' &  //axis ranges
    '&chxt=x,y' &  //visible axes
    '&chxl=0:|J|F|M|A|M|J|J|A|S|O|N|D|1:|' &  //axis labels
   if(len(min(Receipts))>6, floor(min(Receipts)/1000000,1)-1&'M', 
     if(len(min(Receipts))>3, floor(min(Receipts)/1000,1)-1&'k', 
     max(Receipts)-1)) &
         '|' & 
      if(len(max(Receipts))>6, floor(max(Receipts)/1000000,1)+1&'M', 
     if(len(max(Receipts))>3, floor(max(Receipts)/1000,1)+1&'k', 
     max(Receipts)+1)) &
    '&chxs=0,676767,9.5,0,l,676767' & //axis label style
    '&chs=325x120' &  //chart size
    '&cht=bvs' &  //chart type = bar chart
    '&chco=0000FF' & //riser colors
    '&chds=' & if(len(min(Receipts))>6, floor(min(Receipts),100000)-100000, 
      if(len(min(Receipts))>3, floor(min(Receipts), 1000)-1000, 
     min(Receipts)-1)) & 
      ',' & 
      if(len(max(Receipts))>6, floor(max(Receipts),100000)+100000, 
     if(len(max(Receipts))>3, floor(max(Receipts), 1000)+1000, 
      max(Receipts)+1)) &  //axis scale
    '&chd=t:' &  sum({$<LongMonth = {"January"}>} Receipts) & ',' &
       sum({$<LongMonth = {"February"}>} Receipts) & ',' &
       sum({$<LongMonth = {"March"}>} Receipts) & ',' &
       sum({$<LongMonth = {"April"}>} Receipts) & ',' &
       sum({$<LongMonth = {"May"}>} Receipts) & ',' &
       sum({$<LongMonth = {"June"}>} Receipts) & ',' &
       sum({$<LongMonth = {"July"}>} Receipts) & ',' &
       sum({$<LongMonth = {"August"}>} Receipts) & ',' &
       sum({$<LongMonth = {"September"}>} Receipts) & ',' &
       sum({$<LongMonth = {"October"}>} Receipts) & ',' &
       sum({$<LongMonth = {"November"}>} Receipts) & ',' &
       sum({$<LongMonth = {"December"}>} Receipts) &  //riser labels
    '"/>

Streetview visualization 

<a>
  <img src=' & chr(39) & 'https://cbks1.google.com/cbk?output=thumbnail&cb_client=maps_sv&thumb=1&thumbfov=60&ll=' & 
    & ',' & longitude
    '&cbll=' & 
    latitude & ',' & longitude &
    '&thumbpegman=0&w=318&h=120' & chr(39) & '>
</a>

Assemble the code for each tab

In this part, we'll put a <div> with a unique id, and a <table> around each tab, create two <a> links inside table rows that will handle the JavaScript necessary to hide/show the tabs.

NOTE: The ids given as arguments inside the hideDiv() and showDiv() functions must match the ids set to each <div>.

Assemble the barchart visualization 

<div id = "barChartBubble">
  <br>    
  <table style="width:380px;">
   <tbody>   
    <tr>
     <td rowspan="3" style="width:25px;">
      <a onclick="hideDiv(' & chr(39) & 'barChartBubble' & chr(39) & '); 
         showDiv(' & chr(39) & 'streetViewBubble' & chr(39) & ');">
       <img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikMaps_For_MQ_Points/back.png" /> 
      </a>
     </td>
     
     <td colspan="3" style="text-align:center;"><b>Monthly Revenue</b></td>
     
     <td rowspan="3" style="width:25px; text-align:right;">
      <a onclick="hideDiv(' & chr(39) & 'barChartBubble' & chr(39) & '); 
         showDiv(' & chr(39) & 'streetViewBubble' & chr(39) & ');">
       <img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikMaps_For_MQ_Points/forward.png" /> 
      </a>
     </td>
    </tr>
    
    <tr>
     <td style="text-align:right;">

     [BARCHART VISUALIZATION HERE]

     </td>
    </tr>
   </tbody>
  </table>
  <br>
 </div>

Assemble the streetview visualization 

 <div id="streetViewBubble" style="display:none">
  <br>
  <table style="width:380px;">
   <tbody>   
    <tr>
     <td style="width:25px;">
      <a onclick="showDiv(' & chr(39) & 'barChartBubble' & chr(39) & '); 
         hideDiv(' & chr(39) & 'streetViewBubble' & chr(39) & ');">
       <img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikMaps_For_MQ_Points/back.png" /> 
      </a>
     </td>
     
     <td>
      
     [STREETVIEW VISUALIZATION HERE]

     </td>
     
     <td style="width:25px; text-align:right;">
      <a onclick="showDiv(' & chr(39) & 'barChartBubble' & chr(39) & '); 
         hideDiv(' & chr(39) & 'streetViewBubble' & chr(39) & ');">
       <img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikMaps_For_MQ_Points/forward.png" /> 
      </a>
     </td>
     
    </tr>
   </tbody>
  </table>
  <br>
  </div>

Assemble the whole code

In this step, we'll set the font, put the header table on top of the popup so it displays above either tab, and set the

Finished popup code 

<font face="Arial" size="-1">

 <table width="380">
  <tbody>
   <tr>
    <td style="text-align:center; font-size:18px;"><b>' & [Trade Name] & '</b></td>
   </tr>
   
   <tr>
    <td style="text-align:center;"> <b>Sales</b>: ' & num(sum(Receipts), '$#,###.') & '</td>
   </tr>
  </tbody>
 </table>
  
 <div id = "barChartBubble">
  <br>    
  <table style="width:380px;">
   <tbody>   
    <tr>
     <td rowspan="3" style="width:25px;">
      <a onclick="hideDiv(' & chr(39) & 'barChartBubble' & chr(39) & '); 
         showDiv(' & chr(39) & 'streetViewBubble' & chr(39) & ');">
       <img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikMaps_For_MQ_Points/back.png" /> 
      </a>
     </td>
     
     <td colspan="3" style="text-align:center;"><b>Monthly Revenue</b></td>
     
     <td rowspan="3" style="width:25px; text-align:right;">
      <a onclick="hideDiv(' & chr(39) & 'barChartBubble' & chr(39) & '); 
         showDiv(' & chr(39) & 'streetViewBubble' & chr(39) & ');">
       <img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikMaps_For_MQ_Points/forward.png" /> 
      </a>
     </td>
    </tr>
    
    <tr>
     <td style="text-align:right;">
        <img src="http://chart.apis.google.com/chart' &
          '?chbh=a' &  //bar width
          '&chxr=0,10,100' &  //axis ranges
          '&chxt=x,y' &  //visible axes
          '&chxl=0:|J|F|M|A|M|J|J|A|S|O|N|D|1:|' &  //axis labels
         if(len(min(Receipts))>6, floor(min(Receipts)/1000000,1)-1&'M', 
           if(len(min(Receipts))>3, floor(min(Receipts)/1000,1)-1&'k', 
           max(Receipts)-1)) &
               '|' & 
            if(len(max(Receipts))>6, floor(max(Receipts)/1000000,1)+1&'M', 
           if(len(max(Receipts))>3, floor(max(Receipts)/1000,1)+1&'k', 
           max(Receipts)+1)) &
          '&chxs=0,676767,9.5,0,l,676767' & //axis label style
          '&chs=325x120' &  //chart size
          '&cht=bvs' &  //chart type = bar chart
          '&chco=0000FF' & //riser colors
          '&chds=' & if(len(min(Receipts))>6, floor(min(Receipts),100000)-100000, 
            if(len(min(Receipts))>3, floor(min(Receipts), 1000)-1000, 
           min(Receipts)-1)) & 
            ',' & 
            if(len(max(Receipts))>6, floor(max(Receipts),100000)+100000, 
           if(len(max(Receipts))>3, floor(max(Receipts), 1000)+1000, 
            max(Receipts)+1)) &  //axis scale
          '&chd=t:' &  sum({$<LongMonth = {"January"}>} Receipts) & ',' &
             sum({$<LongMonth = {"February"}>} Receipts) & ',' &
             sum({$<LongMonth = {"March"}>} Receipts) & ',' &
             sum({$<LongMonth = {"April"}>} Receipts) & ',' &
             sum({$<LongMonth = {"May"}>} Receipts) & ',' &
             sum({$<LongMonth = {"June"}>} Receipts) & ',' &
             sum({$<LongMonth = {"July"}>} Receipts) & ',' &
             sum({$<LongMonth = {"August"}>} Receipts) & ',' &
             sum({$<LongMonth = {"September"}>} Receipts) & ',' &
             sum({$<LongMonth = {"October"}>} Receipts) & ',' &
             sum({$<LongMonth = {"November"}>} Receipts) & ',' &
             sum({$<LongMonth = {"December"}>} Receipts) &  //riser labels
          '"/>
     </td>
    </tr>
   </tbody>
  </table>
  <br>
 </div>

 <div id="streetViewBubble" style="display:none">
  <br>
  <table style="width:380px;">
   <tbody>   
    <tr>
     <td style="width:25px;">
      <a onclick="showDiv(' & chr(39) & 'barChartBubble' & chr(39) & '); 
         hideDiv(' & chr(39) & 'streetViewBubble' & chr(39) & ');">
       <img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikMaps_For_Google_Points/back.png" /> 
      </a>
     </td>
     
     <td>
      <a><img src=' & chr(39) & 'https://cbks1.google.com/cbk?output=thumbnail&cb_client=maps_sv&thumb=1&thumbfov=60&ll=' & 
          latitude & ',' & longitude &
             '&cbll=' & 
             latitude & ',' & longitude &
             '&thumbpegman=0&w=318&h=120' & chr(39) & '></a><BR> 
     </td>
     
     <td style="width:25px; text-align:right;">
      <a onclick="showDiv(' & chr(39) & 'barChartBubble' & chr(39) & '); 
         hideDiv(' & chr(39) & 'streetViewBubble' & chr(39) & ');">
       <img src="/QvAjaxZfc/QvsViewClient.aspx?public=only&name=Extensions/QlikMaps_For_Google_Points/forward.png" /> 
      </a>
     </td>
     
    </tr>
   </tbody>
  </table>
  <br>
  </div>
  
</font>'