Commit d51a1013 authored by David Schnur's avatar David Schnur

Merge pull request #22 from phusion/markdown_docs

parents 907ea90b 1d97fe13
This diff is collapsed.
...@@ -2,7 +2,7 @@ Frequently asked questions ...@@ -2,7 +2,7 @@ Frequently asked questions
-------------------------- --------------------------
Q: How much data can Flot cope with? Q: How much data can Flot cope with?
------------------------------------
A: Flot will happily draw everything you send to it so the answer A: Flot will happily draw everything you send to it so the answer
depends on the browser. The excanvas emulation used for IE (built with depends on the browser. The excanvas emulation used for IE (built with
VML) makes IE by far the slowest browser so be sure to test with that VML) makes IE by far the slowest browser so be sure to test with that
...@@ -16,7 +16,7 @@ chart anyway. If you downsample server-side, you also save bandwidth. ...@@ -16,7 +16,7 @@ chart anyway. If you downsample server-side, you also save bandwidth.
Q: Flot isn't working when I'm using JSON data as source! Q: Flot isn't working when I'm using JSON data as source!
---------------------------------------------------------
A: Actually, Flot loves JSON data, you just got the format wrong. A: Actually, Flot loves JSON data, you just got the format wrong.
Double check that you're not inputting strings instead of numbers, Double check that you're not inputting strings instead of numbers,
like [["0", "-2.13"], ["5", "4.3"]]. This is most common mistake, and like [["0", "-2.13"], ["5", "4.3"]]. This is most common mistake, and
...@@ -25,7 +25,7 @@ conversion automatically. ...@@ -25,7 +25,7 @@ conversion automatically.
Q: Can I export the graph? Q: Can I export the graph?
--------------------------
A: You can grab the image rendered by the canvas element used by Flot A: You can grab the image rendered by the canvas element used by Flot
as a PNG or JPEG (remember to set a background). Note that it won't as a PNG or JPEG (remember to set a background). Note that it won't
include anything not drawn in the canvas (such as the legend). And it include anything not drawn in the canvas (such as the legend). And it
...@@ -34,7 +34,7 @@ Flashcanvas. ...@@ -34,7 +34,7 @@ Flashcanvas.
Q: The bars are all tiny in time mode? Q: The bars are all tiny in time mode?
--------------------------------------
A: It's not really possible to determine the bar width automatically. A: It's not really possible to determine the bar width automatically.
So you have to set the width with the barWidth option which is NOT in So you have to set the width with the barWidth option which is NOT in
pixels, but in the units of the x axis (or the y axis for horizontal pixels, but in the units of the x axis (or the y axis for horizontal
...@@ -43,7 +43,7 @@ makes the bars 1 millisecond wide. ...@@ -43,7 +43,7 @@ makes the bars 1 millisecond wide.
Q: Can I use Flot with libraries like Mootools or Prototype? Q: Can I use Flot with libraries like Mootools or Prototype?
------------------------------------------------------------
A: Yes, Flot supports it out of the box and it's easy! Just use jQuery A: Yes, Flot supports it out of the box and it's easy! Just use jQuery
instead of $, e.g. call jQuery.plot instead of $.plot and use instead of $, e.g. call jQuery.plot instead of $.plot and use
jQuery(something) instead of $(something). As a convenience, you can jQuery(something) instead of $(something). As a convenience, you can
...@@ -57,7 +57,7 @@ libraries") for details. ...@@ -57,7 +57,7 @@ libraries") for details.
Q: Flot doesn't work with [insert name of Javascript UI framework]! Q: Flot doesn't work with [insert name of Javascript UI framework]!
-------------------------------------------------------------------
A: Flot is using standard HTML to make charts. If this is not working, A: Flot is using standard HTML to make charts. If this is not working,
it's probably because the framework you're using is doing something it's probably because the framework you're using is doing something
weird with the DOM or with the CSS that is interfering with Flot. weird with the DOM or with the CSS that is interfering with Flot.
......
...@@ -5,14 +5,14 @@ All you need to do to make a new plugin is creating an init function ...@@ -5,14 +5,14 @@ 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) { function myCoolPluginInit(plot) {
plot.coolstring = "Hello!"; 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,10 +21,10 @@ this: (function () { inner code ... })(). To make it even more robust ...@@ -21,10 +21,10 @@ 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 ($) { (function ($) {
// plugin definition // 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.
...@@ -37,37 +37,37 @@ Here is a simple debug plugin which alerts each of the series in the ...@@ -37,37 +37,37 @@ 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 ($) { (function ($) {
function init(plot) { 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 +75,7 @@ be helpful for other plugins in resolving dependencies. ...@@ -75,7 +75,7 @@ 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:
$.plot($("#placeholder"), [...], { debug: 2 }); $.plot($("#placeholder"), [...], { debug: 2 });
This simple plugin illustrates a couple of points: This simple plugin illustrates a couple of points:
...@@ -120,14 +120,14 @@ If the plugin needs options that are specific to each series, like the ...@@ -120,14 +120,14 @@ 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 = { var options = {
series: { 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.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment