Clarity PPM

Expand all | Collapse all

OBS Portlet - D3js

Anon Anon11-04-2015 03:17 AM

  • 1.  OBS Portlet - D3js

    Posted 11-27-2014 04:20 AM

    I was really impressed by gcubed's obs html portlet post (and all of his other work as well). I had been messing around with Mike Bostock's d3js library and decided to try and combine both. I borrowed much of Gene's authentication and document parsing work but rendered the OBS like this: Toggle nodes to expand/collapse.



    1. I have a single html file containing the required css and js (excluding the d3.js library). I serve it up from a "custom" directory created in my Clarity application's webroot, but chris.wuenstel's knowledge store trick ( would work too.

    2. I do the same thing with the d3.js library (d3.v3.min.js), although you could use a CDN. Available from:

    3. I use an HTML portlet with an iframe like Gene.


    4. There's a simple nsql query (id: x_api_obs). Replace the OBS UNIQUE_NAME value in the WHERE clause with something appropriate.


    Areas for Improvment:

    While it is somewhat useful for visualizing larger OBSs, on its own it's really just a parlor trick. But I could imagine adding to it to show just about anything. For example, you could show OBS associated security rights for a given user/group/OBS unit.


    Going further, it might be nice to build a library/framework to handle the Clarity api access and document parsing. I suppose that you could also abstract pre-built charts on top of d3js similar to, but oriented to Clarity.



    • Will not work with IE in v13.0 (and maybe v13.1-3). This is due to Clarity forcing IE8 emulation in 13. It does work on IE in v14.1.
    • Works on Chrome and later versions of FF in 13, but does not work in older versions of FF and Safari.  I don't understand why, but the XML returned from Clarity is not parsed correctly in these browsers.
    • I'm not much of a client side JS developer...


    zip   3K 1 version
    zip   325B 1 version

  • 2.  Re: OBS Portlet - D3js

    Posted 11-27-2014 04:26 AM

    Thanks for sharing this , and a big thanks for "gcubed" to kick it off



  • 3.  Re: OBS Portlet - D3js

    Posted 11-27-2014 05:45 PM

    Thanks, that looks great.

    Tried that on v13.3 with https, but does not display anything, neither does gcubed's obs html portlet


    Replaced the script text with

    <script src="" charset="utf-8"></script>

    The preview in both cases display the same static structure.


    Even more so with this one need instructions for dummies or complete idiots

  • 4.  Re: OBS Portlet - D3js

    Posted 11-28-2014 02:04 AM

    1. Does your nsql query return data?

    2. What is the ID of your nsql query? Is it x_api_obs? If not, change the value on line 321 of OBSD3.html

    3. Are both the html file and ds.js file being downloaded by the browser?  Key F12 should bring up the developer tools for Chrome and IE where you can view the status on the Network tab. Ctrl-Shift-K brings up a console in my version of FF (which is old, YMMV)

    4. In the same developer tools, can you see any obvious messages on the Console tab?

  • 5.  Re: OBS Portlet - D3js

    Posted 12-02-2014 03:21 PM

    Thanks Andrew,

    Tried the original by Chris on r8.1 did not work.

    Then tried it on v13.3 Sandbox, but had forgot how it went and tried to display the html file which displayed blank.

    Then created yours on the same Sandbox and tried to display the html file again.

    After you post went back and displayed the portlet. Both display the same and also in the preview.

    Using FF 33

    Maybe my replace script does not work and can't put the .js files on the Sandbox.

    Tried your portlet on V12 where I put the .js files in ..Clarity\webroot\lib, preview hangs.

    Tried both portlets on v13.3 on premise with http, nothing in the preview. Will have to go back to that with some more time and can try you instructions 3 and 4. A qrid portlet based on the query brings data without any problems.

  • 6.  Re: OBS Portlet - D3js

    Posted 12-02-2014 10:41 PM

    Cool stuff. We have it up and working in 13.2 fixpack 4 in Chrome 39. IE 11 notsomuch - will test again come 14.2.

  • 7.  Re: OBS Portlet - D3js

    Posted 12-03-2014 02:45 AM

    Nice. You might be able to shim it to get it to work in 13.2, but we're upgrading to 14.1 shortly, so I haven't bothered trying.

  • 8.  Re: OBS Portlet - D3js

    Posted 10-22-2015 12:00 PM

    Thank you Gene (gcubed) and AndrewLerner again for this great information. I am getting a little further with these, but still can't display hem at will.

    I've established that if I do not have access to the file system to put the js files there and there is no connection to the outside internet from the server to access the web site where they are putting them in the Knowledgebase as suggested works just fine. But there is something more to it and I can't get what that is.

    I set them up on a system and the work just fine. But on another system they do not work all I get is

    If that were retrieving data the circle would be filled with blue when not expanded.


    Here the same thing the chart orientation displays options and works but it is not getting the data from the query

    For both a grid portlet using the same queries return the data without problems.


    What am I still missing?

  • 9.  Re: OBS Portlet - D3js

    Posted 10-22-2015 01:15 PM


    1. does the nsql query specified on line 321 of the OBSD3.html file exist in this environment?

    2. If so, does the OBS specified in the WHERE clause of the nsql query exist in this environment?

  • 10.  Re: OBS Portlet - D3js

    Posted 10-22-2015 04:45 PM

    Thanks, that would make sense. I'll check that tomorrow on site.

    The thing is that I successfully created those on my VM and tried to create everything exactly the same on the physical system while having the VM on another display.

  • 11.  Re: OBS Portlet - D3js

    Posted 10-23-2015 04:30 AM

    The answer to both questions is Yes.

    As I posted a grid portlet using the query returns data without problems.

  • 12.  Re: OBS Portlet - D3js

    Posted 10-25-2015 01:01 PM

    What browser are you using?

  • 13.  Re: OBS Portlet - D3js

    Posted 10-25-2015 04:58 PM

    I used FF 41.02 until the alert came out. Have not tried with anything else since then.

  • 14.  Re: OBS Portlet - D3js

    Posted 10-26-2015 05:51 AM

    Can you check two things?


    1. Make sure that all the required resources are loaded in the browser

    • In FF, Select Tools > Web Developer > Network (this might be slightly different on Windows, but it should be obvious what it is)
    • Reload the page
    • Check that there are no 404 or 500 errors for items like d3.js, OBSD3.html or the XOG call. Everything should be 200 or 304

              Screen Shot 2015-10-26 at 10.45.24.png



    2. Check for any javascript errors

    • In FF, Select Tools > Web Developer > Web Console
    • Reload the page
    • Check for any horrible looking errors. You might see a few warnings, which are OK.

  • 15.  Re: OBS Portlet - D3js

    Posted 10-27-2015 04:36 AM

    Thank you for your effort.

    Those two things just appear to be loading and do not finish.



    C:\ >java -version

    java version "1.7.0_67"

    Java(TM) SE Runtime Environment (build 1.7.0_67-b01)

    Java HotSpot(TM) Client VM (build 24.65-b04, mixed mode, sharing)


    Is that saying that having the js file in Knowledgebase is not working the way it is supposed to work.?

  • 16.  Re: OBS Portlet - D3js

    Posted 10-27-2015 08:43 AM

    I'm not sure about the The character encoding of a framed document was not... bit. The other messages are OK.


    What happens if you open another tab with the html file alone? That is to say if your html portlet iframe source is /niku/custom/obs/OBSD3.html, use http://<yourserver>/niku/custom/obs/OBSD3.html as the address.

  • 17.  Re: OBS Portlet - D3js

    Posted 10-28-2015 02:54 PM

    This is what I get, but I get that also on the system where the portlet works.

    Why might that be

  • 18.  Re: OBS Portlet - D3js

    Posted 11-03-2015 03:58 AM

    Got a little bit furhter with this.

    On my VM where it works the address to the OBSDS3.html document is ..localhost...

    That of course works only on the server, but not from clients.

    The live system where it does not work from a client is a cluster with a load balancer which apparently has something with it to do.

    For one if I ping the server name I do get an IP but no reply.

    So I think that everything is set up correctly, but the access is configured so that the portlet is not displayed.

    I think the best way to solve that is to sweet talk to the guy who can but the required files in the web root.

    THanks for your support.

  • 19.  Re: OBS Portlet - D3js

    Posted 11-04-2015 03:17 AM

    Thanks for sharing, it's awesome

  • 20.  Re: OBS Portlet - D3js

    Posted 12-23-2016 06:08 AM

    Would love to see if this could deliver something like a project structure chart or portlet.
    Some of our clients in the engineering or manufacturing space still use this view to discuss projects among stakeholders:

  • 21.  Re: OBS Portlet - D3js

    Posted 12-23-2016 04:00 PM

    I think that could be doable.

    For OBS the NSQ used is
    FROM             PRJ_OBS_UNITS


    which basically the unit and its parent coming from the PRJ_OBS_UNITS table i











    while for tasks there is no consistent parent_id but it has to be configured from






    A developer with adequate imagination could do that in a complex query or it could stored in a view as it must be calculated on the fly because the user and the system can change the WBS sorting.

  • 22.  Re: OBS Portlet - D3js