Commit 7c52f444 authored by Nick Schonning's avatar Nick Schonning

Convert remaining tabs to spaces

parent 8e2f09a9
This diff is collapsed.
...@@ -9,24 +9,24 @@ allows you to plot such a dataset directly. ...@@ -9,24 +9,24 @@ allows you to plot such a dataset directly.
To enable it, you must specify mode: "categories" on the axis with the textual To enable it, you must specify mode: "categories" on the axis with the textual
labels, e.g. labels, e.g.
$.plot("#placeholder", data, { xaxis: { mode: "categories" } }); $.plot("#placeholder", data, { xaxis: { mode: "categories" } });
By default, the labels are ordered as they are met in the data series. If you By default, the labels are ordered as they are met in the data series. If you
need a different ordering, you can specify "categories" on the axis options need a different ordering, you can specify "categories" on the axis options
and list the categories there: and list the categories there:
xaxis: { xaxis: {
mode: "categories", mode: "categories",
categories: ["February", "March", "April"] categories: ["February", "March", "April"]
} }
If you need to customize the distances between the categories, you can specify If you need to customize the distances between the categories, you can specify
"categories" as an object mapping labels to values "categories" as an object mapping labels to values
xaxis: { xaxis: {
mode: "categories", mode: "categories",
categories: { "February": 1, "March": 3, "April": 4 } categories: { "February": 1, "March": 3, "April": 4 }
} }
If you don't specify all categories, the remaining categories will be numbered If you don't specify all categories, the remaining categories will be numbered
from the max value plus 1 (with a spacing of 1 between each). from the max value plus 1 (with a spacing of 1 between each).
......
...@@ -5,11 +5,11 @@ Licensed under the MIT license. ...@@ -5,11 +5,11 @@ Licensed under the MIT license.
The plugin supports these options: The plugin supports these options:
crosshair: { crosshair: {
mode: null or "x" or "y" or "xy" mode: null or "x" or "y" or "xy"
color: color color: color
lineWidth: number lineWidth: number
} }
Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical
crosshair that lets you trace the values on the x axis, "y" enables a crosshair that lets you trace the values on the x axis, "y" enables a
...@@ -39,19 +39,19 @@ The plugin also adds four public methods: ...@@ -39,19 +39,19 @@ The plugin also adds four public methods:
Example usage: Example usage:
var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
$("#graph").bind( "plothover", function ( evt, position, item ) { $("#graph").bind( "plothover", function ( evt, position, item ) {
if ( item ) { if ( item ) {
// Lock the crosshair to the data point being hovered // Lock the crosshair to the data point being hovered
myFlot.lockCrosshair({ myFlot.lockCrosshair({
x: item.datapoint[ 0 ], x: item.datapoint[ 0 ],
y: item.datapoint[ 1 ] y: item.datapoint[ 1 ]
}); });
} else { } else {
// Return normal crosshair operation // Return normal crosshair operation
myFlot.unlockCrosshair(); myFlot.unlockCrosshair();
} }
}); });
- unlockCrosshair() - unlockCrosshair()
......
...@@ -15,44 +15,44 @@ your data array (*even* if you do not intend to plot them later, by setting ...@@ -15,44 +15,44 @@ your data array (*even* if you do not intend to plot them later, by setting
The plugin supports these options: The plugin supports these options:
series: { series: {
points: { points: {
errorbars: "x" or "y" or "xy", errorbars: "x" or "y" or "xy",
xerr: { xerr: {
show: null/false or true, show: null/false or true,
asymmetric: null/false or true, asymmetric: null/false or true,
upperCap: null or "-" or function, upperCap: null or "-" or function,
lowerCap: null or "-" or function, lowerCap: null or "-" or function,
color: null or color, color: null or color,
radius: null or number radius: null or number
}, },
yerr: { same options as xerr } yerr: { same options as xerr }
} }
} }
Each data point array is expected to be of the type: Each data point array is expected to be of the type:
"x" [ x, y, xerr ] "x" [ x, y, xerr ]
"y" [ x, y, yerr ] "y" [ x, y, yerr ]
"xy" [ x, y, xerr, yerr ] "xy" [ x, y, xerr, yerr ]
Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
error-bars on X and asymmetric on Y would be: error-bars on X and asymmetric on Y would be:
[ x, y, xerr, yerr_lower, yerr_upper ] [ x, y, xerr, yerr_lower, yerr_upper ]
By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will
draw a small cap perpendicular to the error bar. They can also be set to a draw a small cap perpendicular to the error bar. They can also be set to a
user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg. user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg.
function drawSemiCircle( ctx, x, y, radius ) { function drawSemiCircle( ctx, x, y, radius ) {
ctx.beginPath(); ctx.beginPath();
ctx.arc( x, y, radius, 0, Math.PI, false ); ctx.arc( x, y, radius, 0, Math.PI, false );
ctx.moveTo( x - radius, y ); ctx.moveTo( x - radius, y );
ctx.lineTo( x + radius, y ); ctx.lineTo( x + radius, y );
ctx.stroke(); ctx.stroke();
} }
Color and radius both default to the same ones of the points series if not Color and radius both default to the same ones of the points series if not
set. The independent radius parameter on xerr/yerr is useful for the case when set. The independent radius parameter on xerr/yerr is useful for the case when
......
This diff is collapsed.
...@@ -11,7 +11,7 @@ with new Image()). If the image is not complete, it's skipped when plotting. ...@@ -11,7 +11,7 @@ with new Image()). If the image is not complete, it's skipped when plotting.
There are two helpers included for retrieving images. The easiest work the way There are two helpers included for retrieving images. The easiest work the way
that you put in URLs instead of images in the data, like this: that you put in URLs instead of images in the data, like this:
[ "myimage.png", 0, 0, 10, 10 ] [ "myimage.png", 0, 0, 10, 10 ]
Then call $.plot.image.loadData( data, options, callback ) where data and Then call $.plot.image.loadData( data, options, callback ) where data and
options are the same as you pass in to $.plot. This loads the images, replaces options are the same as you pass in to $.plot. This loads the images, replaces
...@@ -25,20 +25,20 @@ Image object when all images are loaded or have failed loading. ...@@ -25,20 +25,20 @@ Image object when all images are loaded or have failed loading.
The plugin supports these options: The plugin supports these options:
series: { series: {
images: { images: {
show: boolean show: boolean
anchor: "corner" or "center" anchor: "corner" or "center"
alpha: [ 0, 1 ] alpha: [ 0, 1 ]
} }
} }
They can be specified for a specific series: They can be specified for a specific series:
$.plot( $("#placeholder"), [{ $.plot( $("#placeholder"), [{
data: [ ... ], data: [ ... ],
images: { ... } images: { ... }
]) ])
Note that because the data format is different from usual data points, you Note that because the data format is different from usual data points, you
can't use images with anything else in a specific data series. can't use images with anything else in a specific data series.
......
This diff is collapsed.
...@@ -10,22 +10,22 @@ plot.pan( offset ) so you easily can add custom controls. It also fires ...@@ -10,22 +10,22 @@ plot.pan( offset ) so you easily can add custom controls. It also fires
The plugin supports these options: The plugin supports these options:
zoom: { zoom: {
interactive: false interactive: false
trigger: "dblclick" // or "click" for single click trigger: "dblclick" // or "click" for single click
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out) amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
} }
pan: { pan: {
interactive: false interactive: false
cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer" cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer"
frameRate: 20 frameRate: 20
} }
xaxis, yaxis, x2axis, y2axis: { xaxis, yaxis, x2axis, y2axis: {
zoomRange: null // or [ number, number ] (min range, max range) or false zoomRange: null // or [ number, number ] (min range, max range) or false
panRange: null // or [ number, number ] (min, max) or false panRange: null // or [ number, number ] (min, max) or false
} }
"interactive" enables the built-in drag/click behaviour. If you enable "interactive" enables the built-in drag/click behaviour. If you enable
interactive for pan, then you'll have a basic plot that supports moving interactive for pan, then you'll have a basic plot that supports moving
...@@ -55,19 +55,19 @@ will be disabled. ...@@ -55,19 +55,19 @@ will be disabled.
Example API usage: Example API usage:
plot = $.plot(...); plot = $.plot(...);
// zoom default amount in on the pixel ( 10, 20 ) // zoom default amount in on the pixel ( 10, 20 )
plot.zoom({ center: { left: 10, top: 20 } }); plot.zoom({ center: { left: 10, top: 20 } });
// zoom out again // zoom out again
plot.zoomOut({ center: { left: 10, top: 20 } }); plot.zoomOut({ center: { left: 10, top: 20 } });
// zoom 200% in on the pixel (10, 20) // zoom 200% in on the pixel (10, 20)
plot.zoom({ amount: 2, center: { left: 10, top: 20 } }); plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
// pan 100 pixels to the left and 20 down // pan 100 pixels to the left and 20 down
plot.pan({ left: -100, top: 20 }) plot.pan({ left: -100, top: 20 })
Here, "center" specifies where the center of the zooming should happen. Note Here, "center" specifies where the center of the zooming should happen. Note
that this is defined in pixel space, not the space of the data points (you can that this is defined in pixel space, not the space of the data points (you can
......
This diff is collapsed.
...@@ -6,10 +6,10 @@ Licensed under the MIT license. ...@@ -6,10 +6,10 @@ Licensed under the MIT license.
The plugin supports these options: The plugin supports these options:
selection: { selection: {
mode: null or "x" or "y" or "xy", mode: null or "x" or "y" or "xy",
color: color, color: color,
shape: "round" or "miter" or "bevel", shape: "round" or "miter" or "bevel",
minSize: number of pixels minSize: number of pixels
} }
Selection support is enabled by setting the mode to one of "x", "y" or "xy". Selection support is enabled by setting the mode to one of "x", "y" or "xy".
...@@ -33,11 +33,11 @@ When selection support is enabled, a "plotselected" event will be emitted on ...@@ -33,11 +33,11 @@ When selection support is enabled, a "plotselected" event will be emitted on
the DOM element you passed into the plot function. The event handler gets a the DOM element you passed into the plot function. The event handler gets a
parameter with the ranges selected on the axes, like this: parameter with the ranges selected on the axes, like this:
placeholder.bind( "plotselected", function( event, ranges ) { placeholder.bind( "plotselected", function( event, ranges ) {
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to) alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
// similar for yaxis - with multiple axes, the extra ones are in // similar for yaxis - with multiple axes, the extra ones are in
// x2axis, x3axis, ... // x2axis, x3axis, ...
}); });
The "plotselected" event is only fired when the user has finished making the The "plotselected" event is only fired when the user has finished making the
selection. A "plotselecting" event is fired during the process with the same selection. A "plotselecting" event is fired during the process with the same
...@@ -58,7 +58,7 @@ The plugin allso adds the following methods to the plot object: ...@@ -58,7 +58,7 @@ The plugin allso adds the following methods to the plot object:
an yaxis range and both xaxis and yaxis if the selection mode is "xy", like an yaxis range and both xaxis and yaxis if the selection mode is "xy", like
this: this:
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } }); setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
setSelection will trigger the "plotselected" event when called. If you don't setSelection will trigger the "plotselected" event when called. If you don't
want that to happen, e.g. if you're inside a "plotselected" handler, pass want that to happen, e.g. if you're inside a "plotselected" handler, pass
......
...@@ -14,16 +14,16 @@ Two or more series are stacked when their "stack" attribute is set to the same ...@@ -14,16 +14,16 @@ 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 key (which can be any number or string or just "true"). To specify the default
stack, you can set the stack option like this: stack, you can set the stack option like this:
series: { series: {
stack: null/false, true, or a key (number/string) stack: null/false, true, or a key (number/string)
} }
You can also specify it for a single series, like this: You can also specify it for a single series, like this:
$.plot( $("#placeholder"), [{ $.plot( $("#placeholder"), [{
data: [ ... ], data: [ ... ],
stack: true stack: true
}]) }])
The stacking order is determined by the order of the data series in the array The stacking order is determined by the order of the data series in the array
(later series end up on top of the previous). (later series end up on top of the previous).
......
...@@ -5,11 +5,11 @@ Licensed under the MIT license. ...@@ -5,11 +5,11 @@ Licensed under the MIT license.
The symbols are accessed as strings through the standard symbol options: The symbols are accessed as strings through the standard symbol options:
series: { series: {
points: { points: {
symbol: "square" // or "diamond", "triangle", "cross" symbol: "square" // or "diamond", "triangle", "cross"
} }
} }
*/ */
......
...@@ -5,30 +5,30 @@ Licensed under the MIT license. ...@@ -5,30 +5,30 @@ Licensed under the MIT license.
The plugin supports these options: The plugin supports these options:
series: { series: {
threshold: { threshold: {
below: number, below: number,
above: mumber, above: mumber,
color: colorspec color: colorspec
} }
} }
It can also be applied to a single series, like this: It can also be applied to a single series, like this:
$.plot( $("#placeholder"), [{ $.plot( $("#placeholder"), [{
data: [ ... ], data: [ ... ],
threshold: { ... } threshold: { ... }
}]) }])
An array can be passed for multiple thresholding, like this: An array can be passed for multiple thresholding, like this:
threshold: [{ threshold: [{
below: number1, below: number1,
color: color1 color: color1
},{ },{
above: number2, above: number2,
color: color2 color: color2
}] }]
These multiple threshold objects can be passed in any order since they are These multiple threshold objects can be passed in any order since they are
sorted by the processing function. sorted by the processing function.
......
This diff is collapsed.
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