(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(factory); } else if (typeof exports === 'object') { // Node. Does not work with strict CommonJS, but // only CommonJS-like enviroments that support module.exports, // like Node. module.exports = factory(); } else { // Browser globals (root is window) root.Sparkline = factory(); } }(window, function () { function extend(specific, general) { var obj = {}; for (var key in general) { obj[key] = key in specific ? specific[key] : general[key]; } return obj; } function Sparkline(element, options) { this.element = element; this.options = extend(options || {}, Sparkline.options); init: { this.element.innerHTML = ""; this.canvas = this.element.firstChild; this.context = this.canvas.getContext("2d"); this.ratio = window.devicePixelRatio || 1; if (this.options.tooltip) { this.canvas.style.position = "relative"; this.canvas.onmousemove = showTooltip.bind(this); } } } Sparkline.options = { width: 100, height: null, lineColor: "black", lineWidth: 1.5, startColor: "transparent", endColor: "black", maxColor: "transparent", minColor: "transparent", minValue: null, maxValue: null, minMaxValue: null, maxMinValue: null, dotRadius: 2.5, tooltip: null, fillBelow: true, fillLighten: 0.5, startLine: false, endLine: false, minLine: false, maxLine: false, bottomLine: false, topLine: false, averageLine: false }; Sparkline.init = function (element, options) { return new Sparkline(element, options); }; Sparkline.draw = function (element, points, options) { var sparkline = new Sparkline(element, options); sparkline.draw(points); return sparkline; } function getY(minValue, maxValue, offsetY, height, index) { var range = maxValue - minValue; if (range == 0) { return offsetY + height / 2; } else { return (offsetY + height) - ((this[index] - minValue) / range) * height; } } function drawDot(radius, x1, x2, color, line, x, y) { this.context.beginPath(); this.context.fillStyle = color; this.context.arc(x, y, radius, 0, Math.PI * 2, false); this.context.fill(); drawLine.call(this, x1, x2, line, x, y); } function drawLine(x1, x2, style, x, y){ if(!style) return; this.context.save(); this.context.strokeStyle = style.color || 'black'; this.context.lineWidth = (style.width || 1) * this.ratio; this.context.globalAlpha = style.alpha || 1; this.context.beginPath(); this.context.moveTo(style.direction != 'right' ? x1 : x, y); this.context.lineTo(style.direction != 'left' ? x2 : x, y); this.context.stroke(); this.context.restore(); } function showTooltip(e) { var x = e.offsetX || e.layerX || 0; var delta = ((this.options.width - this.options.dotRadius * 2) / (this.points.length - 1)); var index = minmax(0, Math.round((x - this.options.dotRadius) / delta), this.points.length - 1); this.canvas.title = this.options.tooltip(this.points[index], index, this.points); } Sparkline.prototype.draw = function (points) { points = points || []; this.points = points; this.canvas.width = this.options.width * this.ratio; this.canvas.style.width = this.options.width + 'px'; var pxHeight = this.options.height || this.element.offsetHeight; this.canvas.height = pxHeight * this.ratio; this.canvas.style.height = pxHeight + 'px'; var lineWidth = this.options.lineWidth * this.ratio; var offsetX = Math.max(this.options.dotRadius * this.ratio, lineWidth/2); var offsetY = Math.max(this.options.dotRadius * this.ratio, lineWidth/2); var width = this.canvas.width - offsetX * 2; var height = this.canvas.height - offsetY * 2; var minValue = Math.min.apply(Math, points); var maxValue = Math.max.apply(Math, points); var bottomValue = this.options.minValue != undefined ? this.options.minValue : Math.min(minValue, this.options.maxMinValue != undefined ? this.options.maxMinValue : minValue); var topValue = this.options.maxValue != undefined ? this.options.maxValue : Math.max(maxValue, this.options.minMaxValue != undefined ? this.options.minMaxValue : maxValue); var minX = offsetX; var maxX = offsetX; var x = offsetX; var y = getY.bind(points, bottomValue, topValue, offsetY, height); var delta = width / (points.length - 1); var dot = drawDot.bind(this, this.options.dotRadius * this.ratio, offsetX, width + offsetX); var line = drawLine.bind(this, offsetX, width + offsetX); this.context.save(); this.context.strokeStyle = this.options.lineColor; this.context.fillStyle = this.options.lineColor; this.context.lineWidth = lineWidth; this.context.lineCap = 'round'; this.context.lineJoin = 'round'; if(this.options.fillBelow && points.length > 1){ this.context.save(); this.context.beginPath(); this.context.moveTo(x, y(0)); for (var i = 1; i < points.length; i++) { x += delta; minX = points[i] == minValue ? x : minX; maxX = points[i] == maxValue ? x : maxX; this.context.lineTo(x, y(i)); } this.context.lineTo(width+offsetX, height + offsetY + lineWidth/2); this.context.lineTo(offsetX, height + offsetY + lineWidth/2); this.context.fill(); if(this.options.fillLighten > 0){ this.context.fillStyle = 'white'; this.context.globalAlpha = this.options.fillLighten; this.context.fill(); this.context.globalAlpha = 1; }else if(this.options.fillLighten < 0){ this.context.fillStyle = 'black'; this.context.globalAlpha = -this.options.fillLighten; this.context.fill(); } this.context.restore(); } x = offsetX; this.context.beginPath(); this.context.moveTo(x, y(0)); for (var i = 1; i < points.length; i++) { x += delta; this.context.lineTo(x, y(i)); } this.context.stroke(); this.context.restore(); line(this.options.bottomLine, 0, offsetY); line(this.options.topLine, 0, height + offsetY+lineWidth/2); dot(this.options.startColor, this.options.startLine, offsetX + (points.length == 1 ? width / 2 : 0), y(0)); dot(this.options.endColor, this.options.endLine, offsetX + (points.length == 1 ? width / 2 : width), y(points.length-1)); dot(this.options.minColor, this.options.minLine, minX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(minValue))); dot(this.options.maxColor, this.options.maxLine, maxX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(maxValue))); //line(this.options.averageLine, ) } function minmax(a, b, c) { return Math.max(a, Math.min(b, c)); } return Sparkline; }));