Statistics
| Revision:

root / hci / trunk / eneraptor-web-app / web-app / js / flot / examples / image.html @ 11

History | View | Annotate | Download (1.85 KB)

1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
<html>
3 
 <head>
4 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
    <title>Flot Examples</title>
6 
    <link href="layout.css" rel="stylesheet" type="text/css"></link>
7 
    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
8 
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
9 
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
10 
    <script language="javascript" type="text/javascript" src="../jquery.flot.image.js"></script>
11 
 </head>
12 
 <body>
13 
    <h1>Flot Examples</h1>
14 

    		
  

  

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


    		
  

  

    
      16
    
    
      

    		
  

  

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


    		
  

  

    
      18
    
    
      
    


    		
  

  

    
      19
    
    
      
    <p>With the image plugin, you can plot images. This is for example


    		
  

  

    
      20
    
    
      
    useful for getting ticks on complex prerendered visualizations.


    		
  

  

    
      21
    
    
      
    Instead of inputting data points, you put in the images and where


    		
  

  

    
      22
    
    
      
    their two opposite corners are supposed to be in plot space.</p>


    		
  

  

    
      23
    
    
      

    		
  

  

    
      24
    
    
      
    <p>Images represent a little further complication because you need


    		
  

  

    
      25
    
    
      
    to make sure they are loaded before you can use them (Flot skips


    		
  

  

    
      26
    
    
      
    incomplete images). The plugin comes with a couple of helpers


    		
  

  

    
      27
    
    
      
    for doing that.</p>


    		
  

  

    
      28
    
    
      

    		
  

  

    
      29
    
    
      
<script id="source" language="javascript" type="text/javascript">


    		
  

  

    
      30
    
    
      
$(function () {


    		
  

  

    
      31
    
    
      
    var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];


    		
  

  

    
      32
    
    
      
    var options = {


    		
  

  

    
      33
    
    
      
            series: { images: { show: true } },


    		
  

  

    
      34
    
    
      
            xaxis: { min: -8, max: 4 },


    		
  

  

    
      35
    
    
      
            yaxis: { min: -8, max: 4 }


    		
  

  

    
      36
    
    
      
    };


    		
  

  

    
      37
    
    
      



    		
  

  

    
      38
    
    
      
    $.plot.image.loadDataImages(data, options, function () {


    		
  

  

    
      39
    
    
      
        $.plot($("#placeholder"), data, options);


    		
  

  

    
      40
    
    
      
    });


    		
  

  

    
      41
    
    
      
});


    		
  

  

    
      42
    
    
      
</script>


    		
  

  

    
      43
    
    
      

    		
  

  

    
      44
    
    
      
 </body>


    		
  

  

    
      45
    
    
      
</html>