Nagispace

Flot, HTML5, and IE8

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

I was recently set on the task of implementing a graph of some prices for a client, and instantly thought of Flot. I’ve used it before with awesome results.

I implemented the graph, sent a link to the client and went on my merry way. Little did I know of the debug-session I was in for.

I quickly got an e-mail in return stating that it didn’t work in IE8, which I of course had forgotten about since I live in 2012. But according to our policy, we do develop for IE8, so I had to figure it out, somehow.

I started debugging and ran into a few walls along the way, but luckily it all resolved itself in a matter of hours. After of course I pulled in my good buddy to help me.

Flot uses canvas to render its graphs and IE8, and below, doesn’t support canvas. To fix IE’s lack of HTML5 support I usually just add aFarkas’ html5shiv, which created the elements new in HTML5 so that older browsers can utilize them.

Still the graph didn’t render, so I added the ExplorerCanvas lib excanvas which is supposed to give IE8 and below full canvas support, which it did. It just also conflicted with the html5shiv.

So after much cursing, debugging, wtf-ing and googling, we ended up on the idea of rewriting the html5shiv to exclude the canvas-tag. After that everything turned out flowery, aka it works!

Resources:

  1. pdnagilum posted this