Sparkline: 1,4,6,6,8,5,3,5
-* $('.sparkline').sparkline(); -* There must be no spaces in the enclosed data set -* -* Otherwise values must be an array of numbers or null values -*Sparkline: This text replaced if the browser is compatible
-* $('#sparkline1').sparkline([1,4,6,6,8,5,3,5]) -* $('#sparkline2').sparkline([1,4,6,null,null,5,3,5]) -* -* Values can also be specified in an HTML comment, or as a values attribute: -*Sparkline:
-*Sparkline:
-* $('.sparkline').sparkline(); -* -* By default, options should be passed in as teh second argument to the sparkline function: -* $('.sparkline').sparkline([1,2,3,4], {type: 'bar'}) -* -* Supported options: -* lineColor - Color of the line used for the chart -* fillColor - Color used to fill in the chart - Set to '' or false for a transparent chart -* width - Width of the chart - Defaults to 3 times the number of values in pixels -* height - Height of the chart - Defaults to the height of the containing element -* chartRangeMin - Specify the minimum value to use for the Y range of the chart - Defaults to the minimum value supplied -* chartRangeMax - Specify the maximum value to use for the Y range of the chart - Defaults to the maximum value supplied -* chartRangeClip - Clip out of range values to the max/min specified by chartRangeMin and chartRangeMax -* chartRangeMinX - Specify the minimum value to use for the X range of the chart - Defaults to the minimum value supplied -* chartRangeMaxX - Specify the maximum value to use for the X range of the chart - Defaults to the maximum value supplied -* tagValuesAttribute - Name of tag attribute to check for data values - Defaults to 'values' -* disableHiddenCheck - If set to true, then the plugin will assume that charts will never be drawn into a -* hidden dom element, avoding a browser reflow -* disableInteraction - If set to true then all mouseover/click interaction behaviour will be disabled, -* making the plugin perform much like it did in 1.x -* disableTooltips - If set to true then tooltips will be disabled - Defaults to false (tooltips enabled) -* disableHighlight - If set to true then highlighting of selected chart elements on mouseover will be disabled -* defaults to false (highlights enabled) -* highlightLighten - Factor to lighten/darken highlighted chart values by - Defaults to 1.4 for a 40% increase -* tooltipContainer - Specify which DOM element the tooltip should be rendered into - defaults to document.body -* tooltipClassname - Optional CSS classname to apply to tooltips - If not specified then a default style will be applied -* tooltipOffsetX - How many pixels away from the mouse pointer to render the tooltip on the X axis -* tooltipOffsetY - How many pixels away from the mouse pointer to render the tooltip on the r axis -* tooltipFormatter - Optional callback that allows you to override the HTML displayed in the tooltip -* callback is given arguments of (sparkline, options, fields) -* tooltipChartTitle - If specified then the tooltip uses the string specified by this setting as a title -* tooltipPrefix - A string to prepend to each field displayed in a tooltip -* tooltipSuffix - A string to append to each field displayed in a tooltip -* tooltipSkipNull - If true then null values will not have a tooltip displayed (defaults to true) -* tooltipValueLookups - An object or range map to map field values to tooltip strings -* (eg. to map -1 to "Lost", 0 to "Draw", and 1 to "Win") -* numberFormatter - Optional callback for formatting numbers in tooltips -* numberDigitGroupSep - Character to use for group separator in numbers "1,234" - Defaults to "," -* numberDecimalMark - Character to use for the decimal point when formatting numbers - Defaults to "." -* numberDigitGroupCount - Number of digits between group separator - Defaults to 3 -* -* There is 1 type of sparkline, selected by supplying a "type" option of 'bar' (default), -* -* bar - Bar chart. Options: -* barColor - Color of bars for postive values -* negBarColor - Color of bars for negative values -* zeroColor - Color of bars with zero values -* nullColor - Color of bars with null values - Defaults to omitting the bar entirely -* barWidth - Width of bars in pixels -* barSpacing - Gap between bars in pixels -* zeroAxis - Centers the y-axis around zero if true -* -* -* -* -* -* -* Examples: -* $('#sparkline1').sparkline(myvalues, { lineColor: '#f00', fillColor: false }); -* $('.barsparks').sparkline('html', { type:'bar', height:'40px', barWidth:5 }); -*/ - -/*jslint regexp: true, browser: true, jquery: true, white: true, nomen: false, plusplus: false, maxerr: 500, indent: 4 */ - -(function(document, Math, undefined) { // performance/minified-size optimization -(function(factory) { - if(typeof define === 'function' && define.amd) { - define(['jquery'], factory); - } else if (jQuery && !jQuery.fn.sparkline) { - factory(jQuery); - } -} -(function($) { - 'use strict'; - - var UNSET_OPTION = {}, - getDefaults, createClass, clipval, quartile, normalizeValue, normalizeValues, - remove, isNumber, all, sum, addCSS, ensureArray, formatNumber, - MouseHandler, Tooltip, barHighlightMixin, - bar, defaultStyles, initStyles, - VShape, VCanvas_base, VCanvas_canvas, pending, shapeCount = 0; - - /** - * Default configuration settings - */ - getDefaults = function () { - return { - // Settings common to most/all chart types - common: { - type: 'bar', - lineColor: '#00f', - fillColor: '#cdf', - defaultPixelsPerValue: 3, - width: 'auto', - height: 'auto', - tagValuesAttribute: 'values', - enableHighlight: true, - highlightLighten: 1.4, - tooltipSkipNull: true, - tooltipPrefix: '', - tooltipSuffix: '', - disableHiddenCheck: false, - numberFormatter: false, - numberDigitGroupCount: 3, - numberDigitGroupSep: ',', - numberDecimalMark: '.', - disableTooltips: false, - disableInteraction: false - }, - // Defaults for bar charts - bar: { - barColor: '#3366cc', - negBarColor: '#f44', - zeroColor: undefined, - nullColor: undefined, - zeroAxis: true, - barWidth: 4, - barSpacing: 1, - chartRangeMax: undefined, - chartRangeMin: undefined, - chartRangeClip: false, - tooltipFormat: '', - }, - }; - }; - - // You can have tooltips use a css class other than jqstooltip by specifying tooltipClassname - defaultStyles = '.jqstooltip { ' + - 'position: absolute;' + - 'left: 0px;' + - 'top: 0px;' + - 'visibility: hidden;' + - 'background: rgb(0, 0, 0) transparent;' + - 'background-color: rgba(0,0,0,0.6);' + - 'filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);' + - '-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";' + - 'color: white;' + - 'font: 10px arial, san serif;' + - 'text-align: left;' + - 'white-space: nowrap;' + - 'padding: 5px;' + - 'border: 1px solid white;' + - 'z-index: 10000;' + - '}' + - '.jqsfield { ' + - 'color: white;' + - 'font: 10px arial, san serif;' + - 'text-align: left;' + - '}'; - - /** - * Utilities - */ - - createClass = function (/* [baseclass, [mixin, ...]], definition */) { - var Class, args; - Class = function () { - this.init.apply(this, arguments); - }; - if (arguments.length > 1) { - if (arguments[0]) { - Class.prototype = $.extend(new arguments[0](), arguments[arguments.length - 1]); - Class._super = arguments[0].prototype; - } else { - Class.prototype = arguments[arguments.length - 1]; - } - if (arguments.length > 2) { - args = Array.prototype.slice.call(arguments, 1, -1); - args.unshift(Class.prototype); - $.extend.apply($, args); - } - } else { - Class.prototype = arguments[0]; - } - Class.prototype.cls = Class; - return Class; - }; - - clipval = function (val, min, max) { - if (val < min) { - return min; - } - if (val > max) { - return max; - } - return val; - }; - - quartile = function (values, q) { - var vl; - if (q === 2) { - vl = Math.floor(values.length / 2); - return values.length % 2 ? values[vl] : (values[vl-1] + values[vl]) / 2; - } else { - if (values.length % 2 ) { // odd - vl = (values.length * q + q) / 4; - return vl % 1 ? (values[Math.floor(vl)] + values[Math.floor(vl) - 1]) / 2 : values[vl-1]; - } else { //even - vl = (values.length * q + 2) / 4; - return vl % 1 ? (values[Math.floor(vl)] + values[Math.floor(vl) - 1]) / 2 : values[vl-1]; - - } - } - }; - - normalizeValue = function (val) { - var nf; - switch (val) { - case 'undefined': - val = undefined; - break; - case 'null': - val = null; - break; - case 'true': - val = true; - break; - case 'false': - val = false; - break; - default: - nf = parseFloat(val); - if (val == nf) { - val = nf; - } - } - return val; - }; - - normalizeValues = function (vals) { - var i, result = []; - for (i = vals.length; i--;) { - result[i] = normalizeValue(vals[i]); - } - return result; - }; - - remove = function (vals, filter) { - var i, vl, result = []; - for (i = 0, vl = vals.length; i < vl; i++) { - if (vals[i] !== filter) { - result.push(vals[i]); - } - } - return result; - }; - - isNumber = function (num) { - return !isNaN(parseFloat(num)) && isFinite(num); - }; - - formatNumber = function (num, prec, groupsize, groupsep, decsep) { - var p, i; - num = (prec === false ? parseFloat(num).toString() : num.toFixed(prec)).split(''); - p = (p = $.inArray('.', num)) < 0 ? num.length : p; - if (p < num.length) { - num[p] = decsep; - } - for (i = p - groupsize; i > 0; i -= groupsize) { - num.splice(i, 0, groupsep); - } - return num.join(''); - }; - - // determine if all values of an array match a value - // returns true if the array is empty - all = function (val, arr, ignoreNull) { - var i; - for (i = arr.length; i--; ) { - if (ignoreNull && arr[i] === null) continue; - if (arr[i] !== val) { - return false; - } - } - return true; - }; - - // sums the numeric values in an array, ignoring other values - sum = function (vals) { - var total = 0, i; - for (i = vals.length; i--;) { - total += typeof vals[i] === 'number' ? vals[i] : 0; - } - return total; - }; - - ensureArray = function (val) { - return $.isArray(val) ? val : [val]; - }; - - // http://paulirish.com/2008/bookmarklet-inject-new-css-rules/ - addCSS = function(css) { - var tag; - //if ('\v' == 'v') /* ie only */ { - if (document.createStyleSheet) { - document.createStyleSheet().cssText = css; - } else { - tag = document.createElement('style'); - tag.type = 'text/css'; - document.getElementsByTagName('head')[0].appendChild(tag); - tag[(typeof document.body.style.WebkitAppearance == 'string') /* webkit only */ ? 'innerText' : 'innerHTML'] = css; - } - }; - - // Provide a cross-browser interface to a few simple drawing primitives - $.fn.simpledraw = function (width, height, useExisting, interact) { - var target, mhandler; - if (useExisting && (target = this.data('_jqs_vcanvas'))) { - return target; - } - - if ($.fn.sparkline.canvas === false) { - // We've already determined that neither Canvas nor VML are available - return false; - - } else if ($.fn.sparkline.canvas === undefined) { - // No function defined yet -- need to see if we support Canvas or VML - var el = document.createElement('canvas'); - if (!!(el.getContext && el.getContext('2d'))) { - // Canvas is available - $.fn.sparkline.canvas = function(width, height, target, interact) { - return new VCanvas_canvas(width, height, target, interact); - }; - } else { - // Neither Canvas nor VML are available - $.fn.sparkline.canvas = false; - return false; - } - } - - if (width === undefined) { - width = $(this).innerWidth(); - } - if (height === undefined) { - height = $(this).innerHeight(); - } - - target = $.fn.sparkline.canvas(width, height, this, interact); - - mhandler = $(this).data('_jqs_mhandler'); - if (mhandler) { - mhandler.registerCanvas(target); - } - return target; - }; - - $.fn.cleardraw = function () { - var target = this.data('_jqs_vcanvas'); - if (target) { - target.reset(); - } - }; - - MouseHandler = createClass({ - init: function (el, options) { - var $el = $(el); - this.$el = $el; - this.options = options; - this.currentPageX = 0; - this.currentPageY = 0; - this.el = el; - this.splist = []; - this.tooltip = null; - this.over = false; - this.displayTooltips = !options.get('disableTooltips'); - this.highlightEnabled = !options.get('disableHighlight'); - }, - - registerSparkline: function (sp) { - this.splist.push(sp); - if (this.over) { - this.updateDisplay(); - } - }, - - registerCanvas: function (canvas) { - var $canvas = $(canvas.canvas); - this.canvas = canvas; - this.$canvas = $canvas; - $canvas.mouseenter($.proxy(this.mouseenter, this)); - $canvas.mouseleave($.proxy(this.mouseleave, this)); - $canvas.click($.proxy(this.mouseclick, this)); - }, - - reset: function (removeTooltip) { - this.splist = []; - if (this.tooltip && removeTooltip) { - this.tooltip.remove(); - this.tooltip = undefined; - } - }, - - mouseclick: function (e) { - var clickEvent = $.Event('sparklineClick'); - clickEvent.originalEvent = e; - clickEvent.sparklines = this.splist; - this.$el.trigger(clickEvent); - }, - - mouseenter: function (e) { - $(document.body).unbind('mousemove.jqs'); - $(document.body).bind('mousemove.jqs', $.proxy(this.mousemove, this)); - this.over = true; - this.currentPageX = e.pageX; - this.currentPageY = e.pageY; - this.currentEl = e.target; - if (!this.tooltip && this.displayTooltips) { - this.tooltip = new Tooltip(this.options); - this.tooltip.updatePosition(e.pageX, e.pageY); - } - this.updateDisplay(); - }, - - mouseleave: function () { - $(document.body).unbind('mousemove.jqs'); - var splist = this.splist, - spcount = splist.length, - needsRefresh = false, - sp, i; - this.over = false; - this.currentEl = null; - - if (this.tooltip) { - this.tooltip.remove(); - this.tooltip = null; - } - - for (i = 0; i < spcount; i++) { - sp = splist[i]; - if (sp.clearRegionHighlight()) { - needsRefresh = true; - } - } - - if (needsRefresh) { - this.canvas.render(); - } - }, - - mousemove: function (e) { - this.currentPageX = e.pageX; - this.currentPageY = e.pageY; - this.currentEl = e.target; - if (this.tooltip) { - this.tooltip.updatePosition(e.pageX, e.pageY); - } - this.updateDisplay(); - }, - - updateDisplay: function () { - var splist = this.splist, - spcount = splist.length, - needsRefresh = false, - offset = this.$canvas.offset(), - localX = this.currentPageX - offset.left, - localY = this.currentPageY - offset.top, - tooltiphtml, sp, i, result, changeEvent; - if (!this.over) { - return; - } - for (i = 0; i < spcount; i++) { - sp = splist[i]; - result = sp.setRegionHighlight(this.currentEl, localX, localY); - if (result) { - needsRefresh = true; - } - } - if (needsRefresh) { - changeEvent = $.Event('sparklineRegionChange'); - changeEvent.sparklines = this.splist; - this.$el.trigger(changeEvent); - if (this.tooltip) { - tooltiphtml = ''; - for (i = 0; i < spcount; i++) { - sp = splist[i]; - tooltiphtml += sp.getCurrentRegionTooltip(); - } - this.tooltip.setContent(tooltiphtml); - } - if (!this.disableHighlight) { - this.canvas.render(); - } - } - if (result === null) { - this.mouseleave(); - } - } - }); - - - Tooltip = createClass({ - sizeStyle: 'position: static !important;' + - 'display: block !important;' + - 'visibility: hidden !important;' + - 'float: left !important;', - - init: function (options) { - var tooltipClassname = options.get('tooltipClassname', 'jqstooltip'), - sizetipStyle = this.sizeStyle, - offset; - this.container = options.get('tooltipContainer') || document.body; - this.tooltipOffsetX = options.get('tooltipOffsetX', 10); - this.tooltipOffsetY = options.get('tooltipOffsetY', 12); - // remove any previous lingering tooltip - $('#jqssizetip').remove(); - $('#jqstooltip').remove(); - this.sizetip = $('', { - id: 'jqssizetip', - style: sizetipStyle, - 'class': tooltipClassname - }); - this.tooltip = $('', { - id: 'jqstooltip', - 'class': tooltipClassname - }).appendTo(this.container); - // account for the container's location - offset = this.tooltip.offset(); - this.offsetLeft = offset.left; - this.offsetTop = offset.top; - this.hidden = true; - $(window).unbind('resize.jqs scroll.jqs'); - $(window).bind('resize.jqs scroll.jqs', $.proxy(this.updateWindowDims, this)); - this.updateWindowDims(); - }, - - updateWindowDims: function () { - this.scrollTop = $(window).scrollTop(); - this.scrollLeft = $(window).scrollLeft(); - this.scrollRight = this.scrollLeft + $(window).width(); - this.updatePosition(); - }, - - getSize: function (content) { - this.sizetip.html(content).appendTo(this.container); - this.width = this.sizetip.width() + 1; - this.height = this.sizetip.height(); - this.sizetip.remove(); - }, - - setContent: function (content) { - if (!content) { - this.tooltip.css('visibility', 'hidden'); - this.hidden = true; - return; - } - this.getSize(content); - this.tooltip.html(content) - .css({ - 'width': this.width, - 'height': this.height, - 'visibility': 'visible' - }); - if (this.hidden) { - this.hidden = false; - this.updatePosition(); - } - }, - - updatePosition: function (x, y) { - if (x === undefined) { - if (this.mousex === undefined) { - return; - } - x = this.mousex - this.offsetLeft; - y = this.mousey - this.offsetTop; - - } else { - this.mousex = x = x - this.offsetLeft; - this.mousey = y = y - this.offsetTop; - } - if (!this.height || !this.width || this.hidden) { - return; - } - - y -= this.height + this.tooltipOffsetY; - x += this.tooltipOffsetX; - - if (y < this.scrollTop) { - y = this.scrollTop; - } - if (x < this.scrollLeft) { - x = this.scrollLeft; - } else if (x + this.width > this.scrollRight) { - x = this.scrollRight - this.width; - } - - this.tooltip.css({ - 'left': x, - 'top': y - }); - }, - - remove: function () { - this.tooltip.remove(); - this.sizetip.remove(); - this.sizetip = this.tooltip = undefined; - $(window).unbind('resize.jqs scroll.jqs'); - } - }); - - initStyles = function() { - addCSS(defaultStyles); - }; - - $(initStyles); - - pending = []; - $.fn.sparkline = function (userValues, userOptions) { - return this.each(function () { - var options = new $.fn.sparkline.options(this, userOptions), - $this = $(this), - render, i; - render = function () { - var values, width, height, tmp, mhandler, sp, vals; - if (userValues === 'html' || userValues === undefined) { - vals = this.getAttribute(options.get('tagValuesAttribute')); - if (vals === undefined || vals === null) { - vals = $this.html(); - } - values = vals.replace(/(^\s*\s*$)|\s+/g, '').split(','); - } else { - values = userValues; - } - - width = options.get('width') === 'auto' ? values.length * options.get('defaultPixelsPerValue') : options.get('width'); - if (options.get('height') === 'auto') { - // must be a better way to get the line height - tmp = document.createElement('span'); - tmp.innerHTML = 'a'; - $this.html(tmp); - height = $(tmp).innerHeight() || $(tmp).height(); - $(tmp).remove(); - tmp = null; - } else { - height = options.get('height'); - } - - if (!options.get('disableInteraction')) { - mhandler = $.data(this, '_jqs_mhandler'); - if (!mhandler) { - mhandler = new MouseHandler(this, options); - $.data(this, '_jqs_mhandler', mhandler); - } else { - mhandler.reset(); - } - } else { - mhandler = false; - } - - sp = new $.fn.sparkline[options.get('type')](this, values, options, width, height); - - sp.render(); - - if (mhandler) { - mhandler.registerSparkline(sp); - } - }; - if (($(this).html() && !options.get('disableHiddenCheck') && $(this).is(':hidden')) || !$(this).parents('body').length) { - if ($.data(this, '_jqs_pending')) { - // remove any existing references to the element - for (i = pending.length; i; i--) { - if (pending[i - 1][0] == this) { - pending.splice(i - 1, 1); - } - } - } - pending.push([this, render]); - $.data(this, '_jqs_pending', true); - } else { - render.call(this); - } - }); - }; - - $.fn.sparkline.defaults = getDefaults(); - - - $.sparkline_display_visible = function () { - var el, i, pl; - var done = []; - for (i = 0, pl = pending.length; i < pl; i++) { - el = pending[i][0]; - if ($(el).is(':visible') && !$(el).parents().is(':hidden')) { - pending[i][1].call(el); - $.data(pending[i][0], '_jqs_pending', false); - done.push(i); - } else if (!$(el).closest('html').length && !$.data(el, '_jqs_pending')) { - // element has been inserted and removed from the DOM - // If it was not yet inserted into the dom then the .data request - // will return true. - // removing from the dom causes the data to be removed. - $.data(pending[i][0], '_jqs_pending', false); - done.push(i); - } - } - for (i = done.length; i; i--) { - pending.splice(done[i - 1], 1); - } - }; - - - /** - * User option handler - */ - $.fn.sparkline.options = createClass({ - init: function (tag, userOptions) { - var extendedOptions, defaults, base; - this.userOptions = userOptions = userOptions || {}; - this.tag = tag; - this.tagValCache = {}; - defaults = $.fn.sparkline.defaults; - base = defaults.common; - - extendedOptions = defaults[userOptions.type || base.type]; - this.mergedOptions = $.extend({}, base, extendedOptions, userOptions); - }, - - - get: function (key, defaultval) { - var result; - return (result = this.mergedOptions[key]) === undefined ? defaultval : result; - } - }); - - - $.fn.sparkline._base = createClass({ - disabled: false, - - init: function (el, values, options, width, height) { - this.el = el; - this.$el = $(el); - this.values = values; - this.options = options; - this.width = width; - this.height = height; - this.currentRegion = undefined; - }, - - /** - * Setup the canvas - */ - initTarget: function () { - var interactive = !this.options.get('disableInteraction'); - if (!(this.target = this.$el.simpledraw(this.width, this.height, false, interactive))) { - this.disabled = true; - } else { - this.canvasWidth = this.target.pixelWidth; - this.canvasHeight = this.target.pixelHeight; - } - }, - - /** - * Actually render the chart to the canvas - */ - render: function () { - if (this.disabled) { - this.el.innerHTML = ''; - return false; - } - return true; - }, - - /** - * Return a region id for a given x/y co-ordinate - */ - getRegion: function (x, y) { - }, - - /** - * Highlight an item based on the moused-over x,y co-ordinate - */ - setRegionHighlight: function (el, x, y) { - var currentRegion = this.currentRegion, - highlightEnabled = !this.options.get('disableHighlight'), - newRegion; - if (x > this.canvasWidth || y > this.canvasHeight || x < 0 || y < 0) { - return null; - } - newRegion = this.getRegion(el, x, y); - if (currentRegion !== newRegion) { - if (currentRegion !== undefined && highlightEnabled) { - this.removeHighlight(); - } - this.currentRegion = newRegion; - if (newRegion !== undefined && highlightEnabled) { - this.renderHighlight(); - } - return true; - } - return false; - }, - - /** - * Reset any currently highlighted item - */ - clearRegionHighlight: function () { - if (this.currentRegion !== undefined) { - this.removeHighlight(); - this.currentRegion = undefined; - return true; - } - return false; - }, - - renderHighlight: function () { - this.changeHighlight(true); - }, - - removeHighlight: function () { - this.changeHighlight(false); - }, - - changeHighlight: function (highlight) {}, - - /** - * Fetch the HTML to display as a tooltip - */ - getCurrentRegionTooltip: function () { - var options = this.options, - header = '', - entries = [], - fields, formats, formatlen, fclass, text, i, - showFields, showFieldsKey, newFields, fv, - formatter, format, fieldlen, j; - if (this.currentRegion === undefined) { - return ''; - } - fields = this.getCurrentRegionFields(); - formatter = options.get('tooltipFormatter'); - if (formatter) { - return formatter(this, options, fields); - } - if (options.get('tooltipChartTitle')) { - header += '