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.
Yes, (charting in) IE can be an absolute PITA, which is why all my sessions use Firefox. I'd always used a function, called in XSP.addOnLoad(), all in a Output Script control, so it's useful to know the problem you had there. The main time I've had problems with IE is when data is not available when the page initially loads, which it sounds like is what you have in issue 2. It's bizarre that an empty div works, but IE being bizarre is nothing new! I'm sure everyone knows it's a given, but I've always found I needed to force compatibility mode in IE for charts to work. The code's well documented in various places, including the charting articles on the Lotus app dev wiki.
You need to turn your last paragraph into a t-shirt; no truer words ever written. Never ceases to amaze me that code that runs flawlessly in at least 4 other browsers on 4 different OS platforms doesn't quite work right in IE. Why companies insist on using it is beyond me.
II work for a large company that is still using IE6. Yes 6 !! Why? Because it was such a poor browser that many of the intranet pages / apps are chock full of IE6 hacks that **do** break in any other browser. Finding and repairing all that rubbish code is a huge undertaking. Getting it to run in IE8 is far less work than making it fully compliant with other modern browsers, so the only 'upgrade' being considered is IE8.
So my development process is
1) build and test in a modern browser
2) make it work in IE8
3) make it work in IE6
🙁
And I agree – that last sentence would make a great T-shirt
I was able to make the dojo charting work across all browsers by tricking IE8 and IE9 into believing they were really IE7 (set compatibility mode for that page load). Once we did that all code was "cross-browser" compliant.
Get Mark working on that T-Shirt :o)>