How I Got jQuery Flot Graphs To Work in IE8

November 19th, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.

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.

Attempted Solutions

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.

The Solution

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

2. Include the excanvas JavaScript file before you include the Flot JavaScript file(s).

Once I made the above amendments the charts began to display in all browsers.

This entry was posted on Tuesday, November 19th, 2013 at 9:51 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (1)
  1. ThienAu says:

    Thanks for the useful guide ;)