PHP/JavaScript webapp to analyse spending habits
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

image.html 1.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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. <div id="placeholder" style="width:400px;height:400px;"></div>
  15. <p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
  16. <p>With the image plugin, you can plot images. This is for example
  17. useful for getting ticks on complex prerendered visualizations.
  18. Instead of inputting data points, you put in the images and where
  19. their two opposite corners are supposed to be in plot space.</p>
  20. <p>Images represent a little further complication because you need
  21. to make sure they are loaded before you can use them (Flot skips
  22. incomplete images). The plugin comes with a couple of helpers
  23. for doing that.</p>
  24. <script id="source" language="javascript" type="text/javascript">
  25. $(function () {
  26. var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ];
  27. var options = {
  28. series: { images: { show: true } },
  29. xaxis: { min: -8, max: 4 },
  30. yaxis: { min: -8, max: 4 }
  31. };
  32. $.plot.image.loadDataImages(data, options, function () {
  33. $.plot($("#placeholder"), data, options);
  34. });
  35. });
  36. </script>
  37. </body>
  38. </html>