Implemented plugin system, introduced experimental hooks system (three hooks...

Implemented plugin system, introduced experimental hooks system (three hooks defined at the moment), moved thresholding to plugin, new stack plugin for stacking charts, refactoring of data processing to support plugin writing, moved series specific global options, changed semantics of arguments to plothover event to reflect the situation with data transformations

git-svn-id: https://flot.googlecode.com/svn/trunk@157 1e0a6537-2640-0410-bfb7-f154510ff394

NEWS.txt

 Flot 0.x
 --------
 
+API changes:
+
+In the global options specified in the $.plot command,
+"lines", "points", "bars" and "shadowSize" have been moved to a
+sub-object called "series", i.e.
+
+  $.plot(placeholder, data, { lines: { show: true }})
+
+becomes
+
+  $.plot(placeholder, data, { series: { lines: { show: true }}})
+
+All future series-specific options will go into this sub-object (to
+simplify plugin writing). Backward-compatibility hooks are in place,
+so old code should not break.
+
+"plothover" no longer provides the original data point, but instead a
+normalized one, since there may be no corresponding original point.
+
+
 Changes:
 
 - Added support for disabling interactivity for specific data series
@@ -8,10 +28,11 @@ Changes:
 
 - Flot now calls $() on the placeholder and optional legend container
   passed in so you can specify DOM elements or CSS expressions to make
-  it easier to use Flot with libraries like Prototype or Mootools.
+  it easier to use Flot with libraries like Prototype or Mootools or
+  through raw JSON from Ajax responses.
 
 - A new "plotselecting" event is now emitted while the user is making
-  selection.
+  a selection.
 
 - Added a new crosshairs feature for tracing the mouse position on the
   axes, enable with crosshair { mode: "x"} (see the new tracking
@@ -49,10 +70,6 @@ Changes:
   set to true connects the points with horizontal/vertical steps
   instead of diagonal lines.
 
-- Thresholding: you can set a threshold and a color, and the data
-  points below that threshold will then get the color. Useful for
-  marking data below 0, for instance.
-
 - The legend labelFormatter now passes the series in addition to just
   the label (suggestion by Vincent Lemeltier).
 
@@ -62,6 +79,22 @@ Changes:
   don't have to start from the axis. This can be used to make stacked
   bars.
 
+- Plugin system: register an init method in the $.flot.plugins array
+  to get started, see PLUGINS.txt for details on how to write plugins.
+
+- Hooks: you can register functions that are called while Flot is
+  crunching the data and doing the plot. This can be used to modify
+  Flot without changing the source, useful for writing plugins. At
+  this point only a few hooks are defined.
+  
+- Threshold plugin: you can set a threshold and a color, and the data
+  points below that threshold will then get the color. Useful for
+  marking data below 0, for instance.
+
+- Stack plugin: you can specify a stack key for each series to have
+  them summed. This is useful for drawing additive/cumulative graphs
+  with bars and (currently unfilled) lines.
+
 Bug fixes:
 
 - Fixed two corner-case bugs when drawing filled curves (report and

PLUGINS.txt

+Writing plugins
+---------------
+
+To make a new plugin, create an init function and a set of options (if
+needed), stuff it into an object and put it in the $.plot.plugins
+array. For example:
+
+  function myCoolPluginInit(plot) { plot.coolstring = "Hello!" };
+  var myCoolOptions = { coolstuff: { show: true } }
+  $.plot.plugins.push({ init: myCoolPluginInit, options: myCoolOptions });
+
+  // now when $.plot is called, the returned object will have the
+  // attribute "coolstring"
+
+Now, given that the plugin might run in many different places, it's
+a good idea to avoid leaking names. We can avoid this by wrapping the
+above lines in an anonymous function which we call immediately, like
+this: (function () { inner code ... })(). To make it even more robust
+in case $ is not bound to jQuery but some other Javascript library, we
+can write it as
+
+  (function ($) {
+    // plugin definition
+    // ...
+  })(jQuery);
+
+Here is a simple debug plugin which alerts each of the series in the
+plot. It has a single option that control whether it is enabled and
+how much info to output:
+
+  (function ($) {
+    function init(plot) {
+      var debugLevel = 1;
+    
+      function checkDebugEnabled(args) {
+        if (args.options.debug) {
+          debugLevel = args.options.debug;
+            
+          plot.hooks.processDatapoints.push(alertSeries);
+        }
+      }
+
+      function alertSeries(args) {
+        var series = args.series;
+        var msg = "series " + series.label;
+        if (debugLevel > 1)
+          msg += " with " + series.data.length + " points";
+        alert(msg);
+      }
+    
+      plot.hooks.processOptions.push(checkDebugEnabled);
+    }
+
+    var options = { debug: 0 };
+    
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: "simpledebug",
+        version: "0.1"
+    });
+  })(jQuery);
+
+We also define "name" and "version". It's not used by Flot, but might
+be helpful for other plugins in resolving dependencies.
+  
+Put the above in a file named "jquery.flot.debug.js", include it in an
+HTML page and then it can be used with:
+
+  $.plot($("#placeholder"), [...], { debug: 2 });
+
+This simple plugin illustrates a couple of points:
+
+ - It uses the anonymous function trick to ensure no namespace pollution.
+ - It can be enabled/disabled through an option.
+ - Variables in the init function can be used to store plot-specific
+   state between the hooks.
+
+ 
+Options guidelines
+==================
+   
+Plugins should always support appropriate options to enable/disable
+them because the plugin user may have several plots on the same page
+where only one should use the plugin.
+
+If the plugin needs series-specific options, you can put them in
+"series" in the options object, e.g.
+
+  var options = {
+    series: {
+      downsample: {
+        algorithm: null,
+        maxpoints: 1000
+      }
+    }
+  }
+
+Then they will be copied by Flot into each series, providing the
+defaults in case the plugin user doesn't specify any. Again, in most
+cases it's probably a good idea if the plugin is turned off rather
+than on per default, just like most of the powerful features in Flot.
+
+Think hard and long about naming the options. These names are going to
+be public API, and code is going to depend on them if the plugin is
+succesful.

examples/index.html

@@ -15,12 +15,26 @@
 
     <ul>
       <li><a href="basic.html">Basic example</a></li>
-      <li><a href="graph-types.html">Different graph types</a> and <a href="setting-options.html">setting various options</a></li>
-      <li><a href="turning-series.html">Turning series on/off</a> and <a href="thresholding.html">thresholding the data</a></li>
+      <li><a href="graph-types.html">Different graph types</a></li>
+      <li><a href="setting-options.html">Setting various options</a></li>
+    </ul>
+
+    <p>Being interactive:</p>
+    
+    <ul>
+      <li><a href="turning-series.html">Turning series on/off</a></li>
       <li><a href="selection.html">Selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li>
+      <li><a href="interacting.html">Interacting with the data points</a></li>
+    </ul>
+
+    <p>Some more esoteric features:</p>
+    
+    <ul>
       <li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a></li>
       <li><a href="dual-axis.html">Dual axis support</a></li>
-      <li><a href="interacting.html">Interacting with the data</a> and <a href="tracking.html">tracking curves with crosshair</a></li>
+      <li><a href="thresholding.html">Thresholding the data</a> (with plugin)</li>
+      <li><a href="stacking.html">Stacked charts</a> (with plugin)</li>
+      <li><a href="tracking.html">Tracking curves with crosshair</a></li>
     </ul>
  </body>
 </html>

examples/interacting.html

@@ -33,9 +33,11 @@ $(function () {
     }
 
     var plot = $.plot($("#placeholder"),
-           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ],
-           { lines: { show: true },
-             points: { show: true },
+           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
+               series: {
+                   lines: { show: true },
+                   points: { show: true }
+               },
                selection: { mode: "xy" },
                grid: { hoverable: true, clickable: true },
                yaxis: { min: -1.2, max: 1.2 }

examples/selection.html

@@ -70,8 +70,10 @@ $(function () {
     ];
 
     var options = {
+        series: {
             lines: { show: true },
-        points: { show: true },
+            points: { show: true }
+        },
         legend: { noColumns: 2 },
         xaxis: { tickDecimals: 0 },
         yaxis: { min: 0 },

examples/setting-options.html

@@ -42,8 +42,10 @@ $(function () {
         { label: "cos(x)",  data: d2},
         { label: "tan(x)",  data: d3}
     ], {
+        series: {
             lines: { show: true },
-        points: { show: true },
+            points: { show: true }
+        },
         xaxis: {
             ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
         },

examples/stacking.html

+<!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.stack.js"></script>
+ </head>
+    <body>
+    <h1>Flot Examples</h1>
+
+    <div id="placeholder" style="width:600px;height:300px;"></div>
+
+    <p>With the stack plugin, you can have Flot stack the
+    series. This is useful if you wish to display both a total and the
+    constituents it is made of. The only requirement is that you provide
+    the input sorted on x.</p>
+
+    <p class="stackControls">
+    <input type="button" value="With stacking">
+    <input type="button" value="Without stacking">
+    </p>
+
+    <p class="graphControls">
+    <input type="button" value="Bars">
+    <input type="button" value="Lines">
+    <input type="button" value="Lines with steps">
+    </p>
+
+<script id="source">
+$(function () {
+    var d1 = [];
+    for (var i = 0; i <= 10; i += 1)
+        d1.push([i, parseInt(Math.random() * 30)]);
+
+    var d2 = [];
+    for (var i = 0; i <= 10; i += 1)
+        d2.push([i, parseInt(Math.random() * 30)]);
+
+    var d3 = [];
+    for (var i = 0; i <= 10; i += 1)
+        d3.push([i, parseInt(Math.random() * 30)]);
+
+    var stack = 0, bars = true, lines = false, steps = false;
+    
+    function plotWithOptions() {
+        $.plot($("#placeholder"), [ d1, d2, d3 ], {
+            series: {
+                stack: stack,
+                lines: { show: lines, steps: steps },
+                bars: { show: bars, barWidth: 0.6 }
+            }
+        });
+    }
+
+    plotWithOptions();
+    
+    $(".stackControls input").click(function (e) {
+        e.preventDefault();
+        stack = $(this).val() == "With stacking" ? true : null;
+        plotWithOptions();
+    });
+    $(".graphControls input").click(function (e) {
+        e.preventDefault();
+        bars = $(this).val().indexOf("Bars") != -1;
+        lines = $(this).val().indexOf("Lines") != -1;
+        steps = $(this).val().indexOf("steps") != -1;
+        plotWithOptions();
+    });
+});
+</script>
+
+ </body>
+</html>

examples/thresholding.html

@@ -7,15 +7,17 @@
     <!--[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.threshold.js"></script>
  </head>
     <body>
     <h1>Flot Examples</h1>
 
     <div id="placeholder" style="width:600px;height:300px;"></div>
 
-    <p>You can apply a specific color to the part of a data series
-    below a threshold. This is can be useful for highlighting negative
-    values, e.g. when displaying net results or what's in stock.</p>
+    <p>With the threshold plugin, you can apply a specific color to
+    the part of a data series below a threshold. This is can be useful
+    for highlighting negative values, e.g. when displaying net results
+    or what's in stock.</p>
 
     <p class="controls">
     <input type="button" value="Threshold at 5">
@@ -29,7 +31,7 @@ $(function () {
     for (var i = 0; i <= 60; i += 1)
         d1.push([i, parseInt(Math.random() * 30 - 10)]);
 
-    function doPlot(t) {
+    function plotWithOptions(t) {
         $.plot($("#placeholder"), [ {
             data: d1,
             color: "rgb(30, 180, 20)",
@@ -38,12 +40,12 @@ $(function () {
         } ]);
     }
 
-    doPlot(0);
+    plotWithOptions(0);
     
     $(".controls input").click(function (e) {
         e.preventDefault();
         var t = parseFloat($(this).val().replace('Threshold at ', ''));
-        doPlot(t);
+        plotWithOptions(t);
     });
 });
 </script>

examples/tracking.html

@@ -18,7 +18,7 @@
 
     <p>If you combine it with listening on hover events, you can use
     it to track the intersection on the curves by interpolating
-    the data points.</p>
+    the data points (look at the legend).</p>
 
     <p id="hoverdata"></p>
 
@@ -31,8 +31,11 @@ $(function () {
     }
 
     var plot = $.plot($("#placeholder"),
-           [ { data: sin, label: "sin(x) = -0.00"}, { data: cos, label: "cos(x) = -0.00" } ],
-           { lines: { show: true },
+                      [ { data: sin, label: "sin(x) = -0.00"},
+                        { data: cos, label: "cos(x) = -0.00" } ], {
+                            series: {
+                                lines: { show: true }
+                            },
                             crosshair: { mode: "x" },
                             grid: { hoverable: true, autoHighlight: false },
                             yaxis: { min: -1.2, max: 1.2 }

examples/visitors.html

@@ -18,7 +18,7 @@
 
     <div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div>
 
-<script id="source" language="javascript" type="text/javascript">
+<script id="source">
 $(function () {
     var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];
 
@@ -39,7 +39,7 @@ $(function () {
         d.setUTCHours(0);
         var i = d.getTime();
         do {
-            // when we don't set yaxis the rectangle automatically
+            // when we don't set yaxis, the rectangle automatically
             // extends to infinity upwards and downwards
             markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
             i += 7 * 24 * 60 * 60 * 1000;
@@ -57,8 +57,10 @@ $(function () {
     var plot = $.plot($("#placeholder"), [d], options);
     
     var overview = $.plot($("#overview"), [d], {
+        series: {
             lines: { show: true, lineWidth: 1 },
-        shadowSize: 0,
+            shadowSize: 0
+        },
         xaxis: { ticks: [], mode: "time" },
         yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
         selection: { mode: "x" }

examples/zooming.html

@@ -26,7 +26,7 @@
       the small overview plot to the right has been connected to the large
       plot. Try selecting a rectangle on either of them.</p>
 
-<script id="source" language="javascript" type="text/javascript">
+<script id="source">
 $(function () {
     // setup plot
     function getData(x1, x2) {
@@ -43,8 +43,10 @@ $(function () {
 
     var options = {
         legend: { show: false },
+        series: {
             lines: { show: true },
-        points: { show: true },
+            points: { show: true }
+        },
         yaxis: { ticks: 10 },
         selection: { mode: "xy" }
     };
@@ -56,8 +58,10 @@ $(function () {
     // setup overview
     var overview = $.plot($("#overview"), startData, {
         legend: { show: true, container: $("#overviewLegend") },
+        series: {
             lines: { show: true, lineWidth: 1 },
-        shadowSize: 0,
+            shadowSize: 0
+        },
         xaxis: { ticks: 4 },
         yaxis: { ticks: 3, min: -2, max: 2 },
         grid: { color: "#999" },

jquery.flot.stack.js

+/*
+Flot plugin for stacking data sets, i.e. putting them on top of each
+other, for accumulative graphs. Note that the plugin assumes the data
+is sorted on x. Also note that stacking a mix of positive and negative
+values in most instances doesn't make sense (so it looks weird).
+
+Two or more series are stacked when their "stack" attribute is set to
+the same key (which can be any number or string or just "true"). To
+specify the default stack, you can set
+
+  series: {
+    stack: null or true or key (number/string)
+  }
+
+or specify it for a specific series
+
+  $.plot($("#placeholder"), [{ data: [ ... ], stack: true ])
+  
+The stacking order is determined by the order of the data series in
+the array (later series end up on top of the previous).
+
+Internally, the plugin modifies the datapoints in each series, adding
+an offset to the y value. For line series, extra data points are
+inserted through interpolation. For bar charts, the second y value is
+also adjusted.
+*/
+
+(function ($) {
+    var options = {
+        series: { stack: null } // or number/string
+    };
+    
+    function init(plot) {
+        function findMatchingSeries(s, allseries) {
+            var res = null
+            for (var i = 0; i < allseries.length; ++i) {
+                if (s == allseries[i])
+                    break;
+                
+                if (allseries[i].stack == s.stack)
+                    res = allseries[i];
+            }
+            
+            return res;
+        }
+        
+        function stackData(plot, s, datapoints) {
+            if (s.stack == null)
+                return;
+
+            var other = findMatchingSeries(s, plot.getData());
+            if (!other)
+                return;
+            
+            var ps = datapoints.pointsize,
+                points = datapoints.points,
+                otherps = other.datapoints.pointsize,
+                otherpoints = other.datapoints.points,
+                newpoints = [],
+                px, py, intery, qx, qy,
+                withlines = s.lines.show, withbars = s.bars.show,
+                withsteps = withlines && s.lines.steps,
+                i = 0, j = 0, l;
+
+            while (true) {
+                if (i >= points.length)
+                    break;
+
+                l = newpoints.length;
+
+                if (j >= otherpoints.length
+                    || otherpoints[j] == null
+                    || points[i] == null) {
+                    // degenerate cases
+                    for (m = 0; m < ps; ++m)
+                        newpoints.push(points[i + m]);
+                    i += ps;
+                }
+                else {
+                    // cases where we actually got two points
+                    px = points[i];
+                    py = points[i + 1];
+                    qx = otherpoints[j];
+                    qy = otherpoints[j + 1];
+
+                    if (px == qx) {
+                        for (m = 0; m < ps; ++m)
+                            newpoints.push(points[i + m]);
+
+                        newpoints[l + 1] += qy;
+
+                        i += ps;
+                        j += otherps;
+                    }
+                    else if (px > qx) {
+                        // we got past point below, might need to
+                        // insert interpolated extra point
+                        if (withlines && i > 0 && points[i - ps] != null) {
+                            intery = py + (points[i - ps + 1] - py) * (qx - px) / (points[i - ps] - px);
+                            newpoints.push(qx);
+                            newpoints.push(intery + qy)
+                            for (m = 2; m < ps; ++m)
+                                newpoints.push(points[i + m]);
+                        }
+
+                        j += otherps;
+                    }
+                    else {
+                        for (m = 0; m < ps; ++m)
+                            newpoints.push(points[i + m]);
+                        
+                        // we might be able to interpolate a point below,
+                        // this can give us a better y
+                        if (withlines && j > 0 && otherpoints[j - ps] != null) {
+                            intery = qy + (otherpoints[j - ps + 1] - qy) * (px - qx) / (otherpoints[j - ps] - qx);
+
+                            newpoints[l + 1] += intery;
+                        }
+                        
+                        i += ps;
+                    }
+                    
+                    if (l != newpoints.length && withbars)
+                        newpoints[l + 2] += qy;
+                }
+
+                // maintain the line steps invariant
+                if (withsteps && l != newpoints.length && l > 0
+                    && newpoints[l] != null
+                    && newpoints[l] != newpoints[l - ps]
+                    && newpoints[l + 1] != newpoints[l - ps + 1]) {
+                    for (m = 0; m < ps; ++m)
+                        newpoints[l + ps + m] = newpoints[l + m];
+                    newpoints[l + 1] = newpoints[l - ps + 1];
+                }
+            }
+            
+            datapoints.points = newpoints;
+        }
+        
+        plot.hooks.processDatapoints.push(stackData);
+    }
+    
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'stack',
+        version: '1.0'
+    });
+})(jQuery);

jquery.flot.threshold.js

+/*
+Flot plugin for thresholding data. Controlled through the option
+"threshold" in either the global series options
+
+  series: {
+    threshold: {
+      below: number
+      color: colorspec
+    }
+  }
+
+or in a specific series
+
+  $.plot($("#placeholder"), [{ data: [ ... ], threshold: { ... }}])
+
+The data points below "below" are drawn with the specified color. This
+makes it easy to mark points below 0, e.g. for budget data.
+
+Internally, the plugin works by splitting the data into two series,
+above and below the threshold. The extra series below the threshold
+will have its label cleared and the special "originSeries" attribute
+set to the original series. You may need to check for this in hover
+events.
+*/
+
+(function ($) {
+    var options = {
+        series: { threshold: null } // or { below: number, color: color spec}
+    };
+    
+    function init(plot) {
+        function thresholdData(plot, s, datapoints) {
+            if (!s.threshold)
+                return;
+            
+            var ps = datapoints.pointsize, i, x, y, p, prevp,
+                thresholded = $.extend({}, s); // note: shallow copy
+
+            thresholded.datapoints = { points: [], pointsize: ps };
+            thresholded.label = null;
+            thresholded.color = s.threshold.color;
+            thresholded.threshold = null;
+            thresholded.originSeries = s;
+            thresholded.data = [];
+
+            var below = s.threshold.below,
+                origpoints = datapoints.points,
+                addCrossingPoints = s.lines.show;
+
+            threspoints = [];
+            newpoints = [];
+
+            for (i = 0; i < origpoints.length; i += ps) {
+                x = origpoints[i]
+                y = origpoints[i + 1];
+
+                prevp = p;
+                if (y < below)
+                    p = threspoints;
+                else
+                    p = newpoints;
+
+                if (addCrossingPoints && prevp != p && x != null
+                    && i > 0 && origpoints[i - ps] != null) {
+                    var interx = (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]) * (below - y) + x;
+                    prevp.push(interx);
+                    prevp.push(below);
+                    for (m = 2; m < ps; ++m)
+                        prevp.push(origpoints[i + m]);
+                    
+                    p.push(null); // start new segment
+                    p.push(null);
+                    for (m = 2; m < ps; ++m)
+                        p.push(origpoints[i + m]);
+                    p.push(interx);
+                    p.push(below);
+                    for (m = 2; m < ps; ++m)
+                        p.push(origpoints[i + m]);
+                }
+
+                p.push(x);
+                p.push(y);
+            }
+
+            datapoints.points = newpoints;
+            thresholded.datapoints.points = threspoints;
+            
+            if (thresholded.datapoints.points.length > 0)
+                plot.getData().push(thresholded);
+                
+            // FIXME: there are probably some edge cases left in bars
+        }
+        
+        plot.hooks.processDatapoints.push(thresholdData);
+    }
+    
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'threshold',
+        version: '1.0'
+    });
+})(jQuery);