Dojo Charts and IE

I’ve just spent the better part of three days working on a suite of Dojo Charts for an application. They are usually pretty easy to get going and look as good, if not better than a lot of the flash charting tools out there. But, and there’s always a but isn’t there, getting the charts working in IE can be a real challenge with very little in the way of guidance.

So here are three tips which I shall pass on learned through bitter experience over the last few days…

It may well look as though you can initialise your charts using in line JavaScript and, indeed, it will work absolutely fine in Firefox, Safari, Chrome and other “modern” web browser. Not so much with IE. So break your initialisation code into a function and call it from the either the onClientLoad client side event in the XPage or using XSP.addOnLoad(init) depending on your preference.

This was a weird one, and took me ages to find. But one of my charts requires the user to select some options and then I fire a partial refresh of the page to generate the JSON data which populates the chart. But if the data which is returned by the AJAX request (the partial update) begins with JavaScript which needs to be evaluated then you may find in IE that the code is not being evaluated. So the JSON objects I was generating were not available for use in the chart. The solution, and it still grates me that I had to do this, was to add an empty, hidden div at the top of the area which is being refreshed, then the JSON data will be processed correctly.

Finally another thing which I had to do to make my code less efficient was re-write the way that I was generating some of the JSON data. One of the charts has multiple, variable numbers of series of data depending upon what the user selects. So I was generating each series of data to be a JSON object inside an array of JSON objects that I just looped through when building the chart. But no, it seems IE doesn’t like accessing multi dimensional arrays of JavaScript when building charts, so instead I had to create a different variable for each JSON data series and reference them using evaluates.

So the lesson from all of this is that, a) do your initial development in Firefox or Chrome, b) never, ever under estimate the amount of time you’ll need to spend getting the bloody thing working in IE.