Since I first blogged about Dojo charting in XPages in 2009, quite a lot has changed with Dojo. Much of what I did then is still valid, including the additional JavaScript file I created at Lotusphere 2011 and contributed to OpenNTF for making the chart legend multi-column and allowing styling on it.
However, when trying to add a different theme last week, I found the code I have used previously didn’t work. This comprised creating a new instance of dojox.charting.Theme on the fly, assigning it to a variable and setting the theme with that variable, as below (from the “12 Tasks” session I did with Mike McGarel at IBM Connect 2013):
// Code to create the pie chart
var dashTheme = new dojox.charting.Theme({
seriesThemes: [
{
fill:{
type: "radial", space:"shape", x1: 0, y1: 100, x2: 100, y2: 0,
colors:[{offset:0, color:"white"},{offset:1, color:"#57808f"}]
}
},
{
fill:{
type: "radial", space:"shape", x1: 100, y1: 100, x2: 100, y2: 100,
colors:[{offset:0, color:"white"},{offset:1, color:"#558f7f"}]
}
},
{
fill:{
type: "radial", space:"shape", x1: 0, y1: 0, x2: 0, y2: 0,
colors:[{offset:0, color:"white"},{offset:1, color:"#508567"}]
}
}
]
});
var chart1 = new dojox.charting.Chart2D("#{id:simplechart}");
chart1.setTheme(dashTheme);
However, this now threw an error saying that dojox.charting.Theme was not a valid constructor. The Dojo documentation pointed to an article detailing how the theme should now be set up. What was missing was the steps to use that file in the chart. Because the Dojo files are in a plugin on the server and are upgraded from release to release, I didn’t want to add the relevant Dojo module to that plugin and file structure. It’s not a scalable method. And in this situation, because the theme was only of use for a single application, using a separate OSGi plugin was not an appropriate approach.
Ideally I wanted the file in the NSF, but the approach I had used for the legend widget on OpenNTF didn’t work. Thankfully, after quite a bit of head-scratching and trial and error, Christian Guedemann was able to point me in the right direction.
First, the relevant JavaScript file, following the example on the “Dojo Charting: Dive Into Theming” article, needs adding as a File Resource with an appropriate filename, e.g. app.charting.themes.paulwithers.js.
Then, it needs adding as a Dojo Module to the XPage / Custom Control, with the following XML. The key is to add both the URL and the prefix, so it knows where the find the file and how it should be referred to by Dojo.
<xp:this.resources>
<xp:dojoModulePath url="app.charting.themes.paulwithers" prefix="app.charting.themes.paulwithers">
</xp:dojoModulePath>
</xp:this.resources>
Finally, the code for the chart needs to require the use of the Dojo module and apply the theme to the chart, as follows:
dojo.require("app.charting.themes.paulwithers");
var chart1 = new dojox.charting.Chart2D("#{id:simplechart}");
chart1.setTheme(dojo.getObject("app.charting.themes.paulwithers"));
Now the theme will work.
