Dojox Charting Tutorial – Part One: Background and Generic Code

Home » 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 (http://www.hanengcharts.com/), 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 (http://hermes.intec.co.uk/xpagessamples/charts.nsf/chart1.xsp) 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).

Dojo Module

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.

MiamiNice Theme

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 (http://www.jmackey.net/groupwareinc/johnblog/johnblog.nsf/d6plinks/XPages-How-to-Compute-a-Custom-Control-at-Runtime). 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.

 

10 thoughts on “Dojox Charting Tutorial – Part One: Background and Generic Code”

  1. Hi,

    I’m trying to follow your tutorial but the problem I’m facing here is when I make the dojoParseOnLoad and dojoTheme to true.

    and add the domino module in the resources part and provide the name to the one shown by you i.e dojox.charting.widget.Chart2D and try to reference it in the javascript it gives me the error

    as

    500 Exception

    Error while executing JavaScript action expression

    Script interpreter error, line=1, col=6: Reference error: ‘dojo’ not found

    please tell me the solution to this problem.

    Thanks.

  2. @Sk I can’t seem to reproduce this problem, even when I remove dojoParseOnLoad and dojoTheme or change them to false, the charts still show. This is in Internet Explorer, Firefox and Notes Client. If I switch off javascript I just don’t get the chart showing.

    What browser and version and Domino version are you using? Have the dojo files been installed on the server (or client if localhost) correctly? Does the code work in a standalone database (you’ll be able to point the data source to wherever the database is held, which helps easily rule out a conflict with something else in e.g. a theme). And do the charts show properly from this link: { Link } (that will rule out a browser issue).

    Presumably if you delete one of the dojo modules, you still get the same message about dojo not found, not a message about a specific dojo module not found? If that doesn’t get you any further, you can email me your code (pwithers@intec.co.uk) and I’ll take a look.

  3. NotesApprentice

    I’ve been having the same issue as Sk. Has there been a way to clarify this error? Is it possible that the issue comes from having notes version 8.5.2?

  4. NotesApprentice

    I’ve been having the same issue as Sk. Has there been a way to clarify this error? Is it possible that the issue comes from having notes version 8.5.2?

  5. @NotesApprentice I haven’t seen the problem. I’ve demo’d charts at Lotusphere and at a few LUGs using 8.5.2, so I don’t think it’s something specific to Domino versions.

    Does the link in my previous comment work for you? If so, it suggests a server issue rather than browser issue.

    Also, try the sample database. Does this work on your server?

    It doesn’t sound like it’s the cause, but bear in mind that by default Domino uses the highest numbered Dojo version in the “js” folder, and this will need the relevant ibm Dojo files as well.

    What happens if you use Firebug? Are Dojo files being downloaded amongst the resources.

  6. There is a problem with the chart3 page in the Charts.nsf DB….the partial refresh is not working on the combo box. Can you help to correct it and tell me what is wrong?

    I’m using that code almost exactly in an xpage application that I’ve deployed.

    Thanks!

  7. I can see from Firebug that it’s throwing an error in dojo.js say “arr is undefined”. These are rather tricky to track because the dojo.js code is all on one line and variables are obfuscated (e.g. _1, _2 etc.).

    I haven’t tested it recently, but it looks like something has changed in a recent version of Dojo. I’m running 8.5.3, so Dojo 1.6. I also tried forcing the Dojo version to 1.5.1 and I still get the error. On my local server I don’t have the Dojo 1.4 files, so I can’t test with that.

    It’s possible that the repeat controls are the cause of the problem. I’ve seen problems with Internet Explorer in the past where repeats don’t provide the data early enough for Dojo to use it. Changing one or either to use JavaScript arrays may work. This particular example is designed to show how to use Dojo Table Stores, but the data doesn’t need to be in a Dojo Table Store. You could use JavaScript arrays in the same way the other charts create their data.

    I haven’t tried that, but it may resolve the problem if the cause is the availability of the data. If not, it’s possible that Dojo has added or changed the parameters of this particular chart since 1.3.2.

  8. The chart examples that you have provided are stellar. Thank you for making this code available. I’m disappointed that chart3 is no longer working as it is a perfect fit for my application.

    I’ll attempt the use of a JavaScript array as you have suggested.

    Please let me know if you are able to find the time to debug this problem.

    Thanks again!

  9. Any luck with this one:?

    Exception
    Error while executing JavaScript computed expression
    Script interpreter error, line=2, col=6: [ReferenceError] ‘dojo’ not found
    JavaScript code
    1: //compositeData.grantid;
    2: dojo.require(“dojo.currency”);
    3: dojo.currency.format(“1000000”, {currency: “USD”});

  10. Thanks to Brad Balassaitis for stumbling on the likely cause for “dojo not found”. Make sure you’re entering any Dojo-related code in a Client-Side JavaScript editor, not the Server-Side JavaScript Editor. Dojo is a client-side library and cannot be referenced from SSJS.

    The easy way to check is if you’re getting redirected to an XPages error page, you’ve entered Server-Side JavaScript. If it’s throwing the error in Firebug or some other web developer tool, it’s Client-Side JavaScript.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top