Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in
Toggle navigation
F
flot
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
HS-public
flot
Commits
5145b0a0
Commit
5145b0a0
authored
Jul 16, 2012
by
David Schnur
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Cleanup and markup standardization.
parent
7cdc5938
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
48 additions
and
43 deletions
+48
-43
PLUGINS.md
PLUGINS.md
+48
-43
No files found.
PLUGINS.md
View file @
5145b0a0
Writing plugins
## Writing plugins ##
---------------
All you need to do to make a new plugin is creating an init function
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
and a set of options (if needed), stuffing it into an object and
putting it in the $.plot.plugins array. For example:
putting it in the $.plot.plugins array. For example:
function myCoolPluginInit(plot) {
```
js
plot.coolstring = "Hello!";
function
myCoolPluginInit
(
plot
)
{
};
plot
.
coolstring
=
"Hello!"
;
};
$.plot.plugins.push({ init: myCoolPluginInit, options: { ... } });
$
.
plot
.
plugins
.
push
({
init
:
myCoolPluginInit
,
options
:
{
...
}
});
// if $.plot is called, it will return a plot object with the
// if $.plot is called, it will return a plot object with the
// attribute "coolstring"
// attribute "coolstring"
```
Now, given that the plugin might run in many different places, it's
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
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,53 +22,55 @@ this: (function () { inner code ... })(). To make it even more robust
in case $ is not bound to jQuery but some other Javascript library, we
in case $ is not bound to jQuery but some other Javascript library, we
can write it as
can write it as
(function ($) {
```
js
// plugin definition
(
function
(
$
)
{
// ...
// plugin definition
})(jQuery);
// ...
})(
jQuery
);
```
There's a complete example below, but you should also check out the
There's a complete example below, but you should also check out the
plugins bundled with Flot.
plugins bundled with Flot.
Complete example
## Complete example ##
----------------
Here is a simple debug plugin which alerts each of the series in the
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
plot. It has a single option that control whether it is enabled and
how much info to output:
how much info to output:
(function ($) {
```
js
function init(plot) {
(
function
(
$
)
{
function
init
(
plot
)
{
var
debugLevel
=
1
;
var
debugLevel
=
1
;
function
checkDebugEnabled
(
plot
,
options
)
{
function
checkDebugEnabled
(
plot
,
options
)
{
if (options.debug) {
if
(
options
.
debug
)
{
debugLevel
=
options
.
debug
;
debugLevel
=
options
.
debug
;
plot
.
hooks
.
processDatapoints
.
push
(
alertSeries
);
plot
.
hooks
.
processDatapoints
.
push
(
alertSeries
);
}
}
}
}
function alertSeries(plot, series, datapoints) {
function
alertSeries
(
plot
,
series
,
datapoints
)
{
var msg = "series " + series.label;
var
msg
=
"series "
+
series
.
label
;
if (debugLevel > 1)
if
(
debugLevel
>
1
)
{
msg
+=
" with "
+
series
.
data
.
length
+
" points"
;
msg
+=
" with "
+
series
.
data
.
length
+
" points"
;
alert(msg);
alert
(
msg
);
}
}
plot
.
hooks
.
processOptions
.
push
(
checkDebugEnabled
);
plot
.
hooks
.
processOptions
.
push
(
checkDebugEnabled
);
}
}
var options = { debug: 0 };
var
options
=
{
debug
:
0
};
$.plot.plugins.push({
$
.
plot
.
plugins
.
push
({
init: init,
init
:
init
,
options: options,
options
:
options
,
name: "simpledebug",
name
:
"simpledebug"
,
version: "0.1"
version
:
"0.1"
});
});
})(jQuery);
})(
jQuery
);
```
We also define "name" and "version". It's not used by Flot, but might
We also define "name" and "version". It's not used by Flot, but might
be helpful for other plugins in resolving dependencies.
be helpful for other plugins in resolving dependencies.
...
@@ -75,7 +78,9 @@ be helpful for other plugins in resolving dependencies.
...
@@ -75,7 +78,9 @@ be helpful for other plugins in resolving dependencies.
Put the above in a file named "jquery.flot.debug.js", include it in an
Put the above in a file named "jquery.flot.debug.js", include it in an
HTML page and then it can be used with:
HTML page and then it can be used with:
```
js
$
.
plot
(
$
(
"#placeholder"
),
[...],
{
debug
:
2
});
$
.
plot
(
$
(
"#placeholder"
),
[...],
{
debug
:
2
});
```
This simple plugin illustrates a couple of points:
This simple plugin illustrates a couple of points:
...
@@ -88,8 +93,7 @@ The two last points are important because there may be multiple plots
...
@@ -88,8 +93,7 @@ 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.
on the same page, and you'd want to make sure they are not mixed up.
Shutting down a plugin
## Shutting down a plugin ##
----------------------
Each plot object has a shutdown hook which is run when plot.shutdown()
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
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,8 +111,7 @@ garbage collected yet, and worse, if your handler eventually runs, it
may overwrite stuff on a completely different plot.
may overwrite stuff on a completely different plot.
Some hints on the options
## Some hints on the options ##
-------------------------
Plugins should always support appropriate options to enable/disable
Plugins should always support appropriate options to enable/disable
them because the plugin user may have several plots on the same page
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,14 +123,16 @@ 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
points or lines options in core Flot, you can put them in "series" in
the options object, e.g.
the options object, e.g.
var options = {
```
js
series: {
var
options
=
{
series
:
{
downsample
:
{
downsample
:
{
algorithm: null,
algorithm
:
null
,
maxpoints: 1000
maxpoints
:
1000
}
}
}
}
}
}
```
Then they will be copied by Flot into each series, providing default
Then they will be copied by Flot into each series, providing default
values in case none are specified.
values in case none are specified.
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment