<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “www.w3.org/TR/html4/loose.dtd”> <html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Flot Examples</title>
   <link href="layout.css" rel="stylesheet" type="text/css"></link>
   <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
   <script language="javascript" type="text/javascript" src="../jquery.js"></script>
   <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
   <script language="javascript" type="text/javascript" src="../jquery.flot.image.js"></script>
</head>
<body>
   <h1>Flot Examples</h1>

   <div id="placeholder" style="width:400px;height:400px;"></div>

   <p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>

   <p>With the image plugin, you can plot images. This is for example
   useful for getting ticks on complex prerendered visualizations.
   Instead of inputting data points, you put in the images and where
   their two opposite corners are supposed to be in plot space.</p>

   <p>Images represent a little further complication because you need
   to make sure they are loaded before you can use them (Flot skips
   incomplete images). The plugin comes with a couple of helpers
   for doing that.</p>

<script id=“source” language=“javascript” type=“text/javascript”> $(function () {

var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];
var options = {
        series: { images: { show: true } },
        xaxis: { min: -8, max: 4 },
        yaxis: { min: -8, max: 4 }
};

$.plot.image.loadDataImages(data, options, function () {
    $.plot($("#placeholder"), data, options);
});

}); </script>

</body>

</html>