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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Flotr: Basic Watermark Example</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="../../flotr/prototype/lib/prototype.js"></script> <script type="text/javascript" src="examples.js"></script> <!--[if IE]> <script type="text/javascript" src="../../flotr/prototype/lib/excanvas.js"></script> <script type="text/javascript" src="../../flotr/prototype/lib/base64.js"></script> <![endif]--> <script type="text/javascript" src="../../flotr/prototype/lib/canvas2image.js"></script> <script type="text/javascript" src="../../flotr/prototype/lib/canvastext.js"></script> <script type="text/javascript" src="../../flotr/prototype/flotr.js"></script> </head> <body> <!-- ad --> <div id="wrapper"> <h1></h1> <div id="container" style="width:600px;height:300px;"></div> <h2>Example</h2> <p>This example shows a basic Flotr graph with a watermark image.</p> <p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p> <h2>The Code</h2> <pre id="code-view"><code class="javascript"></code></pre> <div id="footer">Copyright © 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div> </div> <!-- ad --> <script type="text/javascript"> /** * Wait till dom's finished loading. */ document.observe('dom:loaded', function () { /** * Fill series d1 and d2. */ var d1 = []; for (var i = 0; i < 14; i += 0.5) d1.push([i, Math.sin(i)]); var d2 = [ [0, 3], [4, 8], [8, 5], [9, 13] ]; /** * Draw the graph. */ var f = Flotr.draw($('container'), [d1, d2], { grid: { /** * The watermark can be added in two ways: */ //backgroundImage: 'images/butterfly.jpg' /** * However, if you need positioning and/or transparancy, use: */ backgroundImage: { left: 60, src: 'images/butterfly.jpg', alpha: 0.3 }, } }); }); </script> <!-- analytics --> </body> </html> |