It’s over three years since my last blog post on the charting options available with Dojo. At that time the version of Dojo in XPages would have been later than 1.6, when a major overhaul of Dojo for AMD processing had taken place. But then and afterwards I didn’t revisit the code to load Dojo charts. This week I needed to create some charts again, so took a step back and looked at the documentation on the Dojo site (there’s also the reference guide). Although a lot of the functionality has been around since my first blog post tutorials in 2009, there are some useful additions as well as changes that make setting up the charts – particularly in an XPages context – much easier.
To re-cap on the basics, the original process involved a number of steps:
- Adding the relevant Dojo modules to the XPage / Custom Control
- Adding divs to hold elements, typically as standard HTML divs (so the IDs are easier to reference). If you want to include multiple instances on a page, my typical approach is to create a custom property on the Custom Control (e.g.
chartKey), into which I pass a unique reference, and then set the div ID to
The newer Dojo code allows modules to be loaded inline and it allows for use of
dojo/domReady! to wait and only render the chart when Dojo has finished loading. That’s two steps overcome. Using Java and IBM’s JsonJavaObject or JsonJavaArray allows creation of JSON data on-the-fly for the chart, and that can then be passed into the Output Script control that contains everything else. So now there are just two components on the page – the div and the Output Script control. That makes this much neater, cleaner and less error prone. In the next part I’ll take a couple of the original examples I used back in 2009 and update them to the new code. Of course those not yet comfortable with Java will be able to mix the Computed Fields of the original examples with the Output Script control of the new. But those getting into Java will be able to see the conversion from SSJS and Computed Fields to a Java method that outputs the same kind of thing.