How to hook in Spotfire calculated value with Javascript

[Michael Kalada 2]

We have the simple javascript below, which creates a nice little animated circle graph. How do I get it to read a Spotfire calculated value instead of having the hard coded value of 45 Sample dxp attached in version X. I think this is the hurdle for many of us in using D3/JSViz

 

--Javascript

var myCircle = Circles.create({

id: 'circles-1',

radius: 60,

value: 45,

maxValue: 100,

width: 10,

text: function(value){return value + '%';},

colors: ['#D3B6C6', '#4B253A'],

duration: 400,

wrpClass: 'circles-wrp',

textClass: 'circles-text',

valueStrokeClass: 'circles-valueStroke',

maxValueStrokeClass: 'circles-maxValueStroke',

styleWrapper: true,

styleText: true

});

[Michael Kalada 2]

update: From here https://support.tibco.com/s/article/Tibco-KnowledgeArticle-Article-45505 we figured out how to reference a label/dropdown/input field doc property (Javascript below) but still no info on a Calculated Value--JSvar labelVal = $("#myValue").text()var myCircle = Circles.create({  id:                  'circles-1',

  radius:              60,

  value:               labelVal,

  maxValue:            100,

  width:               10,

  text:                function(value){return value + '%';},

  colors:              ['#D3B6C6', '#4B253A'],

  duration:            400,

  wrpClass:            'circles-wrp',

  textClass:           'circles-text',

  valueStrokeClass:    'circles-valueStroke',

  maxValueStrokeClass: 'circles-maxValueStroke',

  styleWrapper:        true,

  styleText:           true

});

[Shandilya Peddi]

You can wrap the Spotfire Calculate value like below

 

and then access the value as below in javascript

 

value=$("#calcVal").text().trim()

[Michael Kalada 2]

Thanks for the reply, but that doesnt seem to be working.  Still just get a zero displayed. with HTML as <div class="circle" id="circles-2"><span id="myValue2"><SpotfireControl id="e68e725f7b5c421c972480e40a310502" /></span></div> and with Javascript as var labelVal = $("#myValue2").text().trim()var myCircle = Circles.create({  id:                  'circles-2',

  radius:              60,

  value:               labelVal,

  maxValue:            100,

  width:               15,

  text:                function(value){return value + '%';},

  colors:              ['#F98866', '#80BD9E'],

  duration:            1200,

  wrpClass:            'circles-wrp',

  textClass:           'circles-text',

  valueStrokeClass:    'circles-valueStroke',

  maxValueStrokeClass: 'circles-maxValueStroke',

  styleWrapper:        true,

  styleText:           true

});

[Shandilya Peddi]

I tried with the previously attached dxp and it seems to be working with the suggested work flow. The only thing i changes is on the left text area the calculated value expression is Sum([Dogs]) where in the right text area it is Max([Dogs]).  After making both calculated fields to use same expression i can see the result.

 

Also the calculated value changes but the value in circle is not changing. unless you make some change to the html and save it again.

 

Can you add a sample analysis that you are currently working on 

[Michael Kalada 2]

Again, thanks so much for the help.  Updated copy uploaded ("circles_1.dxp") along with a screenshot of what I see when I try your method.  If we can get this working I'll write a wiki so people can use this visualization

 

Let me know if the newly uploaded copy works for you, perhaps its related to my companys settings or HTML sanitation or something

[Shandilya Peddi]

Thanks for the Dxp, i was able to figure out the issue. In the HTML you mentioned the id as "calcval" and in the Java Script we are using the id as "calcVal". 

 

Changing this to "calcval" in JS has fixed the issue. Please give it a try and let me know in case of any issues

[Michael Kalada 2]

wishing it were that simple.  Fixed them both to say calcval, still not working on my end.  Made sure to add some text at the end of the html to make it refresh, still nothing.

 

Any chance it has to do with security settings or something

[Shandilya Peddi]

I made that change and it worked on my end. I don't think this because of HTML sanitation as we are not using any unsupported html here.

 

Can you add a alert statement in the JS and see if it reading the calculated value or not

[Colin Gray 3]

Hi there,

The issue I think is that calculated values are actually rendered inside multiple html tags. So you have to use jQuery to grab the value from within these tags. This code works:

var value=$('div#jsVal span span.EmbeddedMiniatureVisualization span').text().trim();

Note that I have changed the calcval to be jsVal and a div instead of a span in my example:

Then you should see the value appear in the alert and the js visual update. Note that this is in Spotfire 10. Spotfire 7 may not use the same HTML styles/tags. I found these tags by using the developer tools to interrogate the HTML being rendered. However, the issue you get is that when a DXP opens, the Javascript code runs before the calculated value is rendered. This means it does not pick up the value. So you would have to monitor the calculated value for changes. I do this in javascript with code like:

// bind marked image so we know when marking changes

$("#jsVal").bind('DOMSubtreeModified',function(){

// Do something here - you want to trigger updating your js chart here somehow

});Or you can use TERR, or Python script to run when this value changes and force and update to the text area.

This should also mean that when the calculated value changes in Spotfire, the chart would update also.

Note that grabbing html tags that are rendered by Spotfire always carries a (small) risk that if Spotfire is updated and changes its method of rendering calculated values, you will have to adjust your code to work again.

Thanks

Colin

[Gerco ten Kate]

I sort of feel like I cracked a code here:

when running vanilla JS script on the same text area I noticed that when fetching the innerHTML from the selected div there is a class specifying the calculated value element is busy

https://support.tibco.com/s/article/How-to-access-Text-Area-Document-Property-control-values-using-Java-Script-JQuery does not list a vanilla solution for a calculated value.

My HTML from text area is:

<div id='search-values' style="display:block"><SpotfireControl id="f6b8b232b982442a88d87861e820ffae" /></div>

my JS on the same text area

var searchTitles = document.getElementById('search-values');let allTitles = searchTitles.querySelectorAll(':scope > span');let lastListItem = allTitles[allTitles.length - 1]console.log(lastListItem.innerHTML)

returns:

<span id="15343871-09ff-41ae-95aa-1bac17182b49" viewid="15343871-09ff-41ae-95aa-1bac17182b49" class="EmbeddedMiniatureVisualization sfc-busy-mini-vis" sf-busy="true" style="position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;"></span>

when calling the JS code from the developer tools on the document at rest. the following result appeared.

so adding the same to another text area got me the necessary.

<span id="15343871-09ff-41ae-95aa-1bac17182b49" viewid="15343871-09ff-41ae-95aa-1bac17182b49" class="EmbeddedMiniatureVisualization" sf-busy="false" style="position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;"><span style="color: rgb(97, 100, 107); text-align: left;">["Badlands","Born In The Usa","Born To Run","Brilliant Disguise","Dancing In The Dark","Fire (Live)","Glory Days","Human Touch","Hungry Heart","I'm On Fire","Jungleland","Meeting Across The River","My Hometown","Secret Garden","Streets Of Philadelphia","The Rising","The River","Thunder Road","Tougher Than The Rest","Trapped (Live)","Waiting On A Sunny Day","Working On A Dream"]</span></span>

Note: This code does not work when reloading the page, so for now it will be a manual operation