Show visual inside a popup

By using the JavaScript Popup and the JavaScript eCharts for Spotfire, you can create a hidden visual inside  a popup.

.Just make sure the container of the visual matches the expected size of your popup:

<div id="container" style="height: 500px;width:500px"></div>

Here is the complete code

html

<div id="myPopup" class="JSPopup">
  <div>Show Pop-Visual</div>
  <div>This is popup A</div>
  <div>

    <pre id="observed" hidden>
  <span class="xaxis" >Jan ,Feb, Mar, Apr, May, Jun</span>
  <span  class="yaxis" style="name:Finance;type:bar;stack:x;yAxisIndex:0">
    Apr:33, Feb:132, Jan:85, Jun:58, Mar:71, May:75
  </span>
  <span class="yaxis" style="name:Legal;type:bar;stack:x;yAxisIndex:0" >
    Apr:8, Feb:29, Jan:56, Jun:16, Mar:19, May:19
  </span>
  <span class="yaxis" style="name:Marketing;type:line;stack:y;yAxisIndex:1" >
    Apr:248, Jan:312, Jun:302, Mar:245, May:225
  </span>
</pre>
    <div id="container" style="height: 500px;width:500px"></div>

  </div>
</div>

and add these 3 js files to a text area

• visual.js
• popup.js
• echarts-min.js

To link the data with Spotfire, checkout the eCharts for Spotfire article

More JavaScript tips and tricks here