Hi again,

in this third part of my plugin series, I want to take a look at some visualization stuff. Mainly, I had to come up with some display options to show numbers in a certain context to the user. In this case, I had to display sentiment values for s specific text coming from IBM Watson Natural Language Services.This service gives you (besides other content) a sentiment value from -10 (very negative) to +10 (very positive). +


PLEASE NOTE: I AM FOCUSSING ON THE XPAGES PART HERE ! I WILL *NOT* DESCRIBE THE HANDLING OF THE WATSON SERVICE CALLS HERE ! If you are interested in those, sound of in the comments or give me a shout.


In the details analytics component for the text entered, I wanted to give the user the option to quickly see the result on a scale display like this:


Image:My XPages Plugin Series: Volume 3: ion Rangeslider and jQuery Knob

This is the first part, we are going to look into in this part of the series.


The 2nd part is sort of a dashboard feedback for multiple text elements to quickly grasp the feedback coming from IBM Watson. This is something like this:


Image:My XPages Plugin Series: Volume 3: ion Rangeslider and jQuery Knob


This control renders parts of the text and creates some value circles to display the return values from IBM Watson about that text.


The two plugins I use for that are:

ion Rangeslider:
http://ionden.com/a/plugins/ion.rangeSlider/en.html
and jQuery Knob:
http://anthonyterrien.com/demo/knob/

As usual, these get loaded as a HEAD-Tag in my XPages:



<
xp:headTag tagName="script">
   
<xp:this.attributes>
           
<xp:parameter name="type" value="text/javascript" />
           
<xp:parameter name="src"value="js/plugins/ionRangeSlider/ion.rangeSlider.min.js" />
           
</xp:this.attributes>
</
xp:headTag>
<
xp:headTag tagName="script">
   
<xp:this.attributes>
           
<xp:parameter name="type" value="text/javascript" />
           
<xp:parameter name="src"value="js/plugins/jsKnob/jquery.knob.js" />
           
</xp:this.attributes>
</
xp:headTag>

Within the XPage, I will display the value of the slider using a Session Scope variable. Other ways are possible as well, of course. The code to render the slider looks like this:


<
div class="col-md-12">
   
<p>
           
<span>
                   
<i class="fa fa-sliders"></i>
                   
&#160;What's the sentiment of this message ?
           
</span>
           
<div class="ibox-content">
                   
<div class="m-b-sm m-t">
                             
<small ><strong>Sentiment value:</strong> from -10 (negative) via 0 (neutral)&#160;to +10 (positive) </small>
             
</div>
                     
<div id="ionrange_3"></div>
                                                                   
           
</div>
           
<xp:inputText id="inputSentiment" styleClass="inputSentiment"
value
="#{sessionScope.Sentiment}" style="display:none">
           <
/xp:inputText>
   
</p>
</
div>

The value is located in a hidden field (display.none), the DIV ionrange_3 contains the slider. To complete the slider component, we will have to initialize it in the document.ready() function, this will initialize the knob controls as well:


<!-- Script Blocks for jQuery -->

<
xp:scriptBlock id="scriptBlock1">
   
<xp:this.value><![CDATA[$(document).ready(function(){
         $("#ionrange_3").ionRangeSlider({

       min: -10,

       max: 10,

       from: sval,

       prettify: false,

       hasGrid: true

   });

   $(".dial").knob();

});
]]></xp:this.value>
</
xp:scriptBlock>

As you can see, ionRangeSlider offers various parameters to play around with, just take a peek on the website above.

Now, let's take a look at the knob part, the following code snippet defines the knob control. I create the complete control as a computed text and the item gets rendered at runtime in the browser.



<
div class="m-r-md inline">
     
<xp:text escape="false"        disableTheme="true">
     
<xp:this.value><![CDATA[#{javascript:var         value=myDemoBean.getSentiment();
     var back ="<input type=\"text\" value="+value+" readonly class=\"dial m-r\" data-fgColor=\"#5367CE\" data-width=\"85\" data-height=\"85\" data-step=\"1\" data-min=\"-10\" data-max=\"10\" data-displayPrevious=true>";

     return back;}
]]></xp:this.value>
</
xp:text>
     <
div class="m-b-sm m-t">
             
<small ><strong>Sentiment: (-10 to +10) ?</strong></small>
   
</div>
</
div>


The base element to identify the input type as a dial knob is the class element "dial m-r". I don't want to change the values displayed so the input tag is readonly. My next job is to move this control in a custom control and add  parameters like the Min/Max values, Step size, etc..
The value to display is coming from a java bean.

As described, both plugins give you a huge set of parameters to play around with. One of the next parts of this series will be about using these controls for data input and how to persist the values in a bean or a domino document.

So far for today, happy coding !


Heiko.
Heiko Voigt   |   14 November 2017 10:08:24   |    Domino  XPages  jQuery  Bootstrap    |  
  |   Next Document   |   Previous Document

Discussion for this entry is now closed.

Comments (0)

No Comments Found