1 /* Javascript plotting library for jQuery, version 0.8.3.
3 Copyright (c) 2007-2014 IOLA and Ole Laursen.
4 Licensed under the MIT license.
8 // first an inline dependency, jquery.colorhelpers.js, we inline it here
11 /* Plugin for jQuery for working with colors.
15 * Inspiration from jQuery color animation plugin by John Resig.
17 * Released under the MIT license by Ole Laursen, October 2009.
21 * $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
22 * var c = $.color.extract($("#mydiv"), 'background-color');
23 * console.log(c.r, c.g, c.b, c.a);
24 * $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
26 * Note that .scale() and .add() return the same modified object
27 * instead of making a new one.
29 * V. 1.1: Fix error handling so e.g. parsing an empty string does
30 * produce a color rather than just crashing.
32 (function($){$.color={};$.color.make=function(r,g,b,a){var o={};o.r=r||0;o.g=g||0;o.b=b||0;o.a=a!=null?a:1;o.add=function(c,d){for(var i=0;i<c.length;++i)o[c.charAt(i)]+=d;return o.normalize()};o.scale=function(c,f){for(var i=0;i<c.length;++i)o[c.charAt(i)]*=f;return o.normalize()};o.toString=function(){if(o.a>=1){return"rgb("+[o.r,o.g,o.b].join(",")+")"}else{return"rgba("+[o.r,o.g,o.b,o.a].join(",")+")"}};o.normalize=function(){function clamp(min,value,max){return value<min?min:value>max?max:value}o.r=clamp(0,parseInt(o.r),255);o.g=clamp(0,parseInt(o.g),255);o.b=clamp(0,parseInt(o.b),255);o.a=clamp(0,o.a,1);return o};o.clone=function(){return $.color.make(o.r,o.b,o.g,o.a)};return o.normalize()};$.color.extract=function(elem,css){var c;do{c=elem.css(css).toLowerCase();if(c!=""&&c!="transparent")break;elem=elem.parent()}while(elem.length&&!$.nodeName(elem.get(0),"body"));if(c=="rgba(0, 0, 0, 0)")c="transparent";return $.color.parse(c)};$.color.parse=function(str){var res,m=$.color.make;if(res=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))return m(parseInt(res[1],10),parseInt(res[2],10),parseInt(res[3],10));if(res=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))return m(parseInt(res[1],10),parseInt(res[2],10),parseInt(res[3],10),parseFloat(res[4]));if(res=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))return m(parseFloat(res[1])*2.55,parseFloat(res[2])*2.55,parseFloat(res[3])*2.55);if(res=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))return m(parseFloat(res[1])*2.55,parseFloat(res[2])*2.55,parseFloat(res[3])*2.55,parseFloat(res[4]));if(res=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))return m(parseInt(res[1],16),parseInt(res[2],16),parseInt(res[3],16));if(res=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))return m(parseInt(res[1]+res[1],16),parseInt(res[2]+res[2],16),parseInt(res[3]+res[3],16));var name=$.trim(str).toLowerCase();if(name=="transparent")return m(255,255,255,0);else{res=lookupColors[name]||[0,0,0];return m(res[0],res[1],res[2])}};var lookupColors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery);
34 // the actual Flot code
37 // Cache the prototype hasOwnProperty for faster access
39 var hasOwnProperty = Object.prototype.hasOwnProperty;
41 // A shim to provide 'detach' to jQuery versions prior to 1.4. Using a DOM
42 // operation produces the same effect as detach, i.e. removing the element
43 // without touching its jQuery data.
45 // Do not merge this into Flot 0.9, since it requires jQuery 1.4.4+.
48 $.fn.detach = function() {
49 return this.each(function() {
50 if (this.parentNode) {
51 this.parentNode.removeChild( this );
57 ///////////////////////////////////////////////////////////////////////////
58 // The Canvas object is a wrapper around an HTML5 <canvas> tag.
61 // @param {string} cls List of classes to apply to the canvas.
62 // @param {element} container Element onto which to append the canvas.
64 // Requiring a container is a little iffy, but unfortunately canvas
65 // operations don't work unless the canvas is attached to the DOM.
67 function Canvas(cls, container) {
69 var element = container.children("." + cls)[0];
71 if (element == null) {
73 element = document.createElement("canvas");
74 element.className = cls;
76 $(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
79 // If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas
81 if (!element.getContext) {
82 if (window.G_vmlCanvasManager) {
83 element = window.G_vmlCanvasManager.initElement(element);
85 throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");
90 this.element = element;
92 var context = this.context = element.getContext("2d");
94 // Determine the screen's ratio of physical to device-independent
95 // pixels. This is the ratio between the canvas width that the browser
96 // advertises and the number of pixels actually present in that space.
98 // The iPhone 4, for example, has a device-independent width of 320px,
99 // but its screen is actually 640px wide. It therefore has a pixel
100 // ratio of 2, while most normal devices have a ratio of 1.
102 var devicePixelRatio = window.devicePixelRatio || 1,
104 context.webkitBackingStorePixelRatio ||
105 context.mozBackingStorePixelRatio ||
106 context.msBackingStorePixelRatio ||
107 context.oBackingStorePixelRatio ||
108 context.backingStorePixelRatio || 1;
110 this.pixelRatio = devicePixelRatio / backingStoreRatio;
112 // Size the canvas to match the internal dimensions of its container
114 this.resize(container.width(), container.height());
116 // Collection of HTML div layers for text overlaid onto the canvas
118 this.textContainer = null;
121 // Cache of text fragments and metrics, so we can avoid expensively
122 // re-calculating them when the plot is re-rendered in a loop.
124 this._textCache = {};
127 // Resizes the canvas to the given dimensions.
129 // @param {number} width New width of the canvas, in pixels.
130 // @param {number} width New height of the canvas, in pixels.
132 Canvas.prototype.resize = function(width, height) {
134 if (width <= 0 || height <= 0) {
135 throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
138 var element = this.element,
139 context = this.context,
140 pixelRatio = this.pixelRatio;
142 // Resize the canvas, increasing its density based on the display's
143 // pixel ratio; basically giving it more pixels without increasing the
144 // size of its element, to take advantage of the fact that retina
145 // displays have that many more pixels in the same advertised space.
147 // Resizing should reset the state (excanvas seems to be buggy though)
149 if (this.width != width) {
150 element.width = width * pixelRatio;
151 element.style.width = width + "px";
155 if (this.height != height) {
156 element.height = height * pixelRatio;
157 element.style.height = height + "px";
158 this.height = height;
161 // Save the context, so we can reset in case we get replotted. The
162 // restore ensure that we're really back at the initial state, and
163 // should be safe even if we haven't saved the initial state yet.
168 // Scale the coordinate space to match the display density; so even though we
169 // may have twice as many pixels, we still want lines and other drawing to
170 // appear at the same size; the extra pixels will just make them crisper.
172 context.scale(pixelRatio, pixelRatio);
175 // Clears the entire canvas area, not including any overlaid HTML text
177 Canvas.prototype.clear = function() {
178 this.context.clearRect(0, 0, this.width, this.height);
181 // Finishes rendering the canvas, including managing the text overlay.
183 Canvas.prototype.render = function() {
185 var cache = this._textCache;
187 // For each text layer, add elements marked as active that haven't
188 // already been rendered, and remove those that are no longer active.
190 for (var layerKey in cache) {
191 if (hasOwnProperty.call(cache, layerKey)) {
193 var layer = this.getTextLayer(layerKey),
194 layerCache = cache[layerKey];
198 for (var styleKey in layerCache) {
199 if (hasOwnProperty.call(layerCache, styleKey)) {
200 var styleCache = layerCache[styleKey];
201 for (var key in styleCache) {
202 if (hasOwnProperty.call(styleCache, key)) {
204 var positions = styleCache[key].positions;
206 for (var i = 0, position; position = positions[i]; i++) {
207 if (position.active) {
208 if (!position.rendered) {
209 layer.append(position.element);
210 position.rendered = true;
213 positions.splice(i--, 1);
214 if (position.rendered) {
215 position.element.detach();
220 if (positions.length == 0) {
221 delete styleCache[key];
233 // Creates (if necessary) and returns the text overlay container.
235 // @param {string} classes String of space-separated CSS classes used to
236 // uniquely identify the text layer.
237 // @return {object} The jQuery-wrapped text-layer div.
239 Canvas.prototype.getTextLayer = function(classes) {
241 var layer = this.text[classes];
243 // Create the text layer if it doesn't exist
247 // Create the text layer container, if it doesn't exist
249 if (this.textContainer == null) {
250 this.textContainer = $("<div class='flot-text'></div>")
252 position: "absolute",
257 'font-size': "smaller",
260 .insertAfter(this.element);
263 layer = this.text[classes] = $("<div></div>")
266 position: "absolute",
272 .appendTo(this.textContainer);
278 // Creates (if necessary) and returns a text info object.
280 // The object looks like this:
283 // width: Width of the text's wrapper div.
284 // height: Height of the text's wrapper div.
285 // element: The jQuery-wrapped HTML div containing the text.
286 // positions: Array of positions at which this text is drawn.
289 // The positions array contains objects that look like this:
292 // active: Flag indicating whether the text should be visible.
293 // rendered: Flag indicating whether the text is currently visible.
294 // element: The jQuery-wrapped HTML div containing the text.
295 // x: X coordinate at which to draw the text.
296 // y: Y coordinate at which to draw the text.
299 // Each position after the first receives a clone of the original element.
301 // The idea is that that the width, height, and general 'identity' of the
302 // text is constant no matter where it is placed; the placements are a
303 // secondary property.
305 // Canvas maintains a cache of recently-used text info objects; getTextInfo
306 // either returns the cached element or creates a new entry.
308 // @param {string} layer A string of space-separated CSS classes uniquely
309 // identifying the layer containing this text.
310 // @param {string} text Text string to retrieve info for.
311 // @param {(string|object)=} font Either a string of space-separated CSS
312 // classes or a font-spec object, defining the text's font and style.
313 // @param {number=} angle Angle at which to rotate the text, in degrees.
314 // Angle is currently unused, it will be implemented in the future.
315 // @param {number=} width Maximum width of the text before it wraps.
316 // @return {object} a text info object.
318 Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
320 var textStyle, layerCache, styleCache, info;
322 // Cast the value to a string, in case we were given a number or such
326 // If the font is a font-spec object, generate a CSS font definition
328 if (typeof font === "object") {
329 textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;
334 // Retrieve (or create) the cache for the text's layer and styles
336 layerCache = this._textCache[layer];
338 if (layerCache == null) {
339 layerCache = this._textCache[layer] = {};
342 styleCache = layerCache[textStyle];
344 if (styleCache == null) {
345 styleCache = layerCache[textStyle] = {};
348 info = styleCache[text];
350 // If we can't find a matching element in our cache, create a new one
354 var element = $("<div></div>").html(text)
356 position: "absolute",
360 .appendTo(this.getTextLayer(layer));
362 if (typeof font === "object") {
367 } else if (typeof font === "string") {
368 element.addClass(font);
371 info = styleCache[text] = {
372 width: element.outerWidth(true),
373 height: element.outerHeight(true),
384 // Adds a text string to the canvas text overlay.
386 // The text isn't drawn immediately; it is marked as rendering, which will
387 // result in its addition to the canvas on the next render pass.
389 // @param {string} layer A string of space-separated CSS classes uniquely
390 // identifying the layer containing this text.
391 // @param {number} x X coordinate at which to draw the text.
392 // @param {number} y Y coordinate at which to draw the text.
393 // @param {string} text Text string to draw.
394 // @param {(string|object)=} font Either a string of space-separated CSS
395 // classes or a font-spec object, defining the text's font and style.
396 // @param {number=} angle Angle at which to rotate the text, in degrees.
397 // Angle is currently unused, it will be implemented in the future.
398 // @param {number=} width Maximum width of the text before it wraps.
399 // @param {string=} halign Horizontal alignment of the text; either "left",
400 // "center" or "right".
401 // @param {string=} valign Vertical alignment of the text; either "top",
402 // "middle" or "bottom".
404 Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {
406 var info = this.getTextInfo(layer, text, font, angle, width),
407 positions = info.positions;
409 // Tweak the div's position to match the text's alignment
411 if (halign == "center") {
413 } else if (halign == "right") {
417 if (valign == "middle") {
418 y -= info.height / 2;
419 } else if (valign == "bottom") {
423 // Determine whether this text already exists at this position.
424 // If so, mark it for inclusion in the next render pass.
426 for (var i = 0, position; position = positions[i]; i++) {
427 if (position.x == x && position.y == y) {
428 position.active = true;
433 // If the text doesn't exist at this position, create a new entry
435 // For the very first position we'll re-use the original element,
436 // while for subsequent ones we'll clone it.
441 element: positions.length ? info.element.clone() : info.element,
446 positions.push(position);
448 // Move the element to its final position within the container
450 position.element.css({
453 'text-align': halign // In case the text wraps
457 // Removes one or more text strings from the canvas text overlay.
459 // If no parameters are given, all text within the layer is removed.
461 // Note that the text is not immediately removed; it is simply marked as
462 // inactive, which will result in its removal on the next render pass.
463 // This avoids the performance penalty for 'clear and redraw' behavior,
464 // where we potentially get rid of all text on a layer, but will likely
465 // add back most or all of it later, as when redrawing axes, for example.
467 // @param {string} layer A string of space-separated CSS classes uniquely
468 // identifying the layer containing this text.
469 // @param {number=} x X coordinate of the text.
470 // @param {number=} y Y coordinate of the text.
471 // @param {string=} text Text string to remove.
472 // @param {(string|object)=} font Either a string of space-separated CSS
473 // classes or a font-spec object, defining the text's font and style.
474 // @param {number=} angle Angle at which the text is rotated, in degrees.
475 // Angle is currently unused, it will be implemented in the future.
477 Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
479 var layerCache = this._textCache[layer];
480 if (layerCache != null) {
481 for (var styleKey in layerCache) {
482 if (hasOwnProperty.call(layerCache, styleKey)) {
483 var styleCache = layerCache[styleKey];
484 for (var key in styleCache) {
485 if (hasOwnProperty.call(styleCache, key)) {
486 var positions = styleCache[key].positions;
487 for (var i = 0, position; position = positions[i]; i++) {
488 position.active = false;
496 var positions = this.getTextInfo(layer, text, font, angle).positions;
497 for (var i = 0, position; position = positions[i]; i++) {
498 if (position.x == x && position.y == y) {
499 position.active = false;
505 ///////////////////////////////////////////////////////////////////////////
506 // The top-level container for the entire plot.
508 function Plot(placeholder, data_, options_, plugins) {
509 // data is on the form:
510 // [ series1, series2 ... ]
511 // where series is either just the data as [ [x1, y1], [x2, y2], ... ]
512 // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }
516 // the color theme used for graphs
517 colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
520 noColumns: 1, // number of colums in legend table
521 labelFormatter: null, // fn: string -> string
522 labelBoxBorderColor: "#ccc", // border color for the little label boxes
523 container: null, // container (as jQuery object) to put legend in, null means default on top of graph
524 position: "ne", // position of default legend container within plot
525 margin: 5, // distance from grid edge to default legend container within plot
526 backgroundColor: null, // null means auto-detect
527 backgroundOpacity: 0.85, // set to 0 to avoid background
528 sorted: null // default to no legend sorting
531 show: null, // null = auto-detect, true = always, false = never
532 position: "bottom", // or "top"
533 mode: null, // null or "time"
534 font: null, // null (derived from CSS in placeholder) or object like { size: 11, lineHeight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }
535 color: null, // base color, labels, ticks
536 tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
537 transform: null, // null or f: number -> number to transform axis
538 inverseTransform: null, // if transform is set, this should be the inverse function
539 min: null, // min. value to show, null means set automatically
540 max: null, // max. value to show, null means set automatically
541 autoscaleMargin: null, // margin in % to add if auto-setting min/max
542 ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
543 tickFormatter: null, // fn: number -> string
544 labelWidth: null, // size of tick labels in pixels
546 reserveSpace: null, // whether to reserve space even if axis isn't shown
547 tickLength: null, // size in pixels of ticks, or "full" for whole line
548 alignTicksWithAxis: null, // axis number or null for no sync
549 tickDecimals: null, // no. of decimals, null means auto
550 tickSize: null, // number or [number, "unit"]
551 minTickSize: null // number or [number, "unit"]
554 autoscaleMargin: 0.02,
555 position: "left" // or "right"
563 lineWidth: 2, // in pixels
565 fillColor: "#ffffff",
566 symbol: "circle" // or callback
569 // we don't put in show: false so we can see
570 // whether lines were actively disabled
571 lineWidth: 2, // in pixels
575 // Omit 'zero', so we can later default its value to
576 // match that of the 'fill' option.
580 lineWidth: 2, // in pixels
581 barWidth: 1, // in units of the x axis
584 align: "left", // "left", "right", or "center"
594 color: "#545454", // primary color used for outline and labels
595 backgroundColor: null, // null for transparent, else color
596 borderColor: null, // set if different from the grid color
597 tickColor: null, // color for the ticks, e.g. "rgba(0,0,0,0.15)"
598 margin: 0, // distance from the canvas edge to the grid
599 labelMargin: 5, // in pixels
600 axisMargin: 8, // in pixels
601 borderWidth: 2, // in pixels
602 minBorderMargin: null, // in pixels, null means taken from points radius
603 markings: null, // array of ranges or fn: axes -> array of ranges
604 markingsColor: "#f4f4f4",
605 markingsLineWidth: 2,
609 autoHighlight: true, // highlight in case mouse is near
610 mouseActiveRadius: 10 // how far the mouse can be away to activate an item
613 redrawOverlayInterval: 1000/60 // time between updates, -1 means in same flow
617 surface = null, // the canvas for the plot itself
618 overlay = null, // canvas for interactive stuff on top of plot
619 eventHolder = null, // jQuery object that events should be bound to
620 ctx = null, octx = null,
621 xaxes = [], yaxes = [],
622 plotOffset = { left: 0, right: 0, top: 0, bottom: 0},
623 plotWidth = 0, plotHeight = 0,
627 processDatapoints: [],
639 plot.setData = setData;
640 plot.setupGrid = setupGrid;
642 plot.getPlaceholder = function() { return placeholder; };
643 plot.getCanvas = function() { return surface.element; };
644 plot.getPlotOffset = function() { return plotOffset; };
645 plot.width = function () { return plotWidth; };
646 plot.height = function () { return plotHeight; };
647 plot.offset = function () {
648 var o = eventHolder.offset();
649 o.left += plotOffset.left;
650 o.top += plotOffset.top;
653 plot.getData = function () { return series; };
654 plot.getAxes = function () {
656 $.each(xaxes.concat(yaxes), function (_, axis) {
658 res[axis.direction + (axis.n != 1 ? axis.n : "") + "axis"] = axis;
662 plot.getXAxes = function () { return xaxes; };
663 plot.getYAxes = function () { return yaxes; };
664 plot.c2p = canvasToAxisCoords;
665 plot.p2c = axisToCanvasCoords;
666 plot.getOptions = function () { return options; };
667 plot.highlight = highlight;
668 plot.unhighlight = unhighlight;
669 plot.triggerRedrawOverlay = triggerRedrawOverlay;
670 plot.pointOffset = function(point) {
672 left: parseInt(xaxes[axisNumber(point, "x") - 1].p2c(+point.x) + plotOffset.left, 10),
673 top: parseInt(yaxes[axisNumber(point, "y") - 1].p2c(+point.y) + plotOffset.top, 10)
676 plot.shutdown = shutdown;
677 plot.destroy = function () {
679 placeholder.removeData("plot").empty();
694 plot.resize = function () {
695 var width = placeholder.width(),
696 height = placeholder.height();
697 surface.resize(width, height);
698 overlay.resize(width, height);
706 parseOptions(options_);
714 function executeHooks(hook, args) {
715 args = [plot].concat(args);
716 for (var i = 0; i < hook.length; ++i)
717 hook[i].apply(this, args);
720 function initPlugins() {
722 // References to key classes, allowing plugins to modify them
728 for (var i = 0; i < plugins.length; ++i) {
730 p.init(plot, classes);
732 $.extend(true, options, p.options);
736 function parseOptions(opts) {
738 $.extend(true, options, opts);
740 // $.extend merges arrays, rather than replacing them. When less
741 // colors are provided than the size of the default palette, we
742 // end up with those colors plus the remaining defaults, which is
743 // not expected behavior; avoid it by replacing them here.
745 if (opts && opts.colors) {
746 options.colors = opts.colors;
749 if (options.xaxis.color == null)
750 options.xaxis.color = $.color.parse(options.grid.color).scale('a', 0.22).toString();
751 if (options.yaxis.color == null)
752 options.yaxis.color = $.color.parse(options.grid.color).scale('a', 0.22).toString();
754 if (options.xaxis.tickColor == null) // grid.tickColor for back-compatibility
755 options.xaxis.tickColor = options.grid.tickColor || options.xaxis.color;
756 if (options.yaxis.tickColor == null) // grid.tickColor for back-compatibility
757 options.yaxis.tickColor = options.grid.tickColor || options.yaxis.color;
759 if (options.grid.borderColor == null)
760 options.grid.borderColor = options.grid.color;
761 if (options.grid.tickColor == null)
762 options.grid.tickColor = $.color.parse(options.grid.color).scale('a', 0.22).toString();
764 // Fill in defaults for axis options, including any unspecified
765 // font-spec fields, if a font-spec was provided.
767 // If no x/y axis options were provided, create one of each anyway,
768 // since the rest of the code assumes that they exist.
770 var i, axisOptions, axisCount,
771 fontSize = placeholder.css("font-size"),
772 fontSizeDefault = fontSize ? +fontSize.replace("px", "") : 13,
774 style: placeholder.css("font-style"),
775 size: Math.round(0.8 * fontSizeDefault),
776 variant: placeholder.css("font-variant"),
777 weight: placeholder.css("font-weight"),
778 family: placeholder.css("font-family")
781 axisCount = options.xaxes.length || 1;
782 for (i = 0; i < axisCount; ++i) {
784 axisOptions = options.xaxes[i];
785 if (axisOptions && !axisOptions.tickColor) {
786 axisOptions.tickColor = axisOptions.color;
789 axisOptions = $.extend(true, {}, options.xaxis, axisOptions);
790 options.xaxes[i] = axisOptions;
792 if (axisOptions.font) {
793 axisOptions.font = $.extend({}, fontDefaults, axisOptions.font);
794 if (!axisOptions.font.color) {
795 axisOptions.font.color = axisOptions.color;
797 if (!axisOptions.font.lineHeight) {
798 axisOptions.font.lineHeight = Math.round(axisOptions.font.size * 1.15);
803 axisCount = options.yaxes.length || 1;
804 for (i = 0; i < axisCount; ++i) {
806 axisOptions = options.yaxes[i];
807 if (axisOptions && !axisOptions.tickColor) {
808 axisOptions.tickColor = axisOptions.color;
811 axisOptions = $.extend(true, {}, options.yaxis, axisOptions);
812 options.yaxes[i] = axisOptions;
814 if (axisOptions.font) {
815 axisOptions.font = $.extend({}, fontDefaults, axisOptions.font);
816 if (!axisOptions.font.color) {
817 axisOptions.font.color = axisOptions.color;
819 if (!axisOptions.font.lineHeight) {
820 axisOptions.font.lineHeight = Math.round(axisOptions.font.size * 1.15);
825 // backwards compatibility, to be removed in future
826 if (options.xaxis.noTicks && options.xaxis.ticks == null)
827 options.xaxis.ticks = options.xaxis.noTicks;
828 if (options.yaxis.noTicks && options.yaxis.ticks == null)
829 options.yaxis.ticks = options.yaxis.noTicks;
830 if (options.x2axis) {
831 options.xaxes[1] = $.extend(true, {}, options.xaxis, options.x2axis);
832 options.xaxes[1].position = "top";
833 // Override the inherit to allow the axis to auto-scale
834 if (options.x2axis.min == null) {
835 options.xaxes[1].min = null;
837 if (options.x2axis.max == null) {
838 options.xaxes[1].max = null;
841 if (options.y2axis) {
842 options.yaxes[1] = $.extend(true, {}, options.yaxis, options.y2axis);
843 options.yaxes[1].position = "right";
844 // Override the inherit to allow the axis to auto-scale
845 if (options.y2axis.min == null) {
846 options.yaxes[1].min = null;
848 if (options.y2axis.max == null) {
849 options.yaxes[1].max = null;
852 if (options.grid.coloredAreas)
853 options.grid.markings = options.grid.coloredAreas;
854 if (options.grid.coloredAreasColor)
855 options.grid.markingsColor = options.grid.coloredAreasColor;
857 $.extend(true, options.series.lines, options.lines);
859 $.extend(true, options.series.points, options.points);
861 $.extend(true, options.series.bars, options.bars);
862 if (options.shadowSize != null)
863 options.series.shadowSize = options.shadowSize;
864 if (options.highlightColor != null)
865 options.series.highlightColor = options.highlightColor;
867 // save options on axes for future reference
868 for (i = 0; i < options.xaxes.length; ++i)
869 getOrCreateAxis(xaxes, i + 1).options = options.xaxes[i];
870 for (i = 0; i < options.yaxes.length; ++i)
871 getOrCreateAxis(yaxes, i + 1).options = options.yaxes[i];
873 // add hooks from options
875 if (options.hooks[n] && options.hooks[n].length)
876 hooks[n] = hooks[n].concat(options.hooks[n]);
878 executeHooks(hooks.processOptions, [options]);
881 function setData(d) {
882 series = parseData(d);
883 fillInSeriesOptions();
887 function parseData(d) {
889 for (var i = 0; i < d.length; ++i) {
890 var s = $.extend(true, {}, options.series);
892 if (d[i].data != null) {
893 s.data = d[i].data; // move the data instead of deep-copy
896 $.extend(true, s, d[i]);
908 function axisNumber(obj, coord) {
909 var a = obj[coord + "axis"];
910 if (typeof a == "object") // if we got a real axis, extract number
912 if (typeof a != "number")
913 a = 1; // default to first axis
918 // return flat array without annoying null entries
919 return $.grep(xaxes.concat(yaxes), function (a) { return a; });
922 function canvasToAxisCoords(pos) {
923 // return an object with x/y corresponding to all used axes
924 var res = {}, i, axis;
925 for (i = 0; i < xaxes.length; ++i) {
927 if (axis && axis.used)
928 res["x" + axis.n] = axis.c2p(pos.left);
931 for (i = 0; i < yaxes.length; ++i) {
933 if (axis && axis.used)
934 res["y" + axis.n] = axis.c2p(pos.top);
937 if (res.x1 !== undefined)
939 if (res.y1 !== undefined)
945 function axisToCanvasCoords(pos) {
946 // get canvas coords from the first pair of x/y found in pos
947 var res = {}, i, axis, key;
949 for (i = 0; i < xaxes.length; ++i) {
951 if (axis && axis.used) {
953 if (pos[key] == null && axis.n == 1)
956 if (pos[key] != null) {
957 res.left = axis.p2c(pos[key]);
963 for (i = 0; i < yaxes.length; ++i) {
965 if (axis && axis.used) {
967 if (pos[key] == null && axis.n == 1)
970 if (pos[key] != null) {
971 res.top = axis.p2c(pos[key]);
980 function getOrCreateAxis(axes, number) {
981 if (!axes[number - 1])
983 n: number, // save the number for future reference
984 direction: axes == xaxes ? "x" : "y",
985 options: $.extend(true, {}, axes == xaxes ? options.xaxis : options.yaxis)
988 return axes[number - 1];
991 function fillInSeriesOptions() {
993 var neededColors = series.length, maxIndex = -1, i;
995 // Subtract the number of series that already have fixed colors or
996 // color indexes from the number that we still need to generate.
998 for (i = 0; i < series.length; ++i) {
999 var sc = series[i].color;
1002 if (typeof sc == "number" && sc > maxIndex) {
1008 // If any of the series have fixed color indexes, then we need to
1009 // generate at least as many colors as the highest index.
1011 if (neededColors <= maxIndex) {
1012 neededColors = maxIndex + 1;
1015 // Generate all the colors, using first the option colors and then
1016 // variations on those colors once they're exhausted.
1018 var c, colors = [], colorPool = options.colors,
1019 colorPoolSize = colorPool.length, variation = 0;
1021 for (i = 0; i < neededColors; i++) {
1023 c = $.color.parse(colorPool[i % colorPoolSize] || "#666");
1025 // Each time we exhaust the colors in the pool we adjust
1026 // a scaling factor used to produce more variations on
1027 // those colors. The factor alternates negative/positive
1028 // to produce lighter/darker colors.
1030 // Reset the variation after every few cycles, or else
1031 // it will end up producing only white or black colors.
1033 if (i % colorPoolSize == 0 && i) {
1034 if (variation >= 0) {
1035 if (variation < 0.5) {
1036 variation = -variation - 0.2;
1037 } else variation = 0;
1038 } else variation = -variation;
1041 colors[i] = c.scale('rgb', 1 + variation);
1044 // Finalize the series options, filling in their colors
1047 for (i = 0; i < series.length; ++i) {
1051 if (s.color == null) {
1052 s.color = colors[colori].toString();
1055 else if (typeof s.color == "number")
1056 s.color = colors[s.color].toString();
1058 // turn on lines automatically in case nothing is set
1059 if (s.lines.show == null) {
1062 if (s[v] && s[v].show) {
1067 s.lines.show = true;
1070 // If nothing was provided for lines.zero, default it to match
1071 // lines.fill, since areas by default should extend to zero.
1073 if (s.lines.zero == null) {
1074 s.lines.zero = !!s.lines.fill;
1078 s.xaxis = getOrCreateAxis(xaxes, axisNumber(s, "x"));
1079 s.yaxis = getOrCreateAxis(yaxes, axisNumber(s, "y"));
1083 function processData() {
1084 var topSentry = Number.POSITIVE_INFINITY,
1085 bottomSentry = Number.NEGATIVE_INFINITY,
1086 fakeInfinity = Number.MAX_VALUE,
1088 s, points, ps, x, y, axis, val, f, p,
1091 function updateAxis(axis, min, max) {
1092 if (min < axis.datamin && min != -fakeInfinity)
1094 if (max > axis.datamax && max != fakeInfinity)
1098 $.each(allAxes(), function (_, axis) {
1100 axis.datamin = topSentry;
1101 axis.datamax = bottomSentry;
1105 for (i = 0; i < series.length; ++i) {
1107 s.datapoints = { points: [] };
1109 executeHooks(hooks.processRawData, [ s, s.data, s.datapoints ]);
1112 // first pass: clean and copy data
1113 for (i = 0; i < series.length; ++i) {
1117 format = s.datapoints.format;
1121 // find out how to copy
1122 format.push({ x: true, number: true, required: true });
1123 format.push({ y: true, number: true, required: true });
1125 if (s.bars.show || (s.lines.show && s.lines.fill)) {
1126 var autoscale = !!((s.bars.show && s.bars.zero) || (s.lines.show && s.lines.zero));
1127 format.push({ y: true, number: true, required: false, defaultValue: 0, autoscale: autoscale });
1128 if (s.bars.horizontal) {
1129 delete format[format.length - 1].y;
1130 format[format.length - 1].x = true;
1134 s.datapoints.format = format;
1137 if (s.datapoints.pointsize != null)
1138 continue; // already filled in
1140 s.datapoints.pointsize = format.length;
1142 ps = s.datapoints.pointsize;
1143 points = s.datapoints.points;
1145 var insertSteps = s.lines.show && s.lines.steps;
1146 s.xaxis.used = s.yaxis.used = true;
1148 for (j = k = 0; j < data.length; ++j, k += ps) {
1151 var nullify = p == null;
1153 for (m = 0; m < ps; ++m) {
1158 if (f.number && val != null) {
1159 val = +val; // convert to number
1162 else if (val == Infinity)
1164 else if (val == -Infinity)
1165 val = -fakeInfinity;
1172 if (f.defaultValue != null)
1173 val = f.defaultValue;
1177 points[k + m] = val;
1182 for (m = 0; m < ps; ++m) {
1183 val = points[k + m];
1186 // extract min/max info
1187 if (f.autoscale !== false) {
1189 updateAxis(s.xaxis, val, val);
1192 updateAxis(s.yaxis, val, val);
1196 points[k + m] = null;
1200 // a little bit of line specific stuff that
1201 // perhaps shouldn't be here, but lacking
1203 if (insertSteps && k > 0
1204 && points[k - ps] != null
1205 && points[k - ps] != points[k]
1206 && points[k - ps + 1] != points[k + 1]) {
1207 // copy the point to make room for a middle point
1208 for (m = 0; m < ps; ++m)
1209 points[k + ps + m] = points[k + m];
1211 // middle point has same y
1212 points[k + 1] = points[k - ps + 1];
1214 // we've added a point, better reflect that
1221 // give the hooks a chance to run
1222 for (i = 0; i < series.length; ++i) {
1225 executeHooks(hooks.processDatapoints, [ s, s.datapoints]);
1228 // second pass: find datamax/datamin for auto-scaling
1229 for (i = 0; i < series.length; ++i) {
1231 points = s.datapoints.points;
1232 ps = s.datapoints.pointsize;
1233 format = s.datapoints.format;
1235 var xmin = topSentry, ymin = topSentry,
1236 xmax = bottomSentry, ymax = bottomSentry;
1238 for (j = 0; j < points.length; j += ps) {
1239 if (points[j] == null)
1242 for (m = 0; m < ps; ++m) {
1243 val = points[j + m];
1245 if (!f || f.autoscale === false || val == fakeInfinity || val == -fakeInfinity)
1264 // make sure we got room for the bar on the dancing floor
1267 switch (s.bars.align) {
1272 delta = -s.bars.barWidth;
1275 delta = -s.bars.barWidth / 2;
1278 if (s.bars.horizontal) {
1280 ymax += delta + s.bars.barWidth;
1284 xmax += delta + s.bars.barWidth;
1288 updateAxis(s.xaxis, xmin, xmax);
1289 updateAxis(s.yaxis, ymin, ymax);
1292 $.each(allAxes(), function (_, axis) {
1293 if (axis.datamin == topSentry)
1294 axis.datamin = null;
1295 if (axis.datamax == bottomSentry)
1296 axis.datamax = null;
1300 function setupCanvases() {
1302 // Make sure the placeholder is clear of everything except canvases
1303 // from a previous plot in this container that we'll try to re-use.
1305 placeholder.css("padding", 0) // padding messes up the positioning
1306 .children().filter(function(){
1307 return !$(this).hasClass("flot-overlay") && !$(this).hasClass('flot-base');
1310 if (placeholder.css("position") == 'static')
1311 placeholder.css("position", "relative"); // for positioning labels and overlay
1313 surface = new Canvas("flot-base", placeholder);
1314 overlay = new Canvas("flot-overlay", placeholder); // overlay canvas for interactive features
1316 ctx = surface.context;
1317 octx = overlay.context;
1319 // define which element we're listening for events on
1320 eventHolder = $(overlay.element).unbind();
1322 // If we're re-using a plot object, shut down the old one
1324 var existing = placeholder.data("plot");
1327 existing.shutdown();
1331 // save in case we get replotted
1332 placeholder.data("plot", plot);
1335 function bindEvents() {
1337 if (options.grid.hoverable) {
1338 eventHolder.mousemove(onMouseMove);
1340 // Use bind, rather than .mouseleave, because we officially
1341 // still support jQuery 1.2.6, which doesn't define a shortcut
1342 // for mouseenter or mouseleave. This was a bug/oversight that
1343 // was fixed somewhere around 1.3.x. We can return to using
1344 // .mouseleave when we drop support for 1.2.6.
1346 eventHolder.bind("mouseleave", onMouseLeave);
1349 if (options.grid.clickable)
1350 eventHolder.click(onClick);
1352 executeHooks(hooks.bindEvents, [eventHolder]);
1355 function shutdown() {
1357 clearTimeout(redrawTimeout);
1359 eventHolder.unbind("mousemove", onMouseMove);
1360 eventHolder.unbind("mouseleave", onMouseLeave);
1361 eventHolder.unbind("click", onClick);
1363 executeHooks(hooks.shutdown, [eventHolder]);
1366 function setTransformationHelpers(axis) {
1367 // set helper functions on the axis, assumes plot area
1368 // has been computed already
1370 function identity(x) { return x; }
1372 var s, m, t = axis.options.transform || identity,
1373 it = axis.options.inverseTransform;
1375 // precompute how much the axis is scaling a point
1377 if (axis.direction == "x") {
1378 s = axis.scale = plotWidth / Math.abs(t(axis.max) - t(axis.min));
1379 m = Math.min(t(axis.max), t(axis.min));
1382 s = axis.scale = plotHeight / Math.abs(t(axis.max) - t(axis.min));
1384 m = Math.max(t(axis.max), t(axis.min));
1387 // data point to canvas coordinate
1388 if (t == identity) // slight optimization
1389 axis.p2c = function (p) { return (p - m) * s; };
1391 axis.p2c = function (p) { return (t(p) - m) * s; };
1392 // canvas coordinate to data point
1394 axis.c2p = function (c) { return m + c / s; };
1396 axis.c2p = function (c) { return it(m + c / s); };
1399 function measureTickLabels(axis) {
1401 var opts = axis.options,
1402 ticks = axis.ticks || [],
1403 labelWidth = opts.labelWidth || 0,
1404 labelHeight = opts.labelHeight || 0,
1405 maxWidth = labelWidth || (axis.direction == "x" ? Math.floor(surface.width / (ticks.length || 1)) : null),
1406 legacyStyles = axis.direction + "Axis " + axis.direction + axis.n + "Axis",
1407 layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + legacyStyles,
1408 font = opts.font || "flot-tick-label tickLabel";
1410 for (var i = 0; i < ticks.length; ++i) {
1417 var info = surface.getTextInfo(layer, t.label, font, null, maxWidth);
1419 labelWidth = Math.max(labelWidth, info.width);
1420 labelHeight = Math.max(labelHeight, info.height);
1423 axis.labelWidth = opts.labelWidth || labelWidth;
1424 axis.labelHeight = opts.labelHeight || labelHeight;
1427 function allocateAxisBoxFirstPhase(axis) {
1428 // find the bounding box of the axis by looking at label
1429 // widths/heights and ticks, make room by diminishing the
1430 // plotOffset; this first phase only looks at one
1431 // dimension per axis, the other dimension depends on the
1432 // other axes so will have to wait
1434 var lw = axis.labelWidth,
1435 lh = axis.labelHeight,
1436 pos = axis.options.position,
1437 isXAxis = axis.direction === "x",
1438 tickLength = axis.options.tickLength,
1439 axisMargin = options.grid.axisMargin,
1440 padding = options.grid.labelMargin,
1446 // Determine the axis's position in its direction and on its side
1448 $.each(isXAxis ? xaxes : yaxes, function(i, a) {
1449 if (a && (a.show || a.reserveSpace)) {
1452 } else if (a.options.position === pos) {
1465 // The outermost axis on each side has no margin
1471 // The ticks for the first axis in each direction stretch across
1473 if (tickLength == null) {
1474 tickLength = first ? "full" : 5;
1477 if (!isNaN(+tickLength))
1478 padding += +tickLength;
1483 if (pos == "bottom") {
1484 plotOffset.bottom += lh + axisMargin;
1485 axis.box = { top: surface.height - plotOffset.bottom, height: lh };
1488 axis.box = { top: plotOffset.top + axisMargin, height: lh };
1489 plotOffset.top += lh + axisMargin;
1495 if (pos == "left") {
1496 axis.box = { left: plotOffset.left + axisMargin, width: lw };
1497 plotOffset.left += lw + axisMargin;
1500 plotOffset.right += lw + axisMargin;
1501 axis.box = { left: surface.width - plotOffset.right, width: lw };
1505 // save for future reference
1506 axis.position = pos;
1507 axis.tickLength = tickLength;
1508 axis.box.padding = padding;
1509 axis.innermost = innermost;
1512 function allocateAxisBoxSecondPhase(axis) {
1513 // now that all axis boxes have been placed in one
1514 // dimension, we can set the remaining dimension coordinates
1515 if (axis.direction == "x") {
1516 axis.box.left = plotOffset.left - axis.labelWidth / 2;
1517 axis.box.width = surface.width - plotOffset.left - plotOffset.right + axis.labelWidth;
1520 axis.box.top = plotOffset.top - axis.labelHeight / 2;
1521 axis.box.height = surface.height - plotOffset.bottom - plotOffset.top + axis.labelHeight;
1525 function adjustLayoutForThingsStickingOut() {
1526 // possibly adjust plot offset to ensure everything stays
1527 // inside the canvas and isn't clipped off
1529 var minMargin = options.grid.minBorderMargin,
1532 // check stuff from the plot (FIXME: this should just read
1533 // a value from the series, otherwise it's impossible to
1535 if (minMargin == null) {
1537 for (i = 0; i < series.length; ++i)
1538 minMargin = Math.max(minMargin, 2 * (series[i].points.radius + series[i].points.lineWidth/2));
1548 // check axis labels, note we don't check the actual
1549 // labels but instead use the overall width/height to not
1550 // jump as much around with replots
1551 $.each(allAxes(), function (_, axis) {
1552 if (axis.reserveSpace && axis.ticks && axis.ticks.length) {
1553 if (axis.direction === "x") {
1554 margins.left = Math.max(margins.left, axis.labelWidth / 2);
1555 margins.right = Math.max(margins.right, axis.labelWidth / 2);
1557 margins.bottom = Math.max(margins.bottom, axis.labelHeight / 2);
1558 margins.top = Math.max(margins.top, axis.labelHeight / 2);
1563 plotOffset.left = Math.ceil(Math.max(margins.left, plotOffset.left));
1564 plotOffset.right = Math.ceil(Math.max(margins.right, plotOffset.right));
1565 plotOffset.top = Math.ceil(Math.max(margins.top, plotOffset.top));
1566 plotOffset.bottom = Math.ceil(Math.max(margins.bottom, plotOffset.bottom));
1569 function setupGrid() {
1570 var i, axes = allAxes(), showGrid = options.grid.show;
1572 // Initialize the plot's offset from the edge of the canvas
1574 for (var a in plotOffset) {
1575 var margin = options.grid.margin || 0;
1576 plotOffset[a] = typeof margin == "number" ? margin : margin[a] || 0;
1579 executeHooks(hooks.processOffset, [plotOffset]);
1581 // If the grid is visible, add its border width to the offset
1583 for (var a in plotOffset) {
1584 if(typeof(options.grid.borderWidth) == "object") {
1585 plotOffset[a] += showGrid ? options.grid.borderWidth[a] : 0;
1588 plotOffset[a] += showGrid ? options.grid.borderWidth : 0;
1592 $.each(axes, function (_, axis) {
1593 var axisOpts = axis.options;
1594 axis.show = axisOpts.show == null ? axis.used : axisOpts.show;
1595 axis.reserveSpace = axisOpts.reserveSpace == null ? axis.show : axisOpts.reserveSpace;
1601 var allocatedAxes = $.grep(axes, function (axis) {
1602 return axis.show || axis.reserveSpace;
1605 $.each(allocatedAxes, function (_, axis) {
1607 setupTickGeneration(axis);
1609 snapRangeToTicks(axis, axis.ticks);
1610 // find labelWidth/Height for axis
1611 measureTickLabels(axis);
1614 // with all dimensions calculated, we can compute the
1615 // axis bounding boxes, start from the outside
1617 for (i = allocatedAxes.length - 1; i >= 0; --i)
1618 allocateAxisBoxFirstPhase(allocatedAxes[i]);
1620 // make sure we've got enough space for things that
1622 adjustLayoutForThingsStickingOut();
1624 $.each(allocatedAxes, function (_, axis) {
1625 allocateAxisBoxSecondPhase(axis);
1629 plotWidth = surface.width - plotOffset.left - plotOffset.right;
1630 plotHeight = surface.height - plotOffset.bottom - plotOffset.top;
1632 // now we got the proper plot dimensions, we can compute the scaling
1633 $.each(axes, function (_, axis) {
1634 setTransformationHelpers(axis);
1644 function setRange(axis) {
1645 var opts = axis.options,
1646 min = +(opts.min != null ? opts.min : axis.datamin),
1647 max = +(opts.max != null ? opts.max : axis.datamax),
1652 var widen = max == 0 ? 1 : 0.01;
1654 if (opts.min == null)
1656 // always widen max if we couldn't widen min to ensure we
1657 // don't fall into min == max which doesn't work
1658 if (opts.max == null || opts.min != null)
1662 // consider autoscaling
1663 var margin = opts.autoscaleMargin;
1664 if (margin != null) {
1665 if (opts.min == null) {
1666 min -= delta * margin;
1667 // make sure we don't go below zero if all values
1669 if (min < 0 && axis.datamin != null && axis.datamin >= 0)
1672 if (opts.max == null) {
1673 max += delta * margin;
1674 if (max > 0 && axis.datamax != null && axis.datamax <= 0)
1683 function setupTickGeneration(axis) {
1684 var opts = axis.options;
1686 // estimate number of ticks
1688 if (typeof opts.ticks == "number" && opts.ticks > 0)
1689 noTicks = opts.ticks;
1691 // heuristic based on the model a*sqrt(x) fitted to
1692 // some data points that seemed reasonable
1693 noTicks = 0.3 * Math.sqrt(axis.direction == "x" ? surface.width : surface.height);
1695 var delta = (axis.max - axis.min) / noTicks,
1696 dec = -Math.floor(Math.log(delta) / Math.LN10),
1697 maxDec = opts.tickDecimals;
1699 if (maxDec != null && dec > maxDec) {
1703 var magn = Math.pow(10, -dec),
1704 norm = delta / magn, // norm is between 1.0 and 10.0
1709 } else if (norm < 3) {
1711 // special case for 2.5, requires an extra decimal
1712 if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {
1716 } else if (norm < 7.5) {
1724 if (opts.minTickSize != null && size < opts.minTickSize) {
1725 size = opts.minTickSize;
1729 axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec);
1730 axis.tickSize = opts.tickSize || size;
1732 // Time mode was moved to a plug-in in 0.8, and since so many people use it
1733 // we'll add an especially friendly reminder to make sure they included it.
1735 if (opts.mode == "time" && !axis.tickGenerator) {
1736 throw new Error("Time mode requires the flot.time plugin.");
1739 // Flot supports base-10 axes; any other mode else is handled by a plug-in,
1740 // like flot.time.js.
1742 if (!axis.tickGenerator) {
1744 axis.tickGenerator = function (axis) {
1747 start = floorInBase(axis.min, axis.tickSize),
1754 v = start + i * axis.tickSize;
1757 } while (v < axis.max && v != prev);
1761 axis.tickFormatter = function (value, axis) {
1763 var factor = axis.tickDecimals ? Math.pow(10, axis.tickDecimals) : 1;
1764 var formatted = "" + Math.round(value * factor) / factor;
1766 // If tickDecimals was specified, ensure that we have exactly that
1767 // much precision; otherwise default to the value's own precision.
1769 if (axis.tickDecimals != null) {
1770 var decimal = formatted.indexOf(".");
1771 var precision = decimal == -1 ? 0 : formatted.length - decimal - 1;
1772 if (precision < axis.tickDecimals) {
1773 return (precision ? formatted : formatted + ".") + ("" + factor).substr(1, axis.tickDecimals - precision);
1781 if ($.isFunction(opts.tickFormatter))
1782 axis.tickFormatter = function (v, axis) { return "" + opts.tickFormatter(v, axis); };
1784 if (opts.alignTicksWithAxis != null) {
1785 var otherAxis = (axis.direction == "x" ? xaxes : yaxes)[opts.alignTicksWithAxis - 1];
1786 if (otherAxis && otherAxis.used && otherAxis != axis) {
1787 // consider snapping min/max to outermost nice ticks
1788 var niceTicks = axis.tickGenerator(axis);
1789 if (niceTicks.length > 0) {
1790 if (opts.min == null)
1791 axis.min = Math.min(axis.min, niceTicks[0]);
1792 if (opts.max == null && niceTicks.length > 1)
1793 axis.max = Math.max(axis.max, niceTicks[niceTicks.length - 1]);
1796 axis.tickGenerator = function (axis) {
1797 // copy ticks, scaled to this axis
1798 var ticks = [], v, i;
1799 for (i = 0; i < otherAxis.ticks.length; ++i) {
1800 v = (otherAxis.ticks[i].v - otherAxis.min) / (otherAxis.max - otherAxis.min);
1801 v = axis.min + v * (axis.max - axis.min);
1807 // we might need an extra decimal since forced
1808 // ticks don't necessarily fit naturally
1809 if (!axis.mode && opts.tickDecimals == null) {
1810 var extraDec = Math.max(0, -Math.floor(Math.log(axis.delta) / Math.LN10) + 1),
1811 ts = axis.tickGenerator(axis);
1813 // only proceed if the tick interval rounded
1814 // with an extra decimal doesn't give us a
1816 if (!(ts.length > 1 && /\..*0$/.test((ts[1] - ts[0]).toFixed(extraDec))))
1817 axis.tickDecimals = extraDec;
1823 function setTicks(axis) {
1824 var oticks = axis.options.ticks, ticks = [];
1825 if (oticks == null || (typeof oticks == "number" && oticks > 0))
1826 ticks = axis.tickGenerator(axis);
1828 if ($.isFunction(oticks))
1829 // generate the ticks
1830 ticks = oticks(axis);
1835 // clean up/labelify the supplied ticks, copy them over
1838 for (i = 0; i < ticks.length; ++i) {
1841 if (typeof t == "object") {
1849 label = axis.tickFormatter(v, axis);
1851 axis.ticks.push({ v: v, label: label });
1855 function snapRangeToTicks(axis, ticks) {
1856 if (axis.options.autoscaleMargin && ticks.length > 0) {
1858 if (axis.options.min == null)
1859 axis.min = Math.min(axis.min, ticks[0].v);
1860 if (axis.options.max == null && ticks.length > 1)
1861 axis.max = Math.max(axis.max, ticks[ticks.length - 1].v);
1869 executeHooks(hooks.drawBackground, [ctx]);
1871 var grid = options.grid;
1873 // draw background, if any
1874 if (grid.show && grid.backgroundColor)
1877 if (grid.show && !grid.aboveData) {
1881 for (var i = 0; i < series.length; ++i) {
1882 executeHooks(hooks.drawSeries, [ctx, series[i]]);
1883 drawSeries(series[i]);
1886 executeHooks(hooks.draw, [ctx]);
1888 if (grid.show && grid.aboveData) {
1894 // A draw implies that either the axes or data have changed, so we
1895 // should probably update the overlay highlights as well.
1897 triggerRedrawOverlay();
1900 function extractRange(ranges, coord) {
1901 var axis, from, to, key, axes = allAxes();
1903 for (var i = 0; i < axes.length; ++i) {
1905 if (axis.direction == coord) {
1906 key = coord + axis.n + "axis";
1907 if (!ranges[key] && axis.n == 1)
1908 key = coord + "axis"; // support x1axis as xaxis
1910 from = ranges[key].from;
1911 to = ranges[key].to;
1917 // backwards-compat stuff - to be removed in future
1919 axis = coord == "x" ? xaxes[0] : yaxes[0];
1920 from = ranges[coord + "1"];
1921 to = ranges[coord + "2"];
1924 // auto-reverse as an added bonus
1925 if (from != null && to != null && from > to) {
1931 return { from: from, to: to, axis: axis };
1934 function drawBackground() {
1936 ctx.translate(plotOffset.left, plotOffset.top);
1938 ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)");
1939 ctx.fillRect(0, 0, plotWidth, plotHeight);
1943 function drawGrid() {
1944 var i, axes, bw, bc;
1947 ctx.translate(plotOffset.left, plotOffset.top);
1950 var markings = options.grid.markings;
1952 if ($.isFunction(markings)) {
1953 axes = plot.getAxes();
1954 // xmin etc. is backwards compatibility, to be
1955 // removed in the future
1956 axes.xmin = axes.xaxis.min;
1957 axes.xmax = axes.xaxis.max;
1958 axes.ymin = axes.yaxis.min;
1959 axes.ymax = axes.yaxis.max;
1961 markings = markings(axes);
1964 for (i = 0; i < markings.length; ++i) {
1965 var m = markings[i],
1966 xrange = extractRange(m, "x"),
1967 yrange = extractRange(m, "y");
1970 if (xrange.from == null)
1971 xrange.from = xrange.axis.min;
1972 if (xrange.to == null)
1973 xrange.to = xrange.axis.max;
1974 if (yrange.from == null)
1975 yrange.from = yrange.axis.min;
1976 if (yrange.to == null)
1977 yrange.to = yrange.axis.max;
1980 if (xrange.to < xrange.axis.min || xrange.from > xrange.axis.max ||
1981 yrange.to < yrange.axis.min || yrange.from > yrange.axis.max)
1984 xrange.from = Math.max(xrange.from, xrange.axis.min);
1985 xrange.to = Math.min(xrange.to, xrange.axis.max);
1986 yrange.from = Math.max(yrange.from, yrange.axis.min);
1987 yrange.to = Math.min(yrange.to, yrange.axis.max);
1989 var xequal = xrange.from === xrange.to,
1990 yequal = yrange.from === yrange.to;
1992 if (xequal && yequal) {
1997 xrange.from = Math.floor(xrange.axis.p2c(xrange.from));
1998 xrange.to = Math.floor(xrange.axis.p2c(xrange.to));
1999 yrange.from = Math.floor(yrange.axis.p2c(yrange.from));
2000 yrange.to = Math.floor(yrange.axis.p2c(yrange.to));
2002 if (xequal || yequal) {
2003 var lineWidth = m.lineWidth || options.grid.markingsLineWidth,
2004 subPixel = lineWidth % 2 ? 0.5 : 0;
2006 ctx.strokeStyle = m.color || options.grid.markingsColor;
2007 ctx.lineWidth = lineWidth;
2009 ctx.moveTo(xrange.to + subPixel, yrange.from);
2010 ctx.lineTo(xrange.to + subPixel, yrange.to);
2012 ctx.moveTo(xrange.from, yrange.to + subPixel);
2013 ctx.lineTo(xrange.to, yrange.to + subPixel);
2017 ctx.fillStyle = m.color || options.grid.markingsColor;
2018 ctx.fillRect(xrange.from, yrange.to,
2019 xrange.to - xrange.from,
2020 yrange.from - yrange.to);
2027 bw = options.grid.borderWidth;
2029 for (var j = 0; j < axes.length; ++j) {
2030 var axis = axes[j], box = axis.box,
2031 t = axis.tickLength, x, y, xoff, yoff;
2032 if (!axis.show || axis.ticks.length == 0)
2038 if (axis.direction == "x") {
2041 y = (axis.position == "top" ? 0 : plotHeight);
2043 y = box.top - plotOffset.top + (axis.position == "top" ? box.height : 0);
2048 x = (axis.position == "left" ? 0 : plotWidth);
2050 x = box.left - plotOffset.left + (axis.position == "left" ? box.width : 0);
2054 if (!axis.innermost) {
2055 ctx.strokeStyle = axis.options.color;
2058 if (axis.direction == "x")
2059 xoff = plotWidth + 1;
2061 yoff = plotHeight + 1;
2063 if (ctx.lineWidth == 1) {
2064 if (axis.direction == "x") {
2065 y = Math.floor(y) + 0.5;
2067 x = Math.floor(x) + 0.5;
2072 ctx.lineTo(x + xoff, y + yoff);
2078 ctx.strokeStyle = axis.options.tickColor;
2081 for (i = 0; i < axis.ticks.length; ++i) {
2082 var v = axis.ticks[i].v;
2086 if (isNaN(v) || v < axis.min || v > axis.max
2087 // skip those lying on the axes if we got a border
2089 && ((typeof bw == "object" && bw[axis.position] > 0) || bw > 0)
2090 && (v == axis.min || v == axis.max)))
2093 if (axis.direction == "x") {
2095 yoff = t == "full" ? -plotHeight : t;
2097 if (axis.position == "top")
2102 xoff = t == "full" ? -plotWidth : t;
2104 if (axis.position == "left")
2108 if (ctx.lineWidth == 1) {
2109 if (axis.direction == "x")
2110 x = Math.floor(x) + 0.5;
2112 y = Math.floor(y) + 0.5;
2116 ctx.lineTo(x + xoff, y + yoff);
2125 // If either borderWidth or borderColor is an object, then draw the border
2126 // line by line instead of as one rectangle
2127 bc = options.grid.borderColor;
2128 if(typeof bw == "object" || typeof bc == "object") {
2129 if (typeof bw !== "object") {
2130 bw = {top: bw, right: bw, bottom: bw, left: bw};
2132 if (typeof bc !== "object") {
2133 bc = {top: bc, right: bc, bottom: bc, left: bc};
2137 ctx.strokeStyle = bc.top;
2138 ctx.lineWidth = bw.top;
2140 ctx.moveTo(0 - bw.left, 0 - bw.top/2);
2141 ctx.lineTo(plotWidth, 0 - bw.top/2);
2146 ctx.strokeStyle = bc.right;
2147 ctx.lineWidth = bw.right;
2149 ctx.moveTo(plotWidth + bw.right / 2, 0 - bw.top);
2150 ctx.lineTo(plotWidth + bw.right / 2, plotHeight);
2154 if (bw.bottom > 0) {
2155 ctx.strokeStyle = bc.bottom;
2156 ctx.lineWidth = bw.bottom;
2158 ctx.moveTo(plotWidth + bw.right, plotHeight + bw.bottom / 2);
2159 ctx.lineTo(0, plotHeight + bw.bottom / 2);
2164 ctx.strokeStyle = bc.left;
2165 ctx.lineWidth = bw.left;
2167 ctx.moveTo(0 - bw.left/2, plotHeight + bw.bottom);
2168 ctx.lineTo(0- bw.left/2, 0);
2174 ctx.strokeStyle = options.grid.borderColor;
2175 ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw);
2182 function drawAxisLabels() {
2184 $.each(allAxes(), function (_, axis) {
2186 legacyStyles = axis.direction + "Axis " + axis.direction + axis.n + "Axis",
2187 layer = "flot-" + axis.direction + "-axis flot-" + axis.direction + axis.n + "-axis " + legacyStyles,
2188 font = axis.options.font || "flot-tick-label tickLabel",
2189 tick, x, y, halign, valign;
2191 // Remove text before checking for axis.show and ticks.length;
2192 // otherwise plugins, like flot-tickrotor, that draw their own
2193 // tick labels will end up with both theirs and the defaults.
2195 surface.removeText(layer);
2197 if (!axis.show || axis.ticks.length == 0)
2200 for (var i = 0; i < axis.ticks.length; ++i) {
2202 tick = axis.ticks[i];
2203 if (!tick.label || tick.v < axis.min || tick.v > axis.max)
2206 if (axis.direction == "x") {
2208 x = plotOffset.left + axis.p2c(tick.v);
2209 if (axis.position == "bottom") {
2210 y = box.top + box.padding;
2212 y = box.top + box.height - box.padding;
2217 y = plotOffset.top + axis.p2c(tick.v);
2218 if (axis.position == "left") {
2219 x = box.left + box.width - box.padding;
2222 x = box.left + box.padding;
2226 surface.addText(layer, x, y, tick.label, font, null, null, halign, valign);
2231 function drawSeries(series) {
2232 if (series.lines.show)
2233 drawSeriesLines(series);
2234 if (series.bars.show)
2235 drawSeriesBars(series);
2236 if (series.points.show)
2237 drawSeriesPoints(series);
2240 function drawSeriesLines(series) {
2241 function plotLine(datapoints, xoffset, yoffset, axisx, axisy) {
2242 var points = datapoints.points,
2243 ps = datapoints.pointsize,
2244 prevx = null, prevy = null;
2247 for (var i = ps; i < points.length; i += ps) {
2248 var x1 = points[i - ps], y1 = points[i - ps + 1],
2249 x2 = points[i], y2 = points[i + 1];
2251 if (x1 == null || x2 == null)
2255 if (y1 <= y2 && y1 < axisy.min) {
2257 continue; // line segment is outside
2258 // compute new intersection point
2259 x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
2262 else if (y2 <= y1 && y2 < axisy.min) {
2265 x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
2270 if (y1 >= y2 && y1 > axisy.max) {
2273 x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
2276 else if (y2 >= y1 && y2 > axisy.max) {
2279 x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
2284 if (x1 <= x2 && x1 < axisx.min) {
2287 y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
2290 else if (x2 <= x1 && x2 < axisx.min) {
2293 y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
2298 if (x1 >= x2 && x1 > axisx.max) {
2301 y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
2304 else if (x2 >= x1 && x2 > axisx.max) {
2307 y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
2311 if (x1 != prevx || y1 != prevy)
2312 ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
2316 ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
2321 function plotLineArea(datapoints, axisx, axisy) {
2322 var points = datapoints.points,
2323 ps = datapoints.pointsize,
2324 bottom = Math.min(Math.max(0, axisy.min), axisy.max),
2325 i = 0, top, areaOpen = false,
2326 ypos = 1, segmentStart = 0, segmentEnd = 0;
2328 // we process each segment in two turns, first forward
2329 // direction to sketch out top, then once we hit the
2330 // end we go backwards to sketch the bottom
2332 if (ps > 0 && i > points.length + ps)
2335 i += ps; // ps is negative if going backwards
2337 var x1 = points[i - ps],
2338 y1 = points[i - ps + ypos],
2339 x2 = points[i], y2 = points[i + ypos];
2342 if (ps > 0 && x1 != null && x2 == null) {
2350 if (ps < 0 && i == segmentStart + ps) {
2351 // done with the reverse sweep
2356 i = segmentStart = segmentEnd + ps;
2361 if (x1 == null || x2 == null)
2367 if (x1 <= x2 && x1 < axisx.min) {
2370 y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
2373 else if (x2 <= x1 && x2 < axisx.min) {
2376 y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
2381 if (x1 >= x2 && x1 > axisx.max) {
2384 y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
2387 else if (x2 >= x1 && x2 > axisx.max) {
2390 y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
2397 ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom));
2401 // now first check the case where both is outside
2402 if (y1 >= axisy.max && y2 >= axisy.max) {
2403 ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
2404 ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
2407 else if (y1 <= axisy.min && y2 <= axisy.min) {
2408 ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
2409 ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
2413 // else it's a bit more complicated, there might
2414 // be a flat maxed out rectangle first, then a
2415 // triangular cutout or reverse; to find these
2416 // keep track of the current x values
2417 var x1old = x1, x2old = x2;
2419 // clip the y values, without shortcutting, we
2420 // go through all cases in turn
2423 if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
2424 x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
2427 else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
2428 x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
2433 if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) {
2434 x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
2437 else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
2438 x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
2442 // if the x value was changed we got a rectangle
2445 ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1));
2446 // it goes to (x1, y1), but we fill that below
2449 // fill triangular section, this sometimes result
2450 // in redundant points if (x1, y1) hasn't changed
2451 // from previous line to, but we just ignore that
2452 ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1));
2453 ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
2455 // fill the other rectangle if it's there
2457 ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
2458 ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2));
2464 ctx.translate(plotOffset.left, plotOffset.top);
2465 ctx.lineJoin = "round";
2467 var lw = series.lines.lineWidth,
2468 sw = series.shadowSize;
2469 // FIXME: consider another form of shadow when filling is turned on
2470 if (lw > 0 && sw > 0) {
2471 // draw shadow as a thick and thin line with transparency
2473 ctx.strokeStyle = "rgba(0,0,0,0.1)";
2474 // position shadow at angle from the mid of line
2475 var angle = Math.PI/18;
2476 plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis);
2477 ctx.lineWidth = sw/2;
2478 plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis);
2482 ctx.strokeStyle = series.color;
2483 var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight);
2485 ctx.fillStyle = fillStyle;
2486 plotLineArea(series.datapoints, series.xaxis, series.yaxis);
2490 plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis);
2494 function drawSeriesPoints(series) {
2495 function plotPoints(datapoints, radius, fillStyle, offset, shadow, axisx, axisy, symbol) {
2496 var points = datapoints.points, ps = datapoints.pointsize;
2498 for (var i = 0; i < points.length; i += ps) {
2499 var x = points[i], y = points[i + 1];
2500 if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
2505 y = axisy.p2c(y) + offset;
2506 if (symbol == "circle")
2507 ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
2509 symbol(ctx, x, y, radius, shadow);
2513 ctx.fillStyle = fillStyle;
2521 ctx.translate(plotOffset.left, plotOffset.top);
2523 var lw = series.points.lineWidth,
2524 sw = series.shadowSize,
2525 radius = series.points.radius,
2526 symbol = series.points.symbol;
2528 // If the user sets the line width to 0, we change it to a very
2529 // small value. A line width of 0 seems to force the default of 1.
2530 // Doing the conditional here allows the shadow setting to still be
2531 // optional even with a lineWidth of 0.
2536 if (lw > 0 && sw > 0) {
2537 // draw shadow in two steps
2540 ctx.strokeStyle = "rgba(0,0,0,0.1)";
2541 plotPoints(series.datapoints, radius, null, w + w/2, true,
2542 series.xaxis, series.yaxis, symbol);
2544 ctx.strokeStyle = "rgba(0,0,0,0.2)";
2545 plotPoints(series.datapoints, radius, null, w/2, true,
2546 series.xaxis, series.yaxis, symbol);
2550 ctx.strokeStyle = series.color;
2551 plotPoints(series.datapoints, radius,
2552 getFillStyle(series.points, series.color), 0, false,
2553 series.xaxis, series.yaxis, symbol);
2557 function drawBar(x, y, b, barLeft, barRight, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) {
2558 var left, right, bottom, top,
2559 drawLeft, drawRight, drawTop, drawBottom,
2562 // in horizontal mode, we start the bar from the left
2563 // instead of from the bottom so it appears to be
2564 // horizontal rather than vertical
2566 drawBottom = drawRight = drawTop = true;
2571 bottom = y + barRight;
2573 // account for negative bars
2583 drawLeft = drawRight = drawTop = true;
2586 right = x + barRight;
2590 // account for negative bars
2601 if (right < axisx.min || left > axisx.max ||
2602 top < axisy.min || bottom > axisy.max)
2605 if (left < axisx.min) {
2610 if (right > axisx.max) {
2615 if (bottom < axisy.min) {
2620 if (top > axisy.max) {
2625 left = axisx.p2c(left);
2626 bottom = axisy.p2c(bottom);
2627 right = axisx.p2c(right);
2628 top = axisy.p2c(top);
2631 if (fillStyleCallback) {
2632 c.fillStyle = fillStyleCallback(bottom, top);
2633 c.fillRect(left, top, right - left, bottom - top)
2637 if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) {
2640 // FIXME: inline moveTo is buggy with excanvas
2641 c.moveTo(left, bottom);
2643 c.lineTo(left, top);
2645 c.moveTo(left, top);
2647 c.lineTo(right, top);
2649 c.moveTo(right, top);
2651 c.lineTo(right, bottom);
2653 c.moveTo(right, bottom);
2655 c.lineTo(left, bottom);
2657 c.moveTo(left, bottom);
2662 function drawSeriesBars(series) {
2663 function plotBars(datapoints, barLeft, barRight, fillStyleCallback, axisx, axisy) {
2664 var points = datapoints.points, ps = datapoints.pointsize;
2666 for (var i = 0; i < points.length; i += ps) {
2667 if (points[i] == null)
2669 drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
2674 ctx.translate(plotOffset.left, plotOffset.top);
2676 // FIXME: figure out a way to add shadows (for instance along the right edge)
2677 ctx.lineWidth = series.bars.lineWidth;
2678 ctx.strokeStyle = series.color;
2682 switch (series.bars.align) {
2687 barLeft = -series.bars.barWidth;
2690 barLeft = -series.bars.barWidth / 2;
2693 var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null;
2694 plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, fillStyleCallback, series.xaxis, series.yaxis);
2698 function getFillStyle(filloptions, seriesColor, bottom, top) {
2699 var fill = filloptions.fill;
2703 if (filloptions.fillColor)
2704 return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
2706 var c = $.color.parse(seriesColor);
2707 c.a = typeof fill == "number" ? fill : 0.4;
2709 return c.toString();
2712 function insertLegend() {
2714 if (options.legend.container != null) {
2715 $(options.legend.container).html("");
2717 placeholder.find(".legend").remove();
2720 if (!options.legend.show) {
2724 var fragments = [], entries = [], rowStarted = false,
2725 lf = options.legend.labelFormatter, s, label;
2727 // Build a list of legend entries, with each having a label and a color
2729 for (var i = 0; i < series.length; ++i) {
2732 label = lf ? lf(s.label, s) : s.label;
2742 // Sort the legend using either the default or a custom comparator
2744 if (options.legend.sorted) {
2745 if ($.isFunction(options.legend.sorted)) {
2746 entries.sort(options.legend.sorted);
2747 } else if (options.legend.sorted == "reverse") {
2750 var ascending = options.legend.sorted != "descending";
2751 entries.sort(function(a, b) {
2752 return a.label == b.label ? 0 : (
2753 (a.label < b.label) != ascending ? 1 : -1 // Logical XOR
2759 // Generate markup for the list of entries, in their final order
2761 for (var i = 0; i < entries.length; ++i) {
2763 var entry = entries[i];
2765 if (i % options.legend.noColumns == 0) {
2767 fragments.push('</tr>');
2768 fragments.push('<tr>');
2773 '<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + entry.color + ';overflow:hidden"></div></div></td>' +
2774 '<td class="legendLabel">' + entry.label + '</td>'
2779 fragments.push('</tr>');
2781 if (fragments.length == 0)
2784 var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
2785 if (options.legend.container != null)
2786 $(options.legend.container).html(table);
2789 p = options.legend.position,
2790 m = options.legend.margin;
2793 if (p.charAt(0) == "n")
2794 pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
2795 else if (p.charAt(0) == "s")
2796 pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
2797 if (p.charAt(1) == "e")
2798 pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
2799 else if (p.charAt(1) == "w")
2800 pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
2801 var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder);
2802 if (options.legend.backgroundOpacity != 0.0) {
2803 // put in the transparent background
2804 // separately to avoid blended labels and
2806 var c = options.legend.backgroundColor;
2808 c = options.grid.backgroundColor;
2809 if (c && typeof c == "string")
2810 c = $.color.parse(c);
2812 c = $.color.extract(legend, 'background-color');
2816 var div = legend.children();
2817 $('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity);
2823 // interactive features
2825 var highlights = [],
2826 redrawTimeout = null;
2828 // returns the data item the mouse is over, or null if none is found
2829 function findNearbyItem(mouseX, mouseY, seriesFilter) {
2830 var maxDistance = options.grid.mouseActiveRadius,
2831 smallestDistance = maxDistance * maxDistance + 1,
2832 item = null, foundPoint = false, i, j, ps;
2834 for (i = series.length - 1; i >= 0; --i) {
2835 if (!seriesFilter(series[i]))
2841 points = s.datapoints.points,
2842 mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster
2843 my = axisy.c2p(mouseY),
2844 maxx = maxDistance / axisx.scale,
2845 maxy = maxDistance / axisy.scale;
2847 ps = s.datapoints.pointsize;
2848 // with inverse transforms, we can't use the maxx/maxy
2849 // optimization, sadly
2850 if (axisx.options.inverseTransform)
2851 maxx = Number.MAX_VALUE;
2852 if (axisy.options.inverseTransform)
2853 maxy = Number.MAX_VALUE;
2855 if (s.lines.show || s.points.show) {
2856 for (j = 0; j < points.length; j += ps) {
2857 var x = points[j], y = points[j + 1];
2861 // For points and lines, the cursor must be within a
2862 // certain distance to the data point
2863 if (x - mx > maxx || x - mx < -maxx ||
2864 y - my > maxy || y - my < -maxy)
2867 // We have to calculate distances in pixels, not in
2868 // data units, because the scales of the axes may be different
2869 var dx = Math.abs(axisx.p2c(x) - mouseX),
2870 dy = Math.abs(axisy.p2c(y) - mouseY),
2871 dist = dx * dx + dy * dy; // we save the sqrt
2873 // use <= to ensure last point takes precedence
2874 // (last generally means on top of)
2875 if (dist < smallestDistance) {
2876 smallestDistance = dist;
2882 if (s.bars.show && !item) { // no other point can be nearby
2884 var barLeft, barRight;
2886 switch (s.bars.align) {
2891 barLeft = -s.bars.barWidth;
2894 barLeft = -s.bars.barWidth / 2;
2897 barRight = barLeft + s.bars.barWidth;
2899 for (j = 0; j < points.length; j += ps) {
2900 var x = points[j], y = points[j + 1], b = points[j + 2];
2904 // for a bar graph, the cursor must be inside the bar
2905 if (series[i].bars.horizontal ?
2906 (mx <= Math.max(b, x) && mx >= Math.min(b, x) &&
2907 my >= y + barLeft && my <= y + barRight) :
2908 (mx >= x + barLeft && mx <= x + barRight &&
2909 my >= Math.min(b, y) && my <= Math.max(b, y)))
2918 ps = series[i].datapoints.pointsize;
2920 return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps),
2929 function onMouseMove(e) {
2930 if (options.grid.hoverable)
2931 triggerClickHoverEvent("plothover", e,
2932 function (s) { return s["hoverable"] != false; });
2935 function onMouseLeave(e) {
2936 if (options.grid.hoverable)
2937 triggerClickHoverEvent("plothover", e,
2938 function (s) { return false; });
2941 function onClick(e) {
2942 triggerClickHoverEvent("plotclick", e,
2943 function (s) { return s["clickable"] != false; });
2946 // trigger click or hover event (they send the same parameters
2947 // so we share their code)
2948 function triggerClickHoverEvent(eventname, event, seriesFilter) {
2949 var offset = eventHolder.offset(),
2950 canvasX = event.pageX - offset.left - plotOffset.left,
2951 canvasY = event.pageY - offset.top - plotOffset.top,
2952 pos = canvasToAxisCoords({ left: canvasX, top: canvasY });
2954 pos.pageX = event.pageX;
2955 pos.pageY = event.pageY;
2957 var item = findNearbyItem(canvasX, canvasY, seriesFilter);
2960 // fill in mouse pos for any listeners out there
2961 item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left, 10);
2962 item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top, 10);
2965 if (options.grid.autoHighlight) {
2966 // clear auto-highlights
2967 for (var i = 0; i < highlights.length; ++i) {
2968 var h = highlights[i];
2969 if (h.auto == eventname &&
2970 !(item && h.series == item.series &&
2971 h.point[0] == item.datapoint[0] &&
2972 h.point[1] == item.datapoint[1]))
2973 unhighlight(h.series, h.point);
2977 highlight(item.series, item.datapoint, eventname);
2980 placeholder.trigger(eventname, [ pos, item ]);
2983 function triggerRedrawOverlay() {
2984 var t = options.interaction.redrawOverlayInterval;
2985 if (t == -1) { // skip event queue
2991 redrawTimeout = setTimeout(drawOverlay, t);
2994 function drawOverlay() {
2995 redrawTimeout = null;
3000 octx.translate(plotOffset.left, plotOffset.top);
3003 for (i = 0; i < highlights.length; ++i) {
3006 if (hi.series.bars.show)
3007 drawBarHighlight(hi.series, hi.point);
3009 drawPointHighlight(hi.series, hi.point);
3013 executeHooks(hooks.drawOverlay, [octx]);
3016 function highlight(s, point, auto) {
3017 if (typeof s == "number")
3020 if (typeof point == "number") {
3021 var ps = s.datapoints.pointsize;
3022 point = s.datapoints.points.slice(ps * point, ps * (point + 1));
3025 var i = indexOfHighlight(s, point);
3027 highlights.push({ series: s, point: point, auto: auto });
3029 triggerRedrawOverlay();
3032 highlights[i].auto = false;
3035 function unhighlight(s, point) {
3036 if (s == null && point == null) {
3038 triggerRedrawOverlay();
3042 if (typeof s == "number")
3045 if (typeof point == "number") {
3046 var ps = s.datapoints.pointsize;
3047 point = s.datapoints.points.slice(ps * point, ps * (point + 1));
3050 var i = indexOfHighlight(s, point);
3052 highlights.splice(i, 1);
3054 triggerRedrawOverlay();
3058 function indexOfHighlight(s, p) {
3059 for (var i = 0; i < highlights.length; ++i) {
3060 var h = highlights[i];
3061 if (h.series == s && h.point[0] == p[0]
3062 && h.point[1] == p[1])
3068 function drawPointHighlight(series, point) {
3069 var x = point[0], y = point[1],
3070 axisx = series.xaxis, axisy = series.yaxis,
3071 highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString();
3073 if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
3076 var pointRadius = series.points.radius + series.points.lineWidth / 2;
3077 octx.lineWidth = pointRadius;
3078 octx.strokeStyle = highlightColor;
3079 var radius = 1.5 * pointRadius;
3084 if (series.points.symbol == "circle")
3085 octx.arc(x, y, radius, 0, 2 * Math.PI, false);
3087 series.points.symbol(octx, x, y, radius, false);
3092 function drawBarHighlight(series, point) {
3093 var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(),
3094 fillStyle = highlightColor,
3097 switch (series.bars.align) {
3102 barLeft = -series.bars.barWidth;
3105 barLeft = -series.bars.barWidth / 2;
3108 octx.lineWidth = series.bars.lineWidth;
3109 octx.strokeStyle = highlightColor;
3111 drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth,
3112 function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);
3115 function getColorOrGradient(spec, bottom, top, defaultColor) {
3116 if (typeof spec == "string")
3119 // assume this is a gradient spec; IE currently only
3120 // supports a simple vertical gradient properly, so that's
3121 // what we support too
3122 var gradient = ctx.createLinearGradient(0, top, 0, bottom);
3124 for (var i = 0, l = spec.colors.length; i < l; ++i) {
3125 var c = spec.colors[i];
3126 if (typeof c != "string") {
3127 var co = $.color.parse(defaultColor);
3128 if (c.brightness != null)
3129 co = co.scale('rgb', c.brightness);
3130 if (c.opacity != null)
3134 gradient.addColorStop(i / (l - 1), c);
3142 // Add the plot function to the top level of the jQuery object
3144 $.plot = function(placeholder, data, options) {
3145 //var t0 = new Date();
3146 var plot = new Plot($(placeholder), data, options, $.plot.plugins);
3147 //(window.console ? console.log : alert)("time used (msecs): " + ((new Date()).getTime() - t0.getTime()));
3151 $.plot.version = "0.8.3";
3153 $.plot.plugins = [];
3155 // Also add the plot function as a chainable property
3157 $.fn.plot = function(data, options) {
3158 return this.each(function() {
3159 $.plot(this, data, options);
3163 // round to nearby lower multiple of base
3164 function floorInBase(n, base) {
3165 return base * Math.floor(n / base);