--- a/js/flotr2/examples/old_examples/extending-flotr.html +++ b/js/flotr2/examples/old_examples/extending-flotr.html @@ -1,1 +1,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> +