During February Bob Balfe has been blogging 28 days of Dojo. To tie in with that I’ve decided now is a good time to blog about a couple of charting enhancements I included in my Lotusphere session with Dave Leedy, XPages: Enter The Dojo.
Having said that, Jeremy Hodge pointed out on the XPages forum that you should be able to put all the Dojo files in an nsf and use that. But that would certainly be a lot of work. So currently, if you want to use gradients, you will need to create a dojo-1.5.0 folder, install all the Dojo sub-folders and the ibm sub-folder. But this will, officially, be unsupported. Alternatively, you can wait for 8.5.3 which will probably ship with Dojo 1.5.0.
Once you have Dojo 1.5.0 accessible for your XPages, there are two Dojo modules to include to implement gradients. These are dojox.gfx.gradutils and dojox.charting.Theme. dojox.gfx.gradutils adds in the gradients functionality itself, whereas dojox.charting.Theme is used as a holder for your settings. Why can’t you use one of the in-built themes? Because your new theme specifies the fill types and “from” and “to” colours, which are not included in the default themes. My recommendation for getting the colours you want is to implement the standard theme that has the colours you want, then to use something to get a screenshot and identify the colours – I used Snag-it. Once you’ve got the colours, you can build up your own theme. So the format is:
For a pie chart the first line has no effect whatsoever. The gradient will always move from the centre of the pie chart to the outside. The first offset is the colour you get in the middle, the second offset is the colour you will get on the outside.
For other types of chart, you get more control over your gradients. Th e first option is type – radial or linear. These do what they say on the tin. If you use radial the colours radiate from the centre to the edge of the shape, linear moves from one side to another. The best option for the space parameter is shape: the gradient is relative to the shape of each element in your series – a bar for a bar chart, a column for a column chart etc. The x and y parameters then manage how your gradients extend – the x parameters handle the colour gradients from right to left on your shape, the y parameters handle the colour gradients from top to bottom. So in the option above the second and third fills will actually have no gradient – the second will just be offset:1, the third just offset:0. This means you can manipulate colours quite flexibly. Bear in mind though that the layout of your gradient will have an impact on the colour shown in the icon on your legend.
You then implement your theme in exactly the same way as you would otherwise, with chart.setTheme(myTheme);
So the finished module is:
For the classes I add two new string attributes, tdIconStyleClass and tdTextStyleClass. These should be class names as strings and are be default blank strings. I added two lines to add the _addLabel function to add the classes to the relevant cells. The biggest challenge I had was I was expecting an html template rather than dojo.doc.createElement blocks, so it took me a while to spot that.
From looking at support tickets for Dojo 1.6.0, it looks like the Legend functionality is changing a little, so the module may not be applicable for that release. But Dojo 1.6.0 has not yet been released let alone included in the Domino install, so we have some time yet.