1 /* Flot plugin for plotting images.
3 Copyright (c) 2007-2013 IOLA and Ole Laursen.
4 Licensed under the MIT license.
6 The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and
7 (x2, y2) are where you intend the two opposite corners of the image to end up
8 in the plot. Image must be a fully loaded Javascript image (you can make one
9 with new Image()). If the image is not complete, it's skipped when plotting.
11 There are two helpers included for retrieving images. The easiest work the way
12 that you put in URLs instead of images in the data, like this:
14 [ "myimage.png", 0, 0, 10, 10 ]
16 Then call $.plot.image.loadData( data, options, callback ) where data and
17 options are the same as you pass in to $.plot. This loads the images, replaces
18 the URLs in the data with the corresponding images and calls "callback" when
19 all images are loaded (or failed loading). In the callback, you can then call
20 $.plot with the data set. See the included example.
22 A more low-level helper, $.plot.image.load(urls, callback) is also included.
23 Given a list of URLs, it calls callback with an object mapping from URL to
24 Image object when all images are loaded or have failed loading.
26 The plugin supports these options:
31 anchor: "corner" or "center"
36 They can be specified for a specific series:
38 $.plot( $("#placeholder"), [{
43 Note that because the data format is different from usual data points, you
44 can't use images with anything else in a specific data series.
46 Setting "anchor" to "center" causes the pixels in the image to be anchored at
47 the corner pixel centers inside of at the pixel corners, effectively letting
48 half a pixel stick out to each side in the plot.
50 A possible future direction could be support for tiling for large images (like
61 anchor: "corner" // or "center"
68 $.plot.image.loadDataImages = function (series, options, callback) {
69 var urls = [], points = [];
71 var defaultShow = options.series.images.show;
73 $.each(series, function (i, s) {
74 if (!(defaultShow || s.images.show))
80 $.each(s, function (i, p) {
81 if (typeof p[0] == "string") {
88 $.plot.image.load(urls, function (loadedImages) {
89 $.each(points, function (i, p) {
91 if (loadedImages[url])
92 p[0] = loadedImages[url];
99 $.plot.image.load = function (urls, callback) {
100 var missing = urls.length, loaded = {};
104 $.each(urls, function (i, url) {
105 var handler = function () {
114 $('<img />').load(handler).error(handler).attr('src', url);
118 function drawSeries(plot, ctx, series) {
119 var plotOffset = plot.getPlotOffset();
121 if (!series.images || !series.images.show)
124 var points = series.datapoints.points,
125 ps = series.datapoints.pointsize;
127 for (var i = 0; i < points.length; i += ps) {
129 x1 = points[i + 1], y1 = points[i + 2],
130 x2 = points[i + 3], y2 = points[i + 4],
131 xaxis = series.xaxis, yaxis = series.yaxis,
134 // actually we should check img.complete, but it
135 // appears to be a somewhat unreliable indicator in
136 // IE6 (false even after load event)
137 if (!img || img.width <= 0 || img.height <= 0)
151 // if the anchor is at the center of the pixel, expand the
152 // image by 1/2 pixel in each direction
153 if (series.images.anchor == "center") {
154 tmp = 0.5 * (x2-x1) / (img.width - 1);
157 tmp = 0.5 * (y2-y1) / (img.height - 1);
163 if (x1 == x2 || y1 == y2 ||
164 x1 >= xaxis.max || x2 <= xaxis.min ||
165 y1 >= yaxis.max || y2 <= yaxis.min)
168 var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
169 if (x1 < xaxis.min) {
170 sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
174 if (x2 > xaxis.max) {
175 sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
179 if (y1 < yaxis.min) {
180 sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
184 if (y2 > yaxis.max) {
185 sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
194 // the transformation may have swapped us
206 tmp = ctx.globalAlpha;
207 ctx.globalAlpha *= series.images.alpha;
209 sx1, sy1, sx2 - sx1, sy2 - sy1,
210 x1 + plotOffset.left, y1 + plotOffset.top,
212 ctx.globalAlpha = tmp;
216 function processRawData(plot, series, data, datapoints) {
217 if (!series.images.show)
220 // format is Image, x1, y1, x2, y2 (opposite corners)
221 datapoints.format = [
223 { x: true, number: true, required: true },
224 { y: true, number: true, required: true },
225 { x: true, number: true, required: true },
226 { y: true, number: true, required: true }
230 function init(plot) {
231 plot.hooks.processRawData.push(processRawData);
232 plot.hooks.drawSeries.push(drawSeries);
235 $.plot.plugins.push({