Introduction

If you are still waiting for TIBCO Spotfire Mods and do not have Spotfire 11 or higher, here is a way to create custom visualization on Text Areas.

In this example, we are creating a combination chart with stacked bars from echarts on the below visualization compared to a Spotfire Combination chart. To produce the same chart, use the Sales and Marketing sample analysis that comes with Spotfire, but the concept is the same.

Example

1. Create a Text Area and add the following HTML code and save.

   <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: 100%"></div>

    

2. Copy the code from echarts.5.3.3.min.js and paste it onto a new Spotfire JavaScript

3. Add this other JavaScript code as a new eChartTest.js file:

   //script parameters
   dataDiv = "observed"
   chartDiv = "container"
   
   //chart options
   options = {
    tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},
    legend: {},
    xAxis: [{type: 'category'}],
    yAxis: [{
        type: 'value',
        position:'right',
        name:"scale 1"
      },{
        type: 'value',
        position:'left',
        name:'scale 2'
      }]
   };
   
   var dom = document.getElementById(chartDiv);
   var myChart = echarts.init(dom, null, {
     renderer: 'svg',
     useDirtyRect: false
   });
   
   var app = {};
   var option;
   
   if (options && typeof options === 'object') {
     myChart.setOption(options);
   }
   
   //monitor input changes (connect data with chart dirven by calculated values)
   var observed = document.getElementById(dataDiv)
   var trigger = function(){
     xData = observed.querySelector(".xaxis").innerText.split(", ") 
     yAttr = {} 
     series=[]
     yAxis = [...observed.querySelectorAll(".yaxis")].forEach((aYAxis) => {
      yDatum={}
      aYAxis.innerText.split(", ").forEach(p=>{
         y=p.split(":");
         yDatum[y[0].trim()]=y[1].trim()
      })
   
      yData = xData.map((c,i)=>{return yDatum[xData[i]]})
      aYAxis.getAttribute("style").split(";").forEach(p=>{
          y=p.split(":");
          yAttr[y[0].trim()]=y[1].trim()
      })
      yAttr.data = yData
      series.push({...yAttr})
     })  
   
     let newOptions = {xAxis:[{data:xData}],series: series}
     myChart.setOption(newOptions)
   }
    
   mutationObserver = new MutationObserver(trigger)
   mutationObserver.observe( observed , {attributes:!true, subtree: true, childList: true} );
   
   trigger(); //comment if you continue with step 4

    

4. To make the chart respond to marking from other visuals or filters, replace the hard coded values from step 1 with a Calculated Values to produce the same output. Example of calculated value:

    

   for x axis:

    UniqueConcatenate([Month])

    

   for y axis

    UniqueConcatenate([Month]&":"&count() over  (Intersect([Department],[Month])))

    

Your text area should look like this

Each calculated column for each Y axis can be filtered with the limit data using expression and must have no formatting. If your column renders like $123,345.78 or $132K you have to change the formatting to number for the parser to work properly: 123456.78 instead of 123,456.778 or $123,456.78 or 123K

You can add as many series as you want by adding them on the text area. The style attribute is used to configure the series settings. The documentation on how to change these settings can be found here (just expand the series node). Try changing the type from bar to line or even to pie, gauge, scatter and see what happens. Change the  yAxisIndex from 0 to 1 or viceversa to swap the corresponding y axis label. The stack attribute allows you to stack the bars together or not. Just pick a random name to group them. 

Feel free to also change the chart options from the echartTest.js script and explore changing the label names and other settings