Skip to content
This repository
Browse code

Cleanup and markup standardization.

  • Loading branch information...
commit 5145b0a0c51168af0fb8da01188de2725e19efa6 1 parent 7cdc593
David Schnur authored

Showing 1 changed file with 48 additions and 43 deletions. Show diff stats Hide diff stats

  1. 91  PLUGINS.md
91  PLUGINS.md
Source Rendered
... ...
@@ -1,18 +1,19 @@
1  
-Writing plugins
2  
----------------
  1
+## Writing plugins ##
3 2
 
4 3
 All you need to do to make a new plugin is creating an init function
5 4
 and a set of options (if needed), stuffing it into an object and
6 5
 putting it in the $.plot.plugins array. For example:
7 6
 
8  
-    function myCoolPluginInit(plot) {
9  
-      plot.coolstring = "Hello!";
10  
-    };
  7
+```js
  8
+function myCoolPluginInit(plot) {
  9
+    plot.coolstring = "Hello!";
  10
+};
11 11
 
12  
-    $.plot.plugins.push({ init: myCoolPluginInit, options: { ... } });
  12
+$.plot.plugins.push({ init: myCoolPluginInit, options: { ... } });
13 13
 
14  
-    // if $.plot is called, it will return a plot object with the
15  
-    // attribute "coolstring"
  14
+// if $.plot is called, it will return a plot object with the
  15
+// attribute "coolstring"
  16
+```
16 17
 
17 18
 Now, given that the plugin might run in many different places, it's
18 19
 a good idea to avoid leaking names. The usual trick here is wrap the
@@ -21,53 +22,55 @@ this: (function () { inner code ... })(). To make it even more robust
21 22
 in case $ is not bound to jQuery but some other Javascript library, we
22 23
 can write it as
23 24
 
24  
-    (function ($) {
25  
-      // plugin definition
26  
-      // ...
27  
-    })(jQuery);
  25
+```js
  26
+(function ($) {
  27
+    // plugin definition
  28
+    // ...
  29
+})(jQuery);
  30
+```
28 31
 
29 32
 There's a complete example below, but you should also check out the
30 33
 plugins bundled with Flot.
31 34
 
32 35
 
33  
-Complete example
34  
-----------------
  36
+## Complete example ##
35 37
   
36 38
 Here is a simple debug plugin which alerts each of the series in the
37 39
 plot. It has a single option that control whether it is enabled and
38 40
 how much info to output:
39 41
 
40  
-    (function ($) {
41  
-      function init(plot) {
  42
+```js
  43
+(function ($) {
  44
+    function init(plot) {
42 45
         var debugLevel = 1;
43  
-      
  46
+
44 47
         function checkDebugEnabled(plot, options) {
45  
-          if (options.debug) {
  48
+        if (options.debug) {
46 49
             debugLevel = options.debug;
47  
-              
48 50
             plot.hooks.processDatapoints.push(alertSeries);
49  
-          }
50 51
         }
  52
+    }
51 53
 
52  
-        function alertSeries(plot, series, datapoints) {
53  
-          var msg = "series " + series.label;
54  
-          if (debugLevel > 1)
  54
+    function alertSeries(plot, series, datapoints) {
  55
+        var msg = "series " + series.label;
  56
+        if (debugLevel > 1) {
55 57
             msg += " with " + series.data.length + " points";
56  
-          alert(msg);
  58
+            alert(msg);
57 59
         }
58  
-      
  60
+
59 61
         plot.hooks.processOptions.push(checkDebugEnabled);
60  
-      }
  62
+    }
61 63
 
62  
-      var options = { debug: 0 };
  64
+    var options = { debug: 0 };
63 65
       
64  
-      $.plot.plugins.push({
65  
-          init: init,
66  
-          options: options,
67  
-          name: "simpledebug",
68  
-          version: "0.1"
69  
-      });
70  
-    })(jQuery);
  66
+    $.plot.plugins.push({
  67
+        init: init,
  68
+        options: options,
  69
+        name: "simpledebug",
  70
+        version: "0.1"
  71
+    });
  72
+})(jQuery);
  73
+```
71 74
 
72 75
 We also define "name" and "version". It's not used by Flot, but might
73 76
 be helpful for other plugins in resolving dependencies.
@@ -75,7 +78,9 @@ be helpful for other plugins in resolving dependencies.
75 78
 Put the above in a file named "jquery.flot.debug.js", include it in an
76 79
 HTML page and then it can be used with:
77 80
 
  81
+```js
78 82
     $.plot($("#placeholder"), [...], { debug: 2 });
  83
+```
79 84
 
80 85
 This simple plugin illustrates a couple of points:
81 86
 
@@ -88,8 +93,7 @@ The two last points are important because there may be multiple plots
88 93
 on the same page, and you'd want to make sure they are not mixed up.
89 94
 
90 95
 
91  
-Shutting down a plugin
92  
-----------------------
  96
+## Shutting down a plugin ##
93 97
 
94 98
 Each plot object has a shutdown hook which is run when plot.shutdown()
95 99
 is called. This usually mostly happens in case another plot is made on
@@ -107,8 +111,7 @@ garbage collected yet, and worse, if your handler eventually runs, it
107 111
 may overwrite stuff on a completely different plot.
108 112
 
109 113
  
110  
-Some hints on the options
111  
--------------------------
  114
+## Some hints on the options ##
112 115
    
113 116
 Plugins should always support appropriate options to enable/disable
114 117
 them because the plugin user may have several plots on the same page
@@ -120,14 +123,16 @@ If the plugin needs options that are specific to each series, like the
120 123
 points or lines options in core Flot, you can put them in "series" in
121 124
 the options object, e.g.
122 125
 
123  
-    var options = {
124  
-      series: {
  126
+```js
  127
+var options = {
  128
+    series: {
125 129
         downsample: {
126  
-          algorithm: null,
127  
-          maxpoints: 1000
  130
+            algorithm: null,
  131
+            maxpoints: 1000
128 132
         }
129  
-      }
130 133
     }
  134
+}
  135
+```
131 136
 
132 137
 Then they will be copied by Flot into each series, providing default
133 138
 values in case none are specified.

0 notes on commit 5145b0a

Please sign in to comment.
Something went wrong with that request. Please try again.