Subversion Repositories SmartDukaan

Rev

Blame | Last modification | View Log | RSS feed 

<!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">
    <!--[if lte IE 8]><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 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>