Dojox Charting Tutorial - Part One: Background and Generic Code
Paul Withers 10 January 2010 10:17:58 PM
Background
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
The first step is to include all the dojo setup. From the All Properties panel of the XPages properties, set dojoParseOnLoad and dojoTheme to true. Without dojoTheme the tooltips do not show. We also need to include all the dojoModules being used. If you have not done this before, again this in done from the All Properties panel, from the Resources property in the Basics group. The main dojo module that covers the charts is dojox.widget.charting.Chart2D (dojo modules are javascript files, so the names are case sensitive).
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 your
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.
In the next part I will start working through the code for creating charts, outlining as many of the properties and functions available as I can. This will start with a pie chart, then column and bar charts, and finally line charts. For the most part the charts will be created using javascript objects to store the series and creating the charts themselves via javascript. However, for the second line chart I will use an HTML table store and markup, to give a comparison of the two methods. Hopefully this will help extend the examples quickly and easily.
- Comments [2]