1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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> |