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 | <!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: Extending Flotr</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="../lib/yepnope.js"></script> </head> <body> <!-- ad --> <div id="wrapper"> <h1></h1> <div id="container" style="width:600px;height:300px;"></div> <h2>Flotr Structure</h2> <p>This example shows you how to extend Flotr. But before you begin, it's important to know how Flotr is structured. Flotr consists of two important parts. The first one is the Flotr object. This object acts like a namespace for all utility functions, just to be sure it doesn't collide with the environment. </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"> // @TODO fix it function example(){ var MyGraph = Class.create(Flotr.Graph, { drawCount: 0, drawSeries: function($super, series){ this.drawCount++; $super(series); } }); /** * 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 ], null, MyGraph); alert('Draw count: '+f.drawCount); }; </script> <!-- analytics --> </body> <script type="text/javascript" src="includes.js"></script> </html> |