Home/ Questions/Q 7831647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T11:49:25+00:00

I am trying to use Flot in a Bootstrap project. I am finding that

  • 0

I am trying to use Flot in a Bootstrap project. I am finding that in IE8, the Flot graph is invisible, and I’ve narrowed the problem down to the HTML5 shim used by Bootstrap.

Here is the page in full: it’s the basic Flot example plus the HTML5 shim, and the graph is invisible in IE8 (it’s fine in Chrome).

If I remove the HTML5 shim line, the graph is fine in IE8. However, I need the HTML5 shim for Bootstrap styles to work (when I add Bootstrap back in – I’ve removed references to it for the purposes of this example) – if it’s not there then the Bootstrap styles go screwy.

What can I do? 

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flot Examples</title>
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/scripts/plugins/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="/scripts/plugins/jquery.flot.js"></script>
 </head>
<body>
<div id="placeholder" style="width:100%;height:300px;"></div>
<script type="text/javascript">
$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    html5shim and and excanvas somewhat do the same thing I’m guessing? excanvas emulates html5 canvas elements and html5shim does some other magic that I’m not too clear on. In short, you’ll want to tell html5shim to knock it off when it comes to IE<9 and canvas elements. I dug around in the source a bit and found this information.

    The html5 object is exposed so that more elements can be shived and
    existing shiving can be detected on iframes.
    options can be changed before the script is
    included
    html5 = { ‘elements’: ‘mark section’, ‘shivCSS’: false,
    ‘shivMethods’: false };

    Soon after it lists all the elements that will be “shiv”d, so I came up with this as a solution:

    <!--[if lt IE 9]>
  <script type="text/javascript">
    var html5 = { 'elements': 'abbr article aside audio bdi data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video' };
  </script>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

    The giant list in elements I took out of the source as well, only removing canvas.

    Apart from that, I used all of your example and it seemed to work fine.

    • 0