Flot - Get Your Ticks Rotated With Flot-Tickrotor

Once again this blog post is some simple but useful feature that I came across while playing out with Flot.

Problem
Have you ever got into trouble by your x-axis ticks overlapping on each other as you have many to be occupied within a small place-holder or because ticks are too long? It will make your chart look like a mess. 

Solution

As a workaround you can increase the width of your place-holder. But you will face into trouble if your place-holder has already occupied the full length of your page or your place-holder size is fixed and you don't have control over it.

Best possible solution

Probably you might have thought of rotating them in some angle to get this solved so that the visibility of the ticks get improved. Yes, that is the best possible solution that one can think of. Rotate the x-axis ticks !!!

So in this blog post I will explain how you can rotate your ticks or in other words display your ticks in some preferred angle.

It is just simple three step process.

1. Clone Flot-Tickrotor from here and place the jquery.flot.tickrotor.js along with other flot plugins.

2. Import the script file in your chart file as follows. 

   
     <script language="javascript" src="lib/jquery.flot.tickrotor.js" type="text/javascript"></script>

          

IMPORTANT :
If you are using jquery.flot.axislabels.js then make sure that you place your jquery.flot.tickrotor.js before the jquery.flot.axislabels.js. Because jquery.flot.tickrotor.js completely redefines X-axis label height and then jquery.flot.axislabels.js modifies it.

3. In the options section of the xaxis specify the angle that you need to get your ticks rotated as rotateTicks.

                xaxis: {
                        axisLabel: 'Application',
                          ticks: ticks,
                        -------------------------
                        < your other x-axis options goes here >
                        -------------------------
                        rotateTicks: 135
               }

We are ready to go !!! Now our x-axis ticks have rotated with an angle of 135 degrees.

IMPORTANT :
You need to use the jquery.flot.js file from the flot-branch master as there is some bug fixed done in the master, related to ticks rotation.

If not, you will end up with your ticks getting repeated as shown in the below image.

You can find the full sample code of the above graph here .

Acknowledgement
- Thanks Mark Cote for the flot plugin to get the ticks rotated.

Inter Gadget Communication with WSO2 UES

The main objective of this blog post is to explain how to implement inter-gadget communication with WSO2 User Engagement Server (UES). 

Inter - Gadget Communication

Inter-gadget communication that we are talking here is the capability of one gadget to talk with some other gadget. In simple words "is Gadget A capable of sending some data to Gadget B" and "is Gadget B capable of updating itself with the received data". The message paradigm that is used underneath is the publisher - subscriber model.

Publisher - Subscriber Model

As shown in the image given below, publisher publishes the message to a channel and subscribers listen to that channel. Upon a new message in the channel by the publisher, subscribers fetch the message and update their selves accordingly.

In a complex scenario, there can be one publisher publishing to multiple channels and also number of subscribers listening to multiple channels. 

The role of WSO2 User Engagement Server is to act as the Message Broker in this paradigm.

Implementation

I will explain the implementation of this publisher - subscriber (pub-sub) model with a simple example scenario.

Let's say publisher-gadget publishes a random number to a channel and that random number will be shown up in the subscriber-gadget each time that publisher-gadget will publish.

Gadgets usually communicate with the gadget-container via features and those features are declared in the the ModulPrefs section of gadget.xml file.

Gadgets convey their interest to either publish or subscribe to a channel via the gadgets.Hub.* API. Therefore the feature titled "pubsub-2" needs to be imported in-order to load the necessary API fragments . As I mentioned earlier this feature can be declared in the ModulePrefs section of our gadget.

OK. Now let's make our hands dirty with the sample that I described earlier.

Hint : Once we are done with the implementation we will have two gadgets with the following folder/file structure.

Publisher Gadget
Let's see how we can declare this in the publisher - gadget.xml file.

       <Require feature="pubsub-2">
                <Param name="topics">
                          <![CDATA[
                               <Topic title="randomNumber name="my-channel" publish="true"/>
                          ]]>
               </Param>
      </Require>

Pay attention to the sections I have marked in red in the above code snippet.  Feature that we have to import is pubsub-2. And my-channel is the channel that the publisher wishes to publish into. To indicate that this is the publisher gadget we have set publish="true".

In the sample that I'm going to describe in this post, when somebody clicks the button named "Publish a random number" in the publisher gadget, a random number will be published to my-channel. So let's have a button declared in our gadget.xml file.

         <div>
              <input type="button" value="Publish a random number" onclick="publish()"/>
         </div>

The function call that will be triggered by this button click is publish() and we define it in the js file of our publisher - gadget. (in publisher-gadget.js)

          function publish() {
               var message = Math.random();
               gadgets.Hub.publish("my-channel", message);
               document.getElementById("output").innerHTML = "Number that is published to the channel : " + message;
        }

Once again pay your attention to the red line which says publish the random number to my-channel which we declared in the ModulePrefs section.

Subscriber Gadget
As we did in the publisher gadget, we need to import the pubsub-2 feature and declare this gadget as a subscriber gadget in the subscriber-gadget.xml file.

          <Require feature="pubsub-2">
            <Param name="topics">
                <![CDATA[
<Topic title="randomNumber" name="my-channel"
description="Subscribes to random number channel" type="object"
subscribe="true"/>
]]>
            </Param>
        </Require>

And then let's have a simple div in the subscriber-gadget.xml file which we can use to set the fetched value from the publisher's channel.

          <div id="output"> </div>

After that we need to add the following snippet in the subscriber-gadget.js to activate the subscription to "my-channel" channel.

         gadgets.HubSettings.onConnect = function () {
                     gadgets.Hub.subscribe("my-channel", callback);
         };

The function that we want to invoke in the subscriber end, upon a message publishing by the publisher is written in the javascript callback function as follows which is also in the subscriber-gadget.js file.

         function callback(topic, obj, subscriberData) {
               document.getElementById("output").innerHTML = "Number that is fetched from the channel : " + obj;
         }

OK. We are done with the pub-sub implementation.

Finally what we need to do is add these two gadgets to a WSO2 UES dashboard and check out the functionality.

For that you can follow WSO2 UES documentation on how to create a gadget and how to add gadgets to dashboards.

Or else there is a bit hacky way also ;) (Not recommended. But if you want to check whether your two gadgets working fine, you can try this out.)

1. Copy your two gadgets in UES_HOME/repository/deployment/server/jaggeryapps/portal/gadgets/
2. Then create a dashboard (let's say our dashboard is pub-sub) using any two of the existing gadgets (NOT our two gadgets) in UES dashboard.
3. Open up UES_HOME/repository/deployment/server/jaggeryapps/pub-sub and open up the index.jag
4. Search for word .xml and you will find two of them.
5. Replace those two urls with the following and save the index.jag file.
             http://localhost:9763/portal/gadgets/publisher/publisher-gadget.xml
             http://localhost:9763/portal/gadgets/subscriber/subscriber-gadget.xml

So your index.jag will have two snippets as follows.

     <li class="layout_block " data-sizey="2" data-sizex="2" data-col="1" data-row="2" 
                data-url="http://localhost:9763/portal/gadgets/publisher/publisher-gadget.xml" 
                data-wid="5" data-prefs="{}" data-title="">

     <li class="layout_block " data-sizey="2" data-sizex="2" data-col="3" data-row="2"
                data-url="http://localhost:9763/portal/gadgets/subscriber/subscriber-gadget.xml" 
                data-wid="6" data-prefs="{}" data-title="">

6. And then access the dashboard as https://localhost:9443/pub-sub/
7. You'll see a dashboard as given in the below image.

8. Click on "Publish a random number" button in the publisher gadget and observe that the same number getting printed in the subscriber gadget as well.

9. Try clicking on the same button several times and observe the subscriber gadget updating its content accordingly.

You can download the complete code of the above two gadget from here.

Real World Scenario
Let's say we have a time slider as the publsiher gadget. Upon a time period selection on the slider, we need to display the number of builds per apps within that period in a seperate gadget. So the later gadget acts as the subscriber by listening to the time slider gadget's channel.

You can do whole lot of things with WSO2 UES pub-sub model :)
Enjoy !!!

Acknowledgement
- Thanks to the WSO2 Gadget Server ( currently deprecated )  documentation on pub-sub model.

How to Get Axis Labels in Flot Charts

Have you tried adding axis labels in to any type of Flot chart ? By default Flot does not support axis labels. But it is very easy to get the axis labels with the aid of a simple plugin. So let's see how we can get it done in 3 steps !!!

1. Git clone this repository and place the jquery.flot.axislabels.js inside the folder where you have other Flot related libraries or plugins.

                          git clone https://github.com/xuanluo/flot-axislabels.git

    2.  Import the script file in the Flot chart file as follows.

      <script language="javascript" type="text/javascript" src="../../jquery.flot.axislabels.js"></script>

    3. Pass the axis names and their formatting in the options section along with the other options of X-axis and Y-axis as in the below snippet.

                       xaxis: {

                     axisLabel: 'X',

                      axisLabelUseCanvas: true,

                      axisLabelFontSizePixels: 12,

        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',

        axisLabelPadding: 5

                 },

            yaxis: {

axisLabel: 'Sin(X)',

        axisLabelUseCanvas: true,

        axisLabelFontSizePixels: 12,

        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',

        axisLabelPadding: 5

               },

Now you can see the axis labels appearing in your chart as shown in the below image. 

We are done :) It is simple as that.

Have a look at the README section of the cloned repository  for more details. (Although I said a repository, it is just a single file )

You can refer the full sample code given below in-case if anything was unclear.

 
 
 
 
 
 
 
 



 

  

Axis Labels



  

   

Acknowledgement
[1] https://github.com/xuanluo/flot-axislabels

WSO2 ESB - Get-rid of Scientific Representation of Large Numbers When Message Transformed Through a XSLT Mediator

In this blog post I'm going to explain how to get-rid of the scientific representation ( ex: 2.2908408306E44 ) and get the non-scientific representation of the number when large numbers are mediated through the XSLT mediator. 

Problem

Following diagram explains the problem that I'm going to explain. Note that the large number that is sent across the mediator is derived from defined xpath and do some mediation logic to that particular number. (in this example multiplied by 55 ) The non-scientific number that we sent across the mediator has been converted in to a scientific number.

 When is this problematic ?

Assume that the number that is sent across the mediator is a customer ID. And the mediated customer ID will be sent through some other mediation logic or will be sent to a login portal. But that end will be expecting a non-scientific representation of the customer ID and this will result in a failure in that end.

Why is the large number represented in a scientific format ?

If you have used WSO2 ESB versions earlier to ESB 4.5.0, you might have noticed that this conversion does not happen. Reason behind this representation is from ESB 4.5.0 on-wards the XSLT engine that does the XSLT mediation has been replaced from xalan 2.7.0 to saxon. So saxon converts large numbers in to scientific representation.

How to reproduce the above scenario ?

I will explain how you can reproduce the above scenario using a sample proxy configuration with a sample XSLT style-sheet.

1. Start WSO2 ESB (tested in ESB 4.7.0) and create a proxy service using the following synapse configuration.

2. Go to Browse under Registry in the left pane and navigate to /_system/config/users/ and Click on Add Resource to add the given XSLT style-sheet (Add it as transform.xslt) and Save.

3. Go to back to Services list under Manage in the left pane and click on Try this service under testXSLT. (Our transoformation proxy service is testXSLT)

4. Use the following sample request to test out the behavior. And then click on Send.

<body>
   <customerDetail>
      <name>Tanya Madurapperuma</name>
      <id>416516514654651634984</id>
   </customerDetail>
</body>

5. Go and observe the logs that get printed on the ESB console. (Please note that in the given sample proxy configuration I have paid attention only to the message that is sent through the XSLT mediator and the message that is returned from the mediator but not about what is sent out from the out-sequence as this is just for reproducing the issue. )

In the sample proxy configuration I have set to log the message before it is sent through the mediator and the message after it is mediated by XSLT mediator.

Following are the logs that got printed in my console. Note I have marked the important parts of the log in red.

[2013-12-04 06:24:00,252]  INFO - LogMediator To: /services/testXSLT.testXSLTHttpSoap12Endpoint, WSAction: urn:mediate, SOAPAction: urn:mediate, MessageID: urn:uuid:61a7932a-1852-421b-b6f2-fbea95117e95, Direction: request, Envelope: <?xml version='1.0' encoding='utf-8'?><soapenv:Envelope xmlns:soapenv="http://www.w3.org/2003/05/soap-envelope"><soapenv:Body><customerDetail><name>Tanya Madurapperuma</name><id>416516514654651634984</id></customerDetail></soapenv:Body></soapenv:Envelope>

[2013-12-04 06:24:00,383]  INFO - LogMediator To: /services/testXSLT.testXSLTHttpSoap12Endpoint, WSAction: urn:mediate, SOAPAction: urn:mediate, MessageID: urn:uuid:61a7932a-1852-421b-b6f2-fbea95117e95, Direction: request, Envelope: <?xml version='1.0' encoding='utf-8'?><soapenv:Envelope xmlns:soapenv="http://www.w3.org/2003/05/soap-envelope"><soapenv:Body><id xmlns:cus="http://test.com" CUSTOMER_ID="2.2908408306005837E22"/></soapenv:Body></soapenv:Envelope>

Observe that id which was originally in non-scientific format is converted in to the scientific format once it is sent through the XSLT mediator.

How to get-rid of the scientific representation ?

Now let's look at how we can avoid our number getting converted to a scientific representation. There are two approaches that we can take in order to get this done.

Approach No 1
Change your XSLT style-sheet to get the number formatted back to non-scientific representation as in the following manner.

format-number($customerId * 55, "#")

You can edit your style-sheet as follows. Go to Browse under Registry and navigate to  /_system/config/users/transform.xslt and click on Edit as text and modify your XSLT style-sheet.

So at the end of the day your complete style-sheet will look as below.

Approach No 2
Replace the XSLT engine saxon with xalan.

Although this is not a recommended approach, you can get back the non-scientific representation by replacing the XSLT engine in WSO2 ESB with xalan.

For that download a WSO2 ESB version prior to 4.5.0. Then follow the below steps.

1. Go to ESB_HOME_4.7.0/lib/endorsed/ and back up saxon9he.jar and delete it.
2. Go to ESB_HOME_Prior_to_4.5.0/lib/endorsed/ and copy xalan-2.7.0.wso2v1.jar and paste in ESB_HOME_4.7.0/lib/endorsed/

And then try the transformation proxy with the same sample request.

So you logs will look like as follows once you have taken any of the above suggested approaches.

[2013-12-04 11:15:37,167]  INFO - LogMediator To: /services/testXSLT.testXSLTHttpSoap12Endpoint, WSAction: urn:mediate, SOAPAction: urn:mediate, MessageID: urn:uuid:5a9fbd26-b905-4e4e-894d-325e5881c50d, Direction: request, Envelope: <?xml version='1.0' encoding='utf-8'?><soapenv:Envelope xmlns:soapenv="http://www.w3.org/2003/05/soap-envelope"><soapenv:Body><customerDetail><name>Megan Aguilar</name><id>416516514654651634984</id></customerDetail></soapenv:Body></soapenv:Envelope>

[2013-12-04 11:15:37,171]  INFO - LogMediator To: /services/testXSLT.testXSLTHttpSoap12Endpoint, WSAction: urn:mediate, SOAPAction: urn:mediate, MessageID: urn:uuid:5a9fbd26-b905-4e4e-894d-325e5881c50d, Direction: request, Envelope: <?xml version='1.0' encoding='utf-8'?><soapenv:Envelope xmlns:soapenv="http://www.w3.org/2003/05/soap-envelope"><soapenv:Body><id xmlns:cus="http://test.com" CUSTOMER_ID="22908408306005836824576"/></soapenv:Body></soapenv:Envelope>

Observe that the number is back in non-scientific format !!!