Dojox Charting Tutorial – Part One: Background and Generic Code
At Intec we have a number of applications that have included charts for some time, whether for dashboards or other reporting. At the time the we used haneng charts, because we didn’t have the expertise in house to develop anything as good or better. The product provided what we needed and still does. But as we included more dojo in our web-based products, the natural step was to consider dojox charting as a replacement, especially because of the ability to incorporate dojox charting in XPages or traditional web development, in the Notes Client or any browser, and without third-party licensing requirements. Over the holidays I made some enhancements on internal reporting, so I took the opportunity to experiment with our helpdesk application. But my line of approach was not trying to create a specific report, but to investigate how flexible and easy to use the classes were, bearing in mind what else we had done and what customers might need. You can see the charts online here or download the sample database attached to this post.
Generic Code for Dojo Charting
One of the useful things about dojox charting are the wide range of themes that are available out-of-the-box to include as modules. The full list can be found and experimented with in yourDatadominojsdojo-1.3.2dojoxchartingthemes directory. As with XPages OneUIv2 themes, this gives the ability to allow users to choose their own theme or to choose a standard theme for different customers or applications. And if you can’t find a theme that fits in with your application, for the top-level themes it should be pretty easy to add your own theme, just an array of colours.
The final dojo-related generic setting is code on the beforeRenderResponse that forces compatibility mode for Internet Explorer 8. Those who developed XPages for 8.5.0 will be used to the code to force compatability mode because 8.5.0 used dojo release 1.1.1, and I previously demonstrated the sample database available in Part Two of the Radio Button Validation Series. For charts, Internet Explorer 8 throws an error of “this.rawNode.path is null or not an object” on line 20 in dojo.js and the charts don’t load. (Line 20 is the whole dojo.js, because it is compressed into one line). Forcing compatiability mode avoids the error and loads the charts.
The dojo properties at XPage level, dojo modules and beforeRenderResponse code are incorporated on any XPage used for charts. In this demo I’ve added it explicitly on each XPage. In practice I would probably include the dojo properties, the beforeRenderResponse code and any dojo modules I am going to always use on a single custom control included into all charting XPages. Alternatively, I might put the source code on a single XPage and have the custom controls computed at runtime using John Mackey’s excellent tip. It would depend on which proved most efficient (coding-wise) for the development I was doing at the time.