diff options
| author | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-07 12:50:35 -0500 |
|---|---|---|
| committer | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-07 12:50:35 -0500 |
| commit | 680241cbb652ee29088baa6cde2da02002e5ec47 (patch) | |
| tree | 3f0c17df67c0ab0e91542ae75fff175750581859 /examples/navigate.html | |
| parent | f361d0498d284c6c7f3f366bf88e49b93e1245f0 (diff) | |
Diffstat (limited to 'examples/navigate.html')
| -rw-r--r-- | examples/navigate.html | 118 |
1 files changed, 0 insertions, 118 deletions
diff --git a/examples/navigate.html b/examples/navigate.html deleted file mode 100644 index c916ef2..0000000 --- a/examples/navigate.html +++ /dev/null @@ -1,118 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title>Flot Examples</title> - <link href="layout.css" rel="stylesheet" type="text/css"> - <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> - <script language="javascript" type="text/javascript" src="../jquery.js"></script> - <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> - <script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script> - <style type="text/css"> - #placeholder .button { - position: absolute; - cursor: pointer; - } - #placeholder div.button { - font-size: smaller; - color: #999; - background-color: #eee; - padding: 2px; - } - .message { - padding-left: 50px; - font-size: smaller; - } - </style> - </head> - <body> - <h1>Flot Examples</h1> - - <div id="placeholder" style="width:600px;height:300px;"></div> - - <p class="message"></p> - - <p>With the navigate plugin it is easy to add panning and zooming. - Drag to pan, double click to zoom (or use the mouse scrollwheel).</p> - - <p>The plugin fires events (useful for synchronizing several - plots) and adds a couple of public methods so you can easily build - a little user interface around it, like the little buttons at the - top right in the plot.</p> - - -<script type="text/javascript"> -$(function () { - // generate data set from a parametric function with a fractal - // look - function sumf(f, t, m) { - var res = 0; - for (var i = 1; i < m; ++i) - res += f(i * i * t) / (i * i); - return res; - } - - var d1 = []; - for (var t = 0; t <= 2 * Math.PI; t += 0.01) - d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]); - var data = [ d1 ]; - - - var placeholder = $("#placeholder"); - var options = { - series: { lines: { show: true }, shadowSize: 0 }, - xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, - yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, - zoom: { - interactive: true - }, - pan: { - interactive: true - } - }; - - var plot = $.plot(placeholder, data, options); - - // show pan/zoom messages to illustrate events - placeholder.bind('plotpan', function (event, plot) { - var axes = plot.getAxes(); - $(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2) - + " – " + axes.xaxis.max.toFixed(2) - + " and y: " + axes.yaxis.min.toFixed(2) - + " – " + axes.yaxis.max.toFixed(2)); - }); - - placeholder.bind('plotzoom', function (event, plot) { - var axes = plot.getAxes(); - $(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2) - + " – " + axes.xaxis.max.toFixed(2) - + " and y: " + axes.yaxis.min.toFixed(2) - + " – " + axes.yaxis.max.toFixed(2)); - }); - - // add zoom out button - $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) { - e.preventDefault(); - plot.zoomOut(); - }); - - // and add panning buttons - - // little helper for taking the repetitive work out of placing - // panning arrows - function addArrow(dir, right, top, offset) { - $('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) { - e.preventDefault(); - plot.pan(offset); - }); - } - - addArrow('left', 55, 60, { left: -100 }); - addArrow('right', 25, 60, { left: 100 }); - addArrow('up', 40, 45, { top: -100 }); - addArrow('down', 40, 75, { top: 100 }); -}); -</script> - - </body> -</html> |