Index: third_party/flot/PLUGINS.md |
diff --git a/third_party/flot/PLUGINS.md b/third_party/flot/PLUGINS.md |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b5bf3002033b99f67bf8bae9e90c5050512a24f6 |
--- /dev/null |
+++ b/third_party/flot/PLUGINS.md |
@@ -0,0 +1,143 @@ |
+## Writing plugins ## |
+ |
+All you need to do to make a new plugin is creating an init function |
+and a set of options (if needed), stuffing it into an object and |
+putting it in the $.plot.plugins array. For example: |
+ |
+```js |
+function myCoolPluginInit(plot) { |
+ plot.coolstring = "Hello!"; |
+}; |
+ |
+$.plot.plugins.push({ init: myCoolPluginInit, options: { ... } }); |
+ |
+// if $.plot is called, it will return a plot object with the |
+// attribute "coolstring" |
+``` |
+ |
+Now, given that the plugin might run in many different places, it's |
+a good idea to avoid leaking names. The usual trick here is wrap the |
+above lines in an anonymous function which is called 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 |
+ |
+```js |
+(function ($) { |
+ // plugin definition |
+ // ... |
+})(jQuery); |
+``` |
+ |
+There's a complete example below, but you should also check out the |
+plugins bundled with Flot. |
+ |
+ |
+## Complete example ## |
+ |
+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: |
+ |
+```js |
+(function ($) { |
+ function init(plot) { |
+ var debugLevel = 1; |
+ |
+ function checkDebugEnabled(plot, options) { |
+ if (options.debug) { |
+ debugLevel = options.debug; |
+ plot.hooks.processDatapoints.push(alertSeries); |
+ } |
+ } |
+ |
+ function alertSeries(plot, series, datapoints) { |
+ 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: |
+ |
+```js |
+ $.plot($("#placeholder"), [...], { debug: 2 }); |
+``` |
+ |
+This simple plugin illustrates a couple of points: |
+ |
+ - It uses the anonymous function trick to avoid name 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. |
+ |
+The two last points are important because there may be multiple plots |
+on the same page, and you'd want to make sure they are not mixed up. |
+ |
+ |
+## Shutting down a plugin ## |
+ |
+Each plot object has a shutdown hook which is run when plot.shutdown() |
+is called. This usually mostly happens in case another plot is made on |
+top of an existing one. |
+ |
+The purpose of the hook is to give you a chance to unbind any event |
+handlers you've registered and remove any extra DOM things you've |
+inserted. |
+ |
+The problem with event handlers is that you can have registered a |
+handler which is run in some point in the future, e.g. with |
+setTimeout(). Meanwhile, the plot may have been shutdown and removed, |
+but because your event handler is still referencing it, it can't be |
+garbage collected yet, and worse, if your handler eventually runs, it |
+may overwrite stuff on a completely different plot. |
+ |
+ |
+## Some hints on the options ## |
+ |
+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. 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. |
+ |
+If the plugin needs options that are specific to each series, like the |
+points or lines options in core Flot, you can put them in "series" in |
+the options object, e.g. |
+ |
+```js |
+var options = { |
+ series: { |
+ downsample: { |
+ algorithm: null, |
+ maxpoints: 1000 |
+ } |
+ } |
+} |
+``` |
+ |
+Then they will be copied by Flot into each series, providing default |
+values in case none are specified. |
+ |
+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 |
+successful. |