Skip to content

F
flot
Commit 414e1723 authored by olau@iola.dk's avatar olau@iola.dk
Browse files
Options

Add resize plugin for automatically redrawing when placeholders are resized 


git-svn-id: https://flot.googlecode.com/svn/trunk@268 1e0a6537-2640-0410-bfb7-f154510ff394
parent 59b1afed
Show whitespace changes
Inline Side-by-side
Showing with 114 additions and 0 deletions
NEWS.txt
View file @ 414e1723
...@@ -67,6 +67,8 @@ Changes: ...@@ -67,6 +67,8 @@ Changes:
- Support for customizing the point type through a callback when - Support for customizing the point type through a callback when
plotting points and new symbol plugin with some predefined point plotting points and new symbol plugin with some predefined point
types (sponsored by Utility Data Corporation). types (sponsored by Utility Data Corporation).
- Resize plugin for automatically redrawing when the placeholder
changes size, e.g. on window resizes (sponsored by Novus Partners).
- New hooks: drawSeries - New hooks: drawSeries
......
examples/index.html
View file @ 414e1723
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
<li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li> (both with selection plugin) <li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li> (both with selection plugin)
<li><a href="interacting.html">Interacting with the data points</a></li> <li><a href="interacting.html">Interacting with the data points</a></li>
<li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li> <li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li>
<li><a href="resize.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
</ul> </ul>
<p>Various features:</p> <p>Various features:</p>
......
examples/resize.html 0 → 100644
View file @ 414e1723
<!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"></link>
<!--[if IE]><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.resize.js"></script>
<style>
html, body {
height: 100%; /* make the percentage height on placeholder work */
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:80%;height:40%;"></div>
<p class="message"></p>
<p>Sometimes it makes more sense to just let the plot take up the
available space. In that case, we need to redraw the plot each
time the placeholder changes its size. If you include the resize
plugin, this is handled automatically.</p>
<p>Try resizing the window.</p>
<script id="source" language="javascript" type="text/javascript">
$(function () {
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]];
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
var placeholder = $("#placeholder");
var plot = $.plot(placeholder, [d1, d2, d3]);
// the plugin includes a jQuery plugin for adding resize events to
// any element, let's just add a callback so we can display the
// placeholder size
placeholder.resize(function () {
$(".message").text("Placeholder is now "
+ $(this).width() + "x" + $(this).height()
+ " pixels");
});
});
</script>
</body>
</html>
jquery.flot.resize.js 0 → 100644
View file @ 414e1723
/*
Flot plugin for automatically redrawing plots when the placeholder
size changes, e.g. on window resizes.
It works by listening for changes on the placeholder div (through the
jQuery resize event plugin) - if the size changes, it will redraw the
plot.
There are no options. If you need to disable the plugin for some
plots, you can just fix the size of their placeholders.
*/
/* Inline dependency:
* jQuery resize event - v1.1 - 3/14/2010
* http://benalman.com/projects/jquery-resize-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
(function ($) {
var redrawing = 0;
var options = { }; // no options
function init(plot) {
function bindEvents(plot, eventHolder) {
if (!redrawing)
plot.getPlaceholder().resize(onResize);
function onResize() {
++redrawing;
$.plot(plot.getPlaceholder(), plot.getData(), plot.getOptions());
--redrawing;
}
}
plot.hooks.bindEvents.push(bindEvents);
}
$.plot.plugins.push({
init: init,
options: options,
name: 'resize',
version: '1.0'
});
})(jQuery);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment