summaryrefslogtreecommitdiff
path: root/jquery.flot.image.js
diff options
context:
space:
mode:
Diffstat (limited to 'jquery.flot.image.js')
-rw-r--r--jquery.flot.image.js79
1 files changed, 41 insertions, 38 deletions
diff --git a/jquery.flot.image.js b/jquery.flot.image.js
index 29ccb12..d2837cf 100644
--- a/jquery.flot.image.js
+++ b/jquery.flot.image.js
@@ -1,51 +1,54 @@
-/*
-Flot plugin for plotting images, e.g. useful for putting ticks on a
-prerendered complex visualization.
+/* Flot plugin for plotting images.
-The data syntax is [[image, x1, y1, x2, y2], ...] where (x1, y1) and
-(x2, y2) are where you intend the two opposite corners of the image to
-end up in the plot. Image must be a fully loaded Javascript image (you
-can make one with new Image()). If the image is not complete, it's
-skipped when plotting.
+Copyright (c) 2007-2013 IOLA and Ole Laursen.
+Licensed under the MIT license.
-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
-["myimage.png", 0, 0, 10, 10]), 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 the URLs in the data with
-the corresponding images and calls "callback" when all images are
-loaded (or failed loading). In the callback, you can then call $.plot
-with the data set. See the included example.
+The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and
+(x2, y2) are where you intend the two opposite corners of the image to end up
+in the plot. Image must be a fully loaded Javascript image (you can make one
+with new Image()). If the image is not complete, it's skipped when plotting.
-A more low-level helper, $.plot.image.load(urls, callback) is also
-included. Given a list of URLs, it calls callback with an object
-mapping from URL to Image object when all images are loaded or have
-failed loading.
+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:
-Options for the plugin are
+ [ "myimage.png", 0, 0, 10, 10 ]
- series: {
- images: {
- show: boolean
- anchor: "corner" or "center"
- alpha: [0,1]
- }
- }
+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
+the URLs in the data with the corresponding images and calls "callback" when
+all images are loaded (or failed loading). In the callback, you can then call
+$.plot with the data set. See the included example.
-which can be specified for a specific series
+A more low-level helper, $.plot.image.load(urls, callback) is also included.
+Given a list of URLs, it calls callback with an object mapping from URL to
+Image object when all images are loaded or have failed loading.
- $.plot($("#placeholder"), [{ data: [ ... ], images: { ... } ])
+The plugin supports these options:
-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.
+ series: {
+ images: {
+ show: boolean
+ anchor: "corner" or "center"
+ alpha: [ 0, 1 ]
+ }
+ }
-Setting "anchor" to "center" causes the pixels in the image to be
-anchored at the corner pixel centers inside of at the pixel corners,
-effectively letting half a pixel stick out to each side in the plot.
+They can be specified for a specific series:
+ $.plot( $("#placeholder"), [{
+ data: [ ... ],
+ images: { ... }
+ ])
-A possible future direction could be support for tiling for large
-images (like Google Maps).
+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.
+
+Setting "anchor" to "center" causes the pixels in the image to be anchored at
+the corner pixel centers inside of at the pixel corners, effectively letting
+half a pixel stick out to each side in the plot.
+
+A possible future direction could be support for tiling for large images (like
+Google Maps).
*/
@@ -110,7 +113,7 @@ images (like Google Maps).
$('<img />').load(handler).error(handler).attr('src', url);
});
- }
+ };
function drawSeries(plot, ctx, series) {
var plotOffset = plot.getPlotOffset();