From 414e17234bb2f61e0843f80b61b4f7015f042ef1 Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Tue, 23 Nov 2010 19:06:40 +0000 Subject: [PATCH] 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 --- NEWS.txt | 2 ++ examples/index.html | 1 + examples/resize.html | 61 +++++++++++++++++++++++++++++++++++++++++++ jquery.flot.resize.js | 50 +++++++++++++++++++++++++++++++++++ 4 files changed, 114 insertions(+) create mode 100644 examples/resize.html create mode 100644 jquery.flot.resize.js diff --git a/NEWS.txt b/NEWS.txt index 17428b7..49faee6 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -67,6 +67,8 @@ Changes: - Support for customizing the point type through a callback when plotting points and new symbol plugin with some predefined point 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 diff --git a/examples/index.html b/examples/index.html index 75b2fc4..4857fa7 100644 --- a/examples/index.html +++ b/examples/index.html @@ -27,6 +27,7 @@
  • Rectangular selection support and zooming and zooming with overview
    • (both with selection plugin)
  • Interacting with the data points
  • Panning and zooming (with navigation plugin)
    • +
  • Automatically redraw when window is resized (with resize plugin)

    • Various features:

    diff --git a/examples/resize.html b/examples/resize.html new file mode 100644 index 0000000..5403f2e --- /dev/null +++ b/examples/resize.html @@ -0,0 +1,61 @@ + + + + + Flot Examples + + + + + + + + +

    Flot Examples

    + +
    + +

    + +

    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.

    + +

    Try resizing the window.

    + + + + + + diff --git a/jquery.flot.resize.js b/jquery.flot.resize.js new file mode 100644 index 0000000..a70fc43 --- /dev/null +++ b/jquery.flot.resize.js @@ -0,0 +1,50 @@ +/* +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);