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
7c52f444
Commit
7c52f444
authored
Sep 23, 2013
by
Nick Schonning
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Convert remaining tabs to spaces
parent
8e2f09a9
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
2084 additions
and
2084 deletions
+2084
-2084
jquery.flot.canvas.js
jquery.flot.canvas.js
+283
-283
jquery.flot.categories.js
jquery.flot.categories.js
+9
-9
jquery.flot.crosshair.js
jquery.flot.crosshair.js
+18
-18
jquery.flot.errorbars.js
jquery.flot.errorbars.js
+25
-25
jquery.flot.fillbetween.js
jquery.flot.fillbetween.js
+144
-144
jquery.flot.image.js
jquery.flot.image.js
+12
-12
jquery.flot.js
jquery.flot.js
+369
-369
jquery.flot.navigate.js
jquery.flot.navigate.js
+25
-25
jquery.flot.pie.js
jquery.flot.pie.js
+777
-777
jquery.flot.selection.js
jquery.flot.selection.js
+10
-10
jquery.flot.stack.js
jquery.flot.stack.js
+7
-7
jquery.flot.symbol.js
jquery.flot.symbol.js
+5
-5
jquery.flot.threshold.js
jquery.flot.threshold.js
+18
-18
jquery.flot.time.js
jquery.flot.time.js
+382
-382
No files found.
jquery.flot.canvas.js
View file @
7c52f444
This diff is collapsed.
Click to expand it.
jquery.flot.categories.js
View file @
7c52f444
...
@@ -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).
...
...
jquery.flot.crosshair.js
View file @
7c52f444
...
@@ -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()
...
...
jquery.flot.errorbars.js
View file @
7c52f444
...
@@ -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
...
...
jquery.flot.fillbetween.js
View file @
7c52f444
This diff is collapsed.
Click to expand it.
jquery.flot.image.js
View file @
7c52f444
...
@@ -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.
...
...
jquery.flot.js
View file @
7c52f444
This diff is collapsed.
Click to expand it.
jquery.flot.navigate.js
View file @
7c52f444
...
@@ -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
...
...
jquery.flot.pie.js
View file @
7c52f444
This diff is collapsed.
Click to expand it.
jquery.flot.selection.js
View file @
7c52f444
...
@@ -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
...
...
jquery.flot.stack.js
View file @
7c52f444
...
@@ -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).
...
...
jquery.flot.symbol.js
View file @
7c52f444
...
@@ -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"
}
}
}
}
*/
*/
...
...
jquery.flot.threshold.js
View file @
7c52f444
...
@@ -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.
...
...
jquery.flot.time.js
View file @
7c52f444
This diff is collapsed.
Click to expand it.
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