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
16 years ago · 414e17234b
parent 59b1afed91
commit 414e17234b
4 changed files with 114 additions and 0 deletions
--- 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

--- a/examples/index.html
+++ b/examples/index.html
@ -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="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="resize.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
    </ul>

    <p>Various features:</p>
--- a/examples/resize.html
+++ b/examples/resize.html
@ -0,0 +1,61 @@
+<!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>
--- a/jquery.flot.resize.js
+++ 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);