How I Got jQuery Flot Graphs To Work in IE8
I’ve been working on a project recently that required a whole load of graphs and charts be displayed; From pie charts, to horizontal bar charts. To accomplish the job I put my faith in the trusty jQuery Flot library.
I’ve used the Flot plugin in the past for simpler graphs but I was unsure on how it would perform with more complex scenarios. It did the job perfectly however. It was easy to setup, easy to build and modify the charts, and the documentation was great as well.
Once everything was completed and the site was up and running, I did the normal cross browser check which, surprise surprise, showed the charts to be broken in Internet Explorer 8. There were no errors, or even bits of the graphs showing. Just a gaping white hole where they should have been showing.
As with most issues I come across, a Google for the solution was in order and, as with most problems, there were existing discussions about the same problem, many with resolutions. I tried all the suggestions that I came across, and more. In this post I’ll explain the things I tried, and ultimately the solution that worked for me.
tl;dr – It was down to the version of excanvas.js being used. Use the copy within the Flot code respository as it would appear this one has had the necessary modifications made to it.
Whilst browsing the various suggestions it became apparent that the problem was to do with the fact that Flot uses the HTML5 canvas, and that either the correct fallback needed to be in place, or a conflict was occurring between existing scripts. The list below show the things I tried:
– Use excanvas to provide a fallback to the <canvas>
– Use FlashCanvas. Similar to excanvas but Flash based.
– Use a modified html5shiv. The html5shiv script adds the ability to add HTML5 tags into older versions of Internet Explorer.
– Change the DOCTYPE from ‘Transitional’ to ‘Strict’
– Add a X-UA-Compatible <meta> tag
I’m sure that for some people the above suggestions worked, however, unfortunately for me none of them did. Some of the changes sort of worked, and at one point I had it in a position where the labels and legends were showing, but still no actual graph.
I decided to take a step back and see if it was IE8 in general, in which case I’d probably have to look at a different chart library, or if it was my code.
To test this theory out I took a look at the Flot example page in Internet Explorer 8 to see if they worked or not and sure enough, they did. It just had to be something to do with my code.
I took a look at the source code and started to look at where the example files differed from my own. After a bit of trial and error I managed to get my charts fully working by making the following updates:
1. Use the excanvas.js (or smaller excanvas.min.js) that is included from within the Flot repository. This one differs from others I believe and contains the necessary amendments to make it work
Once I made the above amendments the charts began to display in all browsers.