/** \file yui.flot.js \brief Javascript plotting library for YUI based on Flot v. 0.5. \details This file contains a port of Flot for YUI Copyright (c) 2009 Yahoo! Inc. All rights reserved. The copyrights embodied in the content of this file are licenced by Yahoo! Inc. under the BSD (revised) open source license. Requires yahoo-dom-event and datasource which you can get here: Datasource is optional, you only need it if one of your axes has its mode set to "time" */ (function() { var L = YAHOO.lang; var UA = YAHOO.env.ua; var DOM = YAHOO.util.Dom; var E = YAHOO.util.Event; if(!DOM.createElementFromMarkup) { DOM.createElementFromMarkup = function(markup) { var p=document.createElement('div'); p.innerHTML = markup; var e = p.firstChild; return p.removeChild(e); }; } if(!DOM.removeElement) { DOM.removeElement = function(el) { return el.parentNode.removeChild(el); }; } function Plot(target_, data_, options_) { // data is on the form: // [ series1, series2 ... ] // where series is either just the data as [ [x1, y1], [x2, y2], ... ] // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label" } var series = [], options = { // the color theme used for graphs colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"], locale: "en", legend: { show: true, noColumns: 1, // number of colums in legend table labelFormatter: null, // fn: string -> string labelBoxBorderColor: "#ccc", // border color for the little label boxes container: null, // container (as jQuery object) to put legend in, null means default on top of graph position: "ne", // position of default legend container within plot margin: 5, // distance from grid edge to default legend container within plot backgroundColor: null, // null means auto-detect backgroundOpacity: 0.85 // set to 0 to avoid background }, xaxis: { mode: null, // null or "time" min: null, // min. value to show, null means set automatically max: null, // max. value to show, null means set automatically autoscaleMargin: null, // margin in % to add if auto-setting min/max ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks tickFormatter: null, // fn: number -> string label: null, labelWidth: null, // size of tick labels in pixels labelHeight: null, scaleType: 'linear', // may be 'linear' or 'log' // mode specific options tickDecimals: null, // no. of decimals, null means auto tickSize: null, // number or [number, "unit"] minTickSize: null, // number or [number, "unit"] timeformat: null // format string to use }, yaxis: { label: null, autoscaleMargin: 0.02 }, x2axis: { label: null, autoscaleMargin: null }, y2axis: { label: null, autoscaleMargin: 0.02 }, points: { show: false, radius: 3, lineWidth: 2, // in pixels fill: true, fillColor: "#ffffff" }, lines: { // we don't put in show: false so we can see // whether lines were actively disabled lineWidth: 2, // in pixels fill: false, fillColor: null }, bars: { show: false, lineWidth: 2, // in pixels barWidth: 1, // in units of the x axis fill: true, fillColor: null, align: "left" // or "center" }, grid: { show: true, showLines: true, color: "#545454", // primary color used for outline and labels backgroundColor: null, // null for transparent, else color tickColor: "#dddddd", // color used for the ticks labelMargin: 5, // in pixels labelFontSize: 16, borderWidth: 2, // in pixels borderColor: null, // set if different from the grid color markings: null, // array of ranges or fn: axes -> array of ranges markingsColor: "#f4f4f4", markingsLineWidth: 2, // interactive stuff clickable: false, hoverable: false, autoHighlight: true, // highlight in case mouse is near mouseActiveRadius: 10 // how far the mouse can be away to activate an item }, selection: { mode: null, // one of null, "x", "y" or "xy" color: "#e8cfac" }, crosshair: { mode: null, // one of null, "x", "y" or "xy", color: "#aa0000" }, shadowSize: 3 }, canvas = null, // the canvas for the plot itself overlay = null, // canvas for interactive stuff on top of plot eventHolder = null, // jQuery object that events should be bound to ctx = null, octx = null, target = DOM.get(target_), axes = { xaxis: {}, yaxis: {}, x2axis: {}, y2axis: {} }, plotOffset = { left: 0, right: 0, top: 0, bottom: 0}, canvasWidth = 0, canvasHeight = 0, plotWidth = 0, plotHeight = 0, // dedicated to storing data for buggy standard compliance cases workarounds = {}; this.setData = setData; this.setupGrid = setupGrid; this.draw = draw; this.clearSelection = clearSelection; this.setSelection = setSelection; this.getCanvas = function() { return canvas; }; this.getPlotOffset = function() { return plotOffset; }; this.getData = function() { return series; }; this.getAxes = function() { return axes; }; this.setCrosshair = setCrosshair; this.clearCrosshair = function () { setCrosshair(null); }; this.highlight = highlight; this.unhighlight = unhighlight; // initialize parseOptions(options_); setData(data_); constructCanvas(); setupGrid(); draw(); var plot = this; plot.createEvent('plotclick'); plot.createEvent('plothover'); plot.createEvent('plotselected'); plot.createEvent('plotunselected'); function setData(d) { series = parseData(d); fillInSeriesOptions(); processData(); } function normalizeData(d) { var possible_controls = ['x', 'time', 'date']; if (L.isArray(d)) { d = { data: d }; } else { d = L.merge(d); } if(d.disabled) { return undefined; } if (d.data.length === 0) { return undefined; } var j, k; // Make a copy so we don't obliterate the caller's data var _data = []; if (L.isArray(d.data[0])) { for(j=0; j 1); if(s.dropped[j]) { drops-=1; } if(!isNaN(x) && !isNaN(x)) drops+=dropperiod; else { drops=0; // bonus for a null point points--; dropperiod=1-canvasWidth/10/points; } } return s; } function splitSeries(s) { var res = []; for(var k=0; k= options.colors.length) { i = 0; ++variation; } } // fill in the options var colori = 0, s; for (i = 0; i < series.length; ++i) { s = series[i]; // assign colors if (s.color == null) { s.color = colors[colori].toString(); ++colori; } else if (typeof s.color == "number") s.color = colors[s.color].toString(); // copy the rest s.lines = L.merge(options.lines, s.lines || {}); s.points = L.merge(options.points, s.points || {}); s.bars = L.merge(options.bars, s.bars || {}); // turn on lines automatically in case nothing is set if (s.lines.show == null && !s.bars.show && !s.points.show) s.lines.show = true; if (s.shadowSize == null) s.shadowSize = options.shadowSize; if (s.xaxis && s.xaxis == 2) s.xaxis = axes.x2axis; else s.xaxis = axes.xaxis; if (s.yaxis && s.yaxis >= 2) { if(!axes['y' + s.yaxis + 'axis']) axes['y' + s.yaxis + 'axis'] = {}; if(!options['y' + s.yaxis + 'axis']) options['y' + s.yaxis + 'axis'] = { autoscaleMargin: 0.02 }; s.yaxis = axes['y' + s.yaxis + 'axis']; } else s.yaxis = axes.yaxis; } } function processData() { var topSentry = Number.POSITIVE_INFINITY, bottomSentry = Number.NEGATIVE_INFINITY, axis; for (axis in axes) { axes[axis].datamin = topSentry; axes[axis].datamax = bottomSentry; axes[axis].min = options[axis].min; axes[axis].max = options[axis].max; axes[axis].used = false; } for (var i = 0; i < series.length; ++i) { var s = series[i]; var data = s.data, axisx = s.xaxis, axisy = s.yaxis, xmin = topSentry, xmax = bottomSentry, ymin = topSentry, ymax = bottomSentry, x, y, p; axisx.used = axisy.used = true; if (s.bars.show) { // make sure we got room for the bar var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2; xmin += delta; xmax += delta + s.bars.barWidth; } for (var j = 0; j < data.length; ++j) { p = data[j]; if(data[j] === null) continue; x = p.x; y = p.y; if(L.isObject(x) && x.getTime) { // this is a Date object x = x.getTime()/1000; } if(L.isObject(y) && y.getTime) { // this is a Date object y = y.getTime()/1000; } // convert to number if (x != null && !isNaN(x = +x)) { if (x < xmin) xmin = x; if (x > xmax) xmax = x; } else x = null; if (y != null && !isNaN(y = +y)) { if (y < ymin) ymin = y; if (y > ymax) ymax = y; } else y = null; if (x == null || y == null) data[j] = x = y = null; // mark this point invalid } axisx.datamin = Math.min(axisx.datamin, xmin); axisx.datamax = Math.max(axisx.datamax, xmax); axisy.datamin = Math.min(axisy.datamin, ymin); axisy.datamax = Math.max(axisy.datamax, ymax); } } function constructCanvas() { function makeCanvas(width, height, container, style) { var c = document.createElement('canvas'); c.width = width; c.height = height; if (typeof G_vmlCanvasManager !== 'undefined') // excanvas hack c = G_vmlCanvasManager.initElement(c); if(style) { for(var k in style) { c.style[k] = style[k]; } } container.appendChild(c); return c; } canvasWidth = parseInt(DOM.getStyle(target, 'width'), 10); canvasHeight = parseInt(DOM.getStyle(target, 'height'), 10); target.innerHTML = ""; // clear target target.style.position = "relative"; // for positioning labels and overlay if (canvasWidth <= 0 || canvasHeight <= 0) throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight; if (YAHOO.env.ua.ie) { G_vmlCanvasManager.init_(document); } // the canvas canvas = makeCanvas(canvasWidth, canvasHeight, target); ctx = canvas.getContext("2d"); // overlay canvas for interactive features overlay = makeCanvas(canvasWidth, canvasHeight, target, { position: 'absolute', left: '0px', top: '0px' }); octx = overlay.getContext("2d"); // we include the canvas in the event holder too, because IE 7 // sometimes has trouble with the stacking order eventHolder = [overlay, canvas]; // bind events if (options.selection.mode != null || options.crosshair.mode != null || options.grid.hoverable) { E.on(eventHolder, 'mousemove', onMouseMove); if (options.selection.mode != null) E.on(eventHolder, "mousedown", onMouseDown); } if (options.crosshair.mode != null) E.on(eventHolder, "mouseout", onMouseOut); if (options.grid.clickable) E.on(eventHolder, "click", onClick); } function setupGrid() { function setupAxis(axis, options, type) { setRange(axis, options); prepareTickGeneration(axis, options); setTicks(axis, options); // add transformation helpers if (type == 'x') { // data point to canvas coordinate axis.p2c = function (p) { return (p - axis.min) * axis.scale; }; // canvas coordinate to data point axis.c2p = function (c) { return axis.min + c / axis.scale; }; } else { axis.p2c = function (p) { return (axis.max - p) * axis.scale; }; axis.c2p = function (c) { return axis.max - c / axis.scale; }; } } for (var axis in axes) setupAxis(axes[axis], options[axis], axis.charAt(0)); setSpacing(); if(options.grid.show) insertLabels(); insertLegend(); insertAxisLabels(); } function setRange(axis, axisOptions) { var min = axisOptions.min != null ? (axisOptions.scaleType == 'log' ? Math.log(axisOptions.min<=0?1:axisOptions.min) * Math.LOG10E : axisOptions.min) : axis.datamin; var max = axisOptions.max != null ? (axisOptions.scaleType == 'log' ? Math.log(axisOptions.max) * Math.LOG10E : axisOptions.max) : axis.datamax; if(axisOptions.mode === 'time') { if(L.isObject(min) && min.getTime) min = min.getTime()/1000; if(L.isObject(max) && max.getTime) max = max.getTime()/1000; } // degenerate case if (min == Number.POSITIVE_INFINITY) min = 0; if (max == Number.NEGATIVE_INFINITY) max = 1; if (max - min == 0.0) { // degenerate case var widen = max == 0 ? 1 : 0.01; if (axisOptions.min == null) min -= widen; // alway widen max if we couldn't widen min to ensure we // don't fall into min == max which doesn't work if (axisOptions.max == null || axisOptions.min != null) max += widen; } else { // consider autoscaling var margin = axisOptions.autoscaleMargin; if (margin != null) { if (axisOptions.min == null) { min -= (max - min) * margin; // make sure we don't go below zero if all values // are positive if (min < 0 && axis.datamin >= 0) min = 0; } if (axisOptions.max == null) { max += (max - min) * margin; if (max > 0 && axis.datamax <= 0) max = 0; } } } axis.min = min; axis.max = max; } function prepareTickGeneration(axis, axisOptions) { // estimate number of ticks var noTicks; if (typeof axisOptions.ticks == "number" && axisOptions.ticks > 0) noTicks = axisOptions.ticks; else if (axis == axes.xaxis || axis == axes.x2axis) noTicks = canvasWidth / 100; else noTicks = canvasHeight / 60; var delta = (axis.max - axis.min) / noTicks; var size, generator, unit, formatter, magn, norm; if (axisOptions.mode == "time") { // pretty handling of time delta*=1000; // map of app. size of time units in milliseconds var timeUnitSize = { "second": 1000, "minute": 60 * 1000, "hour": 60 * 60 * 1000, "day": 24 * 60 * 60 * 1000, "month": 30 * 24 * 60 * 60 * 1000, "year": 365.2425 * 24 * 60 * 60 * 1000 }; // the allowed tick sizes, after 1 year we use // an integer algorithm var spec = [ [1, "second"], [2, "second"], [5, "second"], [10, "second"], [30, "second"], [1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"], [30, "minute"], [1, "hour"], [2, "hour"], [4, "hour"], [8, "hour"], [12, "hour"], [1, "day"], [2, "day"], [3, "day"], [0.25, "month"], [0.5, "month"], [1, "month"], [2, "month"], [3, "month"], [6, "month"], [1, "year"] ]; var minSize = 0; if (axisOptions.minTickSize != null) { if (typeof axisOptions.tickSize == "number") minSize = axisOptions.tickSize; else minSize = axisOptions.minTickSize[0] * timeUnitSize[axisOptions.minTickSize[1]]; } for (var i = 0; i < spec.length - 1; ++i) if (delta < (spec[i][0] * timeUnitSize[spec[i][1]] + spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 && spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) break; size = spec[i][0]; unit = spec[i][1]; // special-case the possibility of several years if (unit == "year") { magn = Math.pow(10, Math.floor(Math.log(delta / timeUnitSize.year) / Math.LN10)); norm = (delta / timeUnitSize.year) / magn; if (norm < 1.5) size = 1; else if (norm < 3) size = 2; else if (norm < 7.5) size = 5; else size = 10; size *= magn; } if (axisOptions.tickSize) { size = axisOptions.tickSize[0]; unit = axisOptions.tickSize[1]; } generator = function(axis) { var ticks = [], tickSize = axis.tickSize[0], unit = axis.tickSize[1], d = new Date(axis.min*1000); var step = tickSize * timeUnitSize[unit]; if (unit == "second") d.setUTCSeconds(floorInBase(d.getUTCSeconds(), tickSize)); if (unit == "minute") d.setUTCMinutes(floorInBase(d.getUTCMinutes(), tickSize)); if (unit == "hour") d.setUTCHours(floorInBase(d.getUTCHours(), tickSize)); if (unit == "month") d.setUTCMonth(floorInBase(d.getUTCMonth(), tickSize)); if (unit == "year") d.setUTCFullYear(floorInBase(d.getUTCFullYear(), tickSize)); // reset smaller components d.setUTCMilliseconds(0); if (step >= timeUnitSize.minute) d.setUTCSeconds(0); if (step >= timeUnitSize.hour) d.setUTCMinutes(0); if (step >= timeUnitSize.day) d.setUTCHours(0); if (step >= timeUnitSize.day * 4) d.setUTCDate(1); if (step >= timeUnitSize.year) d.setUTCMonth(0); var carry = 0, v = Number.NaN, prev; do { prev = v; v = d.getTime(); ticks.push({ v: v/1000, label: axis.tickFormatter(v, axis) }); if (unit == "month") { if (tickSize < 1) { // a bit complicated - we'll divide the month // up but we need to take care of fractions // so we don't end up in the middle of a day d.setUTCDate(1); var start = d.getTime(); d.setUTCMonth(d.getUTCMonth() + 1); var end = d.getTime(); d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize); carry = d.getUTCHours(); d.setUTCHours(0); } else d.setUTCMonth(d.getUTCMonth() + tickSize); } else if (unit == "year") { d.setUTCFullYear(d.getUTCFullYear() + tickSize); } else d.setTime(v + step); } while (v < axis.max*1000 && v != prev); return ticks; }; formatter = function (v, axis) { var d = new Date(v); // first check global format if (axisOptions.timeformat != null) return YAHOO.util.Date.format(d, {format: axisOptions.timeformat}, options.locale); var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]]; var span = axis.max - axis.min; span*=1000; if (t < timeUnitSize.minute) var fmt = "%k:%M:%S"; else if (t < timeUnitSize.day) { if (span < 2 * timeUnitSize.day) fmt = "%k:%M"; else fmt = "%b %d %k:%M"; } else if (t < timeUnitSize.month) fmt = "%b %d"; else if (t < timeUnitSize.year) { if (span < timeUnitSize.year/2) fmt = "%b"; else fmt = "%b %Y"; } else fmt = "%Y"; return YAHOO.util.Date.format(d, {format: fmt}, axisOptions.timelang); }; } else { // pretty rounding of base-10 numbers var maxDec = axisOptions.tickDecimals; var dec = -Math.floor(Math.log(delta) / Math.LN10); if (maxDec != null && dec > maxDec) dec = maxDec; magn = Math.pow(10, -dec); norm = delta / magn; // norm is between 1.0 and 10.0 if (norm < 1.5) size = 1; else if (norm < 3) { size = 2; // special case for 2.5, requires an extra decimal if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) { size = 2.5; ++dec; } } else if (norm < 7.5) size = 5; else size = 10; size *= magn; if (axisOptions.minTickSize != null && size < axisOptions.minTickSize) size = axisOptions.minTickSize; if (axisOptions.tickSize != null) size = axisOptions.tickSize; axis.tickDecimals = Math.max(0, (maxDec != null) ? maxDec : dec); generator = function (axis) { var ticks = []; // spew out all possible ticks var start = floorInBase(axis.min, axis.tickSize), i = 0, v = Number.NaN, prev; do { prev = v; v = start + i * axis.tickSize; var t=v; if(axis.scaleType == 'log') { t = Math.exp(t / Math.LOG10E); } ticks.push({ v: v, label: axis.tickFormatter(t, axis) }); ++i; } while (v < axis.max && v != prev); return ticks; }; formatter = function (v, axis) { return v.toFixed(axis.tickDecimals); }; } axis.scaleType = axisOptions.scaleType; axis.tickSize = unit ? [size, unit] : size; axis.tickGenerator = generator; if (L.isFunction(axisOptions.tickFormatter)) axis.tickFormatter = function (v, axis) { return "" + axisOptions.tickFormatter(v, axis); }; else axis.tickFormatter = formatter; if (axisOptions.labelWidth != null) axis.labelWidth = axisOptions.labelWidth; if (axisOptions.labelHeight != null) axis.labelHeight = axisOptions.labelHeight; } function setTicks(axis, axisOptions) { axis.ticks = []; if (!axis.used) return; if (axisOptions.ticks == null) axis.ticks = axis.tickGenerator(axis); else if (typeof axisOptions.ticks == "number") { if (axisOptions.ticks > 0) axis.ticks = axis.tickGenerator(axis); } else if (axisOptions.ticks) { var ticks = axisOptions.ticks; if (L.isFunction(ticks)) // generate the ticks ticks = ticks({ min: axis.min, max: axis.max }); // clean up the user-supplied ticks, copy them over var v; for (var i = 0; i < ticks.length; ++i) { var label = null; var t = ticks[i]; if (typeof t == "object") { v = t[0]; if (t.length > 1) label = t[1]; } else v = t; if (axisOptions.scaleType == 'log') { if (label == null) label = v; v = Math.log(v) * Math.LOG10E; } if (label == null) label = axis.tickFormatter(v, axis); axis.ticks[i] = { v: v, label: label }; } } if (axisOptions.autoscaleMargin != null && axis.ticks.length > 0) { // snap to ticks if (axisOptions.min == null) axis.min = Math.min(axis.min, axis.ticks[0].v); if (axisOptions.max == null && axis.ticks.length > 1) axis.max = Math.min(axis.max, axis.ticks[axis.ticks.length - 1].v); } } function setSpacing() { function measureXLabels(axis) { if(options.grid.show){ // to avoid measuring the widths of the labels, we // construct fixed-size boxes and put the labels inside // them, we don't need the exact figures and the // fixed-size box content is easy to center if (axis.labelWidth == null) axis.labelWidth = canvasWidth / 6; // measure x label heights if (axis.labelHeight == null) { var labels = []; for (var i = 0; i < axis.ticks.length; ++i) { var l = axis.ticks[i].label; if (l) labels.push('
' + l + '
'); } axis.labelHeight = 0; if (labels.length > 0) { var dummyDiv = target.appendChild(DOM.createElementFromMarkup('
' + labels.join("") + '
')); axis.labelHeight = dummyDiv.offsetHeight; target.removeChild(dummyDiv); } } } else{ axis.labelHeight = 0; axis.labelWidth = 0; } } function measureYLabels(axis) { if(options.grid.show){ if (axis.labelWidth == null || axis.labelHeight == null) { var labels = [], l; // calculate y label dimensions for (var i = 0; i < axis.ticks.length; ++i) { l = axis.ticks[i].label; if (l) labels.push('
' + l + '
'); } if (labels.length > 0) { var dummyDiv = target.appendChild(DOM.createElementFromMarkup('
' + labels.join("") + '
')); if (axis.labelWidth == null) axis.labelWidth = dummyDiv.offsetWidth; if (axis.labelHeight == null) axis.labelHeight = dummyDiv.firstChild.offsetHeight; target.removeChild(dummyDiv); } if (axis.labelWidth == null) axis.labelWidth = 0; if (axis.labelHeight == null) axis.labelHeight = 0; } } else{ axis.labelHeight = 0; axis.labelWidth = 0; } } measureXLabels(axes.xaxis); measureYLabels(axes.yaxis); measureXLabels(axes.x2axis); measureYLabels(axes.y2axis); // get the most space needed around the grid for things // that may stick out var maxOutset = (options.grid.show) ? options.grid.borderWidth : 0; for (var i = 0; i < series.length; ++i) maxOutset = (Math.max(maxOutset, 2 * (((series[i].points.show) ? series[i].points.radius : 0 ) + series[i].points.lineWidth/2))); plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset; var margin = options.grid.labelMargin + options.grid.borderWidth; if (axes.xaxis.labelHeight > 0) plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + margin); if (axes.yaxis.labelWidth > 0) plotOffset.left = Math.max(maxOutset, axes.yaxis.labelWidth + margin); if (axes.x2axis.labelHeight > 0) plotOffset.top = Math.max(maxOutset, axes.x2axis.labelHeight + margin); if (axes.y2axis.labelWidth > 0) plotOffset.right = Math.max(maxOutset, axes.y2axis.labelWidth + margin); plotWidth = canvasWidth - plotOffset.left - plotOffset.right; plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top; // precompute how much the axis is scaling a point in canvas space for(var axis in axes) { axes[axis].scale = (axis.charAt(0) == 'x' ? plotWidth : plotHeight) / (axes[axis].max - axes[axis].min); } } function draw() { drawGrid(); for (var i = 0; i < series.length; i++) { drawSeries(series[i]); } } function extractRange(ranges, coord) { var firstAxis = coord + "axis", secondaryAxis = coord + "2axis", axis, from, to, reverse; if (ranges[firstAxis]) { axis = firstAxis; } else if (ranges[secondaryAxis]) { axis = secondaryAxis; } else { return { from: null, to: null, axis: axes[firstAxis] }; } from = ranges[axis].from; to = ranges[axis].to; if (options[axis].scaleType == 'log') { if (from != null) from = Math.log(from) * Math.LOG10E; if (to != null) to = Math.log(to) * Math.LOG10E; } axis = axes[axis]; // auto-reverse as an added bonus if (from != null && to != null && from > to) return { from: to, to: from, axis: axis }; return { from: from, to: to, axis: axis }; } function drawGrid() { var i; ctx.save(); ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.translate(plotOffset.left, plotOffset.top); // draw background, if any if (options.grid.backgroundColor) { ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)"); ctx.fillRect(0, 0, plotWidth, plotHeight); } // draw markings var markings = options.grid.markings; if (markings) { if (L.isFunction(markings)) markings = markings({ xaxis: axes.xaxis, yaxis: axes.yaxis, x2axis: axes.x2axis, y2axis: axes.y2axis }); for (i = 0; i < markings.length; ++i) { var m = markings[i], xrange = extractRange(m, "x"), yrange = extractRange(m, "y"); // fill in missing if (xrange.from == null) xrange.from = xrange.axis.min; if (xrange.to == null) xrange.to = xrange.axis.max; if (yrange.from == null) yrange.from = yrange.axis.min; if (yrange.to == null) yrange.to = yrange.axis.max; // clip if (xrange.to < xrange.axis.min || xrange.from > xrange.axis.max || yrange.to < yrange.axis.min || yrange.from > yrange.axis.max) continue; xrange.from = Math.max(xrange.from, xrange.axis.min); xrange.to = Math.min(xrange.to, xrange.axis.max); yrange.from = Math.max(yrange.from, yrange.axis.min); yrange.to = Math.min(yrange.to, yrange.axis.max); if (xrange.from == xrange.to && yrange.from == yrange.to) continue; // then draw xrange.from = xrange.axis.p2c(xrange.from); xrange.to = xrange.axis.p2c(xrange.to); yrange.from = yrange.axis.p2c(yrange.from); yrange.to = yrange.axis.p2c(yrange.to); if (xrange.from == xrange.to || yrange.from == yrange.to) { // draw line ctx.strokeStyle = m.color || options.grid.markingsColor; ctx.beginPath(); ctx.lineWidth = m.lineWidth || options.grid.markingsLineWidth; ctx.moveTo(xrange.from, yrange.from); ctx.lineTo(xrange.to, yrange.to); ctx.stroke(); } else { // fill area ctx.fillStyle = m.color || options.grid.markingsColor; ctx.fillRect(xrange.from, yrange.to, xrange.to - xrange.from, yrange.from - yrange.to); } } } if(options.grid.show && options.grid.showLines) { // draw the inner grid ctx.lineWidth = 1; ctx.strokeStyle = options.grid.tickColor; ctx.beginPath(); var v, axis = axes.xaxis; for (i = 0; i < axis.ticks.length; ++i) { v = axis.ticks[i].v; if (v <= axis.min || v >= axes.xaxis.max) continue; // skip those lying on the axes ctx.moveTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, 0); ctx.lineTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, plotHeight); } axis = axes.yaxis; for (i = 0; i < axis.ticks.length; ++i) { v = axis.ticks[i].v; if (v <= axis.min || v >= axis.max) continue; ctx.moveTo(0, Math.floor(axis.p2c(v)) + ctx.lineWidth/2); ctx.lineTo(plotWidth, Math.floor(axis.p2c(v)) + ctx.lineWidth/2); } axis = axes.x2axis; for (i = 0; i < axis.ticks.length; ++i) { v = axis.ticks[i].v; if (v <= axis.min || v >= axis.max) continue; ctx.moveTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, -5); ctx.lineTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, 5); } axis = axes.y2axis; for (i = 0; i < axis.ticks.length; ++i) { v = axis.ticks[i].v; if (v <= axis.min || v >= axis.max) continue; ctx.moveTo(plotWidth-5, Math.floor(axis.p2c(v)) + ctx.lineWidth/2); ctx.lineTo(plotWidth+5, Math.floor(axis.p2c(v)) + ctx.lineWidth/2); } ctx.stroke(); } if (options.grid.show && options.grid.borderWidth) { // draw border var bw = options.grid.borderWidth; ctx.lineWidth = bw; ctx.strokeStyle = options.grid.borderColor; ctx.lineJoin = "round"; ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw); } ctx.restore(); } function insertLabels() { DOM.getElementsByClassName("tickLabels", "div", target, DOM.removeElement); var html = ['
']; function addLabels(axis, labelGenerator) { for (var i = 0; i < axis.ticks.length; ++i) { var tick = axis.ticks[i]; if (!tick.label || tick.v < axis.min || tick.v > axis.max) continue; html.push(labelGenerator(tick, axis)); } } var margin = options.grid.labelMargin + options.grid.borderWidth; addLabels(axes.xaxis, function (tick, axis) { return '
' + tick.label + "
"; }); addLabels(axes.yaxis, function (tick, axis) { return '
' + tick.label + "
"; }); addLabels(axes.x2axis, function (tick, axis) { return '
' + tick.label + "
"; }); addLabels(axes.y2axis, function (tick, axis) { return '
' + tick.label + "
"; }); html.push('
'); target.appendChild(DOM.createElementFromMarkup(html.join(""))); } function insertAxisLabels() { var xLocation, yLocation; if( options.xaxis.label ) { yLocation = plotOffset.top + plotHeight + ( axes.xaxis.labelHeight * 1.5 ); xLocation = plotOffset.left; DOM.getElementsByClassName("xaxislabel", "div", target, DOM.removeElement); target.appendChild( DOM.createElementFromMarkup( "
" + options.xaxis.label + "
" ) ); } if( options.yaxis.label ) { xLocation = plotOffset.left - ( axes.yaxis.labelWidth * 2 ) - options.grid.labelFontSize; yLocation = plotOffset.top + plotHeight/2; DOM.getElementsByClassName("yaxislabel", "div", target, DOM.removeElement); target.appendChild( DOM.createElementFromMarkup( "
" + options.yaxis.label + "
") ); } } function drawSeries(series) { if (series.lines.show) drawSeriesLines(series); if (series.bars.show) drawSeriesBars(series); if (series.points.show) drawSeriesPoints(series); } function drawSeriesLines(series) { function plotLine(data, xoffset, yoffset, axisx, axisy) { var prev = null, cur=null, drawx = null, drawy = null; ctx.beginPath(); for (var i = 0; i < data.length; i++) { prev = cur; cur = data[i]; if(prev == null || cur == null) continue; var x1 = prev.x, y1 = prev.y, x2 = cur.x, y2 = cur.y; // clip with ymin if (y1 <= y2 && y1 < axisy.min) { if (y2 < axisy.min) continue; // line segment is outside // compute new intersection point x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; y1 = axisy.min; } else if (y2 <= y1 && y2 < axisy.min) { if (y1 < axisy.min) continue; x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; y2 = axisy.min; } // clip with ymax if (y1 >= y2 && y1 > axisy.max) { if (y2 > axisy.max) continue; x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; y1 = axisy.max; } else if (y2 >= y1 && y2 > axisy.max) { if (y1 > axisy.max) continue; x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; y2 = axisy.max; } // clip with xmin if (x1 <= x2 && x1 < axisx.min) { if (x2 < axisx.min) continue; y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; x1 = axisx.min; } else if (x2 <= x1 && x2 < axisx.min) { if (x1 < axisx.min) continue; y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; x2 = axisx.min; } // clip with xmax if (x1 >= x2 && x1 > axisx.max) { if (x2 > axisx.max) continue; y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; x1 = axisx.max; } else if (x2 >= x1 && x2 > axisx.max) { if (x1 > axisx.max) continue; y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; x2 = axisx.max; } if (drawx != axisx.p2c(x1) + xoffset || drawy != axisy.p2c(y1) + yoffset) ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset); drawx = axisx.p2c(x2) + xoffset; drawy = axisy.p2c(y2) + yoffset; ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset); } ctx.stroke(); } function plotLineArea(data, axisx, axisy) { var prev, cur = null, bottom = Math.min(Math.max(0, axisy.min), axisy.max), top, lastX = 0, areaOpen = false; for (var i = 0; i < data.length; i++) { prev = cur; cur = data[i]; if (areaOpen && x1 != null && x2 == null) { // close area ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom)); ctx.fill(); areaOpen = false; continue; } if (prev == null || cur == null) { if(areaOpen) { ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom)); ctx.fill(); } areaOpen = false; continue; } var x1 = prev.x, y1 = prev.y, x2 = cur.x, y2 = cur.y; // clip x values // clip with xmin if (x1 <= x2 && x1 < axisx.min) { if (x2 < axisx.min) continue; y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; x1 = axisx.min; } else if (x2 <= x1 && x2 < axisx.min) { if (x1 < axisx.min) continue; y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; x2 = axisx.min; } // clip with xmax if (x1 >= x2 && x1 > axisx.max) { if (x2 > axisx.max) continue; y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; x1 = axisx.max; } else if (x2 >= x1 && x2 > axisx.max) { if (x1 > axisx.max) continue; y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; x2 = axisx.max; } if (!areaOpen) { // open area ctx.beginPath(); ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom)); areaOpen = true; } // now first check the case where both is outside if (y1 >= axisy.max && y2 >= axisy.max) { ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max)); ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max)); lastX = x2; continue; } else if (y1 <= axisy.min && y2 <= axisy.min) { ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min)); ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min)); lastX = x2; continue; } // else it's a bit more complicated, there might // be two rectangles and two triangles we need to fill // in; to find these keep track of the current x values var x1old = x1, x2old = x2; // and clip the y values, without shortcutting // clip with ymin if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) { x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; y1 = axisy.min; } else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) { x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; y2 = axisy.min; } // clip with ymax if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) { x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; y1 = axisy.max; } else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) { x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; y2 = axisy.max; } // if the x value was changed we got a rectangle // to fill if (x1 != x1old) { if (y1 <= axisy.min) top = axisy.min; else top = axisy.max; ctx.lineTo(axisx.p2c(x1old), axisy.p2c(top)); ctx.lineTo(axisx.p2c(x1), axisy.p2c(top)); } // fill the triangles ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1)); ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2)); // fill the other rectangle if it's there if (x2 != x2old) { if (y2 <= axisy.min) top = axisy.min; else top = axisy.max; ctx.lineTo(axisx.p2c(x2), axisy.p2c(top)); ctx.lineTo(axisx.p2c(x2old), axisy.p2c(top)); } lastX = Math.max(x2, x2old); } if (areaOpen) { ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom)); ctx.fill(); } } ctx.save(); ctx.translate(plotOffset.left, plotOffset.top); ctx.lineJoin = "round"; var lw = series.lines.lineWidth, sw = series.shadowSize; // FIXME: consider another form of shadow when filling is turned on if (lw > 0 && sw > 0) { // draw shadow as a thick and thin line with transparency ctx.lineWidth = sw; ctx.strokeStyle = "rgba(0,0,0,0.1)"; var xoffset = 1; plotLine(series.data, xoffset, Math.sqrt((lw/2 + sw/2)*(lw/2 + sw/2) - xoffset*xoffset), series.xaxis, series.yaxis); ctx.lineWidth = sw/2; plotLine(series.data, xoffset, Math.sqrt((lw/2 + sw/4)*(lw/2 + sw/4) - xoffset*xoffset), series.xaxis, series.yaxis); } ctx.lineWidth = lw; ctx.strokeStyle = series.color; var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight); if (fillStyle) { ctx.fillStyle = fillStyle; plotLineArea(series.data, series.xaxis, series.yaxis); } if (lw > 0) plotLine(series.data, 0, 0, series.xaxis, series.yaxis); ctx.restore(); } function drawSeriesPoints(series) { function plotPoints(data, radius, fillStyle, offset, circumference, axisx, axisy) { for (var i = 0; i < data.length; i++) { if (data[i] == null || series.dropped[i]) continue; var x = data[i].x, y = data[i].y; if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) continue; ctx.beginPath(); ctx.arc(axisx.p2c(x), axisy.p2c(y) + offset, radius, 0, circumference, true); if (fillStyle) { ctx.fillStyle = fillStyle; ctx.fill(); } ctx.stroke(); } } ctx.save(); ctx.translate(plotOffset.left, plotOffset.top); var lw = series.lines.lineWidth, sw = series.shadowSize, radius = series.points.radius; if (lw > 0 && sw > 0) { // draw shadow in two steps var w = sw / 2; ctx.lineWidth = w; ctx.strokeStyle = "rgba(0,0,0,0.1)"; plotPoints(series.data, radius, null, w + w/2, 2 * Math.PI, series.xaxis, series.yaxis); ctx.strokeStyle = "rgba(0,0,0,0.2)"; plotPoints(series.data, radius, null, w/2, 2 * Math.PI, series.xaxis, series.yaxis); } ctx.lineWidth = lw; ctx.strokeStyle = series.color; plotPoints(series.data, radius, getFillStyle(series.points, series.color), 0, 2 * Math.PI, series.xaxis, series.yaxis); ctx.restore(); } function drawBar(x, y, barLeft, barRight, offset, fill, axisx, axisy, c) { var drawLeft = true, drawRight = true, drawTop = true, drawBottom = false, left = x + barLeft, right = x + barRight, bottom = 0, top = y; // account for negative bars if (top < bottom) { top = 0; bottom = y; drawBottom = true; drawTop = false; } // clip if (right < axisx.min || left > axisx.max || top < axisy.min || bottom > axisy.max) return; if (left < axisx.min) { left = axisx.min; drawLeft = false; } if (right > axisx.max) { right = axisx.max; drawRight = false; } if (bottom < axisy.min) { bottom = axisy.min; drawBottom = false; } if (top > axisy.max) { top = axisy.max; drawTop = false; } left = axisx.p2c(left); bottom = axisy.p2c(bottom); right = axisx.p2c(right); top = axisy.p2c(top); // fill the bar if (fill) { c.beginPath(); c.moveTo(left, bottom); c.lineTo(left, top); c.lineTo(right, top); c.lineTo(right, bottom); if(typeof fill === 'function') { c.fillStyle = fill(bottom, top); } else if(typeof fill === 'string') { c.fillStyle = fill; } c.fill(); } // draw outline if (drawLeft || drawRight || drawTop || drawBottom) { c.beginPath(); // FIXME: inline moveTo is buggy with excanvas c.moveTo(left, bottom + offset); if (drawLeft) c.lineTo(left, top + offset); else c.moveTo(left, top + offset); if (drawTop) c.lineTo(right, top + offset); else c.moveTo(right, top + offset); if (drawRight) c.lineTo(right, bottom + offset); else c.moveTo(right, bottom + offset); if (drawBottom) c.lineTo(left, bottom + offset); else c.moveTo(left, bottom + offset); c.stroke(); } } function drawSeriesBars(series) { function plotBars(data, barLeft, barRight, offset, fill, axisx, axisy) { for (var i = 0; i < data.length; i++) { if (data[i] == null) continue; drawBar(data[i].x, data[i].y, barLeft, barRight, offset, fill, axisx, axisy, ctx); } } ctx.save(); ctx.translate(plotOffset.left, plotOffset.top); // FIXME: figure out a way to add shadows (for instance along the right edge) ctx.lineWidth = series.bars.lineWidth; ctx.strokeStyle = series.color; var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; var fill = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null; plotBars(series.data, barLeft, barLeft + series.bars.barWidth, 0, fill, series.xaxis, series.yaxis); ctx.restore(); } function getFillStyle(filloptions, seriesColor, bottom, top) { var fill = filloptions.fill; if (!fill) return null; if (filloptions.fillColor) return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor); var c = parseColor(seriesColor); c.a = typeof fill == "number" ? fill : 0.4; c.normalize(); return c.toString(); } function insertLegend() { DOM.getElementsByClassName("legend", "div", target, DOM.removeElement); if (!options.legend.show) return; var fragments = [], rowStarted = false, lf = options.legend.labelFormatter, s, label; for (var i = 0; i < series.length; ++i) { s = series[i]; label = s.label; if (!label) continue; if (i % options.legend.noColumns == 0) { if (rowStarted) fragments.push(''); fragments.push(''); rowStarted = true; } if (lf) label = lf(label, s); fragments.push( '
' + '' + label + ''); } if (rowStarted) fragments.push(''); if (fragments.length == 0) return; var table = '' + fragments.join("") + '
'; if (options.legend.container != null) DOM.get(options.legend.container).innerHTML = table; else { var pos = "", p = options.legend.position, m = options.legend.margin; if (m[0] == null) m = [m, m]; if (p.charAt(0) == "n") pos += 'top:' + (m[1] + plotOffset.top) + 'px;'; else if (p.charAt(0) == "s") pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;'; if (p.charAt(1) == "e") pos += 'right:' + (m[0] + plotOffset.right) + 'px;'; else if (p.charAt(1) == "w") pos += 'left:' + (m[0] + plotOffset.left) + 'px;'; var legend = target.appendChild(DOM.createElementFromMarkup('
' + table.replace('style="', 'style="position:absolute;' + pos +';') + '
')); if (options.legend.backgroundOpacity != 0.0) { // put in the transparent background // separately to avoid blended labels and // label boxes var c = options.legend.backgroundColor; if (c == null) { var tmp; if (options.grid.backgroundColor && typeof options.grid.backgroundColor == "string") tmp = options.grid.backgroundColor; else tmp = extractColor(legend); c = parseColor(tmp).adjust(null, null, null, 1).toString(); } var div = legend.firstChild; var _el = DOM.insertBefore( DOM.createElementFromMarkup('
'), legend ); DOM.setStyle(_el, 'opacity', options.legend.backgroundOpacity); } } } // interactive features var lastMousePos = { pageX: null, pageY: null }, selection = { first: { x: -1, y: -1}, second: { x: -1, y: -1}, show: false, active: false }, crosshair = { pos: { x: -1, y: -1 } }, highlights = [], clickIsMouseUp = false, redrawTimeout = null, hoverTimeout = null; // Returns the data item the mouse is over, or null if none is found function findNearbyItem(mouseX, mouseY) { var maxDistance = options.grid.mouseActiveRadius, lowestDistance = maxDistance * maxDistance + 1, item = null, foundPoint = false, j, x, y; function result(i, j) { return { datapoint: series[i].data[j], dataIndex: j, series: series[i], seriesIndex: i }; } for (var i = 0; i < series.length; ++i) { var s = series[i], axisx = s.xaxis, axisy = s.yaxis, mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster my = axisy.c2p(mouseY), maxx = maxDistance / axisx.scale, maxy = maxDistance / axisy.scale; var data = s.data; if (s.lines.show || s.points.show) { for (j = 0; j < data.length; j++ ) { if (data[j] == null) continue; x = data[j].x; y = data[j].y; // For points and lines, the cursor must be within a // certain distance to the data point if (x - mx > maxx || x - mx < -maxx || y - my > maxy || y - my < -maxy) continue; // We have to calculate distances in pixels, not in // data units, because the scales of the axes may be different var dx = Math.abs(axisx.p2c(x) - mouseX), dy = Math.abs(axisy.p2c(y) - mouseY), dist = dx * dx + dy * dy; // no idea in taking sqrt if (dist < lowestDistance) { lowestDistance = dist; item = result(i, j); } } } if (s.bars.show && !item) { // no other point can be nearby var barLeft = s.bars.align == "left" ? 0 : -s.bars.barWidth/2, barRight = barLeft + s.bars.barWidth; for (j = 0; j < data.length; j++) { x = data[j].x; y = data[j].y; if (x == null) continue; // for a bar graph, the cursor must be inside the bar if ((mx >= x + barLeft && mx <= x + barRight && my >= Math.min(0, y) && my <= Math.max(0, y))) item = result(i, j); } } } return item; } function onMouseMove(e) { lastMousePos.pageX = E.getPageX(e); lastMousePos.pageY = E.getPageY(e); if (options.grid.hoverable) triggerClickHoverEvent("plothover", lastMousePos); if (options.crosshair.mode != null) { if (!selection.active) { setPositionFromEvent(crosshair.pos, lastMousePos); triggerRedrawOverlay(); } else crosshair.pos.x = -1; // hide the crosshair while selecting } if (selection.active) { updateSelection(lastMousePos); } } function onMouseDown(e) { var button = e.which || e.button; if (button != 1) // only accept left-click return; // cancel out any text selections document.body.focus(); // prevent text selection and drag in old-school browsers if (document.onselectstart !== undefined && workarounds.onselectstart == null) { workarounds.onselectstart = document.onselectstart; document.onselectstart = function () { return false; }; } if (document.ondrag !== undefined && workarounds.ondrag == null) { workarounds.ondrag = document.ondrag; document.ondrag = function () { return false; }; } var mousePos = {pageX: E.getPageX(e), pageY: E.getPageY(e)}; setSelectionPos(selection.first, mousePos); lastMousePos.pageX = null; selection.active = true; E.on(document, "mouseup", onSelectionMouseUp); } function onMouseOut(e) { if (options.crosshair.mode != null && crosshair.pos.x != -1) { crosshair.pos.x = -1; triggerRedrawOverlay(); } } function onClick(e) { if (clickIsMouseUp) { clickIsMouseUp = false; return; } var mousePos = {pageX: E.getPageX(e), pageY: E.getPageY(e)}; triggerClickHoverEvent("plotclick", mousePos); } // trigger click or hover event (they send the same parameters // so we share their code) function triggerClickHoverEvent(eventname, event) { var offset = DOM.getXY(eventHolder[0]), pos = { pageX: event.pageX, pageY: event.pageY }, canvasX = event.pageX - offset[0] - plotOffset.left, canvasY = event.pageY - offset[1] - plotOffset.top; for(var axis in axes) if(axes[axis].used) pos[axis.replace(/axis$/, '')] = axes[axis].c2p(axis.charAt(0) == 'x' ? canvasX : canvasY); var item = findNearbyItem(canvasX, canvasY); if (item) { // fill in mouse pos for any listeners out there item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint.x) + offset[0] + plotOffset.left, 10); item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint.y) + offset[1] + plotOffset.top, 10); } if (options.grid.autoHighlight) { // clear auto-highlights for (var i = 0; i < highlights.length; ++i) { var h = highlights[i]; if (h.auto == eventname && !(item && h.series == item.series && h.point == item.datapoint)) unhighlight(h.series, h.point); } if (item) highlight(item.series, item.datapoint, eventname); } plot.fireEvent(eventname, {pos: pos, item: item }); } function triggerRedrawOverlay() { if (!redrawTimeout) redrawTimeout = setTimeout(redrawOverlay, 30); } function redrawOverlay() { redrawTimeout = null; // redraw highlights octx.save(); octx.clearRect(0, 0, canvasWidth, canvasHeight); octx.translate(plotOffset.left, plotOffset.top); var hi; for (var i = 0; i < highlights.length; ++i) { hi = highlights[i]; if (hi.series.bars.show) drawBarHighlight(hi.series, hi.point); else drawPointHighlight(hi.series, hi.point); } // redraw selection if (selection.show && selectionIsSane()) { octx.strokeStyle = parseColor(options.selection.color).scale(null, null, null, 0.8).toString(); octx.lineWidth = 1; ctx.lineJoin = "round"; octx.fillStyle = parseColor(options.selection.color).scale(null, null, null, 0.4).toString(); var x = Math.min(selection.first.x, selection.second.x), y = Math.min(selection.first.y, selection.second.y), w = Math.abs(selection.second.x - selection.first.x), h = Math.abs(selection.second.y - selection.first.y); octx.fillRect(x, y, w, h); octx.strokeRect(x, y, w, h); } // redraw crosshair var pos = crosshair.pos, mode = options.crosshair.mode; if (mode != null && pos.x != -1) { octx.strokeStyle = parseColor(options.crosshair.color).scale(null, null, null, 0.8).toString(); octx.lineWidth = 1; ctx.lineJoin = "round"; octx.beginPath(); if (mode.indexOf("x") != -1) { octx.moveTo(pos.x, 0); octx.lineTo(pos.x, plotHeight); } if (mode.indexOf("y") != -1) { octx.moveTo(0, pos.y); octx.lineTo(plotWidth, pos.y); } octx.stroke(); } octx.restore(); } function highlight(s, point, auto) { if (typeof s == "number") s = series[s]; if (typeof point == "number") point = s.data[point]; var i = indexOfHighlight(s, point); if (i == -1) { highlights.push({ series: s, point: point, auto: auto }); triggerRedrawOverlay(); } else if (!auto) highlights[i].auto = false; } function unhighlight(s, point) { if (typeof s == "number") s = series[s]; if (typeof point == "number") point = s.data[point]; var i = indexOfHighlight(s, point); if (i != -1) { highlights.splice(i, 1); triggerRedrawOverlay(); } } function indexOfHighlight(s, p) { for (var i = 0; i < highlights.length; ++i) { var h = highlights[i]; if (h.series == s && h.point[0] == p[0] && h.point[1] == p[1]) return i; } return -1; } function drawPointHighlight(series, point) { var x = point.x, y = point.y, axisx = series.xaxis, axisy = series.yaxis; if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) return; var pointRadius = series.points.radius + series.points.lineWidth / 2; octx.lineWidth = pointRadius; octx.strokeStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString(); var radius = 1.5 * pointRadius; octx.beginPath(); octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, true); octx.stroke(); } function drawBarHighlight(series, point) { octx.lineJoin = "round"; octx.lineWidth = series.bars.lineWidth; octx.strokeStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString(); var fillStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString(); var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; drawBar(point.x, point.y, barLeft, barLeft + series.bars.barWidth, 0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx); } function setPositionFromEvent(pos, e) { var offset = DOM.getXY(eventHolder[0]); pos.x = clamp(0, e.pageX - offset[0] - plotOffset.left, plotWidth); pos.y = clamp(0, e.pageY - offset[1] - plotOffset.top, plotHeight); } function setCrosshair(pos) { if (pos == null) crosshair.pos.x = -1; else { crosshair.pos.x = clamp(0, pos.x != null ? axes.xaxis.p2c(pos.x) : axes.x2axis.p2c(pos.x2), plotWidth); crosshair.pos.y = clamp(0, pos.y != null ? axes.yaxis.p2c(pos.y) : axes.y2axis.p2c(pos.y2), plotHeight); } triggerRedrawOverlay(); } function getSelectionForEvent() { var x1 = Math.min(selection.first.x, selection.second.x), x2 = Math.max(selection.first.x, selection.second.x), y1 = Math.max(selection.first.y, selection.second.y), y2 = Math.min(selection.first.y, selection.second.y); var r = {}; if (axes.xaxis.used) r.xaxis = { from: axes.xaxis.c2p(x1), to: axes.xaxis.c2p(x2) }; if (axes.x2axis.used) r.x2axis = { from: axes.x2axis.c2p(x1), to: axes.x2axis.c2p(x2) }; if (axes.yaxis.used) r.yaxis = { from: axes.yaxis.c2p(y1), to: axes.yaxis.c2p(y2) }; if (axes.y2axis.used) r.y2axis = { from: axes.y2axis.c2p(y1), to: axes.y2axis.c2p(y2) }; return r; } function triggerSelectedEvent() { var r = getSelectionForEvent(); plot.fireEvent("plotselected", r); } function onSelectionMouseUp(e) { // revert drag stuff for old-school browsers if (document.onselectstart !== undefined) document.onselectstart = workarounds.onselectstart; if (document.ondrag !== undefined) document.ondrag = workarounds.ondrag; // no more draggy-dee-drag selection.active = false; var mousePos = {pageX: E.getPageX(e), pageY: E.getPageY(e)}; updateSelection(mousePos); if (selectionIsSane()) { triggerSelectedEvent(); clickIsMouseUp = true; } else { // this counts as a clear plot.fireEvent("plotunselected", {}); } E.removeListener(document, "mouseup", onSelectionMouseUp); return false; } function setSelectionPos(pos, e) { setPositionFromEvent(pos, e); if (options.selection.mode == "y") { if (pos == selection.first) pos.x = 0; else pos.x = plotWidth; } if (options.selection.mode == "x") { if (pos == selection.first) pos.y = 0; else pos.y = plotHeight; } } function updateSelection(pos) { if (pos.pageX == null) return; setSelectionPos(selection.second, pos); if (selectionIsSane()) { selection.show = true; triggerRedrawOverlay(); } else clearSelection(true); } function clearSelection(preventEvent) { if (selection.show) { selection.show = false; triggerRedrawOverlay(); if (!preventEvent) plot.fireEvent("plotunselected", {}); } } function setSelection(ranges, preventEvent) { var range; if (options.selection.mode == "y") { selection.first.x = 0; selection.second.x = plotWidth; } else { range = extractRange(ranges, "x"); selection.first.x = range.axis.p2c(range.from); selection.second.x = range.axis.p2c(range.to); } if (options.selection.mode == "x") { selection.first.y = 0; selection.second.y = plotHeight; } else { range = extractRange(ranges, "y"); selection.first.y = range.axis.p2c(range.from); selection.second.y = range.axis.p2c(range.to); } selection.show = true; triggerRedrawOverlay(); if (!preventEvent) triggerSelectedEvent(); } function selectionIsSane() { var minSize = 5; return Math.abs(selection.second.x - selection.first.x) >= minSize && Math.abs(selection.second.y - selection.first.y) >= minSize; } function getColorOrGradient(spec, bottom, top, defaultColor) { if (typeof spec == "string") return spec; else { // assume this is a gradient spec; IE currently only // supports a simple vertical gradient properly, so that's // what we support too var gradient = ctx.createLinearGradient(0, top, 0, bottom); for (var i = 0, l = spec.colors.length; i < l; ++i) { var c = spec.colors[i]; gradient.addColorStop(i / (l - 1), typeof c == "string" ? c : parseColor(defaultColor).scale(c.brightness, c.brightness, c.brightness, c.opacity)); } return gradient; } } } L.augment(Plot, YAHOO.util.EventProvider); YAHOO.widget.Flot = function(target, data, options) { return new Plot(target, data, options); }; // round to nearby lower multiple of base function floorInBase(n, base) { return base * Math.floor(n / base); } function clamp(min, value, max) { if (value < min) return min; else if (value > max) return max; else return value; } // color helpers, inspiration from the jquery color animation // plugin by John Resig function Color (r, g, b, a) { var rgba = ['r','g','b','a']; var x = 4; //rgba.length while (-1<--x) { this[rgba[x]] = arguments[x] || ((x==3) ? 1.0 : 0); } this.toString = function() { if (this.a >= 1.0) { return "rgb("+[this.r,this.g,this.b].join(",")+")"; } else { return "rgba("+[this.r,this.g,this.b,this.a].join(",")+")"; } }; this.scale = function(rf, gf, bf, af) { x = 4; //rgba.length while (-1<--x) { if (arguments[x] != null) this[rgba[x]] *= arguments[x]; } return this.normalize(); }; this.adjust = function(rd, gd, bd, ad) { x = 4; //rgba.length while (-1<--x) { if (arguments[x] != null) this[rgba[x]] += arguments[x]; } return this.normalize(); }; this.clone = function() { return new Color(this.r, this.b, this.g, this.a); }; var limit = function(val,minVal,maxVal) { return Math.max(Math.min(val, maxVal), minVal); }; this.normalize = function() { this.r = clamp(0, parseInt(this.r, 10), 255); this.g = clamp(0, parseInt(this.g, 10), 255); this.b = clamp(0, parseInt(this.b, 10), 255); this.a = clamp(0, this.a, 1); return this; }; this.normalize(); } 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] }; function extractColor(element) { var color, elem = element; do { color = DOM.getStyle(elem, 'backgroundColor').toLowerCase(); // keep going until we find an element that has color, or // we hit the body if (color != '' && color != 'transparent') break; elem = elem.parentNode; } while (!elem.nodeName == "body"); // catch Safari's way of signalling transparent if (color == "rgba(0, 0, 0, 0)") return "transparent"; return color; } // parse string, returns Color function parseColor(str) { var result; // Look for rgb(num,num,num) if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str)) return new Color(parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)); // Look for rgba(num,num,num,num) if (result = /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 new Color(parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10), parseFloat(result[4])); // Look for rgb(num%,num%,num%) if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str)) return new Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55); // Look for rgba(num%,num%,num%,num) if (result = /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 new Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55, parseFloat(result[4])); // Look for #a0b1c2 if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str)) return new Color(parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)); // Look for #fff if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str)) return new Color(parseInt(result[1]+result[1], 16), parseInt(result[2]+result[2], 16), parseInt(result[3]+result[3], 16)); // Otherwise, we're most likely dealing with a named color var name = L.trim(str).toLowerCase(); if (name == "transparent") return new Color(255, 255, 255, 0); else { result = lookupColors[name]; return new Color(result[0], result[1], result[2]); } } })();