Create a Custom KPI in Spotfire using jQuery

Are you looking to spice up your Spotfire dashboard with a custom KPI? One easy way to do this is to utilize value boxes in your dashboard. Value boxes allow you to display numeric or text values from Spotfire dynamic items or property controls. These are not only a great way to improve the visual quality of your dashboard, but also a great way to highlight important summary information for your users. Although you can get creative with your value boxes, we will focus on creating a basic one. Note that Spotfire does not have a specific value box element that we can use out of the box. Instead, we will utilize text areas in a creative way to achieve the desired result.

Below is the process to create a simple value box for displaying a calculated average:

  1. Insert a text area.

  2. Size and position the text area in the desired location.

  3. Navigate to the text area properties, and un-check “Show title bar”.

  4. Close the Text Area Properties window.
  5. Right click the text area and select “Edit Text Area”. Click the Background Color icon and select the desired background color.

  6. Click the “Insert Dynamic Item” icon and select “Calculated column”.

  7. In the “Calculated Value Settings” window, name your calculated value, select the appropriate data table, and select the appropriate formatting for your value in the first three sections.

  8. In the Values section, select the field and aggregation you want. In our case, we select oil and average for aggregation.

  9. Click OK, then exit the “Edit Text Area” window making sure that you save your changes.

  10. Right click the text area again and select “Edit HTML”.

  11. You should see the Spotfire control tag for your calculated value as shown below.

  12. If you are familiar with HTML, CSS, and JavaScript you can customize your text box as you choose. If you are not, you can copy and paste the script below and modify it to fit your needs.

<style>
.TxtBxNumFormat {
text-align: center;
font-family: Calibri;
font-weight: bold;
font-size: 45px;
padding-top:25px;
color: white;
}
.TxtFormat {
text-align: center;
font-family: Calibri;
font-weight: bold;
font-size: 35px;
padding-top:1px;
color: white;
}
<div id="calcOut" class="TxtBxNumFormat"><span style="color: black;"><strong>
</strong></span></span></span></span></span></span></span></span></span></span></span></p>
<p style="background: white;"><span style="color: blue; font-family: Courier New; font-size: 10pt;"></div><span style="color: black;"><strong>
</strong></span></span></p>
<p style="background: white;"><span style="color: blue; font-family: Courier New; font-size: 10pt;"><div<span style="color: black;">
<span style="color: red;">class<span style="color: black;">=<span style="color: #8000ff;"><strong>"TxtFormat"</strong><span style="color: blue;">><span style="color: black;"><strong>
</strong></span></span></span></span></span></span></span></p>
<p style="background: white;"><span style="color: black; font-family: Courier New; font-size: 10pt;"><strong>Avg Oil (bbls)
</strong></span></p>
<p style="background: white;"><span style="color: blue; font-family: Courier New; font-size: 10pt;"></div><span style="color: black;"><strong>
</strong></span></span></p>
<p style="background: white;"><span style="color: blue; font-family: Courier New; font-size: 10pt;"><div<span style="color: black;">
<span style="color: red;">style<span style="color: black;">=<span style="color: #8000ff;"><strong>"display:none"</strong><span style="color: black;">
<span style="color: red;">id<span style="color: black;">=<span style="color: #8000ff;"><strong>"calcValue"</strong><span style="color: blue;">><span style="color: black;"><strong>
</strong></span></span></span></span></span></span></span></span></span></span></span></p>
<p style="background: white;"><span style="color: black; font-family: Courier New; font-size: 10pt;"><SpotfireControl id="c023d2d01c824bfeb8cd4b7ed771544e" /><strong>
</strong></span></p>
<p style="background: white;"><span style="color: blue; font-family: Courier New; font-size: 10pt;"></div><span style="color: black;"><strong>
</strong></span></span></p>
<p style="background: white;"><span style="color: blue; font-family: Courier New; font-size: 10pt;"><script><span style="color: black;">
</span></span></p>
<p style="background: white;"><span style="color: black; font-family: Courier New; font-size: 10pt;">$<span style="background-color: #f2f4ff;"><strong>(</strong><span style="color: gray;">"#calcValue"<span style="color: black;"><strong>).</strong>bind<strong>(</strong><span style="color: gray;">"DOMSubtreeModified"<span style="color: black;"><strong>,</strong>
</span></span></span></span></span></span></p>
<p style="background: white;"><span style="color: black; font-family: Courier New; font-size: 10pt; background-color: #f2f4ff;">
<span style="color: navy;"><strong><em>function</em><span style="color: black;">()</span></strong>
<span style="color: black;"><strong>{</strong>
</span></span></span></p>
<p style="background: white;"><span style="color: black; font-family: Courier New; font-size: 10pt; background-color: #f2f4ff;"> $<strong>(</strong><span style="color: gray;">"#calcOut"<span style="color: black;"><strong>).</strong>text<strong>(</strong>$<strong>(</strong><span style="color: gray;">"#calcValue"<span style="color: black;"><strong>).</strong>text<strong>());</strong></span></span></span></span></span><span style="color: black; font-family: Courier New; font-size: 10pt; background-color: #f2f4ff;">
<strong>}</strong>
</span></p>
<p style="background: white;"><span style="color: black; font-family: Courier New; font-size: 10pt; background-color: #f2f4ff;"><strong>);</strong>
</span></p>
<span style="color: blue; font-family: Courier New; font-size: 10pt;"></script>

 

  1. Copy/paste the script from above into the “Edit HTML” window and replace the Spotfire Control id tag with your tag and change the text label to be displayed below the value. Note that you can also modify the calculated value and label format where shown below.

  • This is all that you will need to have a functional value box. Our final AVG Oil value box is shown below along with some additional value boxes.

 

  • It is important to note that if you need to use multiple value boxes in the same dashboard you will need to assign unique names to the “calcOut” and “calcValue” tags (e.g. change to “calcOut2” and “calcValue2”). These changes would have to be made in the script where indicated below.

 

I hope that you find this useful. Good luck working on your dashboards! If you have any questions, feel free to comment below.

One thought on “Create a Custom KPI in Spotfire using jQuery

  1. Hi. Thanks for sharing ideas like this, but this has been unnecessarily overcomplicated. It can be much simpler than this! No need for JavaScript at all, at least not in your example. You can format the calculated value directly, so the part where you use JavaScript to subscribe to changes in the calc value just to put into a div so you can format it is not needed. Also in most environments HTML Sanitizer is enabled by default (in Spotfire Cloud you can’t even disable it) so HTML tags like style and script won’t be accepted. There is a workaround for that but for simple things like this, inline styles are usually sufficient. Regardless of all these, keep blogging, I have many ideas to share and blog about myself too, I just struggle to find the time to do so 🙂

Leave a Comment

Your email address will not be published. Required fields are marked *