Use flowchart.js and raphael.js in XPages – problem and solution

I came across a weird problem today. The task was to use flowchart.js in an XPage to create a flowchart like this:


So I downloaded flowchart.js, added it to the WebContent folder of the NSF and included it to the XPage using this code:


Since flowchart.js is using raphael.js I did the same with Raphaël’s library. Pretty straigtforward, isn’t it?

Unfortunately, it simply didn’t work. Chrome’s console simply told me something about “Raphael is not defined”. So there was some problem with loading the raphael.js, obviously.

First I thought about a charset problem. raphael.js is using some special chars, but the file I downloaded was coded in UTF-8, so it should be fine. On the other hand, when opening raphael.js from the NSF with an URL like “http://host/path/db.nsf/rapahel.js”, Chrome told me it’s in a Windows codepage and there were lots of weird characters.

So I did various tests to investigate further, but to no end. Wether I saved the raphael.js file in Mac or Windows, stored it in WebContent or as file resource or in Domino’s HTML folder, the problem remained.

The customer for which I’m working at the moment found something about the “Raphael is not defined” message at stackoverflow, and the cure should be to use AMD module loading. Due to the charset weirdness I didn’t thought about that proposal very much and continued with the charset investigation… but in the end, I was wrong.

Indeed, raphael.js seems to have problems when loaded after other JavaScript libraries. The following code was suggested at the raphael site:

define([ "path/to/raphael" ], function( Raphael ) {
  console.log( Raphael );

Unfortunately, that does not work in XPages wit Dojo. But this combination of traditional loading and Dojo’s AMD loader works for me:


and in the body of the XPage:

After the require the Raphael object exists just fine and can be used by flowchart.js.

I admit that I don’t fully understand what’s going on, since I didn’t used Dojo’s AMD loading much yet. Perhaps someone can shed some more light on this topic 🙂

One thought on “Use flowchart.js and raphael.js in XPages – problem and solution