on the whole page.\n left += chartContainer.offsetLeft + svgOffset.left - 2*chartContainer.scrollLeft;\n top += chartContainer.offsetTop + svgOffset.top - 2*chartContainer.scrollTop;\n\n if (snapDistance && snapDistance > 0) {\n top = Math.floor(top/snapDistance) * snapDistance;\n }\n calcTooltipPosition([left,top]);\n });\n } else {\n calcTooltipPosition([left,top]);\n }\n });\n\n return nvtooltip;\n }\n\n nvtooltip.nvPointerEventsClass = nvPointerEventsClass;\n nvtooltip.options = nv.utils.optionsFunc.bind(nvtooltip);\n\n nvtooltip._options = Object.create({}, {\n // simple read/write options\n duration: {get: function(){return duration;}, set: function(_){duration=_;}},\n gravity: {get: function(){return gravity;}, set: function(_){gravity=_;}},\n distance: {get: function(){return distance;}, set: function(_){distance=_;}},\n snapDistance: {get: function(){return snapDistance;}, set: function(_){snapDistance=_;}},\n classes: {get: function(){return classes;}, set: function(_){classes=_;}},\n chartContainer: {get: function(){return chartContainer;}, set: function(_){chartContainer=_;}},\n fixedTop: {get: function(){return fixedTop;}, set: function(_){fixedTop=_;}},\n enabled: {get: function(){return enabled;}, set: function(_){enabled=_;}},\n hideDelay: {get: function(){return hideDelay;}, set: function(_){hideDelay=_;}},\n contentGenerator: {get: function(){return contentGenerator;}, set: function(_){contentGenerator=_;}},\n valueFormatter: {get: function(){return valueFormatter;}, set: function(_){valueFormatter=_;}},\n headerFormatter: {get: function(){return headerFormatter;}, set: function(_){headerFormatter=_;}},\n keyFormatter: {get: function(){return keyFormatter;}, set: function(_){keyFormatter=_;}},\n headerEnabled: {get: function(){return headerEnabled;}, set: function(_){headerEnabled=_;}},\n\n // internal use only, set by interactive layer to adjust position.\n _isInteractiveLayer: {get: function(){return isInteractiveLayer;}, set: function(_){isInteractiveLayer=!!_;}},\n\n // options with extra logic\n position: {get: function(){return position;}, set: function(_){\n position.left = _.left !== undefined ? _.left : position.left;\n position.top = _.top !== undefined ? _.top : position.top;\n }},\n offset: {get: function(){return offset;}, set: function(_){\n offset.left = _.left !== undefined ? _.left : offset.left;\n offset.top = _.top !== undefined ? _.top : offset.top;\n }},\n hidden: {get: function(){return hidden;}, set: function(_){\n if (hidden != _) {\n hidden = !!_;\n nvtooltip();\n }\n }},\n data: {get: function(){return data;}, set: function(_){\n // if showing a single data point, adjust data format with that\n if (_.point) {\n _.value = _.point.x;\n _.series = _.series || {};\n _.series.value = _.point.y;\n _.series.color = _.point.color || _.series.color;\n }\n data = _;\n }},\n\n // read only properties\n tooltipElem: {get: function(){return tooltipElem;}, set: function(_){}},\n id: {get: function(){return id;}, set: function(_){}}\n });\n\n nv.utils.initOptions(nvtooltip);\n return nvtooltip;\n };\n\n})();\n\n\n/*\nGets the browser window size\n\nReturns object with height and width properties\n */\nnv.utils.windowSize = function() {\n // Sane defaults\n var size = {width: 640, height: 480};\n\n // Most recent browsers use\n if (window.innerWidth && window.innerHeight) {\n size.width = window.innerWidth;\n size.height = window.innerHeight;\n return (size);\n }\n\n // IE can use depending on mode it is in\n if (document.compatMode=='CSS1Compat' &&\n document.documentElement &&\n document.documentElement.offsetWidth ) {\n\n size.width = document.documentElement.offsetWidth;\n size.height = document.documentElement.offsetHeight;\n return (size);\n }\n\n // Earlier IE uses Doc.body\n if (document.body && document.body.offsetWidth) {\n size.width = document.body.offsetWidth;\n size.height = document.body.offsetHeight;\n return (size);\n }\n\n return (size);\n};\n\n/*\nBinds callback function to run when window is resized\n */\nnv.utils.windowResize = function(handler) {\n if (window.addEventListener) {\n window.addEventListener('resize', handler);\n } else {\n nv.log(\"ERROR: Failed to bind to window.resize with: \", handler);\n }\n // return object with clear function to remove the single added callback.\n return {\n callback: handler,\n clear: function() {\n window.removeEventListener('resize', handler);\n }\n }\n};\n\n\n/*\nBackwards compatible way to implement more d3-like coloring of graphs.\nCan take in nothing, an array, or a function/scale\nTo use a normal scale, get the range and pass that because we must be able\nto take two arguments and use the index to keep backward compatibility\n*/\nnv.utils.getColor = function(color) {\n //if you pass in nothing, get default colors back\n if (color === undefined) {\n return nv.utils.defaultColor();\n\n //if passed an array, turn it into a color scale\n // use isArray, instanceof fails if d3 range is created in an iframe\n } else if(Array.isArray(color)) {\n var color_scale = d3.scale.ordinal().range(color);\n return function(d, i) {\n var key = i === undefined ? d : i;\n return d.color || color_scale(key);\n };\n\n //if passed a function or scale, return it, or whatever it may be\n //external libs, such as angularjs-nvd3-directives use this\n } else {\n //can't really help it if someone passes rubbish as color\n return color;\n }\n};\n\n\n/*\nDefault color chooser uses a color scale of 20 colors from D3\n https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors\n */\nnv.utils.defaultColor = function() {\n // get range of the scale so we'll turn it into our own function.\n return nv.utils.getColor(d3.scale.category20().range());\n};\n\n\n/*\nReturns a color function that takes the result of 'getKey' for each series and\nlooks for a corresponding color from the dictionary\n*/\nnv.utils.customTheme = function(dictionary, getKey, defaultColors) {\n // use default series.key if getKey is undefined\n getKey = getKey || function(series) { return series.key };\n defaultColors = defaultColors || d3.scale.category20().range();\n\n // start at end of default color list and walk back to index 0\n var defIndex = defaultColors.length;\n\n return function(series, index) {\n var key = getKey(series);\n if (typeof dictionary[key] === 'function') {\n return dictionary[key]();\n } else if (dictionary[key] !== undefined) {\n return dictionary[key];\n } else {\n // no match in dictionary, use a default color\n if (!defIndex) {\n // used all the default colors, start over\n defIndex = defaultColors.length;\n }\n defIndex = defIndex - 1;\n return defaultColors[defIndex];\n }\n };\n};\n\n\n/*\nFrom the PJAX example on d3js.org, while this is not really directly needed\nit's a very cool method for doing pjax, I may expand upon it a little bit,\nopen to suggestions on anything that may be useful\n*/\nnv.utils.pjax = function(links, content) {\n\n var load = function(href) {\n d3.html(href, function(fragment) {\n var target = d3.select(content).node();\n target.parentNode.replaceChild(\n d3.select(fragment).select(content).node(),\n target);\n nv.utils.pjax(links, content);\n });\n };\n\n d3.selectAll(links).on(\"click\", function() {\n history.pushState(this.href, this.textContent, this.href);\n load(this.href);\n d3.event.preventDefault();\n });\n\n d3.select(window).on(\"popstate\", function() {\n if (d3.event.state) {\n load(d3.event.state);\n }\n });\n};\n\n\n/*\nFor when we want to approximate the width in pixels for an SVG:text element.\nMost common instance is when the element is in a display:none; container.\nForumla is : text.length * font-size * constant_factor\n*/\nnv.utils.calcApproxTextWidth = function (svgTextElem) {\n if (typeof svgTextElem.style === 'function'\n && typeof svgTextElem.text === 'function') {\n\n var fontSize = parseInt(svgTextElem.style(\"font-size\").replace(\"px\",\"\"), 10);\n var textLength = svgTextElem.text().length;\n return textLength * fontSize * 0.5;\n }\n return 0;\n};\n\n\n/*\nNumbers that are undefined, null or NaN, convert them to zeros.\n*/\nnv.utils.NaNtoZero = function(n) {\n if (typeof n !== 'number'\n || isNaN(n)\n || n === null\n || n === Infinity\n || n === -Infinity) {\n\n return 0;\n }\n return n;\n};\n\n/*\nAdd a way to watch for d3 transition ends to d3\n*/\nd3.selection.prototype.watchTransition = function(renderWatch){\n var args = [this].concat([].slice.call(arguments, 1));\n return renderWatch.transition.apply(renderWatch, args);\n};\n\n\n/*\nHelper object to watch when d3 has rendered something\n*/\nnv.utils.renderWatch = function(dispatch, duration) {\n if (!(this instanceof nv.utils.renderWatch)) {\n return new nv.utils.renderWatch(dispatch, duration);\n }\n\n var _duration = duration !== undefined ? duration : 250;\n var renderStack = [];\n var self = this;\n\n this.models = function(models) {\n models = [].slice.call(arguments, 0);\n models.forEach(function(model){\n model.__rendered = false;\n (function(m){\n m.dispatch.on('renderEnd', function(arg){\n m.__rendered = true;\n self.renderEnd('model');\n });\n })(model);\n\n if (renderStack.indexOf(model) < 0) {\n renderStack.push(model);\n }\n });\n return this;\n };\n\n this.reset = function(duration) {\n if (duration !== undefined) {\n _duration = duration;\n }\n renderStack = [];\n };\n\n this.transition = function(selection, args, duration) {\n args = arguments.length > 1 ? [].slice.call(arguments, 1) : [];\n\n if (args.length > 1) {\n duration = args.pop();\n } else {\n duration = _duration !== undefined ? _duration : 250;\n }\n selection.__rendered = false;\n\n if (renderStack.indexOf(selection) < 0) {\n renderStack.push(selection);\n }\n\n if (duration === 0) {\n selection.__rendered = true;\n selection.delay = function() { return this; };\n selection.duration = function() { return this; };\n return selection;\n } else {\n if (selection.length === 0) {\n selection.__rendered = true;\n } else if (selection.every( function(d){ return !d.length; } )) {\n selection.__rendered = true;\n } else {\n selection.__rendered = false;\n }\n\n var n = 0;\n return selection\n .transition()\n .duration(duration)\n .each(function(){ ++n; })\n .each('end', function(d, i) {\n if (--n === 0) {\n selection.__rendered = true;\n self.renderEnd.apply(this, args);\n }\n });\n }\n };\n\n this.renderEnd = function() {\n if (renderStack.every( function(d){ return d.__rendered; } )) {\n renderStack.forEach( function(d){ d.__rendered = false; });\n dispatch.renderEnd.apply(this, arguments);\n }\n }\n\n};\n\n\n/*\nTakes multiple objects and combines them into the first one (dst)\nexample: nv.utils.deepExtend({a: 1}, {a: 2, b: 3}, {c: 4});\ngives: {a: 2, b: 3, c: 4}\n*/\nnv.utils.deepExtend = function(dst){\n var sources = arguments.length > 1 ? [].slice.call(arguments, 1) : [];\n sources.forEach(function(source) {\n for (var key in source) {\n var isArray = dst[key] instanceof Array;\n var isObject = typeof dst[key] === 'object';\n var srcObj = typeof source[key] === 'object';\n\n if (isObject && !isArray && srcObj) {\n nv.utils.deepExtend(dst[key], source[key]);\n } else {\n dst[key] = source[key];\n }\n }\n });\n};\n\n\n/*\nstate utility object, used to track d3 states in the models\n*/\nnv.utils.state = function(){\n if (!(this instanceof nv.utils.state)) {\n return new nv.utils.state();\n }\n var state = {};\n var _self = this;\n var _setState = function(){};\n var _getState = function(){ return {}; };\n var init = null;\n var changed = null;\n\n this.dispatch = d3.dispatch('change', 'set');\n\n this.dispatch.on('set', function(state){\n _setState(state, true);\n });\n\n this.getter = function(fn){\n _getState = fn;\n return this;\n };\n\n this.setter = function(fn, callback) {\n if (!callback) {\n callback = function(){};\n }\n _setState = function(state, update){\n fn(state);\n if (update) {\n callback();\n }\n };\n return this;\n };\n\n this.init = function(state){\n init = init || {};\n nv.utils.deepExtend(init, state);\n };\n\n var _set = function(){\n var settings = _getState();\n\n if (JSON.stringify(settings) === JSON.stringify(state)) {\n return false;\n }\n\n for (var key in settings) {\n if (state[key] === undefined) {\n state[key] = {};\n }\n state[key] = settings[key];\n changed = true;\n }\n return true;\n };\n\n this.update = function(){\n if (init) {\n _setState(init, false);\n init = null;\n }\n if (_set.call(this)) {\n this.dispatch.change(state);\n }\n };\n\n};\n\n\n/*\nSnippet of code you can insert into each nv.models.* to give you the ability to\ndo things like:\nchart.options({\n showXAxis: true,\n tooltips: true\n});\n\nTo enable in the chart:\nchart.options = nv.utils.optionsFunc.bind(chart);\n*/\nnv.utils.optionsFunc = function(args) {\n if (args) {\n d3.map(args).forEach((function(key,value) {\n if (typeof this[key] === \"function\") {\n this[key](value);\n }\n }).bind(this));\n }\n return this;\n};\n\n\n/*\nnumTicks: requested number of ticks\ndata: the chart data\n\nreturns the number of ticks to actually use on X axis, based on chart data\nto avoid duplicate ticks with the same value\n*/\nnv.utils.calcTicksX = function(numTicks, data) {\n // find max number of values from all data streams\n var numValues = 1;\n var i = 0;\n for (i; i < data.length; i += 1) {\n var stream_len = data[i] && data[i].values ? data[i].values.length : 0;\n numValues = stream_len > numValues ? stream_len : numValues;\n }\n nv.log(\"Requested number of ticks: \", numTicks);\n nv.log(\"Calculated max values to be: \", numValues);\n // make sure we don't have more ticks than values to avoid duplicates\n numTicks = numTicks > numValues ? numTicks = numValues - 1 : numTicks;\n // make sure we have at least one tick\n numTicks = numTicks < 1 ? 1 : numTicks;\n // make sure it's an integer\n numTicks = Math.floor(numTicks);\n nv.log(\"Calculating tick count as: \", numTicks);\n return numTicks;\n};\n\n\n/*\nreturns number of ticks to actually use on Y axis, based on chart data\n*/\nnv.utils.calcTicksY = function(numTicks, data) {\n // currently uses the same logic but we can adjust here if needed later\n return nv.utils.calcTicksX(numTicks, data);\n};\n\n\n/*\nAdd a particular option from an options object onto chart\nOptions exposed on a chart are a getter/setter function that returns chart\non set to mimic typical d3 option chaining, e.g. svg.option1('a').option2('b');\n\noption objects should be generated via Object.create() to provide\nthe option of manipulating data via get/set functions.\n*/\nnv.utils.initOption = function(chart, name) {\n // if it's a call option, just call it directly, otherwise do get/set\n if (chart._calls && chart._calls[name]) {\n chart[name] = chart._calls[name];\n } else {\n chart[name] = function (_) {\n if (!arguments.length) return chart._options[name];\n chart._overrides[name] = true;\n chart._options[name] = _;\n return chart;\n };\n // calling the option as _option will ignore if set by option already\n // so nvd3 can set options internally but the stop if set manually\n chart['_' + name] = function(_) {\n if (!arguments.length) return chart._options[name];\n if (!chart._overrides[name]) {\n chart._options[name] = _;\n }\n return chart;\n }\n }\n};\n\n\n/*\nAdd all options in an options object to the chart\n*/\nnv.utils.initOptions = function(chart) {\n chart._overrides = chart._overrides || {};\n var ops = Object.getOwnPropertyNames(chart._options || {});\n var calls = Object.getOwnPropertyNames(chart._calls || {});\n ops = ops.concat(calls);\n for (var i in ops) {\n nv.utils.initOption(chart, ops[i]);\n }\n};\n\n\n/*\nInherit options from a D3 object\nd3.rebind makes calling the function on target actually call it on source\nAlso use _d3options so we can track what we inherit for documentation and chained inheritance\n*/\nnv.utils.inheritOptionsD3 = function(target, d3_source, oplist) {\n target._d3options = oplist.concat(target._d3options || []);\n oplist.unshift(d3_source);\n oplist.unshift(target);\n d3.rebind.apply(this, oplist);\n};\n\n\n/*\nRemove duplicates from an array\n*/\nnv.utils.arrayUnique = function(a) {\n return a.sort().filter(function(item, pos) {\n return !pos || item != a[pos - 1];\n });\n};\n\n\n/*\nKeeps a list of custom symbols to draw from in addition to d3.svg.symbol\nNecessary since d3 doesn't let you extend its list -_-\nAdd new symbols by doing nv.utils.symbols.set('name', function(size){...});\n*/\nnv.utils.symbolMap = d3.map();\n\n\n/*\nReplaces d3.svg.symbol so that we can look both there and our own map\n */\nnv.utils.symbol = function() {\n var type,\n size = 64;\n function symbol(d,i) {\n var t = type.call(this,d,i);\n var s = size.call(this,d,i);\n if (d3.svg.symbolTypes.indexOf(t) !== -1) {\n return d3.svg.symbol().type(t).size(s)();\n } else {\n return nv.utils.symbolMap.get(t)(s);\n }\n }\n symbol.type = function(_) {\n if (!arguments.length) return type;\n type = d3.functor(_);\n return symbol;\n };\n symbol.size = function(_) {\n if (!arguments.length) return size;\n size = d3.functor(_);\n return symbol;\n };\n return symbol;\n};\n\n\n/*\nInherit option getter/setter functions from source to target\nd3.rebind makes calling the function on target actually call it on source\nAlso track via _inherited and _d3options so we can track what we inherit\nfor documentation generation purposes and chained inheritance\n*/\nnv.utils.inheritOptions = function(target, source) {\n // inherit all the things\n var ops = Object.getOwnPropertyNames(source._options || {});\n var calls = Object.getOwnPropertyNames(source._calls || {});\n var inherited = source._inherited || [];\n var d3ops = source._d3options || [];\n var args = ops.concat(calls).concat(inherited).concat(d3ops);\n args.unshift(source);\n args.unshift(target);\n d3.rebind.apply(this, args);\n // pass along the lists to keep track of them, don't allow duplicates\n target._inherited = nv.utils.arrayUnique(ops.concat(calls).concat(inherited).concat(ops).concat(target._inherited || []));\n target._d3options = nv.utils.arrayUnique(d3ops.concat(target._d3options || []));\n};\n\n\n/*\nRuns common initialize code on the svg before the chart builds\n*/\nnv.utils.initSVG = function(svg) {\n svg.classed({'nvd3-svg':true});\n};\n\n\n/*\nSanitize and provide default for the container height.\n*/\nnv.utils.sanitizeHeight = function(height, container) {\n return (height || parseInt(container.style('height'), 10) || 400);\n};\n\n\n/*\nSanitize and provide default for the container width.\n*/\nnv.utils.sanitizeWidth = function(width, container) {\n return (width || parseInt(container.style('width'), 10) || 960);\n};\n\n\n/*\nCalculate the available height for a chart.\n*/\nnv.utils.availableHeight = function(height, container, margin) {\n return nv.utils.sanitizeHeight(height, container) - margin.top - margin.bottom;\n};\n\n/*\nCalculate the available width for a chart.\n*/\nnv.utils.availableWidth = function(width, container, margin) {\n return nv.utils.sanitizeWidth(width, container) - margin.left - margin.right;\n};\n\n/*\nClear any rendered chart components and display a chart's 'noData' message\n*/\nnv.utils.noData = function(chart, container) {\n var opt = chart.options(),\n margin = opt.margin(),\n noData = opt.noData(),\n data = (noData == null) ? [\"No Data Available.\"] : [noData],\n height = nv.utils.availableHeight(opt.height(), container, margin),\n width = nv.utils.availableWidth(opt.width(), container, margin),\n x = margin.left + width/2,\n y = margin.top + height/2;\n\n //Remove any previously created chart components\n container.selectAll('g').remove();\n\n var noDataText = container.selectAll('.nv-noData').data(data);\n\n noDataText.enter().append('text')\n .attr('class', 'nvd3 nv-noData')\n .attr('dy', '-.7em')\n .style('text-anchor', 'middle');\n\n noDataText\n .attr('x', x)\n .attr('y', y)\n .text(function(t){ return t; });\n};\n\nnv.models.axis = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var axis = d3.svg.axis();\n var scale = d3.scale.linear();\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 75 //only used for tickLabel currently\n , height = 60 //only used for tickLabel currently\n , axisLabelText = null\n , showMaxMin = true //TODO: showMaxMin should be disabled on all ordinal scaled axes\n , rotateLabels = 0\n , rotateYLabel = true\n , staggerLabels = false\n , isOrdinal = false\n , ticks = null\n , axisLabelDistance = 0\n , duration = 250\n , dispatch = d3.dispatch('renderEnd')\n ;\n axis\n .scale(scale)\n .orient('bottom')\n .tickFormat(function(d) { return d })\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var scale0;\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n var container = d3.select(this);\n nv.utils.initSVG(container);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-axis').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-axis');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n if (ticks !== null)\n axis.ticks(ticks);\n else if (axis.orient() == 'top' || axis.orient() == 'bottom')\n axis.ticks(Math.abs(scale.range()[1] - scale.range()[0]) / 100);\n\n //TODO: consider calculating width/height based on whether or not label is added, for reference in charts using this component\n g.watchTransition(renderWatch, 'axis').call(axis);\n\n scale0 = scale0 || axis.scale();\n\n var fmt = axis.tickFormat();\n if (fmt == null) {\n fmt = scale0.tickFormat();\n }\n\n var axisLabel = g.selectAll('text.nv-axislabel')\n .data([axisLabelText || null]);\n axisLabel.exit().remove();\n\n var xLabelMargin;\n var axisMaxMin;\n var w;\n switch (axis.orient()) {\n case 'top':\n axisLabel.enter().append('text').attr('class', 'nv-axislabel');\n if (scale.range().length < 2) {\n w = 0;\n } else if (scale.range().length === 2) {\n w = scale.range()[1];\n } else {\n w = scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]);\n }\n axisLabel\n .attr('text-anchor', 'middle')\n .attr('y', 0)\n .attr('x', w/2);\n if (showMaxMin) {\n axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')\n .data(scale.domain());\n axisMaxMin.enter().append('g').attr('class',function(d,i){\n return ['nv-axisMaxMin','nv-axisMaxMin-x',(i == 0 ? 'nv-axisMin-x':'nv-axisMax-x')].join(' ')\n }).append('text');\n axisMaxMin.exit().remove();\n axisMaxMin\n .attr('transform', function(d,i) {\n return 'translate(' + nv.utils.NaNtoZero(scale(d)) + ',0)'\n })\n .select('text')\n .attr('dy', '-0.5em')\n .attr('y', -axis.tickPadding())\n .attr('text-anchor', 'middle')\n .text(function(d,i) {\n var v = fmt(d);\n return ('' + v).match('NaN') ? '' : v;\n });\n axisMaxMin.watchTransition(renderWatch, 'min-max top')\n .attr('transform', function(d,i) {\n return 'translate(' + nv.utils.NaNtoZero(scale.range()[i]) + ',0)'\n });\n }\n break;\n case 'bottom':\n xLabelMargin = axisLabelDistance + 36;\n var maxTextWidth = 30;\n var textHeight = 0;\n var xTicks = g.selectAll('g').select(\"text\");\n var rotateLabelsRule = '';\n if (rotateLabels%360) {\n //Calculate the longest xTick width\n xTicks.each(function(d,i){\n var box = this.getBoundingClientRect();\n var width = box.width;\n textHeight = box.height;\n if(width > maxTextWidth) maxTextWidth = width;\n });\n rotateLabelsRule = 'rotate(' + rotateLabels + ' 0,' + (textHeight/2 + axis.tickPadding()) + ')';\n //Convert to radians before calculating sin. Add 30 to margin for healthy padding.\n var sin = Math.abs(Math.sin(rotateLabels*Math.PI/180));\n xLabelMargin = (sin ? sin*maxTextWidth : maxTextWidth)+30;\n //Rotate all xTicks\n xTicks\n .attr('transform', rotateLabelsRule)\n .style('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end');\n }\n axisLabel.enter().append('text').attr('class', 'nv-axislabel');\n if (scale.range().length < 2) {\n w = 0;\n } else if (scale.range().length === 2) {\n w = scale.range()[1];\n } else {\n w = scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]);\n }\n axisLabel\n .attr('text-anchor', 'middle')\n .attr('y', xLabelMargin)\n .attr('x', w/2);\n if (showMaxMin) {\n //if (showMaxMin && !isOrdinal) {\n axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')\n //.data(scale.domain())\n .data([scale.domain()[0], scale.domain()[scale.domain().length - 1]]);\n axisMaxMin.enter().append('g').attr('class',function(d,i){\n return ['nv-axisMaxMin','nv-axisMaxMin-x',(i == 0 ? 'nv-axisMin-x':'nv-axisMax-x')].join(' ')\n }).append('text');\n axisMaxMin.exit().remove();\n axisMaxMin\n .attr('transform', function(d,i) {\n return 'translate(' + nv.utils.NaNtoZero((scale(d) + (isOrdinal ? scale.rangeBand() / 2 : 0))) + ',0)'\n })\n .select('text')\n .attr('dy', '.71em')\n .attr('y', axis.tickPadding())\n .attr('transform', rotateLabelsRule)\n .style('text-anchor', rotateLabels ? (rotateLabels%360 > 0 ? 'start' : 'end') : 'middle')\n .text(function(d,i) {\n var v = fmt(d);\n return ('' + v).match('NaN') ? '' : v;\n });\n axisMaxMin.watchTransition(renderWatch, 'min-max bottom')\n .attr('transform', function(d,i) {\n return 'translate(' + nv.utils.NaNtoZero((scale(d) + (isOrdinal ? scale.rangeBand() / 2 : 0))) + ',0)'\n });\n }\n if (staggerLabels)\n xTicks\n .attr('transform', function(d,i) {\n return 'translate(0,' + (i % 2 == 0 ? '0' : '12') + ')'\n });\n\n break;\n case 'right':\n axisLabel.enter().append('text').attr('class', 'nv-axislabel');\n axisLabel\n .style('text-anchor', rotateYLabel ? 'middle' : 'begin')\n .attr('transform', rotateYLabel ? 'rotate(90)' : '')\n .attr('y', rotateYLabel ? (-Math.max(margin.right, width) + 12) : -10) //TODO: consider calculating this based on largest tick width... OR at least expose this on chart\n .attr('x', rotateYLabel ? (d3.max(scale.range()) / 2) : axis.tickPadding());\n if (showMaxMin) {\n axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')\n .data(scale.domain());\n \taxisMaxMin.enter().append('g').attr('class',function(d,i){\n return ['nv-axisMaxMin','nv-axisMaxMin-y',(i == 0 ? 'nv-axisMin-y':'nv-axisMax-y')].join(' ')\n }).append('text')\n .style('opacity', 0);\n axisMaxMin.exit().remove();\n axisMaxMin\n .attr('transform', function(d,i) {\n return 'translate(0,' + nv.utils.NaNtoZero(scale(d)) + ')'\n })\n .select('text')\n .attr('dy', '.32em')\n .attr('y', 0)\n .attr('x', axis.tickPadding())\n .style('text-anchor', 'start')\n .text(function(d, i) {\n var v = fmt(d);\n return ('' + v).match('NaN') ? '' : v;\n });\n axisMaxMin.watchTransition(renderWatch, 'min-max right')\n .attr('transform', function(d,i) {\n return 'translate(0,' + nv.utils.NaNtoZero(scale.range()[i]) + ')'\n })\n .select('text')\n .style('opacity', 1);\n }\n break;\n case 'left':\n /*\n //For dynamically placing the label. Can be used with dynamically-sized chart axis margins\n var yTicks = g.selectAll('g').select(\"text\");\n yTicks.each(function(d,i){\n var labelPadding = this.getBoundingClientRect().width + axis.tickPadding() + 16;\n if(labelPadding > width) width = labelPadding;\n });\n */\n axisLabel.enter().append('text').attr('class', 'nv-axislabel');\n axisLabel\n .style('text-anchor', rotateYLabel ? 'middle' : 'end')\n .attr('transform', rotateYLabel ? 'rotate(-90)' : '')\n .attr('y', rotateYLabel ? (-Math.max(margin.left, width) + 25 - (axisLabelDistance || 0)) : -10)\n .attr('x', rotateYLabel ? (-d3.max(scale.range()) / 2) : -axis.tickPadding());\n if (showMaxMin) {\n axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')\n .data(scale.domain());\n axisMaxMin.enter().append('g').attr('class',function(d,i){\n return ['nv-axisMaxMin','nv-axisMaxMin-y',(i == 0 ? 'nv-axisMin-y':'nv-axisMax-y')].join(' ')\n }).append('text')\n .style('opacity', 0);\n axisMaxMin.exit().remove();\n axisMaxMin\n .attr('transform', function(d,i) {\n return 'translate(0,' + nv.utils.NaNtoZero(scale0(d)) + ')'\n })\n .select('text')\n .attr('dy', '.32em')\n .attr('y', 0)\n .attr('x', -axis.tickPadding())\n .attr('text-anchor', 'end')\n .text(function(d,i) {\n var v = fmt(d);\n return ('' + v).match('NaN') ? '' : v;\n });\n axisMaxMin.watchTransition(renderWatch, 'min-max right')\n .attr('transform', function(d,i) {\n return 'translate(0,' + nv.utils.NaNtoZero(scale.range()[i]) + ')'\n })\n .select('text')\n .style('opacity', 1);\n }\n break;\n }\n axisLabel.text(function(d) { return d });\n\n if (showMaxMin && (axis.orient() === 'left' || axis.orient() === 'right')) {\n //check if max and min overlap other values, if so, hide the values that overlap\n g.selectAll('g') // the g's wrapping each tick\n .each(function(d,i) {\n d3.select(this).select('text').attr('opacity', 1);\n if (scale(d) < scale.range()[1] + 10 || scale(d) > scale.range()[0] - 10) { // 10 is assuming text height is 16... if d is 0, leave it!\n if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL\n d3.select(this).attr('opacity', 0);\n\n d3.select(this).select('text').attr('opacity', 0); // Don't remove the ZERO line!!\n }\n });\n\n //if Max and Min = 0 only show min, Issue #281\n if (scale.domain()[0] == scale.domain()[1] && scale.domain()[0] == 0) {\n wrap.selectAll('g.nv-axisMaxMin').style('opacity', function (d, i) {\n return !i ? 1 : 0\n });\n }\n }\n\n if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {\n var maxMinRange = [];\n wrap.selectAll('g.nv-axisMaxMin')\n .each(function(d,i) {\n try {\n if (i) // i== 1, max position\n maxMinRange.push(scale(d) - this.getBoundingClientRect().width - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)\n else // i==0, min position\n maxMinRange.push(scale(d) + this.getBoundingClientRect().width + 4)\n }catch (err) {\n if (i) // i== 1, max position\n maxMinRange.push(scale(d) - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)\n else // i==0, min position\n maxMinRange.push(scale(d) + 4);\n }\n });\n // the g's wrapping each tick\n g.selectAll('g').each(function(d, i) {\n if (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]) {\n if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL\n d3.select(this).remove();\n else\n d3.select(this).select('text').remove(); // Don't remove the ZERO line!!\n }\n });\n }\n\n //Highlight zero tick line\n g.selectAll('.tick')\n .filter(function (d) {\n /*\n The filter needs to return only ticks at or near zero.\n Numbers like 0.00001 need to count as zero as well,\n and the arithmetic trick below solves that.\n */\n return !parseFloat(Math.round(d * 100000) / 1000000) && (d !== undefined)\n }) \n .classed('zero', true);\n \n //store old scales for use in transitions on update\n scale0 = scale.copy();\n\n });\n\n renderWatch.renderEnd('axis immediate');\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.axis = axis;\n chart.dispatch = dispatch;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n axisLabelDistance: {get: function(){return axisLabelDistance;}, set: function(_){axisLabelDistance=_;}},\n staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},\n rotateLabels: {get: function(){return rotateLabels;}, set: function(_){rotateLabels=_;}},\n rotateYLabel: {get: function(){return rotateYLabel;}, set: function(_){rotateYLabel=_;}},\n showMaxMin: {get: function(){return showMaxMin;}, set: function(_){showMaxMin=_;}},\n axisLabel: {get: function(){return axisLabelText;}, set: function(_){axisLabelText=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n ticks: {get: function(){return ticks;}, set: function(_){ticks=_;}},\n width: {get: function(){return width;}, set: function(_){width=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration=_;\n renderWatch.reset(duration);\n }},\n scale: {get: function(){return scale;}, set: function(_){\n scale = _;\n axis.scale(scale);\n isOrdinal = typeof scale.rangeBands === 'function';\n nv.utils.inheritOptionsD3(chart, scale, ['domain', 'range', 'rangeBand', 'rangeBands']);\n }}\n });\n\n nv.utils.initOptions(chart);\n nv.utils.inheritOptionsD3(chart, axis, ['orient', 'tickValues', 'tickSubdivide', 'tickSize', 'tickPadding', 'tickFormat']);\n nv.utils.inheritOptionsD3(chart, scale, ['domain', 'range', 'rangeBand', 'rangeBands']);\n\n return chart;\n};\nnv.models.boxPlot = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 960\n , height = 500\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , x = d3.scale.ordinal()\n , y = d3.scale.linear()\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , color = nv.utils.defaultColor()\n , container = null\n , xDomain\n , yDomain\n , xRange\n , yRange\n , dispatch = d3.dispatch('elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')\n , duration = 250\n , maxBoxWidth = null\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var x0, y0;\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right,\n availableHeight = height - margin.top - margin.bottom;\n\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n // Setup Scales\n x .domain(xDomain || data.map(function(d,i) { return getX(d,i); }))\n .rangeBands(xRange || [0, availableWidth], .1);\n\n // if we know yDomain, no need to calculate\n var yData = []\n if (!yDomain) {\n // (y-range is based on quartiles, whiskers and outliers)\n\n // lower values\n var yMin = d3.min(data.map(function(d) {\n var min_arr = [];\n\n min_arr.push(d.values.Q1);\n if (d.values.hasOwnProperty('whisker_low') && d.values.whisker_low !== null) { min_arr.push(d.values.whisker_low); }\n if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { min_arr = min_arr.concat(d.values.outliers); }\n\n return d3.min(min_arr);\n }));\n\n // upper values\n var yMax = d3.max(data.map(function(d) {\n var max_arr = [];\n\n max_arr.push(d.values.Q3);\n if (d.values.hasOwnProperty('whisker_high') && d.values.whisker_high !== null) { max_arr.push(d.values.whisker_high); }\n if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { max_arr = max_arr.concat(d.values.outliers); }\n\n return d3.max(max_arr);\n }));\n\n yData = [ yMin, yMax ] ;\n }\n\n y.domain(yDomain || yData);\n y.range(yRange || [availableHeight, 0]);\n\n //store old scales if they exist\n x0 = x0 || x;\n y0 = y0 || y.copy().range([y(0),y(0)]);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap');\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n var boxplots = wrap.selectAll('.nv-boxplot').data(function(d) { return d });\n var boxEnter = boxplots.enter().append('g').style('stroke-opacity', 1e-6).style('fill-opacity', 1e-6);\n boxplots\n .attr('class', 'nv-boxplot')\n .attr('transform', function(d,i,j) { return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05) + ', 0)'; })\n .classed('hover', function(d) { return d.hover });\n boxplots\n .watchTransition(renderWatch, 'nv-boxplot: boxplots')\n .style('stroke-opacity', 1)\n .style('fill-opacity', .75)\n .delay(function(d,i) { return i * duration / data.length })\n .attr('transform', function(d,i) {\n return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05) + ', 0)';\n });\n boxplots.exit().remove();\n\n // ----- add the SVG elements for each boxPlot -----\n\n // conditionally append whisker lines\n boxEnter.each(function(d,i) {\n var box = d3.select(this);\n\n ['low', 'high'].forEach(function(key) {\n if (d.values.hasOwnProperty('whisker_' + key) && d.values['whisker_' + key] !== null) {\n box.append('line')\n .style('stroke', (d.color) ? d.color : color(d,i))\n .attr('class', 'nv-boxplot-whisker nv-boxplot-' + key);\n\n box.append('line')\n .style('stroke', (d.color) ? d.color : color(d,i))\n .attr('class', 'nv-boxplot-tick nv-boxplot-' + key);\n }\n });\n });\n\n // outliers\n // TODO: support custom colors here\n var outliers = boxplots.selectAll('.nv-boxplot-outlier').data(function(d) {\n if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { return d.values.outliers; }\n else { return []; }\n });\n outliers.enter().append('circle')\n .style('fill', function(d,i,j) { return color(d,j) }).style('stroke', function(d,i,j) { return color(d,j) })\n .on('mouseover', function(d,i,j) {\n d3.select(this).classed('hover', true);\n dispatch.elementMouseover({\n series: { key: d, color: color(d,j) },\n e: d3.event\n });\n })\n .on('mouseout', function(d,i,j) {\n d3.select(this).classed('hover', false);\n dispatch.elementMouseout({\n series: { key: d, color: color(d,j) },\n e: d3.event\n });\n })\n .on('mousemove', function(d,i) {\n dispatch.elementMousemove({e: d3.event});\n });\n\n outliers.attr('class', 'nv-boxplot-outlier');\n outliers\n .watchTransition(renderWatch, 'nv-boxplot: nv-boxplot-outlier')\n .attr('cx', x.rangeBand() * .45)\n .attr('cy', function(d,i,j) { return y(d); })\n .attr('r', '3');\n outliers.exit().remove();\n\n var box_width = function() { return (maxBoxWidth === null ? x.rangeBand() * .9 : Math.min(75, x.rangeBand() * .9)); };\n var box_left = function() { return x.rangeBand() * .45 - box_width()/2; };\n var box_right = function() { return x.rangeBand() * .45 + box_width()/2; };\n\n // update whisker lines and ticks\n ['low', 'high'].forEach(function(key) {\n var endpoint = (key === 'low') ? 'Q1' : 'Q3';\n\n boxplots.select('line.nv-boxplot-whisker.nv-boxplot-' + key)\n .watchTransition(renderWatch, 'nv-boxplot: boxplots')\n .attr('x1', x.rangeBand() * .45 )\n .attr('y1', function(d,i) { return y(d.values['whisker_' + key]); })\n .attr('x2', x.rangeBand() * .45 )\n .attr('y2', function(d,i) { return y(d.values[endpoint]); });\n\n boxplots.select('line.nv-boxplot-tick.nv-boxplot-' + key)\n .watchTransition(renderWatch, 'nv-boxplot: boxplots')\n .attr('x1', box_left )\n .attr('y1', function(d,i) { return y(d.values['whisker_' + key]); })\n .attr('x2', box_right )\n .attr('y2', function(d,i) { return y(d.values['whisker_' + key]); });\n });\n\n ['low', 'high'].forEach(function(key) {\n boxEnter.selectAll('.nv-boxplot-' + key)\n .on('mouseover', function(d,i,j) {\n d3.select(this).classed('hover', true);\n dispatch.elementMouseover({\n series: { key: d.values['whisker_' + key], color: color(d,j) },\n e: d3.event\n });\n })\n .on('mouseout', function(d,i,j) {\n d3.select(this).classed('hover', false);\n dispatch.elementMouseout({\n series: { key: d.values['whisker_' + key], color: color(d,j) },\n e: d3.event\n });\n })\n .on('mousemove', function(d,i) {\n dispatch.elementMousemove({e: d3.event});\n });\n });\n\n // boxes\n boxEnter.append('rect')\n .attr('class', 'nv-boxplot-box')\n // tooltip events\n .on('mouseover', function(d,i) {\n d3.select(this).classed('hover', true);\n dispatch.elementMouseover({\n key: d.label,\n value: d.label,\n series: [\n { key: 'Q3', value: d.values.Q3, color: d.color || color(d,i) },\n { key: 'Q2', value: d.values.Q2, color: d.color || color(d,i) },\n { key: 'Q1', value: d.values.Q1, color: d.color || color(d,i) }\n ],\n data: d,\n index: i,\n e: d3.event\n });\n })\n .on('mouseout', function(d,i) {\n d3.select(this).classed('hover', false);\n dispatch.elementMouseout({\n key: d.label,\n value: d.label,\n series: [\n { key: 'Q3', value: d.values.Q3, color: d.color || color(d,i) },\n { key: 'Q2', value: d.values.Q2, color: d.color || color(d,i) },\n { key: 'Q1', value: d.values.Q1, color: d.color || color(d,i) }\n ],\n data: d,\n index: i,\n e: d3.event\n });\n })\n .on('mousemove', function(d,i) {\n dispatch.elementMousemove({e: d3.event});\n });\n\n // box transitions\n boxplots.select('rect.nv-boxplot-box')\n .watchTransition(renderWatch, 'nv-boxplot: boxes')\n .attr('y', function(d,i) { return y(d.values.Q3); })\n .attr('width', box_width)\n .attr('x', box_left )\n\n .attr('height', function(d,i) { return Math.abs(y(d.values.Q3) - y(d.values.Q1)) || 1 })\n .style('fill', function(d,i) { return d.color || color(d,i) })\n .style('stroke', function(d,i) { return d.color || color(d,i) });\n\n // median line\n boxEnter.append('line').attr('class', 'nv-boxplot-median');\n\n boxplots.select('line.nv-boxplot-median')\n .watchTransition(renderWatch, 'nv-boxplot: boxplots line')\n .attr('x1', box_left)\n .attr('y1', function(d,i) { return y(d.values.Q2); })\n .attr('x2', box_right)\n .attr('y2', function(d,i) { return y(d.values.Q2); });\n\n //store old scales for use in transitions on update\n x0 = x.copy();\n y0 = y.copy();\n });\n\n renderWatch.renderEnd('nv-boxplot immediate');\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n maxBoxWidth: {get: function(){return maxBoxWidth;}, set: function(_){maxBoxWidth=_;}},\n x: {get: function(){return getX;}, set: function(_){getX=_;}},\n y: {get: function(){return getY;}, set: function(_){getY=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n // rectClass: {get: function(){return rectClass;}, set: function(_){rectClass=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n }}\n });\n\n nv.utils.initOptions(chart);\n\n return chart;\n};\nnv.models.boxPlotChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var boxplot = nv.models.boxPlot()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n ;\n\n var margin = {top: 15, right: 10, bottom: 50, left: 60}\n , width = null\n , height = null\n , color = nv.utils.getColor()\n , showXAxis = true\n , showYAxis = true\n , rightAlignYAxis = false\n , staggerLabels = false\n , tooltip = nv.models.tooltip()\n , x\n , y\n , noData = \"No Data Available.\"\n , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'beforeUpdate', 'renderEnd')\n , duration = 250\n ;\n\n xAxis\n .orient('bottom')\n .showMaxMin(false)\n .tickFormat(function(d) { return d })\n ;\n yAxis\n .orient((rightAlignYAxis) ? 'right' : 'left')\n .tickFormat(d3.format(',.1f'))\n ;\n \n tooltip.duration(0);\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(boxplot);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n var availableWidth = (width || parseInt(container.style('width')) || 960)\n - margin.left - margin.right,\n availableHeight = (height || parseInt(container.style('height')) || 400)\n - margin.top - margin.bottom;\n\n chart.update = function() {\n dispatch.beforeUpdate();\n container.transition().duration(duration).call(chart);\n };\n chart.container = this;\n\n // Display No Data message if there's nothing to show. (quartiles required at minimum)\n if (!data || !data.length || \n !data.filter(function(d) { return d.values.hasOwnProperty(\"Q1\") && d.values.hasOwnProperty(\"Q2\") && d.values.hasOwnProperty(\"Q3\"); }).length) {\n var noDataText = container.selectAll('.nv-noData').data([noData]);\n\n noDataText.enter().append('text')\n .attr('class', 'nvd3 nv-noData')\n .attr('dy', '-.7em')\n .style('text-anchor', 'middle');\n\n noDataText\n .attr('x', margin.left + availableWidth / 2)\n .attr('y', margin.top + availableHeight / 2)\n .text(function(d) { return d });\n\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = boxplot.xScale();\n y = boxplot.yScale().clamp(true);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-boxPlotWithAxes').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-boxPlotWithAxes').append('g');\n var defsEnter = gEnter.append('defs');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y nv-axis')\n .append('g').attr('class', 'nv-zeroLine')\n .append('line');\n\n gEnter.append('g').attr('class', 'nv-barsWrap');\n\n g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n if (rightAlignYAxis) {\n g.select(\".nv-y.nv-axis\")\n .attr(\"transform\", \"translate(\" + availableWidth + \",0)\");\n }\n\n // Main Chart Component(s)\n boxplot\n .width(availableWidth)\n .height(availableHeight);\n\n var barsWrap = g.select('.nv-barsWrap')\n .datum(data.filter(function(d) { return !d.disabled }))\n\n barsWrap.transition().call(boxplot);\n\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-x-label-clip-' + boxplot.id())\n .append('rect');\n\n g.select('#nv-x-label-clip-' + boxplot.id() + ' rect')\n .attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))\n .attr('height', 16)\n .attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));\n\n // Setup Axes\n if (showXAxis) {\n xAxis\n .scale(x)\n .ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight, 0);\n\n g.select('.nv-x.nv-axis').attr('transform', 'translate(0,' + y.range()[0] + ')');\n g.select('.nv-x.nv-axis').call(xAxis);\n\n var xTicks = g.select('.nv-x.nv-axis').selectAll('g');\n if (staggerLabels) {\n xTicks\n .selectAll('text')\n .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')' })\n }\n }\n\n if (showYAxis) {\n yAxis\n .scale(y)\n .ticks( Math.floor(availableHeight/36) ) // can't use nv.utils.calcTicksY with Object data\n .tickSize( -availableWidth, 0);\n\n g.select('.nv-y.nv-axis').call(yAxis);\n }\n\n // Zero line\n g.select(\".nv-zeroLine line\")\n .attr(\"x1\",0)\n .attr(\"x2\",availableWidth)\n .attr(\"y1\", y(0))\n .attr(\"y2\", y(0))\n ;\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n });\n\n renderWatch.renderEnd('nv-boxplot chart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n boxplot.dispatch.on('elementMouseover.tooltip', function(evt) {\n tooltip.data(evt).hidden(false);\n });\n\n boxplot.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.data(evt).hidden(true);\n });\n\n boxplot.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.boxplot = boxplot;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n tooltips: {get: function(){return tooltips;}, set: function(_){tooltips=_;}},\n tooltipContent: {get: function(){return tooltip;}, set: function(_){tooltip=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n boxplot.duration(duration);\n xAxis.duration(duration);\n yAxis.duration(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n boxplot.color(color);\n }},\n rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){\n rightAlignYAxis = _;\n yAxis.orient( (_) ? 'right' : 'left');\n }}\n });\n\n nv.utils.inheritOptions(chart, boxplot);\n nv.utils.initOptions(chart);\n\n return chart;\n}\n// Chart design based on the recommendations of Stephen Few. Implementation\n// based on the work of Clint Ivy, Jamie Love, and Jason Davies.\n// http://projects.instantcognition.com/protovis/bulletchart/\n\nnv.models.bullet = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , orient = 'left' // TODO top & bottom\n , reverse = false\n , ranges = function(d) { return d.ranges }\n , markers = function(d) { return d.markers ? d.markers : [0] }\n , measures = function(d) { return d.measures }\n , rangeLabels = function(d) { return d.rangeLabels ? d.rangeLabels : [] }\n , markerLabels = function(d) { return d.markerLabels ? d.markerLabels : [] }\n , measureLabels = function(d) { return d.measureLabels ? d.measureLabels : [] }\n , forceX = [0] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)\n , width = 380\n , height = 30\n , container = null\n , tickFormat = null\n , color = nv.utils.getColor(['#1f77b4'])\n , dispatch = d3.dispatch('elementMouseover', 'elementMouseout', 'elementMousemove')\n ;\n\n function chart(selection) {\n selection.each(function(d, i) {\n var availableWidth = width - margin.left - margin.right,\n availableHeight = height - margin.top - margin.bottom;\n\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n var rangez = ranges.call(this, d, i).slice().sort(d3.descending),\n markerz = markers.call(this, d, i).slice().sort(d3.descending),\n measurez = measures.call(this, d, i).slice().sort(d3.descending),\n rangeLabelz = rangeLabels.call(this, d, i).slice(),\n markerLabelz = markerLabels.call(this, d, i).slice(),\n measureLabelz = measureLabels.call(this, d, i).slice();\n\n // Setup Scales\n // Compute the new x-scale.\n var x1 = d3.scale.linear()\n .domain( d3.extent(d3.merge([forceX, rangez])) )\n .range(reverse ? [availableWidth, 0] : [0, availableWidth]);\n\n // Retrieve the old x-scale, if this is an update.\n var x0 = this.__chart__ || d3.scale.linear()\n .domain([0, Infinity])\n .range(x1.range());\n\n // Stash the new scale.\n this.__chart__ = x1;\n\n var rangeMin = d3.min(rangez), //rangez[2]\n rangeMax = d3.max(rangez), //rangez[0]\n rangeAvg = rangez[1];\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-bullet').data([d]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bullet');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('rect').attr('class', 'nv-range nv-rangeMax');\n gEnter.append('rect').attr('class', 'nv-range nv-rangeAvg');\n gEnter.append('rect').attr('class', 'nv-range nv-rangeMin');\n gEnter.append('rect').attr('class', 'nv-measure');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)\n w1 = function(d) { return Math.abs(x1(d) - x1(0)) };\n var xp0 = function(d) { return d < 0 ? x0(d) : x0(0) },\n xp1 = function(d) { return d < 0 ? x1(d) : x1(0) };\n\n g.select('rect.nv-rangeMax')\n .attr('height', availableHeight)\n .attr('width', w1(rangeMax > 0 ? rangeMax : rangeMin))\n .attr('x', xp1(rangeMax > 0 ? rangeMax : rangeMin))\n .datum(rangeMax > 0 ? rangeMax : rangeMin)\n\n g.select('rect.nv-rangeAvg')\n .attr('height', availableHeight)\n .attr('width', w1(rangeAvg))\n .attr('x', xp1(rangeAvg))\n .datum(rangeAvg)\n\n g.select('rect.nv-rangeMin')\n .attr('height', availableHeight)\n .attr('width', w1(rangeMax))\n .attr('x', xp1(rangeMax))\n .attr('width', w1(rangeMax > 0 ? rangeMin : rangeMax))\n .attr('x', xp1(rangeMax > 0 ? rangeMin : rangeMax))\n .datum(rangeMax > 0 ? rangeMin : rangeMax)\n\n g.select('rect.nv-measure')\n .style('fill', color)\n .attr('height', availableHeight / 3)\n .attr('y', availableHeight / 3)\n .attr('width', measurez < 0 ?\n x1(0) - x1(measurez[0])\n : x1(measurez[0]) - x1(0))\n .attr('x', xp1(measurez))\n .on('mouseover', function() {\n dispatch.elementMouseover({\n value: measurez[0],\n label: measureLabelz[0] || 'Current',\n color: d3.select(this).style(\"fill\")\n })\n })\n .on('mousemove', function() {\n dispatch.elementMousemove({\n value: measurez[0],\n label: measureLabelz[0] || 'Current',\n color: d3.select(this).style(\"fill\")\n })\n })\n .on('mouseout', function() {\n dispatch.elementMouseout({\n value: measurez[0],\n label: measureLabelz[0] || 'Current',\n color: d3.select(this).style(\"fill\")\n })\n });\n\n var h3 = availableHeight / 6;\n\n var markerData = markerz.map( function(marker, index) {\n return {value: marker, label: markerLabelz[index]}\n });\n gEnter\n .selectAll(\"path.nv-markerTriangle\")\n .data(markerData)\n .enter()\n .append('path')\n .attr('class', 'nv-markerTriangle')\n .attr('transform', function(d) { return 'translate(' + x1(d.value) + ',' + (availableHeight / 2) + ')' })\n .attr('d', 'M0,' + h3 + 'L' + h3 + ',' + (-h3) + ' ' + (-h3) + ',' + (-h3) + 'Z')\n .on('mouseover', function(d) {\n dispatch.elementMouseover({\n value: d.value,\n label: d.label || 'Previous',\n color: d3.select(this).style(\"fill\"),\n pos: [x1(d.value), availableHeight/2]\n })\n\n })\n .on('mousemove', function(d) {\n dispatch.elementMousemove({\n value: d.value,\n label: d.label || 'Previous',\n color: d3.select(this).style(\"fill\")\n })\n })\n .on('mouseout', function(d, i) {\n dispatch.elementMouseout({\n value: d.value,\n label: d.label || 'Previous',\n color: d3.select(this).style(\"fill\")\n })\n });\n\n wrap.selectAll('.nv-range')\n .on('mouseover', function(d,i) {\n var label = rangeLabelz[i] || (!i ? \"Maximum\" : i == 1 ? \"Mean\" : \"Minimum\");\n dispatch.elementMouseover({\n value: d,\n label: label,\n color: d3.select(this).style(\"fill\")\n })\n })\n .on('mousemove', function() {\n dispatch.elementMousemove({\n value: measurez[0],\n label: measureLabelz[0] || 'Previous',\n color: d3.select(this).style(\"fill\")\n })\n })\n .on('mouseout', function(d,i) {\n var label = rangeLabelz[i] || (!i ? \"Maximum\" : i == 1 ? \"Mean\" : \"Minimum\");\n dispatch.elementMouseout({\n value: d,\n label: label,\n color: d3.select(this).style(\"fill\")\n })\n });\n });\n\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n ranges: {get: function(){return ranges;}, set: function(_){ranges=_;}}, // ranges (bad, satisfactory, good)\n markers: {get: function(){return markers;}, set: function(_){markers=_;}}, // markers (previous, goal)\n measures: {get: function(){return measures;}, set: function(_){measures=_;}}, // measures (actual, forecast)\n forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n tickFormat: {get: function(){return tickFormat;}, set: function(_){tickFormat=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n orient: {get: function(){return orient;}, set: function(_){ // left, right, top, bottom\n orient = _;\n reverse = orient == 'right' || orient == 'bottom';\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n return chart;\n};\n\n\n\n// Chart design based on the recommendations of Stephen Few. Implementation\n// based on the work of Clint Ivy, Jamie Love, and Jason Davies.\n// http://projects.instantcognition.com/protovis/bulletchart/\nnv.models.bulletChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var bullet = nv.models.bullet();\n var tooltip = nv.models.tooltip();\n\n var orient = 'left' // TODO top & bottom\n , reverse = false\n , margin = {top: 5, right: 40, bottom: 20, left: 120}\n , ranges = function(d) { return d.ranges }\n , markers = function(d) { return d.markers ? d.markers : [0] }\n , measures = function(d) { return d.measures }\n , width = null\n , height = 55\n , tickFormat = null\n\t, ticks = null\n , noData = null\n , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')\n ;\n\n tooltip.duration(0).headerEnabled(false);\n\n function chart(selection) {\n selection.each(function(d, i) {\n var container = d3.select(this);\n nv.utils.initSVG(container);\n\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = height - margin.top - margin.bottom,\n that = this;\n\n chart.update = function() { chart(selection) };\n chart.container = this;\n\n // Display No Data message if there's nothing to show.\n if (!d || !ranges.call(this, d, i)) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n var rangez = ranges.call(this, d, i).slice().sort(d3.descending),\n markerz = markers.call(this, d, i).slice().sort(d3.descending),\n measurez = measures.call(this, d, i).slice().sort(d3.descending);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-bulletChart').data([d]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bulletChart');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-bulletWrap');\n gEnter.append('g').attr('class', 'nv-titles');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n // Compute the new x-scale.\n var x1 = d3.scale.linear()\n .domain([0, Math.max(rangez[0], markerz[0], measurez[0])]) // TODO: need to allow forceX and forceY, and xDomain, yDomain\n .range(reverse ? [availableWidth, 0] : [0, availableWidth]);\n\n // Retrieve the old x-scale, if this is an update.\n var x0 = this.__chart__ || d3.scale.linear()\n .domain([0, Infinity])\n .range(x1.range());\n\n // Stash the new scale.\n this.__chart__ = x1;\n\n var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)\n w1 = function(d) { return Math.abs(x1(d) - x1(0)) };\n\n var title = gEnter.select('.nv-titles').append('g')\n .attr('text-anchor', 'end')\n .attr('transform', 'translate(-6,' + (height - margin.top - margin.bottom) / 2 + ')');\n title.append('text')\n .attr('class', 'nv-title')\n .text(function(d) { return d.title; });\n\n title.append('text')\n .attr('class', 'nv-subtitle')\n .attr('dy', '1em')\n .text(function(d) { return d.subtitle; });\n\n bullet\n .width(availableWidth)\n .height(availableHeight)\n\n var bulletWrap = g.select('.nv-bulletWrap');\n d3.transition(bulletWrap).call(bullet);\n\n // Compute the tick format.\n var format = tickFormat || x1.tickFormat( availableWidth / 100 );\n\n // Update the tick groups.\n var tick = g.selectAll('g.nv-tick')\n .data(x1.ticks( ticks ? ticks : (availableWidth / 50) ), function(d) {\n return this.textContent || format(d);\n });\n\n // Initialize the ticks with the old scale, x0.\n var tickEnter = tick.enter().append('g')\n .attr('class', 'nv-tick')\n .attr('transform', function(d) { return 'translate(' + x0(d) + ',0)' })\n .style('opacity', 1e-6);\n\n tickEnter.append('line')\n .attr('y1', availableHeight)\n .attr('y2', availableHeight * 7 / 6);\n\n tickEnter.append('text')\n .attr('text-anchor', 'middle')\n .attr('dy', '1em')\n .attr('y', availableHeight * 7 / 6)\n .text(format);\n\n // Transition the updating ticks to the new scale, x1.\n var tickUpdate = d3.transition(tick)\n .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })\n .style('opacity', 1);\n\n tickUpdate.select('line')\n .attr('y1', availableHeight)\n .attr('y2', availableHeight * 7 / 6);\n\n tickUpdate.select('text')\n .attr('y', availableHeight * 7 / 6);\n\n // Transition the exiting ticks to the new scale, x1.\n d3.transition(tick.exit())\n .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })\n .style('opacity', 1e-6)\n .remove();\n });\n\n d3.timer.flush();\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n bullet.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt['series'] = {\n key: evt.label,\n value: evt.value,\n color: evt.color\n };\n tooltip.data(evt).hidden(false);\n });\n\n bullet.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n\n bullet.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.bullet = bullet;\n chart.dispatch = dispatch;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n ranges: {get: function(){return ranges;}, set: function(_){ranges=_;}}, // ranges (bad, satisfactory, good)\n markers: {get: function(){return markers;}, set: function(_){markers=_;}}, // markers (previous, goal)\n measures: {get: function(){return measures;}, set: function(_){measures=_;}}, // measures (actual, forecast)\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n tickFormat: {get: function(){return tickFormat;}, set: function(_){tickFormat=_;}},\n ticks: {get: function(){return ticks;}, set: function(_){ticks=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n orient: {get: function(){return orient;}, set: function(_){ // left, right, top, bottom\n orient = _;\n reverse = orient == 'right' || orient == 'bottom';\n }}\n });\n\n nv.utils.inheritOptions(chart, bullet);\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\n\n\nnv.models.candlestickBar = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = null\n , height = null\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , container\n , x = d3.scale.linear()\n , y = d3.scale.linear()\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , getOpen = function(d) { return d.open }\n , getClose = function(d) { return d.close }\n , getHigh = function(d) { return d.high }\n , getLow = function(d) { return d.low }\n , forceX = []\n , forceY = []\n , padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart\n , clipEdge = true\n , color = nv.utils.defaultColor()\n , interactive = false\n , xDomain\n , yDomain\n , xRange\n , yRange\n , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd', 'chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove')\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n function chart(selection) {\n selection.each(function(data) {\n container = d3.select(this);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n nv.utils.initSVG(container);\n\n // Width of the candlestick bars.\n var barWidth = (availableWidth / data[0].values.length) * .45;\n\n // Setup Scales\n x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));\n\n if (padData)\n x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);\n else\n x.range(xRange || [5 + barWidth / 2, availableWidth - barWidth / 2 - 5]);\n\n y.domain(yDomain || [\n d3.min(data[0].values.map(getLow).concat(forceY)),\n d3.max(data[0].values.map(getHigh).concat(forceY))\n ]\n ).range(yRange || [availableHeight, 0]);\n\n // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point\n if (x.domain()[0] === x.domain()[1])\n x.domain()[0] ?\n x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])\n : x.domain([-1,1]);\n\n if (y.domain()[0] === y.domain()[1])\n y.domain()[0] ?\n y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])\n : y.domain([-1,1]);\n\n // Setup containers and skeleton of chart\n var wrap = d3.select(this).selectAll('g.nv-wrap.nv-candlestickBar').data([data[0].values]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-candlestickBar');\n var defsEnter = wrapEnter.append('defs');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-ticks');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n container\n .on('click', function(d,i) {\n dispatch.chartClick({\n data: d,\n index: i,\n pos: d3.event,\n id: id\n });\n });\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-chart-clip-path-' + id)\n .append('rect');\n\n wrap.select('#nv-chart-clip-path-' + id + ' rect')\n .attr('width', availableWidth)\n .attr('height', availableHeight);\n\n g .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');\n\n var ticks = wrap.select('.nv-ticks').selectAll('.nv-tick')\n .data(function(d) { return d });\n ticks.exit().remove();\n\n // The colors are currently controlled by CSS.\n var tickGroups = ticks.enter().append('g')\n .attr('class', function(d, i, j) { return (getOpen(d, i) > getClose(d, i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i});\n\n var lines = tickGroups.append('line')\n .attr('class', 'nv-candlestick-lines')\n .attr('transform', function(d, i) { return 'translate(' + x(getX(d, i)) + ',0)'; })\n .attr('x1', 0)\n .attr('y1', function(d, i) { return y(getHigh(d, i)); })\n .attr('x2', 0)\n .attr('y2', function(d, i) { return y(getLow(d, i)); });\n\n var rects = tickGroups.append('rect')\n .attr('class', 'nv-candlestick-rects nv-bars')\n .attr('transform', function(d, i) {\n return 'translate(' + (x(getX(d, i)) - barWidth/2) + ','\n + (y(getY(d, i)) - (getOpen(d, i) > getClose(d, i) ? (y(getClose(d, i)) - y(getOpen(d, i))) : 0))\n + ')';\n })\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', barWidth)\n .attr('height', function(d, i) {\n var open = getOpen(d, i);\n var close = getClose(d, i);\n return open > close ? y(close) - y(open) : y(open) - y(close);\n });\n\n container.selectAll('.nv-candlestick-lines').transition()\n .attr('transform', function(d, i) { return 'translate(' + x(getX(d, i)) + ',0)'; })\n .attr('x1', 0)\n .attr('y1', function(d, i) { return y(getHigh(d, i)); })\n .attr('x2', 0)\n .attr('y2', function(d, i) { return y(getLow(d, i)); });\n\n container.selectAll('.nv-candlestick-rects').transition()\n .attr('transform', function(d, i) {\n return 'translate(' + (x(getX(d, i)) - barWidth/2) + ','\n + (y(getY(d, i)) - (getOpen(d, i) > getClose(d, i) ? (y(getClose(d, i)) - y(getOpen(d, i))) : 0))\n + ')';\n })\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', barWidth)\n .attr('height', function(d, i) {\n var open = getOpen(d, i);\n var close = getClose(d, i);\n return open > close ? y(close) - y(open) : y(open) - y(close);\n });\n });\n\n return chart;\n }\n\n\n //Create methods to allow outside functions to highlight a specific bar.\n chart.highlightPoint = function(pointIndex, isHoverOver) {\n chart.clearHighlights();\n container.select(\".nv-candlestickBar .nv-tick-0-\" + pointIndex)\n .classed(\"hover\", isHoverOver)\n ;\n };\n\n chart.clearHighlights = function() {\n container.select(\".nv-candlestickBar .nv-tick.hover\")\n .classed(\"hover\", false)\n ;\n };\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},\n forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},\n padData: {get: function(){return padData;}, set: function(_){padData=_;}},\n clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},\n\n x: {get: function(){return getX;}, set: function(_){getX=_;}},\n y: {get: function(){return getY;}, set: function(_){getY=_;}},\n open: {get: function(){return getOpen();}, set: function(_){getOpen=_;}},\n close: {get: function(){return getClose();}, set: function(_){getClose=_;}},\n high: {get: function(){return getHigh;}, set: function(_){getHigh=_;}},\n low: {get: function(){return getLow;}, set: function(_){getLow=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top != undefined ? _.top : margin.top;\n margin.right = _.right != undefined ? _.right : margin.right;\n margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;\n margin.left = _.left != undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n return chart;\n};\n\nnv.models.cumulativeLineChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var lines = nv.models.line()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , legend = nv.models.legend()\n , controls = nv.models.legend()\n , interactiveLayer = nv.interactiveGuideline()\n , tooltip = nv.models.tooltip()\n ;\n\n var margin = {top: 30, right: 30, bottom: 50, left: 60}\n , color = nv.utils.defaultColor()\n , width = null\n , height = null\n , showLegend = true\n , showXAxis = true\n , showYAxis = true\n , rightAlignYAxis = false\n , showControls = true\n , useInteractiveGuideline = false\n , rescaleY = true\n , x //can be accessed via chart.xScale()\n , y //can be accessed via chart.yScale()\n , id = lines.id()\n , state = nv.utils.state()\n , defaultState = null\n , noData = null\n , average = function(d) { return d.average }\n , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')\n , transitionDuration = 250\n , duration = 250\n , noErrorCheck = false //if set to TRUE, will bypass an error check in the indexify function.\n ;\n\n state.index = 0;\n state.rescaleY = rescaleY;\n\n xAxis.orient('bottom').tickPadding(7);\n yAxis.orient((rightAlignYAxis) ? 'right' : 'left');\n\n tooltip.valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n }).headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n });\n\n controls.updateState(false);\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var dx = d3.scale.linear()\n , index = {i: 0, x: 0}\n , renderWatch = nv.utils.renderWatch(dispatch, duration)\n ;\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled }),\n index: index.i,\n rescaleY: rescaleY\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.index !== undefined)\n index.i = state.index;\n if (state.rescaleY !== undefined)\n rescaleY = state.rescaleY;\n if (state.active !== undefined)\n data.forEach(function(series,i) {\n series.disabled = !state.active[i];\n });\n }\n };\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(lines);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n selection.each(function(data) {\n var container = d3.select(this);\n nv.utils.initSVG(container);\n container.classed('nv-chart-' + id, true);\n var that = this;\n\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() {\n if (duration === 0)\n container.call(chart);\n else\n container.transition().duration(duration).call(chart)\n };\n chart.container = this;\n\n state\n .setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n // DEPRECATED set state.disableddisabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n var indexDrag = d3.behavior.drag()\n .on('dragstart', dragStart)\n .on('drag', dragMove)\n .on('dragend', dragEnd);\n\n\n function dragStart(d,i) {\n d3.select(chart.container)\n .style('cursor', 'ew-resize');\n }\n\n function dragMove(d,i) {\n index.x = d3.event.x;\n index.i = Math.round(dx.invert(index.x));\n updateZero();\n }\n\n function dragEnd(d,i) {\n d3.select(chart.container)\n .style('cursor', 'auto');\n\n // update state and send stateChange with new index\n state.index = index.i;\n dispatch.stateChange(state);\n }\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = lines.xScale();\n y = lines.yScale();\n\n if (!rescaleY) {\n var seriesDomains = data\n .filter(function(series) { return !series.disabled })\n .map(function(series,i) {\n var initialDomain = d3.extent(series.values, lines.y());\n\n //account for series being disabled when losing 95% or more\n if (initialDomain[0] < -.95) initialDomain[0] = -.95;\n\n return [\n (initialDomain[0] - initialDomain[1]) / (1 + initialDomain[1]),\n (initialDomain[1] - initialDomain[0]) / (1 + initialDomain[0])\n ];\n });\n\n var completeDomain = [\n d3.min(seriesDomains, function(d) { return d[0] }),\n d3.max(seriesDomains, function(d) { return d[1] })\n ];\n\n lines.yDomain(completeDomain);\n } else {\n lines.yDomain(null);\n }\n\n dx.domain([0, data[0].values.length - 1]) //Assumes all series have same length\n .range([0, availableWidth])\n .clamp(true);\n\n var data = indexify(index.i, data);\n\n // Setup containers and skeleton of chart\n var interactivePointerEvents = (useInteractiveGuideline) ? \"none\" : \"all\";\n var wrap = container.selectAll('g.nv-wrap.nv-cumulativeLine').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-cumulativeLine').append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-interactive');\n gEnter.append('g').attr('class', 'nv-x nv-axis').style(\"pointer-events\",\"none\");\n gEnter.append('g').attr('class', 'nv-y nv-axis');\n gEnter.append('g').attr('class', 'nv-background');\n gEnter.append('g').attr('class', 'nv-linesWrap').style(\"pointer-events\",interactivePointerEvents);\n gEnter.append('g').attr('class', 'nv-avgLinesWrap').style(\"pointer-events\",\"none\");\n gEnter.append('g').attr('class', 'nv-legendWrap');\n gEnter.append('g').attr('class', 'nv-controlsWrap');\n\n // Legend\n if (showLegend) {\n legend.width(availableWidth);\n\n g.select('.nv-legendWrap')\n .datum(data)\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n g.select('.nv-legendWrap')\n .attr('transform', 'translate(0,' + (-margin.top) +')')\n }\n\n // Controls\n if (showControls) {\n var controlsData = [\n { key: 'Re-scale y-axis', disabled: !rescaleY }\n ];\n\n controls\n .width(140)\n .color(['#444', '#444', '#444'])\n .rightAlign(false)\n .margin({top: 5, right: 0, bottom: 5, left: 20})\n ;\n\n g.select('.nv-controlsWrap')\n .datum(controlsData)\n .attr('transform', 'translate(0,' + (-margin.top) +')')\n .call(controls);\n }\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n if (rightAlignYAxis) {\n g.select(\".nv-y.nv-axis\")\n .attr(\"transform\", \"translate(\" + availableWidth + \",0)\");\n }\n\n // Show error if series goes below 100%\n var tempDisabled = data.filter(function(d) { return d.tempDisabled });\n\n wrap.select('.tempDisabled').remove(); //clean-up and prevent duplicates\n if (tempDisabled.length) {\n wrap.append('text').attr('class', 'tempDisabled')\n .attr('x', availableWidth / 2)\n .attr('y', '-.71em')\n .style('text-anchor', 'end')\n .text(tempDisabled.map(function(d) { return d.key }).join(', ') + ' values cannot be calculated for this time period.');\n }\n\n //Set up interactive layer\n if (useInteractiveGuideline) {\n interactiveLayer\n .width(availableWidth)\n .height(availableHeight)\n .margin({left:margin.left,top:margin.top})\n .svgContainer(container)\n .xScale(x);\n wrap.select(\".nv-interactive\").call(interactiveLayer);\n }\n\n gEnter.select('.nv-background')\n .append('rect');\n\n g.select('.nv-background rect')\n .attr('width', availableWidth)\n .attr('height', availableHeight);\n\n lines\n //.x(function(d) { return d.x })\n .y(function(d) { return d.display.y })\n .width(availableWidth)\n .height(availableHeight)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled && !data[i].tempDisabled; }));\n\n var linesWrap = g.select('.nv-linesWrap')\n .datum(data.filter(function(d) { return !d.disabled && !d.tempDisabled }));\n\n linesWrap.call(lines);\n\n //Store a series index number in the data array.\n data.forEach(function(d,i) {\n d.seriesIndex = i;\n });\n\n var avgLineData = data.filter(function(d) {\n return !d.disabled && !!average(d);\n });\n\n var avgLines = g.select(\".nv-avgLinesWrap\").selectAll(\"line\")\n .data(avgLineData, function(d) { return d.key; });\n\n var getAvgLineY = function(d) {\n //If average lines go off the svg element, clamp them to the svg bounds.\n var yVal = y(average(d));\n if (yVal < 0) return 0;\n if (yVal > availableHeight) return availableHeight;\n return yVal;\n };\n\n avgLines.enter()\n .append('line')\n .style('stroke-width',2)\n .style('stroke-dasharray','10,10')\n .style('stroke',function (d,i) {\n return lines.color()(d,d.seriesIndex);\n })\n .attr('x1',0)\n .attr('x2',availableWidth)\n .attr('y1', getAvgLineY)\n .attr('y2', getAvgLineY);\n\n avgLines\n .style('stroke-opacity',function(d){\n //If average lines go offscreen, make them transparent\n var yVal = y(average(d));\n if (yVal < 0 || yVal > availableHeight) return 0;\n return 1;\n })\n .attr('x1',0)\n .attr('x2',availableWidth)\n .attr('y1', getAvgLineY)\n .attr('y2', getAvgLineY);\n\n avgLines.exit().remove();\n\n //Create index line\n var indexLine = linesWrap.selectAll('.nv-indexLine')\n .data([index]);\n indexLine.enter().append('rect').attr('class', 'nv-indexLine')\n .attr('width', 3)\n .attr('x', -2)\n .attr('fill', 'red')\n .attr('fill-opacity', .5)\n .style(\"pointer-events\",\"all\")\n .call(indexDrag);\n\n indexLine\n .attr('transform', function(d) { return 'translate(' + dx(d.i) + ',0)' })\n .attr('height', availableHeight);\n\n // Setup Axes\n if (showXAxis) {\n xAxis\n .scale(x)\n ._ticks( nv.utils.calcTicksX(availableWidth/70, data) )\n .tickSize(-availableHeight, 0);\n\n g.select('.nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y.range()[0] + ')');\n g.select('.nv-x.nv-axis')\n .call(xAxis);\n }\n\n if (showYAxis) {\n yAxis\n .scale(y)\n ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )\n .tickSize( -availableWidth, 0);\n\n g.select('.nv-y.nv-axis')\n .call(yAxis);\n }\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n function updateZero() {\n indexLine\n .data([index]);\n\n //When dragging the index line, turn off line transitions.\n // Then turn them back on when done dragging.\n var oldDuration = chart.duration();\n chart.duration(0);\n chart.update();\n chart.duration(oldDuration);\n }\n\n g.select('.nv-background rect')\n .on('click', function() {\n index.x = d3.mouse(this)[0];\n index.i = Math.round(dx.invert(index.x));\n\n // update state and send stateChange with new index\n state.index = index.i;\n dispatch.stateChange(state);\n\n updateZero();\n });\n\n lines.dispatch.on('elementClick', function(e) {\n index.i = e.pointIndex;\n index.x = dx(index.i);\n\n // update state and send stateChange with new index\n state.index = index.i;\n dispatch.stateChange(state);\n\n updateZero();\n });\n\n controls.dispatch.on('legendClick', function(d,i) {\n d.disabled = !d.disabled;\n rescaleY = !d.disabled;\n\n state.rescaleY = rescaleY;\n dispatch.stateChange(state);\n chart.update();\n });\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState)\n state[key] = newState[key];\n dispatch.stateChange(state);\n chart.update();\n });\n\n interactiveLayer.dispatch.on('elementMousemove', function(e) {\n lines.clearHighlights();\n var singlePoint, pointIndex, pointXLocation, allData = [];\n\n data\n .filter(function(series, i) {\n series.seriesIndex = i;\n return !series.disabled;\n })\n .forEach(function(series,i) {\n pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());\n lines.highlightPoint(i, pointIndex, true);\n var point = series.values[pointIndex];\n if (typeof point === 'undefined') return;\n if (typeof singlePoint === 'undefined') singlePoint = point;\n if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));\n allData.push({\n key: series.key,\n value: chart.y()(point, pointIndex),\n color: color(series,series.seriesIndex)\n });\n });\n\n //Highlight the tooltip entry based on which point the mouse is closest to.\n if (allData.length > 2) {\n var yValue = chart.yScale().invert(e.mouseY);\n var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);\n var threshold = 0.03 * domainExtent;\n var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);\n if (indexToHighlight !== null)\n allData[indexToHighlight].highlight = true;\n }\n\n var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex), pointIndex);\n interactiveLayer.tooltip\n .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})\n .chartContainer(that.parentNode)\n .valueFormatter(function(d,i) {\n return yAxis.tickFormat()(d);\n })\n .data(\n {\n value: xValue,\n series: allData\n }\n )();\n\n interactiveLayer.renderGuideLine(pointXLocation);\n });\n\n interactiveLayer.dispatch.on(\"elementMouseout\",function(e) {\n lines.clearHighlights();\n });\n\n // Update chart from a state object passed to event handler\n dispatch.on('changeState', function(e) {\n if (typeof e.disabled !== 'undefined') {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n\n state.disabled = e.disabled;\n }\n\n if (typeof e.index !== 'undefined') {\n index.i = e.index;\n index.x = dx(index.i);\n\n state.index = e.index;\n\n indexLine\n .data([index]);\n }\n\n if (typeof e.rescaleY !== 'undefined') {\n rescaleY = e.rescaleY;\n }\n\n chart.update();\n });\n\n });\n\n renderWatch.renderEnd('cumulativeLineChart immediate');\n\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n lines.dispatch.on('elementMouseover.tooltip', function(evt) {\n var point = {\n x: chart.x()(evt.point),\n y: chart.y()(evt.point),\n color: evt.point.color\n };\n evt.point = point;\n tooltip.data(evt).position(evt.pos).hidden(false);\n });\n\n lines.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n\n //============================================================\n // Functions\n //------------------------------------------------------------\n\n var indexifyYGetter = null;\n /* Normalize the data according to an index point. */\n function indexify(idx, data) {\n if (!indexifyYGetter) indexifyYGetter = lines.y();\n return data.map(function(line, i) {\n if (!line.values) {\n return line;\n }\n var indexValue = line.values[idx];\n if (indexValue == null) {\n return line;\n }\n var v = indexifyYGetter(indexValue, idx);\n\n //TODO: implement check below, and disable series if series loses 100% or more cause divide by 0 issue\n if (v < -.95 && !noErrorCheck) {\n //if a series loses more than 100%, calculations fail.. anything close can cause major distortion (but is mathematically correct till it hits 100)\n\n line.tempDisabled = true;\n return line;\n }\n\n line.tempDisabled = false;\n\n line.values = line.values.map(function(point, pointIndex) {\n point.display = {'y': (indexifyYGetter(point, pointIndex) - v) / (1 + v) };\n return point;\n });\n\n return line;\n })\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.lines = lines;\n chart.legend = legend;\n chart.controls = controls;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.interactiveLayer = interactiveLayer;\n chart.state = state;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n rescaleY: {get: function(){return rescaleY;}, set: function(_){rescaleY=_;}},\n showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n average: {get: function(){return average;}, set: function(_){average=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n noErrorCheck: {get: function(){return noErrorCheck;}, set: function(_){noErrorCheck=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n }},\n useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){\n useInteractiveGuideline = _;\n if (_ === true) {\n chart.interactive(false);\n chart.useVoronoi(false);\n }\n }},\n rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){\n rightAlignYAxis = _;\n yAxis.orient( (_) ? 'right' : 'left');\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n lines.duration(duration);\n xAxis.duration(duration);\n yAxis.duration(duration);\n renderWatch.reset(duration);\n }}\n });\n\n nv.utils.inheritOptions(chart, lines);\n nv.utils.initOptions(chart);\n\n return chart;\n};\n//TODO: consider deprecating by adding necessary features to multiBar model\nnv.models.discreteBar = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 960\n , height = 500\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , container\n , x = d3.scale.ordinal()\n , y = d3.scale.linear()\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove\n , color = nv.utils.defaultColor()\n , showValues = false\n , valueFormat = d3.format(',.2f')\n , xDomain\n , yDomain\n , xRange\n , yRange\n , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')\n , rectClass = 'discreteBar'\n , duration = 250\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var x0, y0;\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right,\n availableHeight = height - margin.top - margin.bottom;\n\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n //add series index to each data point for reference\n data.forEach(function(series, i) {\n series.values.forEach(function(point) {\n point.series = i;\n });\n });\n\n // Setup Scales\n // remap and flatten the data for use in calculating the scales' domains\n var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate\n data.map(function(d) {\n return d.values.map(function(d,i) {\n return { x: getX(d,i), y: getY(d,i), y0: d.y0 }\n })\n });\n\n x .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))\n .rangeBands(xRange || [0, availableWidth], .1);\n y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)));\n\n // If showValues, pad the Y axis range to account for label height\n if (showValues) y.range(yRange || [availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]);\n else y.range(yRange || [availableHeight, 0]);\n\n //store old scales if they exist\n x0 = x0 || x;\n y0 = y0 || y.copy().range([y(0),y(0)]);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-discretebar').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discretebar');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-groups');\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n //TODO: by definition, the discrete bar should not have multiple groups, will modify/remove later\n var groups = wrap.select('.nv-groups').selectAll('.nv-group')\n .data(function(d) { return d }, function(d) { return d.key });\n groups.enter().append('g')\n .style('stroke-opacity', 1e-6)\n .style('fill-opacity', 1e-6);\n groups.exit()\n .watchTransition(renderWatch, 'discreteBar: exit groups')\n .style('stroke-opacity', 1e-6)\n .style('fill-opacity', 1e-6)\n .remove();\n groups\n .attr('class', function(d,i) { return 'nv-group nv-series-' + i })\n .classed('hover', function(d) { return d.hover });\n groups\n .watchTransition(renderWatch, 'discreteBar: groups')\n .style('stroke-opacity', 1)\n .style('fill-opacity', .75);\n\n var bars = groups.selectAll('g.nv-bar')\n .data(function(d) { return d.values });\n bars.exit().remove();\n\n var barsEnter = bars.enter().append('g')\n .attr('transform', function(d,i,j) {\n return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05 ) + ', ' + y(0) + ')'\n })\n .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here\n d3.select(this).classed('hover', true);\n dispatch.elementMouseover({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mouseout', function(d,i) {\n d3.select(this).classed('hover', false);\n dispatch.elementMouseout({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mousemove', function(d,i) {\n dispatch.elementMousemove({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('click', function(d,i) {\n dispatch.elementClick({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n d3.event.stopPropagation();\n })\n .on('dblclick', function(d,i) {\n dispatch.elementDblClick({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n d3.event.stopPropagation();\n });\n\n barsEnter.append('rect')\n .attr('height', 0)\n .attr('width', x.rangeBand() * .9 / data.length )\n\n if (showValues) {\n barsEnter.append('text')\n .attr('text-anchor', 'middle')\n ;\n\n bars.select('text')\n .text(function(d,i) { return valueFormat(getY(d,i)) })\n .watchTransition(renderWatch, 'discreteBar: bars text')\n .attr('x', x.rangeBand() * .9 / 2)\n .attr('y', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 })\n\n ;\n } else {\n bars.selectAll('text').remove();\n }\n\n bars\n .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive' })\n .style('fill', function(d,i) { return d.color || color(d,i) })\n .style('stroke', function(d,i) { return d.color || color(d,i) })\n .select('rect')\n .attr('class', rectClass)\n .watchTransition(renderWatch, 'discreteBar: bars rect')\n .attr('width', x.rangeBand() * .9 / data.length);\n bars.watchTransition(renderWatch, 'discreteBar: bars')\n //.delay(function(d,i) { return i * 1200 / data[0].values.length })\n .attr('transform', function(d,i) {\n var left = x(getX(d,i)) + x.rangeBand() * .05,\n top = getY(d,i) < 0 ?\n y(0) :\n y(0) - y(getY(d,i)) < 1 ?\n y(0) - 1 : //make 1 px positive bars show up above y=0\n y(getY(d,i));\n\n return 'translate(' + left + ', ' + top + ')'\n })\n .select('rect')\n .attr('height', function(d,i) {\n return Math.max(Math.abs(y(getY(d,i)) - y((yDomain && yDomain[0]) || 0)) || 1)\n });\n\n\n //store old scales for use in transitions on update\n x0 = x.copy();\n y0 = y.copy();\n\n });\n\n renderWatch.renderEnd('discreteBar immediate');\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},\n showValues: {get: function(){return showValues;}, set: function(_){showValues=_;}},\n x: {get: function(){return getX;}, set: function(_){getX=_;}},\n y: {get: function(){return getY;}, set: function(_){getY=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n valueFormat: {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n rectClass: {get: function(){return rectClass;}, set: function(_){rectClass=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n }}\n });\n\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\nnv.models.discreteBarChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var discretebar = nv.models.discreteBar()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , tooltip = nv.models.tooltip()\n ;\n\n var margin = {top: 15, right: 10, bottom: 50, left: 60}\n , width = null\n , height = null\n , color = nv.utils.getColor()\n , showXAxis = true\n , showYAxis = true\n , rightAlignYAxis = false\n , staggerLabels = false\n , x\n , y\n , noData = null\n , dispatch = d3.dispatch('beforeUpdate','renderEnd')\n , duration = 250\n ;\n\n xAxis\n .orient('bottom')\n .showMaxMin(false)\n .tickFormat(function(d) { return d })\n ;\n yAxis\n .orient((rightAlignYAxis) ? 'right' : 'left')\n .tickFormat(d3.format(',.1f'))\n ;\n\n tooltip\n .duration(0)\n .headerEnabled(false)\n .valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n })\n .keyFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n });\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(discretebar);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() {\n dispatch.beforeUpdate();\n container.transition().duration(duration).call(chart);\n };\n chart.container = this;\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container);\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = discretebar.xScale();\n y = discretebar.yScale().clamp(true);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-discreteBarWithAxes').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discreteBarWithAxes').append('g');\n var defsEnter = gEnter.append('defs');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y nv-axis')\n .append('g').attr('class', 'nv-zeroLine')\n .append('line');\n\n gEnter.append('g').attr('class', 'nv-barsWrap');\n\n g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n if (rightAlignYAxis) {\n g.select(\".nv-y.nv-axis\")\n .attr(\"transform\", \"translate(\" + availableWidth + \",0)\");\n }\n\n // Main Chart Component(s)\n discretebar\n .width(availableWidth)\n .height(availableHeight);\n\n var barsWrap = g.select('.nv-barsWrap')\n .datum(data.filter(function(d) { return !d.disabled }));\n\n barsWrap.transition().call(discretebar);\n\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-x-label-clip-' + discretebar.id())\n .append('rect');\n\n g.select('#nv-x-label-clip-' + discretebar.id() + ' rect')\n .attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))\n .attr('height', 16)\n .attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));\n\n // Setup Axes\n if (showXAxis) {\n xAxis\n .scale(x)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight, 0);\n\n g.select('.nv-x.nv-axis')\n .attr('transform', 'translate(0,' + (y.range()[0] + ((discretebar.showValues() && y.domain()[0] < 0) ? 16 : 0)) + ')');\n g.select('.nv-x.nv-axis').call(xAxis);\n\n var xTicks = g.select('.nv-x.nv-axis').selectAll('g');\n if (staggerLabels) {\n xTicks\n .selectAll('text')\n .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')' })\n }\n }\n\n if (showYAxis) {\n yAxis\n .scale(y)\n ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )\n .tickSize( -availableWidth, 0);\n\n g.select('.nv-y.nv-axis').call(yAxis);\n }\n\n // Zero line\n g.select(\".nv-zeroLine line\")\n .attr(\"x1\",0)\n .attr(\"x2\",availableWidth)\n .attr(\"y1\", y(0))\n .attr(\"y2\", y(0))\n ;\n });\n\n renderWatch.renderEnd('discreteBar chart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n discretebar.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt['series'] = {\n key: chart.x()(evt.data),\n value: chart.y()(evt.data),\n color: evt.color\n };\n tooltip.data(evt).hidden(false);\n });\n\n discretebar.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n\n discretebar.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.discretebar = discretebar;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n discretebar.duration(duration);\n xAxis.duration(duration);\n yAxis.duration(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n discretebar.color(color);\n }},\n rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){\n rightAlignYAxis = _;\n yAxis.orient( (_) ? 'right' : 'left');\n }}\n });\n\n nv.utils.inheritOptions(chart, discretebar);\n nv.utils.initOptions(chart);\n\n return chart;\n}\n\nnv.models.distribution = function() {\n \"use strict\";\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 400 //technically width or height depending on x or y....\n , size = 8\n , axis = 'x' // 'x' or 'y'... horizontal or vertical\n , getData = function(d) { return d[axis] } // defaults d.x or d.y\n , color = nv.utils.defaultColor()\n , scale = d3.scale.linear()\n , domain\n , duration = 250\n , dispatch = d3.dispatch('renderEnd')\n ;\n\n //============================================================\n\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var scale0;\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n //============================================================\n\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n var availableLength = width - (axis === 'x' ? margin.left + margin.right : margin.top + margin.bottom),\n naxis = axis == 'x' ? 'y' : 'x',\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n //------------------------------------------------------------\n // Setup Scales\n\n scale0 = scale0 || scale;\n\n //------------------------------------------------------------\n\n\n //------------------------------------------------------------\n // Setup containers and skeleton of chart\n\n var wrap = container.selectAll('g.nv-distribution').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-distribution');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')\n\n //------------------------------------------------------------\n\n\n var distWrap = g.selectAll('g.nv-dist')\n .data(function(d) { return d }, function(d) { return d.key });\n\n distWrap.enter().append('g');\n distWrap\n .attr('class', function(d,i) { return 'nv-dist nv-series-' + i })\n .style('stroke', function(d,i) { return color(d, i) });\n\n var dist = distWrap.selectAll('line.nv-dist' + axis)\n .data(function(d) { return d.values })\n dist.enter().append('line')\n .attr(axis + '1', function(d,i) { return scale0(getData(d,i)) })\n .attr(axis + '2', function(d,i) { return scale0(getData(d,i)) })\n renderWatch.transition(distWrap.exit().selectAll('line.nv-dist' + axis), 'dist exit')\n // .transition()\n .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })\n .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })\n .style('stroke-opacity', 0)\n .remove();\n dist\n .attr('class', function(d,i) { return 'nv-dist' + axis + ' nv-dist' + axis + '-' + i })\n .attr(naxis + '1', 0)\n .attr(naxis + '2', size);\n renderWatch.transition(dist, 'dist')\n // .transition()\n .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })\n .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })\n\n\n scale0 = scale.copy();\n\n });\n renderWatch.renderEnd('distribution immediate');\n return chart;\n }\n\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n chart.options = nv.utils.optionsFunc.bind(chart);\n chart.dispatch = dispatch;\n\n chart.margin = function(_) {\n if (!arguments.length) return margin;\n margin.top = typeof _.top != 'undefined' ? _.top : margin.top;\n margin.right = typeof _.right != 'undefined' ? _.right : margin.right;\n margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;\n margin.left = typeof _.left != 'undefined' ? _.left : margin.left;\n return chart;\n };\n\n chart.width = function(_) {\n if (!arguments.length) return width;\n width = _;\n return chart;\n };\n\n chart.axis = function(_) {\n if (!arguments.length) return axis;\n axis = _;\n return chart;\n };\n\n chart.size = function(_) {\n if (!arguments.length) return size;\n size = _;\n return chart;\n };\n\n chart.getData = function(_) {\n if (!arguments.length) return getData;\n getData = d3.functor(_);\n return chart;\n };\n\n chart.scale = function(_) {\n if (!arguments.length) return scale;\n scale = _;\n return chart;\n };\n\n chart.color = function(_) {\n if (!arguments.length) return color;\n color = nv.utils.getColor(_);\n return chart;\n };\n\n chart.duration = function(_) {\n if (!arguments.length) return duration;\n duration = _;\n renderWatch.reset(duration);\n return chart;\n };\n //============================================================\n\n\n return chart;\n}\nnv.models.furiousLegend = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 5, right: 0, bottom: 5, left: 0}\n , width = 400\n , height = 20\n , getKey = function(d) { return d.key }\n , color = nv.utils.getColor()\n , align = true\n , padding = 28 //define how much space between legend items. - recommend 32 for furious version\n , rightAlign = true\n , updateState = true //If true, legend will update data.disabled and trigger a 'stateChange' dispatch.\n , radioButtonMode = false //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at a time)\n , expanded = false\n , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout', 'stateChange')\n , vers = 'classic' //Options are \"classic\" and \"furious\"\n ;\n\n function chart(selection) {\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right,\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-legend').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-legend').append('g');\n var g = wrap.select('g');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n var series = g.selectAll('.nv-series')\n .data(function(d) {\n if(vers != 'furious') return d;\n\n return d.filter(function(n) {\n return expanded ? true : !n.disengaged;\n });\n });\n var seriesEnter = series.enter().append('g').attr('class', 'nv-series')\n\n var seriesShape;\n\n if(vers == 'classic') {\n seriesEnter.append('circle')\n .style('stroke-width', 2)\n .attr('class','nv-legend-symbol')\n .attr('r', 5);\n\n seriesShape = series.select('circle');\n } else if (vers == 'furious') {\n seriesEnter.append('rect')\n .style('stroke-width', 2)\n .attr('class','nv-legend-symbol')\n .attr('rx', 3)\n .attr('ry', 3);\n\n seriesShape = series.select('rect');\n\n seriesEnter.append('g')\n .attr('class', 'nv-check-box')\n .property('innerHTML','
')\n .attr('transform', 'translate(-10,-8)scale(0.5)');\n\n var seriesCheckbox = series.select('.nv-check-box');\n\n seriesCheckbox.each(function(d,i) {\n d3.select(this).selectAll('path')\n .attr('stroke', setTextColor(d,i));\n });\n }\n\n seriesEnter.append('text')\n .attr('text-anchor', 'start')\n .attr('class','nv-legend-text')\n .attr('dy', '.32em')\n .attr('dx', '8');\n\n var seriesText = series.select('text.nv-legend-text');\n\n series\n .on('mouseover', function(d,i) {\n dispatch.legendMouseover(d,i); //TODO: Make consistent with other event objects\n })\n .on('mouseout', function(d,i) {\n dispatch.legendMouseout(d,i);\n })\n .on('click', function(d,i) {\n dispatch.legendClick(d,i);\n // make sure we re-get data in case it was modified\n var data = series.data();\n if (updateState) {\n if(vers =='classic') {\n if (radioButtonMode) {\n //Radio button mode: set every series to disabled,\n // and enable the clicked series.\n data.forEach(function(series) { series.disabled = true});\n d.disabled = false;\n }\n else {\n d.disabled = !d.disabled;\n if (data.every(function(series) { return series.disabled})) {\n //the default behavior of NVD3 legends is, if every single series\n // is disabled, turn all series' back on.\n data.forEach(function(series) { series.disabled = false});\n }\n }\n } else if(vers == 'furious') {\n if(expanded) {\n d.disengaged = !d.disengaged;\n d.userDisabled = d.userDisabled == undefined ? !!d.disabled : d.userDisabled;\n d.disabled = d.disengaged || d.userDisabled;\n } else if (!expanded) {\n d.disabled = !d.disabled;\n d.userDisabled = d.disabled;\n var engaged = data.filter(function(d) { return !d.disengaged; });\n if (engaged.every(function(series) { return series.userDisabled })) {\n //the default behavior of NVD3 legends is, if every single series\n // is disabled, turn all series' back on.\n data.forEach(function(series) {\n series.disabled = series.userDisabled = false;\n });\n }\n }\n }\n dispatch.stateChange({\n disabled: data.map(function(d) { return !!d.disabled }),\n disengaged: data.map(function(d) { return !!d.disengaged })\n });\n\n }\n })\n .on('dblclick', function(d,i) {\n if(vers == 'furious' && expanded) return;\n dispatch.legendDblclick(d,i);\n if (updateState) {\n // make sure we re-get data in case it was modified\n var data = series.data();\n //the default behavior of NVD3 legends, when double clicking one,\n // is to set all other series' to false, and make the double clicked series enabled.\n data.forEach(function(series) {\n series.disabled = true;\n if(vers == 'furious') series.userDisabled = series.disabled;\n });\n d.disabled = false;\n if(vers == 'furious') d.userDisabled = d.disabled;\n dispatch.stateChange({\n disabled: data.map(function(d) { return !!d.disabled })\n });\n }\n });\n\n series.classed('nv-disabled', function(d) { return d.userDisabled });\n series.exit().remove();\n\n seriesText\n .attr('fill', setTextColor)\n .text(getKey);\n\n //TODO: implement fixed-width and max-width options (max-width is especially useful with the align option)\n // NEW ALIGNING CODE, TODO: clean up\n\n var versPadding;\n switch(vers) {\n case 'furious' :\n versPadding = 23;\n break;\n case 'classic' :\n versPadding = 20;\n }\n\n if (align) {\n\n var seriesWidths = [];\n series.each(function(d,i) {\n var legendText = d3.select(this).select('text');\n var nodeTextLength;\n try {\n nodeTextLength = legendText.node().getComputedTextLength();\n // If the legendText is display:none'd (nodeTextLength == 0), simulate an error so we approximate, instead\n if(nodeTextLength <= 0) throw Error();\n }\n catch(e) {\n nodeTextLength = nv.utils.calcApproxTextWidth(legendText);\n }\n\n seriesWidths.push(nodeTextLength + padding);\n });\n\n var seriesPerRow = 0;\n var legendWidth = 0;\n var columnWidths = [];\n\n while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {\n columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];\n legendWidth += seriesWidths[seriesPerRow++];\n }\n if (seriesPerRow === 0) seriesPerRow = 1; //minimum of one series per row\n\n while ( legendWidth > availableWidth && seriesPerRow > 1 ) {\n columnWidths = [];\n seriesPerRow--;\n\n for (var k = 0; k < seriesWidths.length; k++) {\n if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )\n columnWidths[k % seriesPerRow] = seriesWidths[k];\n }\n\n legendWidth = columnWidths.reduce(function(prev, cur, index, array) {\n return prev + cur;\n });\n }\n\n var xPositions = [];\n for (var i = 0, curX = 0; i < seriesPerRow; i++) {\n xPositions[i] = curX;\n curX += columnWidths[i];\n }\n\n series\n .attr('transform', function(d, i) {\n return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * versPadding) + ')';\n });\n\n //position legend as far right as possible within the total width\n if (rightAlign) {\n g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');\n }\n else {\n g.attr('transform', 'translate(0' + ',' + margin.top + ')');\n }\n\n height = margin.top + margin.bottom + (Math.ceil(seriesWidths.length / seriesPerRow) * versPadding);\n\n } else {\n\n var ypos = 5,\n newxpos = 5,\n maxwidth = 0,\n xpos;\n series\n .attr('transform', function(d, i) {\n var length = d3.select(this).select('text').node().getComputedTextLength() + padding;\n xpos = newxpos;\n\n if (width < margin.left + margin.right + xpos + length) {\n newxpos = xpos = 5;\n ypos += versPadding;\n }\n\n newxpos += length;\n if (newxpos > maxwidth) maxwidth = newxpos;\n\n return 'translate(' + xpos + ',' + ypos + ')';\n });\n\n //position legend as far right as possible within the total width\n g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');\n\n height = margin.top + margin.bottom + ypos + 15;\n }\n\n if(vers == 'furious') {\n // Size rectangles after text is placed\n seriesShape\n .attr('width', function(d,i) {\n return seriesText[0][i].getComputedTextLength() + 27;\n })\n .attr('height', 18)\n .attr('y', -9)\n .attr('x', -15)\n }\n\n seriesShape\n .style('fill', setBGColor)\n .style('stroke', function(d,i) { return d.color || color(d, i) });\n });\n\n function setTextColor(d,i) {\n if(vers != 'furious') return '#000';\n if(expanded) {\n return d.disengaged ? color(d,i) : '#fff';\n } else if (!expanded) {\n return !!d.disabled ? color(d,i) : '#fff';\n }\n }\n\n function setBGColor(d,i) {\n if(expanded && vers == 'furious') {\n return d.disengaged ? '#fff' : color(d,i);\n } else {\n return !!d.disabled ? '#fff' : color(d,i);\n }\n }\n\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n key: {get: function(){return getKey;}, set: function(_){getKey=_;}},\n align: {get: function(){return align;}, set: function(_){align=_;}},\n rightAlign: {get: function(){return rightAlign;}, set: function(_){rightAlign=_;}},\n padding: {get: function(){return padding;}, set: function(_){padding=_;}},\n updateState: {get: function(){return updateState;}, set: function(_){updateState=_;}},\n radioButtonMode: {get: function(){return radioButtonMode;}, set: function(_){radioButtonMode=_;}},\n expanded: {get: function(){return expanded;}, set: function(_){expanded=_;}},\n vers: {get: function(){return vers;}, set: function(_){vers=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n\n return chart;\n};\n//TODO: consider deprecating and using multibar with single series for this\nnv.models.historicalBar = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = null\n , height = null\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , container = null\n , x = d3.scale.linear()\n , y = d3.scale.linear()\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , forceX = []\n , forceY = [0]\n , padData = false\n , clipEdge = true\n , color = nv.utils.defaultColor()\n , xDomain\n , yDomain\n , xRange\n , yRange\n , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')\n , interactive = true\n ;\n\n var renderWatch = nv.utils.renderWatch(dispatch, 0);\n\n function chart(selection) {\n selection.each(function(data) {\n renderWatch.reset();\n\n container = d3.select(this);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n nv.utils.initSVG(container);\n\n // Setup Scales\n x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));\n\n if (padData)\n x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);\n else\n x.range(xRange || [0, availableWidth]);\n\n y.domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))\n .range(yRange || [availableHeight, 0]);\n\n // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point\n if (x.domain()[0] === x.domain()[1])\n x.domain()[0] ?\n x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])\n : x.domain([-1,1]);\n\n if (y.domain()[0] === y.domain()[1])\n y.domain()[0] ?\n y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])\n : y.domain([-1,1]);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-historicalBar-' + id).data([data[0].values]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBar-' + id);\n var defsEnter = wrapEnter.append('defs');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-bars');\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n container\n .on('click', function(d,i) {\n dispatch.chartClick({\n data: d,\n index: i,\n pos: d3.event,\n id: id\n });\n });\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-chart-clip-path-' + id)\n .append('rect');\n\n wrap.select('#nv-chart-clip-path-' + id + ' rect')\n .attr('width', availableWidth)\n .attr('height', availableHeight);\n\n g.attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');\n\n var bars = wrap.select('.nv-bars').selectAll('.nv-bar')\n .data(function(d) { return d }, function(d,i) {return getX(d,i)});\n bars.exit().remove();\n\n bars.enter().append('rect')\n .attr('x', 0 )\n .attr('y', function(d,i) { return nv.utils.NaNtoZero(y(Math.max(0, getY(d,i)))) })\n .attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.abs(y(getY(d,i)) - y(0))) })\n .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })\n .on('mouseover', function(d,i) {\n if (!interactive) return;\n d3.select(this).classed('hover', true);\n dispatch.elementMouseover({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n\n })\n .on('mouseout', function(d,i) {\n if (!interactive) return;\n d3.select(this).classed('hover', false);\n dispatch.elementMouseout({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mousemove', function(d,i) {\n if (!interactive) return;\n dispatch.elementMousemove({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('click', function(d,i) {\n if (!interactive) return;\n dispatch.elementClick({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n d3.event.stopPropagation();\n })\n .on('dblclick', function(d,i) {\n if (!interactive) return;\n dispatch.elementDblClick({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n d3.event.stopPropagation();\n });\n\n bars\n .attr('fill', function(d,i) { return color(d, i); })\n .attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })\n .watchTransition(renderWatch, 'bars')\n .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })\n //TODO: better width calculations that don't assume always uniform data spacing;w\n .attr('width', (availableWidth / data[0].values.length) * .9 );\n\n bars.watchTransition(renderWatch, 'bars')\n .attr('y', function(d,i) {\n var rval = getY(d,i) < 0 ?\n y(0) :\n y(0) - y(getY(d,i)) < 1 ?\n y(0) - 1 :\n y(getY(d,i));\n return nv.utils.NaNtoZero(rval);\n })\n .attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.max(Math.abs(y(getY(d,i)) - y(0)),1)) });\n\n });\n\n renderWatch.renderEnd('historicalBar immediate');\n return chart;\n }\n\n //Create methods to allow outside functions to highlight a specific bar.\n chart.highlightPoint = function(pointIndex, isHoverOver) {\n container\n .select(\".nv-bars .nv-bar-0-\" + pointIndex)\n .classed(\"hover\", isHoverOver)\n ;\n };\n\n chart.clearHighlights = function() {\n container\n .select(\".nv-bars .nv-bar.hover\")\n .classed(\"hover\", false)\n ;\n };\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},\n forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},\n padData: {get: function(){return padData;}, set: function(_){padData=_;}},\n x: {get: function(){return getX;}, set: function(_){getX=_;}},\n y: {get: function(){return getY;}, set: function(_){getY=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\nnv.models.historicalBarChart = function(bar_model) {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var bars = bar_model || nv.models.historicalBar()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , legend = nv.models.legend()\n , interactiveLayer = nv.interactiveGuideline()\n , tooltip = nv.models.tooltip()\n ;\n\n\n var margin = {top: 30, right: 90, bottom: 50, left: 90}\n , color = nv.utils.defaultColor()\n , width = null\n , height = null\n , showLegend = false\n , showXAxis = true\n , showYAxis = true\n , rightAlignYAxis = false\n , useInteractiveGuideline = false\n , x\n , y\n , state = {}\n , defaultState = null\n , noData = null\n , dispatch = d3.dispatch('tooltipHide', 'stateChange', 'changeState', 'renderEnd')\n , transitionDuration = 250\n ;\n\n xAxis.orient('bottom').tickPadding(7);\n yAxis.orient( (rightAlignYAxis) ? 'right' : 'left');\n tooltip\n .duration(0)\n .headerEnabled(false)\n .valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n })\n .headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n });\n\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch, 0);\n\n function chart(selection) {\n selection.each(function(data) {\n renderWatch.reset();\n renderWatch.models(bars);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() { container.transition().duration(transitionDuration).call(chart) };\n chart.container = this;\n\n //set state.disabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display noData message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = bars.xScale();\n y = bars.yScale();\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-historicalBarChart').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBarChart').append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y nv-axis');\n gEnter.append('g').attr('class', 'nv-barsWrap');\n gEnter.append('g').attr('class', 'nv-legendWrap');\n gEnter.append('g').attr('class', 'nv-interactive');\n\n // Legend\n if (showLegend) {\n legend.width(availableWidth);\n\n g.select('.nv-legendWrap')\n .datum(data)\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n wrap.select('.nv-legendWrap')\n .attr('transform', 'translate(0,' + (-margin.top) +')')\n }\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n if (rightAlignYAxis) {\n g.select(\".nv-y.nv-axis\")\n .attr(\"transform\", \"translate(\" + availableWidth + \",0)\");\n }\n\n //Set up interactive layer\n if (useInteractiveGuideline) {\n interactiveLayer\n .width(availableWidth)\n .height(availableHeight)\n .margin({left:margin.left, top:margin.top})\n .svgContainer(container)\n .xScale(x);\n wrap.select(\".nv-interactive\").call(interactiveLayer);\n }\n bars\n .width(availableWidth)\n .height(availableHeight)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled }));\n\n var barsWrap = g.select('.nv-barsWrap')\n .datum(data.filter(function(d) { return !d.disabled }));\n barsWrap.transition().call(bars);\n\n // Setup Axes\n if (showXAxis) {\n xAxis\n .scale(x)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight, 0);\n\n g.select('.nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y.range()[0] + ')');\n g.select('.nv-x.nv-axis')\n .transition()\n .call(xAxis);\n }\n\n if (showYAxis) {\n yAxis\n .scale(y)\n ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )\n .tickSize( -availableWidth, 0);\n\n g.select('.nv-y.nv-axis')\n .transition()\n .call(yAxis);\n }\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n interactiveLayer.dispatch.on('elementMousemove', function(e) {\n bars.clearHighlights();\n\n var singlePoint, pointIndex, pointXLocation, allData = [];\n data\n .filter(function(series, i) {\n series.seriesIndex = i;\n return !series.disabled;\n })\n .forEach(function(series,i) {\n pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());\n bars.highlightPoint(pointIndex,true);\n var point = series.values[pointIndex];\n if (point === undefined) return;\n if (singlePoint === undefined) singlePoint = point;\n if (pointXLocation === undefined) pointXLocation = chart.xScale()(chart.x()(point,pointIndex));\n allData.push({\n key: series.key,\n value: chart.y()(point, pointIndex),\n color: color(series,series.seriesIndex),\n data: series.values[pointIndex]\n });\n });\n\n var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));\n interactiveLayer.tooltip\n .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})\n .chartContainer(that.parentNode)\n .valueFormatter(function(d,i) {\n return yAxis.tickFormat()(d);\n })\n .data({\n value: xValue,\n index: pointIndex,\n series: allData\n })();\n\n interactiveLayer.renderGuideLine(pointXLocation);\n\n });\n\n interactiveLayer.dispatch.on(\"elementMouseout\",function(e) {\n dispatch.tooltipHide();\n bars.clearHighlights();\n });\n\n legend.dispatch.on('legendClick', function(d,i) {\n d.disabled = !d.disabled;\n\n if (!data.filter(function(d) { return !d.disabled }).length) {\n data.map(function(d) {\n d.disabled = false;\n wrap.selectAll('.nv-series').classed('disabled', false);\n return d;\n });\n }\n\n state.disabled = data.map(function(d) { return !!d.disabled });\n dispatch.stateChange(state);\n\n selection.transition().call(chart);\n });\n\n legend.dispatch.on('legendDblclick', function(d) {\n //Double clicking should always enable current series, and disabled all others.\n data.forEach(function(d) {\n d.disabled = true;\n });\n d.disabled = false;\n\n state.disabled = data.map(function(d) { return !!d.disabled });\n dispatch.stateChange(state);\n chart.update();\n });\n\n dispatch.on('changeState', function(e) {\n if (typeof e.disabled !== 'undefined') {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n\n state.disabled = e.disabled;\n }\n\n chart.update();\n });\n });\n\n renderWatch.renderEnd('historicalBarChart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n bars.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt['series'] = {\n key: chart.x()(evt.data),\n value: chart.y()(evt.data),\n color: evt.color\n };\n tooltip.data(evt).hidden(false);\n });\n\n bars.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n\n bars.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.bars = bars;\n chart.legend = legend;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.interactiveLayer = interactiveLayer;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n bars.color(color);\n }},\n duration: {get: function(){return transitionDuration;}, set: function(_){\n transitionDuration=_;\n renderWatch.reset(transitionDuration);\n yAxis.duration(transitionDuration);\n xAxis.duration(transitionDuration);\n }},\n rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){\n rightAlignYAxis = _;\n yAxis.orient( (_) ? 'right' : 'left');\n }},\n useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){\n useInteractiveGuideline = _;\n if (_ === true) {\n chart.interactive(false);\n }\n }}\n });\n\n nv.utils.inheritOptions(chart, bars);\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\n\n// ohlcChart is just a historical chart with ohlc bars and some tweaks\nnv.models.ohlcBarChart = function() {\n var chart = nv.models.historicalBarChart(nv.models.ohlcBar());\n\n // special default tooltip since we show multiple values per x\n chart.useInteractiveGuideline(true);\n chart.interactiveLayer.tooltip.contentGenerator(function(data) {\n // we assume only one series exists for this chart\n var d = data.series[0].data;\n // match line colors as defined in nv.d3.css\n var color = d.open < d.close ? \"2ca02c\" : \"d62728\";\n return '' +\n '
' + data.value + '
' +\n '
' +\n '| open: | ' + chart.yAxis.tickFormat()(d.open) + ' |
' +\n '| close: | ' + chart.yAxis.tickFormat()(d.close) + ' |
' +\n '| high | ' + chart.yAxis.tickFormat()(d.high) + ' |
' +\n '| low: | ' + chart.yAxis.tickFormat()(d.low) + ' |
' +\n '
';\n });\n return chart;\n};\n\n// candlestickChart is just a historical chart with candlestick bars and some tweaks\nnv.models.candlestickBarChart = function() {\n var chart = nv.models.historicalBarChart(nv.models.candlestickBar());\n\n // special default tooltip since we show multiple values per x\n chart.useInteractiveGuideline(true);\n chart.interactiveLayer.tooltip.contentGenerator(function(data) {\n // we assume only one series exists for this chart\n var d = data.series[0].data;\n // match line colors as defined in nv.d3.css\n var color = d.open < d.close ? \"2ca02c\" : \"d62728\";\n return '' +\n '
' + data.value + '
' +\n '
' +\n '| open: | ' + chart.yAxis.tickFormat()(d.open) + ' |
' +\n '| close: | ' + chart.yAxis.tickFormat()(d.close) + ' |
' +\n '| high | ' + chart.yAxis.tickFormat()(d.high) + ' |
' +\n '| low: | ' + chart.yAxis.tickFormat()(d.low) + ' |
' +\n '
';\n });\n return chart;\n};\nnv.models.legend = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 5, right: 0, bottom: 5, left: 0}\n , width = 400\n , height = 20\n , getKey = function(d) { return d.key }\n , color = nv.utils.getColor()\n , align = true\n , padding = 32 //define how much space between legend items. - recommend 32 for furious version\n , rightAlign = true\n , updateState = true //If true, legend will update data.disabled and trigger a 'stateChange' dispatch.\n , radioButtonMode = false //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at a time)\n , expanded = false\n , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout', 'stateChange')\n , vers = 'classic' //Options are \"classic\" and \"furious\"\n ;\n\n function chart(selection) {\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right,\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-legend').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-legend').append('g');\n var g = wrap.select('g');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n var series = g.selectAll('.nv-series')\n .data(function(d) {\n if(vers != 'furious') return d;\n\n return d.filter(function(n) {\n return expanded ? true : !n.disengaged;\n });\n });\n\n var seriesEnter = series.enter().append('g').attr('class', 'nv-series');\n var seriesShape;\n\n var versPadding;\n switch(vers) {\n case 'furious' :\n versPadding = 23;\n break;\n case 'classic' :\n versPadding = 20;\n }\n\n if(vers == 'classic') {\n seriesEnter.append('circle')\n .style('stroke-width', 2)\n .attr('class','nv-legend-symbol')\n .attr('r', 5);\n\n seriesShape = series.select('circle');\n } else if (vers == 'furious') {\n seriesEnter.append('rect')\n .style('stroke-width', 2)\n .attr('class','nv-legend-symbol')\n .attr('rx', 3)\n .attr('ry', 3);\n\n seriesShape = series.select('.nv-legend-symbol');\n\n seriesEnter.append('g')\n .attr('class', 'nv-check-box')\n .property('innerHTML','
')\n .attr('transform', 'translate(-10,-8)scale(0.5)');\n\n var seriesCheckbox = series.select('.nv-check-box');\n\n seriesCheckbox.each(function(d,i) {\n d3.select(this).selectAll('path')\n .attr('stroke', setTextColor(d,i));\n });\n }\n\n seriesEnter.append('text')\n .attr('text-anchor', 'start')\n .attr('class','nv-legend-text')\n .attr('dy', '.32em')\n .attr('dx', '8');\n\n var seriesText = series.select('text.nv-legend-text');\n\n series\n .on('mouseover', function(d,i) {\n dispatch.legendMouseover(d,i); //TODO: Make consistent with other event objects\n })\n .on('mouseout', function(d,i) {\n dispatch.legendMouseout(d,i);\n })\n .on('click', function(d,i) {\n dispatch.legendClick(d,i);\n // make sure we re-get data in case it was modified\n var data = series.data();\n if (updateState) {\n if(vers =='classic') {\n if (radioButtonMode) {\n //Radio button mode: set every series to disabled,\n // and enable the clicked series.\n data.forEach(function(series) { series.disabled = true});\n d.disabled = false;\n }\n else {\n d.disabled = !d.disabled;\n if (data.every(function(series) { return series.disabled})) {\n //the default behavior of NVD3 legends is, if every single series\n // is disabled, turn all series' back on.\n data.forEach(function(series) { series.disabled = false});\n }\n }\n } else if(vers == 'furious') {\n if(expanded) {\n d.disengaged = !d.disengaged;\n d.userDisabled = d.userDisabled == undefined ? !!d.disabled : d.userDisabled;\n d.disabled = d.disengaged || d.userDisabled;\n } else if (!expanded) {\n d.disabled = !d.disabled;\n d.userDisabled = d.disabled;\n var engaged = data.filter(function(d) { return !d.disengaged; });\n if (engaged.every(function(series) { return series.userDisabled })) {\n //the default behavior of NVD3 legends is, if every single series\n // is disabled, turn all series' back on.\n data.forEach(function(series) {\n series.disabled = series.userDisabled = false;\n });\n }\n }\n }\n dispatch.stateChange({\n disabled: data.map(function(d) { return !!d.disabled }),\n disengaged: data.map(function(d) { return !!d.disengaged })\n });\n\n }\n })\n .on('dblclick', function(d,i) {\n if(vers == 'furious' && expanded) return;\n dispatch.legendDblclick(d,i);\n if (updateState) {\n // make sure we re-get data in case it was modified\n var data = series.data();\n //the default behavior of NVD3 legends, when double clicking one,\n // is to set all other series' to false, and make the double clicked series enabled.\n data.forEach(function(series) {\n series.disabled = true;\n if(vers == 'furious') series.userDisabled = series.disabled;\n });\n d.disabled = false;\n if(vers == 'furious') d.userDisabled = d.disabled;\n dispatch.stateChange({\n disabled: data.map(function(d) { return !!d.disabled })\n });\n }\n });\n\n series.classed('nv-disabled', function(d) { return d.userDisabled });\n series.exit().remove();\n\n seriesText\n .attr('fill', setTextColor)\n .text(getKey);\n\n //TODO: implement fixed-width and max-width options (max-width is especially useful with the align option)\n // NEW ALIGNING CODE, TODO: clean up\n var legendWidth = 0;\n if (align) {\n\n var seriesWidths = [];\n series.each(function(d,i) {\n var legendText = d3.select(this).select('text');\n var nodeTextLength;\n try {\n nodeTextLength = legendText.node().getComputedTextLength();\n // If the legendText is display:none'd (nodeTextLength == 0), simulate an error so we approximate, instead\n if(nodeTextLength <= 0) throw Error();\n }\n catch(e) {\n nodeTextLength = nv.utils.calcApproxTextWidth(legendText);\n }\n\n seriesWidths.push(nodeTextLength + padding);\n });\n\n var seriesPerRow = 0;\n var columnWidths = [];\n legendWidth = 0;\n\n while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {\n columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];\n legendWidth += seriesWidths[seriesPerRow++];\n }\n if (seriesPerRow === 0) seriesPerRow = 1; //minimum of one series per row\n\n while ( legendWidth > availableWidth && seriesPerRow > 1 ) {\n columnWidths = [];\n seriesPerRow--;\n\n for (var k = 0; k < seriesWidths.length; k++) {\n if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )\n columnWidths[k % seriesPerRow] = seriesWidths[k];\n }\n\n legendWidth = columnWidths.reduce(function(prev, cur, index, array) {\n return prev + cur;\n });\n }\n\n var xPositions = [];\n for (var i = 0, curX = 0; i < seriesPerRow; i++) {\n xPositions[i] = curX;\n curX += columnWidths[i];\n }\n\n series\n .attr('transform', function(d, i) {\n return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * versPadding) + ')';\n });\n\n //position legend as far right as possible within the total width\n if (rightAlign) {\n g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');\n }\n else {\n g.attr('transform', 'translate(0' + ',' + margin.top + ')');\n }\n\n height = margin.top + margin.bottom + (Math.ceil(seriesWidths.length / seriesPerRow) * versPadding);\n\n } else {\n\n var ypos = 5,\n newxpos = 5,\n maxwidth = 0,\n xpos;\n series\n .attr('transform', function(d, i) {\n var length = d3.select(this).select('text').node().getComputedTextLength() + padding;\n xpos = newxpos;\n\n if (width < margin.left + margin.right + xpos + length) {\n newxpos = xpos = 5;\n ypos += versPadding;\n }\n\n newxpos += length;\n if (newxpos > maxwidth) maxwidth = newxpos;\n\n if(legendWidth < xpos + maxwidth) {\n legendWidth = xpos + maxwidth;\n }\n return 'translate(' + xpos + ',' + ypos + ')';\n });\n\n //position legend as far right as possible within the total width\n g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');\n\n height = margin.top + margin.bottom + ypos + 15;\n }\n\n if(vers == 'furious') {\n // Size rectangles after text is placed\n seriesShape\n .attr('width', function(d,i) {\n return seriesText[0][i].getComputedTextLength() + 27;\n })\n .attr('height', 18)\n .attr('y', -9)\n .attr('x', -15);\n\n // The background for the expanded legend (UI)\n gEnter.insert('rect',':first-child')\n .attr('class', 'nv-legend-bg')\n .attr('fill', '#eee')\n // .attr('stroke', '#444')\n .attr('opacity',0);\n\n var seriesBG = g.select('.nv-legend-bg');\n\n seriesBG\n .transition().duration(300)\n .attr('x', -versPadding )\n .attr('width', legendWidth + versPadding - 12)\n .attr('height', height + 10)\n .attr('y', -margin.top - 10)\n .attr('opacity', expanded ? 1 : 0);\n\n\n }\n\n seriesShape\n .style('fill', setBGColor)\n .style('fill-opacity', setBGOpacity)\n .style('stroke', setBGColor);\n });\n\n function setTextColor(d,i) {\n if(vers != 'furious') return '#000';\n if(expanded) {\n return d.disengaged ? '#000' : '#fff';\n } else if (!expanded) {\n if(!d.color) d.color = color(d,i);\n return !!d.disabled ? d.color : '#fff';\n }\n }\n\n function setBGColor(d,i) {\n if(expanded && vers == 'furious') {\n return d.disengaged ? '#eee' : d.color || color(d,i);\n } else {\n return d.color || color(d,i);\n }\n }\n\n\n function setBGOpacity(d,i) {\n if(expanded && vers == 'furious') {\n return 1;\n } else {\n return !!d.disabled ? 0 : 1;\n }\n }\n\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n key: {get: function(){return getKey;}, set: function(_){getKey=_;}},\n align: {get: function(){return align;}, set: function(_){align=_;}},\n rightAlign: {get: function(){return rightAlign;}, set: function(_){rightAlign=_;}},\n padding: {get: function(){return padding;}, set: function(_){padding=_;}},\n updateState: {get: function(){return updateState;}, set: function(_){updateState=_;}},\n radioButtonMode: {get: function(){return radioButtonMode;}, set: function(_){radioButtonMode=_;}},\n expanded: {get: function(){return expanded;}, set: function(_){expanded=_;}},\n vers: {get: function(){return vers;}, set: function(_){vers=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\nnv.models.line = function() {\n \"use strict\";\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var scatter = nv.models.scatter()\n ;\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 960\n , height = 500\n , container = null\n , strokeWidth = 1.5\n , color = nv.utils.defaultColor() // a function that returns a color\n , getX = function(d) { return d.x } // accessor to get the x value from a data point\n , getY = function(d) { return d.y } // accessor to get the y value from a data point\n , defined = function(d,i) { return !isNaN(getY(d,i)) && getY(d,i) !== null } // allows a line to be not continuous when it is not defined\n , isArea = function(d) { return d.area } // decides if a line is an area or just a line\n , clipEdge = false // if true, masks lines within x and y scale\n , x //can be accessed via chart.xScale()\n , y //can be accessed via chart.yScale()\n , interpolate = \"linear\" // controls the line interpolation\n , duration = 250\n , dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout', 'renderEnd')\n ;\n\n scatter\n .pointSize(16) // default size\n .pointDomain([16,256]) //set to speed up calculation, needs to be unset if there is a custom size accessor\n ;\n\n //============================================================\n\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var x0, y0 //used to store previous scales\n , renderWatch = nv.utils.renderWatch(dispatch, duration)\n ;\n\n //============================================================\n\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(scatter);\n selection.each(function(data) {\n container = d3.select(this);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n nv.utils.initSVG(container);\n\n // Setup Scales\n x = scatter.xScale();\n y = scatter.yScale();\n\n x0 = x0 || x;\n y0 = y0 || y;\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-line').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-line');\n var defsEnter = wrapEnter.append('defs');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-groups');\n gEnter.append('g').attr('class', 'nv-scatterWrap');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n scatter\n .width(availableWidth)\n .height(availableHeight);\n\n var scatterWrap = wrap.select('.nv-scatterWrap');\n scatterWrap.call(scatter);\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-edge-clip-' + scatter.id())\n .append('rect');\n\n wrap.select('#nv-edge-clip-' + scatter.id() + ' rect')\n .attr('width', availableWidth)\n .attr('height', (availableHeight > 0) ? availableHeight : 0);\n\n g .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');\n scatterWrap\n .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');\n\n var groups = wrap.select('.nv-groups').selectAll('.nv-group')\n .data(function(d) { return d }, function(d) { return d.key });\n groups.enter().append('g')\n .style('stroke-opacity', 1e-6)\n .style('stroke-width', function(d) { return d.strokeWidth || strokeWidth })\n .style('fill-opacity', 1e-6);\n\n groups.exit().remove();\n\n groups\n .attr('class', function(d,i) {\n return (d.classed || '') + ' nv-group nv-series-' + i;\n })\n .classed('hover', function(d) { return d.hover })\n .style('fill', function(d,i){ return color(d, i) })\n .style('stroke', function(d,i){ return color(d, i)});\n groups.watchTransition(renderWatch, 'line: groups')\n .style('stroke-opacity', 1)\n .style('fill-opacity', function(d) { return d.fillOpacity || .5});\n\n var areaPaths = groups.selectAll('path.nv-area')\n .data(function(d) { return isArea(d) ? [d] : [] }); // this is done differently than lines because I need to check if series is an area\n areaPaths.enter().append('path')\n .attr('class', 'nv-area')\n .attr('d', function(d) {\n return d3.svg.area()\n .interpolate(interpolate)\n .defined(defined)\n .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })\n .y0(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })\n .y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })\n //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this\n .apply(this, [d.values])\n });\n groups.exit().selectAll('path.nv-area')\n .remove();\n\n areaPaths.watchTransition(renderWatch, 'line: areaPaths')\n .attr('d', function(d) {\n return d3.svg.area()\n .interpolate(interpolate)\n .defined(defined)\n .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })\n .y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })\n .y1(function(d,i) { return y( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })\n //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this\n .apply(this, [d.values])\n });\n\n var linePaths = groups.selectAll('path.nv-line')\n .data(function(d) { return [d.values] });\n\n linePaths.enter().append('path')\n .attr('class', 'nv-line')\n .attr('d',\n d3.svg.line()\n .interpolate(interpolate)\n .defined(defined)\n .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })\n .y(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })\n );\n\n linePaths.watchTransition(renderWatch, 'line: linePaths')\n .attr('d',\n d3.svg.line()\n .interpolate(interpolate)\n .defined(defined)\n .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })\n .y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })\n );\n\n //store old scales for use in transitions on update\n x0 = x.copy();\n y0 = y.copy();\n });\n renderWatch.renderEnd('line immediate');\n return chart;\n }\n\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.scatter = scatter;\n // Pass through events\n scatter.dispatch.on('elementClick', function(){ dispatch.elementClick.apply(this, arguments); });\n scatter.dispatch.on('elementMouseover', function(){ dispatch.elementMouseover.apply(this, arguments); });\n scatter.dispatch.on('elementMouseout', function(){ dispatch.elementMouseout.apply(this, arguments); });\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n defined: {get: function(){return defined;}, set: function(_){defined=_;}},\n interpolate: {get: function(){return interpolate;}, set: function(_){interpolate=_;}},\n clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n scatter.duration(duration);\n }},\n isArea: {get: function(){return isArea;}, set: function(_){\n isArea = d3.functor(_);\n }},\n x: {get: function(){return getX;}, set: function(_){\n getX = _;\n scatter.x(_);\n }},\n y: {get: function(){return getY;}, set: function(_){\n getY = _;\n scatter.y(_);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n scatter.color(color);\n }}\n });\n\n nv.utils.inheritOptions(chart, scatter);\n nv.utils.initOptions(chart);\n\n return chart;\n};\nnv.models.lineChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var lines = nv.models.line()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , legend = nv.models.legend()\n , interactiveLayer = nv.interactiveGuideline()\n , tooltip = nv.models.tooltip()\n ;\n\n var margin = {top: 30, right: 20, bottom: 50, left: 60}\n , color = nv.utils.defaultColor()\n , width = null\n , height = null\n , showLegend = true\n , showXAxis = true\n , showYAxis = true\n , rightAlignYAxis = false\n , useInteractiveGuideline = false\n , x\n , y\n , state = nv.utils.state()\n , defaultState = null\n , noData = null\n , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd')\n , duration = 250\n ;\n\n // set options on sub-objects for this chart\n xAxis.orient('bottom').tickPadding(7);\n yAxis.orient(rightAlignYAxis ? 'right' : 'left');\n tooltip.valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n }).headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n });\n\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled })\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.active !== undefined)\n data.forEach(function(series,i) {\n series.disabled = !state.active[i];\n });\n }\n };\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(lines);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() {\n if (duration === 0)\n container.call(chart);\n else\n container.transition().duration(duration).call(chart)\n };\n chart.container = this;\n\n state\n .setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n // DEPRECATED set state.disableddisabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display noData message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n\n // Setup Scales\n x = lines.xScale();\n y = lines.yScale();\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-lineChart').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g');\n var g = wrap.select('g');\n\n gEnter.append(\"rect\").style(\"opacity\",0);\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y nv-axis');\n gEnter.append('g').attr('class', 'nv-linesWrap');\n gEnter.append('g').attr('class', 'nv-legendWrap');\n gEnter.append('g').attr('class', 'nv-interactive');\n\n g.select(\"rect\")\n .attr(\"width\",availableWidth)\n .attr(\"height\",(availableHeight > 0) ? availableHeight : 0);\n\n // Legend\n if (showLegend) {\n legend.width(availableWidth);\n\n g.select('.nv-legendWrap')\n .datum(data)\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n wrap.select('.nv-legendWrap')\n .attr('transform', 'translate(0,' + (-margin.top) +')')\n }\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n if (rightAlignYAxis) {\n g.select(\".nv-y.nv-axis\")\n .attr(\"transform\", \"translate(\" + availableWidth + \",0)\");\n }\n\n //Set up interactive layer\n if (useInteractiveGuideline) {\n interactiveLayer\n .width(availableWidth)\n .height(availableHeight)\n .margin({left:margin.left, top:margin.top})\n .svgContainer(container)\n .xScale(x);\n wrap.select(\".nv-interactive\").call(interactiveLayer);\n }\n\n lines\n .width(availableWidth)\n .height(availableHeight)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled }));\n\n\n var linesWrap = g.select('.nv-linesWrap')\n .datum(data.filter(function(d) { return !d.disabled }));\n\n linesWrap.call(lines);\n\n // Setup Axes\n if (showXAxis) {\n xAxis\n .scale(x)\n ._ticks(nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight, 0);\n\n g.select('.nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y.range()[0] + ')');\n g.select('.nv-x.nv-axis')\n .call(xAxis);\n }\n\n if (showYAxis) {\n yAxis\n .scale(y)\n ._ticks(nv.utils.calcTicksY(availableHeight/36, data) )\n .tickSize( -availableWidth, 0);\n\n g.select('.nv-y.nv-axis')\n .call(yAxis);\n }\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState)\n state[key] = newState[key];\n dispatch.stateChange(state);\n chart.update();\n });\n\n interactiveLayer.dispatch.on('elementMousemove', function(e) {\n lines.clearHighlights();\n var singlePoint, pointIndex, pointXLocation, allData = [];\n data\n .filter(function(series, i) {\n series.seriesIndex = i;\n return !series.disabled;\n })\n .forEach(function(series,i) {\n pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());\n var point = series.values[pointIndex];\n var pointYValue = chart.y()(point, pointIndex);\n if (pointYValue != null) {\n lines.highlightPoint(i, pointIndex, true);\n }\n if (point === undefined) return;\n if (singlePoint === undefined) singlePoint = point;\n if (pointXLocation === undefined) pointXLocation = chart.xScale()(chart.x()(point,pointIndex));\n allData.push({\n key: series.key,\n value: pointYValue,\n color: color(series,series.seriesIndex)\n });\n });\n //Highlight the tooltip entry based on which point the mouse is closest to.\n if (allData.length > 2) {\n var yValue = chart.yScale().invert(e.mouseY);\n var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);\n var threshold = 0.03 * domainExtent;\n var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);\n if (indexToHighlight !== null)\n allData[indexToHighlight].highlight = true;\n }\n\n var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));\n interactiveLayer.tooltip\n .position({left: e.mouseX + margin.left, top: e.mouseY + margin.top})\n .chartContainer(that.parentNode)\n .valueFormatter(function(d,i) {\n return d == null ? \"N/A\" : yAxis.tickFormat()(d);\n })\n .data({\n value: xValue,\n index: pointIndex,\n series: allData\n })();\n\n interactiveLayer.renderGuideLine(pointXLocation);\n\n });\n\n interactiveLayer.dispatch.on('elementClick', function(e) {\n var pointXLocation, allData = [];\n\n data.filter(function(series, i) {\n series.seriesIndex = i;\n return !series.disabled;\n }).forEach(function(series) {\n var pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());\n var point = series.values[pointIndex];\n if (typeof point === 'undefined') return;\n if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));\n var yPos = chart.yScale()(chart.y()(point,pointIndex));\n allData.push({\n point: point,\n pointIndex: pointIndex,\n pos: [pointXLocation, yPos],\n seriesIndex: series.seriesIndex,\n series: series\n });\n });\n\n lines.dispatch.elementClick(allData);\n });\n\n interactiveLayer.dispatch.on(\"elementMouseout\",function(e) {\n lines.clearHighlights();\n });\n\n dispatch.on('changeState', function(e) {\n if (typeof e.disabled !== 'undefined' && data.length === e.disabled.length) {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n\n state.disabled = e.disabled;\n }\n\n chart.update();\n });\n\n });\n\n renderWatch.renderEnd('lineChart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n lines.dispatch.on('elementMouseover.tooltip', function(evt) {\n tooltip.data(evt).position(evt.pos).hidden(false);\n });\n\n lines.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.lines = lines;\n chart.legend = legend;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.interactiveLayer = interactiveLayer;\n chart.tooltip = tooltip;\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n lines.duration(duration);\n xAxis.duration(duration);\n yAxis.duration(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n lines.color(color);\n }},\n rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){\n rightAlignYAxis = _;\n yAxis.orient( rightAlignYAxis ? 'right' : 'left');\n }},\n useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){\n useInteractiveGuideline = _;\n if (useInteractiveGuideline) {\n lines.interactive(false);\n lines.useVoronoi(false);\n }\n }}\n });\n\n nv.utils.inheritOptions(chart, lines);\n nv.utils.initOptions(chart);\n\n return chart;\n};\nnv.models.linePlusBarChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var lines = nv.models.line()\n , lines2 = nv.models.line()\n , bars = nv.models.historicalBar()\n , bars2 = nv.models.historicalBar()\n , xAxis = nv.models.axis()\n , x2Axis = nv.models.axis()\n , y1Axis = nv.models.axis()\n , y2Axis = nv.models.axis()\n , y3Axis = nv.models.axis()\n , y4Axis = nv.models.axis()\n , legend = nv.models.legend()\n , brush = d3.svg.brush()\n , tooltip = nv.models.tooltip()\n ;\n\n var margin = {top: 30, right: 30, bottom: 30, left: 60}\n , margin2 = {top: 0, right: 30, bottom: 20, left: 60}\n , width = null\n , height = null\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , color = nv.utils.defaultColor()\n , showLegend = true\n , focusEnable = true\n , focusShowAxisY = false\n , focusShowAxisX = true\n , focusHeight = 50\n , extent\n , brushExtent = null\n , x\n , x2\n , y1\n , y2\n , y3\n , y4\n , noData = null\n , dispatch = d3.dispatch('brush', 'stateChange', 'changeState')\n , transitionDuration = 0\n , state = nv.utils.state()\n , defaultState = null\n , legendLeftAxisHint = ' (left axis)'\n , legendRightAxisHint = ' (right axis)'\n ;\n\n lines.clipEdge(true);\n lines2.interactive(false);\n xAxis.orient('bottom').tickPadding(5);\n y1Axis.orient('left');\n y2Axis.orient('right');\n x2Axis.orient('bottom').tickPadding(5);\n y3Axis.orient('left');\n y4Axis.orient('right');\n\n tooltip.headerEnabled(true).headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n });\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled })\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.active !== undefined)\n data.forEach(function(series,i) {\n series.disabled = !state.active[i];\n });\n }\n };\n\n function chart(selection) {\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight1 = nv.utils.availableHeight(height, container, margin)\n - (focusEnable ? focusHeight : 0),\n availableHeight2 = focusHeight - margin2.top - margin2.bottom;\n\n chart.update = function() { container.transition().duration(transitionDuration).call(chart); };\n chart.container = this;\n\n state\n .setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n // DEPRECATED set state.disableddisabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n var dataBars = data.filter(function(d) { return !d.disabled && d.bar });\n var dataLines = data.filter(function(d) { return !d.bar }); // removed the !d.disabled clause here to fix Issue #240\n\n x = bars.xScale();\n x2 = x2Axis.scale();\n y1 = bars.yScale();\n y2 = lines.yScale();\n y3 = bars2.yScale();\n y4 = lines2.yScale();\n\n var series1 = data\n .filter(function(d) { return !d.disabled && d.bar })\n .map(function(d) {\n return d.values.map(function(d,i) {\n return { x: getX(d,i), y: getY(d,i) }\n })\n });\n\n var series2 = data\n .filter(function(d) { return !d.disabled && !d.bar })\n .map(function(d) {\n return d.values.map(function(d,i) {\n return { x: getX(d,i), y: getY(d,i) }\n })\n });\n\n x.range([0, availableWidth]);\n\n x2 .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))\n .range([0, availableWidth]);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-linePlusBar').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-linePlusBar').append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-legendWrap');\n\n // this is the main chart\n var focusEnter = gEnter.append('g').attr('class', 'nv-focus');\n focusEnter.append('g').attr('class', 'nv-x nv-axis');\n focusEnter.append('g').attr('class', 'nv-y1 nv-axis');\n focusEnter.append('g').attr('class', 'nv-y2 nv-axis');\n focusEnter.append('g').attr('class', 'nv-barsWrap');\n focusEnter.append('g').attr('class', 'nv-linesWrap');\n\n // context chart is where you can focus in\n var contextEnter = gEnter.append('g').attr('class', 'nv-context');\n contextEnter.append('g').attr('class', 'nv-x nv-axis');\n contextEnter.append('g').attr('class', 'nv-y1 nv-axis');\n contextEnter.append('g').attr('class', 'nv-y2 nv-axis');\n contextEnter.append('g').attr('class', 'nv-barsWrap');\n contextEnter.append('g').attr('class', 'nv-linesWrap');\n contextEnter.append('g').attr('class', 'nv-brushBackground');\n contextEnter.append('g').attr('class', 'nv-x nv-brush');\n\n //============================================================\n // Legend\n //------------------------------------------------------------\n\n if (showLegend) {\n var legendWidth = legend.align() ? availableWidth / 2 : availableWidth;\n var legendXPosition = legend.align() ? legendWidth : 0;\n\n legend.width(legendWidth);\n\n g.select('.nv-legendWrap')\n .datum(data.map(function(series) {\n series.originalKey = series.originalKey === undefined ? series.key : series.originalKey;\n series.key = series.originalKey + (series.bar ? legendLeftAxisHint : legendRightAxisHint);\n return series;\n }))\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n // FIXME: shouldn't this be \"- (focusEnabled ? focusHeight : 0)\"?\n availableHeight1 = nv.utils.availableHeight(height, container, margin) - focusHeight;\n }\n\n g.select('.nv-legendWrap')\n .attr('transform', 'translate(' + legendXPosition + ',' + (-margin.top) +')');\n }\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n //============================================================\n // Context chart (focus chart) components\n //------------------------------------------------------------\n\n // hide or show the focus context chart\n g.select('.nv-context').style('display', focusEnable ? 'initial' : 'none');\n\n bars2\n .width(availableWidth)\n .height(availableHeight2)\n .color(data.map(function (d, i) {\n return d.color || color(d, i);\n }).filter(function (d, i) {\n return !data[i].disabled && data[i].bar\n }));\n lines2\n .width(availableWidth)\n .height(availableHeight2)\n .color(data.map(function (d, i) {\n return d.color || color(d, i);\n }).filter(function (d, i) {\n return !data[i].disabled && !data[i].bar\n }));\n\n var bars2Wrap = g.select('.nv-context .nv-barsWrap')\n .datum(dataBars.length ? dataBars : [\n {values: []}\n ]);\n var lines2Wrap = g.select('.nv-context .nv-linesWrap')\n .datum(!dataLines[0].disabled ? dataLines : [\n {values: []}\n ]);\n\n g.select('.nv-context')\n .attr('transform', 'translate(0,' + ( availableHeight1 + margin.bottom + margin2.top) + ')');\n\n bars2Wrap.transition().call(bars2);\n lines2Wrap.transition().call(lines2);\n\n // context (focus chart) axis controls\n if (focusShowAxisX) {\n x2Axis\n ._ticks( nv.utils.calcTicksX(availableWidth / 100, data))\n .tickSize(-availableHeight2, 0);\n g.select('.nv-context .nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y3.range()[0] + ')');\n g.select('.nv-context .nv-x.nv-axis').transition()\n .call(x2Axis);\n }\n\n if (focusShowAxisY) {\n y3Axis\n .scale(y3)\n ._ticks( availableHeight2 / 36 )\n .tickSize( -availableWidth, 0);\n y4Axis\n .scale(y4)\n ._ticks( availableHeight2 / 36 )\n .tickSize(dataBars.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none\n\n g.select('.nv-context .nv-y3.nv-axis')\n .style('opacity', dataBars.length ? 1 : 0)\n .attr('transform', 'translate(0,' + x2.range()[0] + ')');\n g.select('.nv-context .nv-y2.nv-axis')\n .style('opacity', dataLines.length ? 1 : 0)\n .attr('transform', 'translate(' + x2.range()[1] + ',0)');\n\n g.select('.nv-context .nv-y1.nv-axis').transition()\n .call(y3Axis);\n g.select('.nv-context .nv-y2.nv-axis').transition()\n .call(y4Axis);\n }\n\n // Setup Brush\n brush.x(x2).on('brush', onBrush);\n\n if (brushExtent) brush.extent(brushExtent);\n\n var brushBG = g.select('.nv-brushBackground').selectAll('g')\n .data([brushExtent || brush.extent()]);\n\n var brushBGenter = brushBG.enter()\n .append('g');\n\n brushBGenter.append('rect')\n .attr('class', 'left')\n .attr('x', 0)\n .attr('y', 0)\n .attr('height', availableHeight2);\n\n brushBGenter.append('rect')\n .attr('class', 'right')\n .attr('x', 0)\n .attr('y', 0)\n .attr('height', availableHeight2);\n\n var gBrush = g.select('.nv-x.nv-brush')\n .call(brush);\n gBrush.selectAll('rect')\n //.attr('y', -5)\n .attr('height', availableHeight2);\n gBrush.selectAll('.resize').append('path').attr('d', resizePath);\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState)\n state[key] = newState[key];\n dispatch.stateChange(state);\n chart.update();\n });\n\n // Update chart from a state object passed to event handler\n dispatch.on('changeState', function(e) {\n if (typeof e.disabled !== 'undefined') {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n state.disabled = e.disabled;\n }\n chart.update();\n });\n\n //============================================================\n // Functions\n //------------------------------------------------------------\n\n // Taken from crossfilter (http://square.github.com/crossfilter/)\n function resizePath(d) {\n var e = +(d == 'e'),\n x = e ? 1 : -1,\n y = availableHeight2 / 3;\n return 'M' + (.5 * x) + ',' + y\n + 'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6)\n + 'V' + (2 * y - 6)\n + 'A6,6 0 0 ' + e + ' ' + (.5 * x) + ',' + (2 * y)\n + 'Z'\n + 'M' + (2.5 * x) + ',' + (y + 8)\n + 'V' + (2 * y - 8)\n + 'M' + (4.5 * x) + ',' + (y + 8)\n + 'V' + (2 * y - 8);\n }\n\n\n function updateBrushBG() {\n if (!brush.empty()) brush.extent(brushExtent);\n brushBG\n .data([brush.empty() ? x2.domain() : brushExtent])\n .each(function(d,i) {\n var leftWidth = x2(d[0]) - x2.range()[0],\n rightWidth = x2.range()[1] - x2(d[1]);\n d3.select(this).select('.left')\n .attr('width', leftWidth < 0 ? 0 : leftWidth);\n\n d3.select(this).select('.right')\n .attr('x', x2(d[1]))\n .attr('width', rightWidth < 0 ? 0 : rightWidth);\n });\n }\n\n function onBrush() {\n brushExtent = brush.empty() ? null : brush.extent();\n extent = brush.empty() ? x2.domain() : brush.extent();\n dispatch.brush({extent: extent, brush: brush});\n updateBrushBG();\n\n // Prepare Main (Focus) Bars and Lines\n bars\n .width(availableWidth)\n .height(availableHeight1)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled && data[i].bar }));\n\n lines\n .width(availableWidth)\n .height(availableHeight1)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled && !data[i].bar }));\n\n var focusBarsWrap = g.select('.nv-focus .nv-barsWrap')\n .datum(!dataBars.length ? [{values:[]}] :\n dataBars\n .map(function(d,i) {\n return {\n key: d.key,\n values: d.values.filter(function(d,i) {\n return bars.x()(d,i) >= extent[0] && bars.x()(d,i) <= extent[1];\n })\n }\n })\n );\n\n var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')\n .datum(dataLines[0].disabled ? [{values:[]}] :\n dataLines\n .map(function(d,i) {\n return {\n area: d.area,\n fillOpacity: d.fillOpacity,\n key: d.key,\n values: d.values.filter(function(d,i) {\n return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];\n })\n }\n })\n );\n\n // Update Main (Focus) X Axis\n if (dataBars.length) {\n x = bars.xScale();\n } else {\n x = lines.xScale();\n }\n\n xAxis\n .scale(x)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight1, 0);\n\n xAxis.domain([Math.ceil(extent[0]), Math.floor(extent[1])]);\n\n g.select('.nv-x.nv-axis').transition().duration(transitionDuration)\n .call(xAxis);\n\n // Update Main (Focus) Bars and Lines\n focusBarsWrap.transition().duration(transitionDuration).call(bars);\n focusLinesWrap.transition().duration(transitionDuration).call(lines);\n\n // Setup and Update Main (Focus) Y Axes\n g.select('.nv-focus .nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y1.range()[0] + ')');\n\n y1Axis\n .scale(y1)\n ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )\n .tickSize(-availableWidth, 0);\n y2Axis\n .scale(y2)\n ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )\n .tickSize(dataBars.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none\n\n g.select('.nv-focus .nv-y1.nv-axis')\n .style('opacity', dataBars.length ? 1 : 0);\n g.select('.nv-focus .nv-y2.nv-axis')\n .style('opacity', dataLines.length && !dataLines[0].disabled ? 1 : 0)\n .attr('transform', 'translate(' + x.range()[1] + ',0)');\n\n g.select('.nv-focus .nv-y1.nv-axis').transition().duration(transitionDuration)\n .call(y1Axis);\n g.select('.nv-focus .nv-y2.nv-axis').transition().duration(transitionDuration)\n .call(y2Axis);\n }\n\n onBrush();\n\n });\n\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n lines.dispatch.on('elementMouseover.tooltip', function(evt) {\n tooltip\n .duration(100)\n .valueFormatter(function(d, i) {\n return y2Axis.tickFormat()(d, i);\n })\n .data(evt)\n .position(evt.pos)\n .hidden(false);\n });\n\n lines.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n\n bars.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt.value = chart.x()(evt.data);\n evt['series'] = {\n value: chart.y()(evt.data),\n color: evt.color\n };\n tooltip\n .duration(0)\n .valueFormatter(function(d, i) {\n return y1Axis.tickFormat()(d, i);\n })\n .data(evt)\n .hidden(false);\n });\n\n bars.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n\n bars.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.legend = legend;\n chart.lines = lines;\n chart.lines2 = lines2;\n chart.bars = bars;\n chart.bars2 = bars2;\n chart.xAxis = xAxis;\n chart.x2Axis = x2Axis;\n chart.y1Axis = y1Axis;\n chart.y2Axis = y2Axis;\n chart.y3Axis = y3Axis;\n chart.y4Axis = y4Axis;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n brushExtent: {get: function(){return brushExtent;}, set: function(_){brushExtent=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n focusEnable: {get: function(){return focusEnable;}, set: function(_){focusEnable=_;}},\n focusHeight: {get: function(){return focusHeight;}, set: function(_){focusHeight=_;}},\n focusShowAxisX: {get: function(){return focusShowAxisX;}, set: function(_){focusShowAxisX=_;}},\n focusShowAxisY: {get: function(){return focusShowAxisY;}, set: function(_){focusShowAxisY=_;}},\n legendLeftAxisHint: {get: function(){return legendLeftAxisHint;}, set: function(_){legendLeftAxisHint=_;}},\n legendRightAxisHint: {get: function(){return legendRightAxisHint;}, set: function(_){legendRightAxisHint=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return transitionDuration;}, set: function(_){\n transitionDuration = _;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n }},\n x: {get: function(){return getX;}, set: function(_){\n getX = _;\n lines.x(_);\n lines2.x(_);\n bars.x(_);\n bars2.x(_);\n }},\n y: {get: function(){return getY;}, set: function(_){\n getY = _;\n lines.y(_);\n lines2.y(_);\n bars.y(_);\n bars2.y(_);\n }}\n });\n\n nv.utils.inheritOptions(chart, lines);\n nv.utils.initOptions(chart);\n\n return chart;\n};\nnv.models.lineWithFocusChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var lines = nv.models.line()\n , lines2 = nv.models.line()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , x2Axis = nv.models.axis()\n , y2Axis = nv.models.axis()\n , legend = nv.models.legend()\n , brush = d3.svg.brush()\n , tooltip = nv.models.tooltip()\n , interactiveLayer = nv.interactiveGuideline()\n ;\n\n var margin = {top: 30, right: 30, bottom: 30, left: 60}\n , margin2 = {top: 0, right: 30, bottom: 20, left: 60}\n , color = nv.utils.defaultColor()\n , width = null\n , height = null\n , height2 = 50\n , useInteractiveGuideline = false\n , x\n , y\n , x2\n , y2\n , showLegend = true\n , brushExtent = null\n , noData = null\n , dispatch = d3.dispatch('brush', 'stateChange', 'changeState')\n , transitionDuration = 250\n , state = nv.utils.state()\n , defaultState = null\n ;\n\n lines.clipEdge(true).duration(0);\n lines2.interactive(false);\n xAxis.orient('bottom').tickPadding(5);\n yAxis.orient('left');\n x2Axis.orient('bottom').tickPadding(5);\n y2Axis.orient('left');\n\n tooltip.valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n }).headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n });\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled })\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.active !== undefined)\n data.forEach(function(series,i) {\n series.disabled = !state.active[i];\n });\n }\n };\n\n function chart(selection) {\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight1 = nv.utils.availableHeight(height, container, margin) - height2,\n availableHeight2 = height2 - margin2.top - margin2.bottom;\n\n chart.update = function() { container.transition().duration(transitionDuration).call(chart) };\n chart.container = this;\n\n state\n .setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n // DEPRECATED set state.disableddisabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = lines.xScale();\n y = lines.yScale();\n x2 = lines2.xScale();\n y2 = lines2.yScale();\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-lineWithFocusChart').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineWithFocusChart').append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-legendWrap');\n\n var focusEnter = gEnter.append('g').attr('class', 'nv-focus');\n focusEnter.append('g').attr('class', 'nv-x nv-axis');\n focusEnter.append('g').attr('class', 'nv-y nv-axis');\n focusEnter.append('g').attr('class', 'nv-linesWrap');\n focusEnter.append('g').attr('class', 'nv-interactive');\n\n var contextEnter = gEnter.append('g').attr('class', 'nv-context');\n contextEnter.append('g').attr('class', 'nv-x nv-axis');\n contextEnter.append('g').attr('class', 'nv-y nv-axis');\n contextEnter.append('g').attr('class', 'nv-linesWrap');\n contextEnter.append('g').attr('class', 'nv-brushBackground');\n contextEnter.append('g').attr('class', 'nv-x nv-brush');\n\n // Legend\n if (showLegend) {\n legend.width(availableWidth);\n\n g.select('.nv-legendWrap')\n .datum(data)\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight1 = nv.utils.availableHeight(height, container, margin) - height2;\n }\n\n g.select('.nv-legendWrap')\n .attr('transform', 'translate(0,' + (-margin.top) +')')\n }\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n \n //Set up interactive layer\n if (useInteractiveGuideline) {\n interactiveLayer\n .width(availableWidth)\n .height(availableHeight1)\n .margin({left:margin.left, top:margin.top})\n .svgContainer(container)\n .xScale(x);\n wrap.select(\".nv-interactive\").call(interactiveLayer);\n }\n\n // Main Chart Component(s)\n lines\n .width(availableWidth)\n .height(availableHeight1)\n .color(\n data\n .map(function(d,i) {\n return d.color || color(d, i);\n })\n .filter(function(d,i) {\n return !data[i].disabled;\n })\n );\n\n lines2\n .defined(lines.defined())\n .width(availableWidth)\n .height(availableHeight2)\n .color(\n data\n .map(function(d,i) {\n return d.color || color(d, i);\n })\n .filter(function(d,i) {\n return !data[i].disabled;\n })\n );\n\n g.select('.nv-context')\n .attr('transform', 'translate(0,' + ( availableHeight1 + margin.bottom + margin2.top) + ')')\n\n var contextLinesWrap = g.select('.nv-context .nv-linesWrap')\n .datum(data.filter(function(d) { return !d.disabled }))\n\n d3.transition(contextLinesWrap).call(lines2);\n\n // Setup Main (Focus) Axes\n xAxis\n .scale(x)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight1, 0);\n\n yAxis\n .scale(y)\n ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )\n .tickSize( -availableWidth, 0);\n\n g.select('.nv-focus .nv-x.nv-axis')\n .attr('transform', 'translate(0,' + availableHeight1 + ')');\n\n // Setup Brush\n brush\n .x(x2)\n .on('brush', function() {\n onBrush();\n });\n\n if (brushExtent) brush.extent(brushExtent);\n\n var brushBG = g.select('.nv-brushBackground').selectAll('g')\n .data([brushExtent || brush.extent()])\n\n var brushBGenter = brushBG.enter()\n .append('g');\n\n brushBGenter.append('rect')\n .attr('class', 'left')\n .attr('x', 0)\n .attr('y', 0)\n .attr('height', availableHeight2);\n\n brushBGenter.append('rect')\n .attr('class', 'right')\n .attr('x', 0)\n .attr('y', 0)\n .attr('height', availableHeight2);\n\n var gBrush = g.select('.nv-x.nv-brush')\n .call(brush);\n gBrush.selectAll('rect')\n .attr('height', availableHeight2);\n gBrush.selectAll('.resize').append('path').attr('d', resizePath);\n\n onBrush();\n\n // Setup Secondary (Context) Axes\n x2Axis\n .scale(x2)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight2, 0);\n\n g.select('.nv-context .nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y2.range()[0] + ')');\n d3.transition(g.select('.nv-context .nv-x.nv-axis'))\n .call(x2Axis);\n\n y2Axis\n .scale(y2)\n ._ticks( nv.utils.calcTicksY(availableHeight2/36, data) )\n .tickSize( -availableWidth, 0);\n\n d3.transition(g.select('.nv-context .nv-y.nv-axis'))\n .call(y2Axis);\n\n g.select('.nv-context .nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y2.range()[0] + ')');\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState)\n state[key] = newState[key];\n dispatch.stateChange(state);\n chart.update();\n });\n\n interactiveLayer.dispatch.on('elementMousemove', function(e) {\n lines.clearHighlights();\n var singlePoint, pointIndex, pointXLocation, allData = [];\n data\n .filter(function(series, i) {\n series.seriesIndex = i;\n return !series.disabled;\n })\n .forEach(function(series,i) {\n var extent = brush.empty() ? x2.domain() : brush.extent();\n var currentValues = series.values.filter(function(d,i) {\n return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];\n });\n \n pointIndex = nv.interactiveBisect(currentValues, e.pointXValue, lines.x());\n var point = currentValues[pointIndex];\n var pointYValue = chart.y()(point, pointIndex);\n if (pointYValue != null) {\n lines.highlightPoint(i, pointIndex, true);\n }\n if (point === undefined) return;\n if (singlePoint === undefined) singlePoint = point;\n if (pointXLocation === undefined) pointXLocation = chart.xScale()(chart.x()(point,pointIndex));\n allData.push({\n key: series.key,\n value: chart.y()(point, pointIndex),\n color: color(series,series.seriesIndex)\n });\n });\n //Highlight the tooltip entry based on which point the mouse is closest to.\n if (allData.length > 2) {\n var yValue = chart.yScale().invert(e.mouseY);\n var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);\n var threshold = 0.03 * domainExtent;\n var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);\n if (indexToHighlight !== null)\n allData[indexToHighlight].highlight = true;\n }\n\n var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));\n interactiveLayer.tooltip\n .position({left: e.mouseX + margin.left, top: e.mouseY + margin.top})\n .chartContainer(that.parentNode)\n .valueFormatter(function(d,i) {\n return d == null ? \"N/A\" : yAxis.tickFormat()(d);\n })\n .data({\n value: xValue,\n index: pointIndex,\n series: allData\n })();\n\n interactiveLayer.renderGuideLine(pointXLocation);\n\n });\n\n interactiveLayer.dispatch.on(\"elementMouseout\",function(e) {\n lines.clearHighlights();\n });\n\n dispatch.on('changeState', function(e) {\n if (typeof e.disabled !== 'undefined') {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n }\n chart.update();\n });\n\n //============================================================\n // Functions\n //------------------------------------------------------------\n\n // Taken from crossfilter (http://square.github.com/crossfilter/)\n function resizePath(d) {\n var e = +(d == 'e'),\n x = e ? 1 : -1,\n y = availableHeight2 / 3;\n return 'M' + (.5 * x) + ',' + y\n + 'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6)\n + 'V' + (2 * y - 6)\n + 'A6,6 0 0 ' + e + ' ' + (.5 * x) + ',' + (2 * y)\n + 'Z'\n + 'M' + (2.5 * x) + ',' + (y + 8)\n + 'V' + (2 * y - 8)\n + 'M' + (4.5 * x) + ',' + (y + 8)\n + 'V' + (2 * y - 8);\n }\n\n\n function updateBrushBG() {\n if (!brush.empty()) brush.extent(brushExtent);\n brushBG\n .data([brush.empty() ? x2.domain() : brushExtent])\n .each(function(d,i) {\n var leftWidth = x2(d[0]) - x.range()[0],\n rightWidth = availableWidth - x2(d[1]);\n d3.select(this).select('.left')\n .attr('width', leftWidth < 0 ? 0 : leftWidth);\n\n d3.select(this).select('.right')\n .attr('x', x2(d[1]))\n .attr('width', rightWidth < 0 ? 0 : rightWidth);\n });\n }\n\n\n function onBrush() {\n brushExtent = brush.empty() ? null : brush.extent();\n var extent = brush.empty() ? x2.domain() : brush.extent();\n\n //The brush extent cannot be less than one. If it is, don't update the line chart.\n if (Math.abs(extent[0] - extent[1]) <= 1) {\n return;\n }\n\n dispatch.brush({extent: extent, brush: brush});\n\n\n updateBrushBG();\n\n // Update Main (Focus)\n var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')\n .datum(\n data\n .filter(function(d) { return !d.disabled })\n .map(function(d,i) {\n return {\n key: d.key,\n area: d.area,\n values: d.values.filter(function(d,i) {\n return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];\n })\n }\n })\n );\n focusLinesWrap.transition().duration(transitionDuration).call(lines);\n\n\n // Update Main (Focus) Axes\n g.select('.nv-focus .nv-x.nv-axis').transition().duration(transitionDuration)\n .call(xAxis);\n g.select('.nv-focus .nv-y.nv-axis').transition().duration(transitionDuration)\n .call(yAxis);\n }\n });\n\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n lines.dispatch.on('elementMouseover.tooltip', function(evt) {\n tooltip.data(evt).position(evt.pos).hidden(false);\n });\n\n lines.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.legend = legend;\n chart.lines = lines;\n chart.lines2 = lines2;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.x2Axis = x2Axis;\n chart.y2Axis = y2Axis;\n chart.interactiveLayer = interactiveLayer;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n focusHeight: {get: function(){return height2;}, set: function(_){height2=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n brushExtent: {get: function(){return brushExtent;}, set: function(_){brushExtent=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n // line color is handled above?\n }},\n interpolate: {get: function(){return lines.interpolate();}, set: function(_){\n lines.interpolate(_);\n lines2.interpolate(_);\n }},\n xTickFormat: {get: function(){return xAxis.tickFormat();}, set: function(_){\n xAxis.tickFormat(_);\n x2Axis.tickFormat(_);\n }},\n yTickFormat: {get: function(){return yAxis.tickFormat();}, set: function(_){\n yAxis.tickFormat(_);\n y2Axis.tickFormat(_);\n }},\n duration: {get: function(){return transitionDuration;}, set: function(_){\n transitionDuration=_;\n yAxis.duration(transitionDuration);\n y2Axis.duration(transitionDuration);\n xAxis.duration(transitionDuration);\n x2Axis.duration(transitionDuration);\n }},\n x: {get: function(){return lines.x();}, set: function(_){\n lines.x(_);\n lines2.x(_);\n }},\n y: {get: function(){return lines.y();}, set: function(_){\n lines.y(_);\n lines2.y(_);\n }},\n useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){\n useInteractiveGuideline = _;\n if (useInteractiveGuideline) {\n lines.interactive(false);\n lines.useVoronoi(false);\n }\n }}\n });\n\n nv.utils.inheritOptions(chart, lines);\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\nnv.models.multiBar = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 960\n , height = 500\n , x = d3.scale.ordinal()\n , y = d3.scale.linear()\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , container = null\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove\n , clipEdge = true\n , stacked = false\n , stackOffset = 'zero' // options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function\n , color = nv.utils.defaultColor()\n , hideable = false\n , barColor = null // adding the ability to set the color for each rather than the whole group\n , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled\n , duration = 500\n , xDomain\n , yDomain\n , xRange\n , yRange\n , groupSpacing = 0.1\n , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var x0, y0 //used to store previous scales\n , renderWatch = nv.utils.renderWatch(dispatch, duration)\n ;\n\n var last_datalength = 0;\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right,\n availableHeight = height - margin.top - margin.bottom;\n\n container = d3.select(this);\n nv.utils.initSVG(container);\n var nonStackableCount = 0;\n // This function defines the requirements for render complete\n var endFn = function(d, i) {\n if (d.series === data.length - 1 && i === data[0].values.length - 1)\n return true;\n return false;\n };\n\n if(hideable && data.length) hideable = [{\n values: data[0].values.map(function(d) {\n return {\n x: d.x,\n y: 0,\n series: d.series,\n size: 0.01\n };}\n )}];\n\n if (stacked) {\n var parsed = d3.layout.stack()\n .offset(stackOffset)\n .values(function(d){ return d.values })\n .y(getY)\n (!data.length && hideable ? hideable : data);\n\n parsed.forEach(function(series, i){\n // if series is non-stackable, use un-parsed data\n if (series.nonStackable) {\n data[i].nonStackableSeries = nonStackableCount++; \n parsed[i] = data[i];\n } else {\n // don't stack this seires on top of the nonStackable seriees \n if (i > 0 && parsed[i - 1].nonStackable){\n parsed[i].values.map(function(d,j){\n d.y0 -= parsed[i - 1].values[j].y;\n d.y1 = d.y0 + d.y;\n });\n }\n }\n });\n data = parsed;\n }\n //add series index and key to each data point for reference\n data.forEach(function(series, i) {\n series.values.forEach(function(point) {\n point.series = i;\n point.key = series.key;\n });\n });\n\n // HACK for negative value stacking\n if (stacked) {\n data[0].values.map(function(d,i) {\n var posBase = 0, negBase = 0;\n data.map(function(d, idx) {\n if (!data[idx].nonStackable) {\n var f = d.values[i]\n f.size = Math.abs(f.y);\n if (f.y<0) {\n f.y1 = negBase;\n negBase = negBase - f.size;\n } else\n {\n f.y1 = f.size + posBase;\n posBase = posBase + f.size;\n }\n }\n \n });\n });\n }\n // Setup Scales\n // remap and flatten the data for use in calculating the scales' domains\n var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate\n data.map(function(d, idx) {\n return d.values.map(function(d,i) {\n return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1, idx:idx }\n })\n });\n\n x.domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))\n .rangeBands(xRange || [0, availableWidth], groupSpacing);\n\n y.domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) {\n var domain = d.y;\n // increase the domain range if this series is stackable\n if (stacked && !data[d.idx].nonStackable) {\n if (d.y > 0){\n domain = d.y1\n } else {\n domain = d.y1 + d.y\n }\n }\n return domain;\n }).concat(forceY)))\n .range(yRange || [availableHeight, 0]);\n\n // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point\n if (x.domain()[0] === x.domain()[1])\n x.domain()[0] ?\n x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])\n : x.domain([-1,1]);\n\n if (y.domain()[0] === y.domain()[1])\n y.domain()[0] ?\n y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])\n : y.domain([-1,1]);\n\n x0 = x0 || x;\n y0 = y0 || y;\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-multibar').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibar');\n var defsEnter = wrapEnter.append('defs');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-groups');\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-edge-clip-' + id)\n .append('rect');\n wrap.select('#nv-edge-clip-' + id + ' rect')\n .attr('width', availableWidth)\n .attr('height', availableHeight);\n\n g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');\n\n var groups = wrap.select('.nv-groups').selectAll('.nv-group')\n .data(function(d) { return d }, function(d,i) { return i });\n groups.enter().append('g')\n .style('stroke-opacity', 1e-6)\n .style('fill-opacity', 1e-6);\n\n var exitTransition = renderWatch\n .transition(groups.exit().selectAll('rect.nv-bar'), 'multibarExit', Math.min(100, duration))\n .attr('y', function(d, i, j) {\n var yVal = y0(0) || 0;\n if (stacked) {\n if (data[d.series] && !data[d.series].nonStackable) {\n yVal = y0(d.y0);\n }\n }\n return yVal;\n })\n .attr('height', 0)\n .remove();\n if (exitTransition.delay)\n exitTransition.delay(function(d,i) {\n var delay = i * (duration / (last_datalength + 1)) - i;\n return delay;\n });\n groups\n .attr('class', function(d,i) { return 'nv-group nv-series-' + i })\n .classed('hover', function(d) { return d.hover })\n .style('fill', function(d,i){ return color(d, i) })\n .style('stroke', function(d,i){ return color(d, i) });\n groups\n .style('stroke-opacity', 1)\n .style('fill-opacity', 0.75);\n\n var bars = groups.selectAll('rect.nv-bar')\n .data(function(d) { return (hideable && !data.length) ? hideable.values : d.values });\n bars.exit().remove();\n\n var barsEnter = bars.enter().append('rect')\n .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})\n .attr('x', function(d,i,j) {\n return stacked && !data[j].nonStackable ? 0 : (j * x.rangeBand() / data.length )\n })\n .attr('y', function(d,i,j) { return y0(stacked && !data[j].nonStackable ? d.y0 : 0) || 0 })\n .attr('height', 0)\n .attr('width', function(d,i,j) { return x.rangeBand() / (stacked && !data[j].nonStackable ? 1 : data.length) })\n .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })\n ;\n bars\n .style('fill', function(d,i,j){ return color(d, j, i); })\n .style('stroke', function(d,i,j){ return color(d, j, i); })\n .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here\n d3.select(this).classed('hover', true);\n dispatch.elementMouseover({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mouseout', function(d,i) {\n d3.select(this).classed('hover', false);\n dispatch.elementMouseout({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mousemove', function(d,i) {\n dispatch.elementMousemove({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('click', function(d,i) {\n dispatch.elementClick({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n d3.event.stopPropagation();\n })\n .on('dblclick', function(d,i) {\n dispatch.elementDblClick({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n d3.event.stopPropagation();\n });\n bars\n .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})\n .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })\n\n if (barColor) {\n if (!disabled) disabled = data.map(function() { return true });\n bars\n .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); })\n .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); });\n }\n\n var barSelection =\n bars.watchTransition(renderWatch, 'multibar', Math.min(250, duration))\n .delay(function(d,i) {\n return i * duration / data[0].values.length;\n });\n if (stacked){\n barSelection\n .attr('y', function(d,i,j) {\n var yVal = 0;\n // if stackable, stack it on top of the previous series\n if (!data[j].nonStackable) {\n yVal = y(d.y1);\n } else {\n if (getY(d,i) < 0){\n yVal = y(0);\n } else {\n if (y(0) - y(getY(d,i)) < -1){\n yVal = y(0) - 1;\n } else {\n yVal = y(getY(d, i)) || 0;\n }\n }\n }\n return yVal;\n })\n .attr('height', function(d,i,j) {\n if (!data[j].nonStackable) {\n return Math.max(Math.abs(y(d.y+d.y0) - y(d.y0)), 1);\n } else {\n return Math.max(Math.abs(y(getY(d,i)) - y(0)),1) || 0;\n }\n })\n .attr('x', function(d,i,j) {\n var width = 0;\n if (data[j].nonStackable) {\n width = d.series * x.rangeBand() / data.length;\n if (data.length !== nonStackableCount){\n width = data[j].nonStackableSeries * x.rangeBand()/(nonStackableCount*2); \n }\n }\n return width;\n })\n .attr('width', function(d,i,j){\n if (!data[j].nonStackable) {\n return x.rangeBand();\n } else {\n // if all series are nonStacable, take the full width\n var width = (x.rangeBand() / nonStackableCount);\n // otherwise, nonStackable graph will be only taking the half-width \n // of the x rangeBand\n if (data.length !== nonStackableCount) {\n width = x.rangeBand()/(nonStackableCount*2);\n }\n return width;\n }\n });\n }\n else {\n barSelection\n .attr('x', function(d,i) {\n return d.series * x.rangeBand() / data.length;\n })\n .attr('width', x.rangeBand() / data.length)\n .attr('y', function(d,i) {\n return getY(d,i) < 0 ?\n y(0) :\n y(0) - y(getY(d,i)) < 1 ?\n y(0) - 1 :\n y(getY(d,i)) || 0;\n })\n .attr('height', function(d,i) {\n return Math.max(Math.abs(y(getY(d,i)) - y(0)),1) || 0;\n });\n }\n\n //store old scales for use in transitions on update\n x0 = x.copy();\n y0 = y.copy();\n\n // keep track of the last data value length for transition calculations\n if (data[0] && data[0].values) {\n last_datalength = data[0].values.length;\n }\n\n });\n\n renderWatch.renderEnd('multibar immediate');\n\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n x: {get: function(){return getX;}, set: function(_){getX=_;}},\n y: {get: function(){return getY;}, set: function(_){getY=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},\n stacked: {get: function(){return stacked;}, set: function(_){stacked=_;}},\n stackOffset: {get: function(){return stackOffset;}, set: function(_){stackOffset=_;}},\n clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},\n disabled: {get: function(){return disabled;}, set: function(_){disabled=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n hideable: {get: function(){return hideable;}, set: function(_){hideable=_;}},\n groupSpacing:{get: function(){return groupSpacing;}, set: function(_){groupSpacing=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }},\n barColor: {get: function(){return barColor;}, set: function(_){\n barColor = _ ? nv.utils.getColor(_) : null;\n }}\n });\n\n nv.utils.initOptions(chart);\n\n return chart;\n};\nnv.models.multiBarChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var multibar = nv.models.multiBar()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , legend = nv.models.legend()\n , controls = nv.models.legend()\n , tooltip = nv.models.tooltip()\n ;\n\n var margin = {top: 30, right: 20, bottom: 50, left: 60}\n , width = null\n , height = null\n , color = nv.utils.defaultColor()\n , showControls = true\n , controlLabels = {}\n , showLegend = true\n , showXAxis = true\n , showYAxis = true\n , rightAlignYAxis = false\n , reduceXTicks = true // if false a tick will show for every data point\n , staggerLabels = false\n , rotateLabels = 0\n , x //can be accessed via chart.xScale()\n , y //can be accessed via chart.yScale()\n , state = nv.utils.state()\n , defaultState = null\n , noData = null\n , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')\n , controlWidth = function() { return showControls ? 180 : 0 }\n , duration = 250\n ;\n\n state.stacked = false // DEPRECATED Maintained for backward compatibility\n\n multibar.stacked(false);\n xAxis\n .orient('bottom')\n .tickPadding(7)\n .showMaxMin(false)\n .tickFormat(function(d) { return d })\n ;\n yAxis\n .orient((rightAlignYAxis) ? 'right' : 'left')\n .tickFormat(d3.format(',.1f'))\n ;\n\n tooltip\n .duration(0)\n .valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n })\n .headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n });\n\n controls.updateState(false);\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch);\n var stacked = false;\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled }),\n stacked: stacked\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.stacked !== undefined)\n stacked = state.stacked;\n if (state.active !== undefined)\n data.forEach(function(series,i) {\n series.disabled = !state.active[i];\n });\n }\n };\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(multibar);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() {\n if (duration === 0)\n container.call(chart);\n else\n container.transition()\n .duration(duration)\n .call(chart);\n };\n chart.container = this;\n\n state\n .setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n // DEPRECATED set state.disableddisabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display noData message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = multibar.xScale();\n y = multibar.yScale();\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-multiBarWithLegend').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarWithLegend').append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y nv-axis');\n gEnter.append('g').attr('class', 'nv-barsWrap');\n gEnter.append('g').attr('class', 'nv-legendWrap');\n gEnter.append('g').attr('class', 'nv-controlsWrap');\n\n // Legend\n if (showLegend) {\n legend.width(availableWidth - controlWidth());\n\n g.select('.nv-legendWrap')\n .datum(data)\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n g.select('.nv-legendWrap')\n .attr('transform', 'translate(' + controlWidth() + ',' + (-margin.top) +')');\n }\n\n // Controls\n if (showControls) {\n var controlsData = [\n { key: controlLabels.grouped || 'Grouped', disabled: multibar.stacked() },\n { key: controlLabels.stacked || 'Stacked', disabled: !multibar.stacked() }\n ];\n\n controls.width(controlWidth()).color(['#444', '#444', '#444']);\n g.select('.nv-controlsWrap')\n .datum(controlsData)\n .attr('transform', 'translate(0,' + (-margin.top) +')')\n .call(controls);\n }\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n if (rightAlignYAxis) {\n g.select(\".nv-y.nv-axis\")\n .attr(\"transform\", \"translate(\" + availableWidth + \",0)\");\n }\n\n // Main Chart Component(s)\n multibar\n .disabled(data.map(function(series) { return series.disabled }))\n .width(availableWidth)\n .height(availableHeight)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled }));\n\n\n var barsWrap = g.select('.nv-barsWrap')\n .datum(data.filter(function(d) { return !d.disabled }));\n\n barsWrap.call(multibar);\n\n // Setup Axes\n if (showXAxis) {\n xAxis\n .scale(x)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight, 0);\n\n g.select('.nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y.range()[0] + ')');\n g.select('.nv-x.nv-axis')\n .call(xAxis);\n\n var xTicks = g.select('.nv-x.nv-axis > g').selectAll('g');\n\n xTicks\n .selectAll('line, text')\n .style('opacity', 1)\n\n if (staggerLabels) {\n var getTranslate = function(x,y) {\n return \"translate(\" + x + \",\" + y + \")\";\n };\n\n var staggerUp = 5, staggerDown = 17; //pixels to stagger by\n // Issue #140\n xTicks\n .selectAll(\"text\")\n .attr('transform', function(d,i,j) {\n return getTranslate(0, (j % 2 == 0 ? staggerUp : staggerDown));\n });\n\n var totalInBetweenTicks = d3.selectAll(\".nv-x.nv-axis .nv-wrap g g text\")[0].length;\n g.selectAll(\".nv-x.nv-axis .nv-axisMaxMin text\")\n .attr(\"transform\", function(d,i) {\n return getTranslate(0, (i === 0 || totalInBetweenTicks % 2 !== 0) ? staggerDown : staggerUp);\n });\n }\n\n if (reduceXTicks)\n xTicks\n .filter(function(d,i) {\n return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;\n })\n .selectAll('text, line')\n .style('opacity', 0);\n\n if(rotateLabels)\n xTicks\n .selectAll('.tick text')\n .attr('transform', 'rotate(' + rotateLabels + ' 0,0)')\n .style('text-anchor', rotateLabels > 0 ? 'start' : 'end');\n\n g.select('.nv-x.nv-axis').selectAll('g.nv-axisMaxMin text')\n .style('opacity', 1);\n }\n\n if (showYAxis) {\n yAxis\n .scale(y)\n ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )\n .tickSize( -availableWidth, 0);\n\n g.select('.nv-y.nv-axis')\n .call(yAxis);\n }\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState)\n state[key] = newState[key];\n dispatch.stateChange(state);\n chart.update();\n });\n\n controls.dispatch.on('legendClick', function(d,i) {\n if (!d.disabled) return;\n controlsData = controlsData.map(function(s) {\n s.disabled = true;\n return s;\n });\n d.disabled = false;\n\n switch (d.key) {\n case 'Grouped':\n case controlLabels.grouped:\n multibar.stacked(false);\n break;\n case 'Stacked':\n case controlLabels.stacked:\n multibar.stacked(true);\n break;\n }\n\n state.stacked = multibar.stacked();\n dispatch.stateChange(state);\n chart.update();\n });\n\n // Update chart from a state object passed to event handler\n dispatch.on('changeState', function(e) {\n if (typeof e.disabled !== 'undefined') {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n state.disabled = e.disabled;\n }\n if (typeof e.stacked !== 'undefined') {\n multibar.stacked(e.stacked);\n state.stacked = e.stacked;\n stacked = e.stacked;\n }\n chart.update();\n });\n });\n\n renderWatch.renderEnd('multibarchart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n multibar.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt.value = chart.x()(evt.data);\n evt['series'] = {\n key: evt.data.key,\n value: chart.y()(evt.data),\n color: evt.color\n };\n tooltip.data(evt).hidden(false);\n });\n\n multibar.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n\n multibar.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.multibar = multibar;\n chart.legend = legend;\n chart.controls = controls;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.state = state;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},\n controlLabels: {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n reduceXTicks: {get: function(){return reduceXTicks;}, set: function(_){reduceXTicks=_;}},\n rotateLabels: {get: function(){return rotateLabels;}, set: function(_){rotateLabels=_;}},\n staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n multibar.duration(duration);\n xAxis.duration(duration);\n yAxis.duration(duration);\n renderWatch.reset(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n }},\n rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){\n rightAlignYAxis = _;\n yAxis.orient( rightAlignYAxis ? 'right' : 'left');\n }},\n barColor: {get: function(){return multibar.barColor;}, set: function(_){\n multibar.barColor(_);\n legend.color(function(d,i) {return d3.rgb('#ccc').darker(i * 1.5).toString();})\n }}\n });\n\n nv.utils.inheritOptions(chart, multibar);\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\nnv.models.multiBarHorizontal = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 960\n , height = 500\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , container = null\n , x = d3.scale.ordinal()\n , y = d3.scale.linear()\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , getYerr = function(d) { return d.yErr }\n , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove\n , color = nv.utils.defaultColor()\n , barColor = null // adding the ability to set the color for each rather than the whole group\n , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled\n , stacked = false\n , showValues = false\n , showBarLabels = false\n , valuePadding = 60\n , groupSpacing = 0.1\n , valueFormat = d3.format(',.2f')\n , delay = 1200\n , xDomain\n , yDomain\n , xRange\n , yRange\n , duration = 250\n , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var x0, y0; //used to store previous scales\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right,\n availableHeight = height - margin.top - margin.bottom;\n\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n if (stacked)\n data = d3.layout.stack()\n .offset('zero')\n .values(function(d){ return d.values })\n .y(getY)\n (data);\n\n //add series index and key to each data point for reference\n data.forEach(function(series, i) {\n series.values.forEach(function(point) {\n point.series = i;\n point.key = series.key;\n });\n });\n\n // HACK for negative value stacking\n if (stacked)\n data[0].values.map(function(d,i) {\n var posBase = 0, negBase = 0;\n data.map(function(d) {\n var f = d.values[i]\n f.size = Math.abs(f.y);\n if (f.y<0) {\n f.y1 = negBase - f.size;\n negBase = negBase - f.size;\n } else\n {\n f.y1 = posBase;\n posBase = posBase + f.size;\n }\n });\n });\n\n // Setup Scales\n // remap and flatten the data for use in calculating the scales' domains\n var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate\n data.map(function(d) {\n return d.values.map(function(d,i) {\n return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1 }\n })\n });\n\n x.domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))\n .rangeBands(xRange || [0, availableHeight], groupSpacing);\n\n y.domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return stacked ? (d.y > 0 ? d.y1 + d.y : d.y1 ) : d.y }).concat(forceY)))\n\n if (showValues && !stacked)\n y.range(yRange || [(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);\n else\n y.range(yRange || [0, availableWidth]);\n\n x0 = x0 || x;\n y0 = y0 || d3.scale.linear().domain(y.domain()).range([y(0),y(0)]);\n\n // Setup containers and skeleton of chart\n var wrap = d3.select(this).selectAll('g.nv-wrap.nv-multibarHorizontal').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibarHorizontal');\n var defsEnter = wrapEnter.append('defs');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-groups');\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n var groups = wrap.select('.nv-groups').selectAll('.nv-group')\n .data(function(d) { return d }, function(d,i) { return i });\n groups.enter().append('g')\n .style('stroke-opacity', 1e-6)\n .style('fill-opacity', 1e-6);\n groups.exit().watchTransition(renderWatch, 'multibarhorizontal: exit groups')\n .style('stroke-opacity', 1e-6)\n .style('fill-opacity', 1e-6)\n .remove();\n groups\n .attr('class', function(d,i) { return 'nv-group nv-series-' + i })\n .classed('hover', function(d) { return d.hover })\n .style('fill', function(d,i){ return color(d, i) })\n .style('stroke', function(d,i){ return color(d, i) });\n groups.watchTransition(renderWatch, 'multibarhorizontal: groups')\n .style('stroke-opacity', 1)\n .style('fill-opacity', .75);\n\n var bars = groups.selectAll('g.nv-bar')\n .data(function(d) { return d.values });\n bars.exit().remove();\n\n var barsEnter = bars.enter().append('g')\n .attr('transform', function(d,i,j) {\n return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'\n });\n\n barsEnter.append('rect')\n .attr('width', 0)\n .attr('height', x.rangeBand() / (stacked ? 1 : data.length) )\n\n bars\n .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here\n d3.select(this).classed('hover', true);\n dispatch.elementMouseover({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mouseout', function(d,i) {\n d3.select(this).classed('hover', false);\n dispatch.elementMouseout({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mouseout', function(d,i) {\n dispatch.elementMouseout({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mousemove', function(d,i) {\n dispatch.elementMousemove({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('click', function(d,i) {\n dispatch.elementClick({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n d3.event.stopPropagation();\n })\n .on('dblclick', function(d,i) {\n dispatch.elementDblClick({\n data: d,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n d3.event.stopPropagation();\n });\n\n if (getYerr(data[0],0)) {\n barsEnter.append('polyline');\n\n bars.select('polyline')\n .attr('fill', 'none')\n .attr('points', function(d,i) {\n var xerr = getYerr(d,i)\n , mid = 0.8 * x.rangeBand() / ((stacked ? 1 : data.length) * 2);\n xerr = xerr.length ? xerr : [-Math.abs(xerr), Math.abs(xerr)];\n xerr = xerr.map(function(e) { return y(e) - y(0); });\n var a = [[xerr[0],-mid], [xerr[0],mid], [xerr[0],0], [xerr[1],0], [xerr[1],-mid], [xerr[1],mid]];\n return a.map(function (path) { return path.join(',') }).join(' ');\n })\n .attr('transform', function(d,i) {\n var mid = x.rangeBand() / ((stacked ? 1 : data.length) * 2);\n return 'translate(' + (getY(d,i) < 0 ? 0 : y(getY(d,i)) - y(0)) + ', ' + mid + ')'\n });\n }\n\n barsEnter.append('text');\n\n if (showValues && !stacked) {\n bars.select('text')\n .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'end' : 'start' })\n .attr('y', x.rangeBand() / (data.length * 2))\n .attr('dy', '.32em')\n .text(function(d,i) {\n var t = valueFormat(getY(d,i))\n , yerr = getYerr(d,i);\n if (yerr === undefined)\n return t;\n if (!yerr.length)\n return t + '±' + valueFormat(Math.abs(yerr));\n return t + '+' + valueFormat(Math.abs(yerr[1])) + '-' + valueFormat(Math.abs(yerr[0]));\n });\n bars.watchTransition(renderWatch, 'multibarhorizontal: bars')\n .select('text')\n .attr('x', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })\n } else {\n bars.selectAll('text').text('');\n }\n\n if (showBarLabels && !stacked) {\n barsEnter.append('text').classed('nv-bar-label',true);\n bars.select('text.nv-bar-label')\n .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'start' : 'end' })\n .attr('y', x.rangeBand() / (data.length * 2))\n .attr('dy', '.32em')\n .text(function(d,i) { return getX(d,i) });\n bars.watchTransition(renderWatch, 'multibarhorizontal: bars')\n .select('text.nv-bar-label')\n .attr('x', function(d,i) { return getY(d,i) < 0 ? y(0) - y(getY(d,i)) + 4 : -4 });\n }\n else {\n bars.selectAll('text.nv-bar-label').text('');\n }\n\n bars\n .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})\n\n if (barColor) {\n if (!disabled) disabled = data.map(function() { return true });\n bars\n .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); })\n .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); });\n }\n\n if (stacked)\n bars.watchTransition(renderWatch, 'multibarhorizontal: bars')\n .attr('transform', function(d,i) {\n return 'translate(' + y(d.y1) + ',' + x(getX(d,i)) + ')'\n })\n .select('rect')\n .attr('width', function(d,i) {\n return Math.abs(y(getY(d,i) + d.y0) - y(d.y0))\n })\n .attr('height', x.rangeBand() );\n else\n bars.watchTransition(renderWatch, 'multibarhorizontal: bars')\n .attr('transform', function(d,i) {\n //TODO: stacked must be all positive or all negative, not both?\n return 'translate(' +\n (getY(d,i) < 0 ? y(getY(d,i)) : y(0))\n + ',' +\n (d.series * x.rangeBand() / data.length\n +\n x(getX(d,i)) )\n + ')'\n })\n .select('rect')\n .attr('height', x.rangeBand() / data.length )\n .attr('width', function(d,i) {\n return Math.max(Math.abs(y(getY(d,i)) - y(0)),1)\n });\n\n //store old scales for use in transitions on update\n x0 = x.copy();\n y0 = y.copy();\n\n });\n\n renderWatch.renderEnd('multibarHorizontal immediate');\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n x: {get: function(){return getX;}, set: function(_){getX=_;}},\n y: {get: function(){return getY;}, set: function(_){getY=_;}},\n yErr: {get: function(){return getYerr;}, set: function(_){getYerr=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},\n stacked: {get: function(){return stacked;}, set: function(_){stacked=_;}},\n showValues: {get: function(){return showValues;}, set: function(_){showValues=_;}},\n // this shows the group name, seems pointless?\n //showBarLabels: {get: function(){return showBarLabels;}, set: function(_){showBarLabels=_;}},\n disabled: {get: function(){return disabled;}, set: function(_){disabled=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n valueFormat: {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},\n valuePadding: {get: function(){return valuePadding;}, set: function(_){valuePadding=_;}},\n groupSpacing:{get: function(){return groupSpacing;}, set: function(_){groupSpacing=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }},\n barColor: {get: function(){return barColor;}, set: function(_){\n barColor = _ ? nv.utils.getColor(_) : null;\n }}\n });\n\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\nnv.models.multiBarHorizontalChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var multibar = nv.models.multiBarHorizontal()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , legend = nv.models.legend().height(30)\n , controls = nv.models.legend().height(30)\n , tooltip = nv.models.tooltip()\n ;\n\n var margin = {top: 30, right: 20, bottom: 50, left: 60}\n , width = null\n , height = null\n , color = nv.utils.defaultColor()\n , showControls = true\n , controlLabels = {}\n , showLegend = true\n , showXAxis = true\n , showYAxis = true\n , stacked = false\n , x //can be accessed via chart.xScale()\n , y //can be accessed via chart.yScale()\n , state = nv.utils.state()\n , defaultState = null\n , noData = null\n , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd')\n , controlWidth = function() { return showControls ? 180 : 0 }\n , duration = 250\n ;\n\n state.stacked = false; // DEPRECATED Maintained for backward compatibility\n\n multibar.stacked(stacked);\n\n xAxis\n .orient('left')\n .tickPadding(5)\n .showMaxMin(false)\n .tickFormat(function(d) { return d })\n ;\n yAxis\n .orient('bottom')\n .tickFormat(d3.format(',.1f'))\n ;\n\n tooltip\n .duration(0)\n .valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n })\n .headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n });\n\n controls.updateState(false);\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled }),\n stacked: stacked\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.stacked !== undefined)\n stacked = state.stacked;\n if (state.active !== undefined)\n data.forEach(function(series,i) {\n series.disabled = !state.active[i];\n });\n }\n };\n\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(multibar);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() { container.transition().duration(duration).call(chart) };\n chart.container = this;\n\n stacked = multibar.stacked();\n\n state\n .setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n // DEPRECATED set state.disableddisabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = multibar.xScale();\n y = multibar.yScale();\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-multiBarHorizontalChart').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarHorizontalChart').append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y nv-axis')\n .append('g').attr('class', 'nv-zeroLine')\n .append('line');\n gEnter.append('g').attr('class', 'nv-barsWrap');\n gEnter.append('g').attr('class', 'nv-legendWrap');\n gEnter.append('g').attr('class', 'nv-controlsWrap');\n\n // Legend\n if (showLegend) {\n legend.width(availableWidth - controlWidth());\n\n g.select('.nv-legendWrap')\n .datum(data)\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n g.select('.nv-legendWrap')\n .attr('transform', 'translate(' + controlWidth() + ',' + (-margin.top) +')');\n }\n\n // Controls\n if (showControls) {\n var controlsData = [\n { key: controlLabels.grouped || 'Grouped', disabled: multibar.stacked() },\n { key: controlLabels.stacked || 'Stacked', disabled: !multibar.stacked() }\n ];\n\n controls.width(controlWidth()).color(['#444', '#444', '#444']);\n g.select('.nv-controlsWrap')\n .datum(controlsData)\n .attr('transform', 'translate(0,' + (-margin.top) +')')\n .call(controls);\n }\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n // Main Chart Component(s)\n multibar\n .disabled(data.map(function(series) { return series.disabled }))\n .width(availableWidth)\n .height(availableHeight)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled }));\n\n var barsWrap = g.select('.nv-barsWrap')\n .datum(data.filter(function(d) { return !d.disabled }));\n\n barsWrap.transition().call(multibar);\n\n // Setup Axes\n if (showXAxis) {\n xAxis\n .scale(x)\n ._ticks( nv.utils.calcTicksY(availableHeight/24, data) )\n .tickSize(-availableWidth, 0);\n\n g.select('.nv-x.nv-axis').call(xAxis);\n\n var xTicks = g.select('.nv-x.nv-axis').selectAll('g');\n\n xTicks\n .selectAll('line, text');\n }\n\n if (showYAxis) {\n yAxis\n .scale(y)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize( -availableHeight, 0);\n\n g.select('.nv-y.nv-axis')\n .attr('transform', 'translate(0,' + availableHeight + ')');\n g.select('.nv-y.nv-axis').call(yAxis);\n }\n\n // Zero line\n g.select(\".nv-zeroLine line\")\n .attr(\"x1\", y(0))\n .attr(\"x2\", y(0))\n .attr(\"y1\", 0)\n .attr(\"y2\", -availableHeight)\n ;\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState)\n state[key] = newState[key];\n dispatch.stateChange(state);\n chart.update();\n });\n\n controls.dispatch.on('legendClick', function(d,i) {\n if (!d.disabled) return;\n controlsData = controlsData.map(function(s) {\n s.disabled = true;\n return s;\n });\n d.disabled = false;\n\n switch (d.key) {\n case 'Grouped':\n multibar.stacked(false);\n break;\n case 'Stacked':\n multibar.stacked(true);\n break;\n }\n\n state.stacked = multibar.stacked();\n dispatch.stateChange(state);\n stacked = multibar.stacked();\n\n chart.update();\n });\n\n // Update chart from a state object passed to event handler\n dispatch.on('changeState', function(e) {\n\n if (typeof e.disabled !== 'undefined') {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n\n state.disabled = e.disabled;\n }\n\n if (typeof e.stacked !== 'undefined') {\n multibar.stacked(e.stacked);\n state.stacked = e.stacked;\n stacked = e.stacked;\n }\n\n chart.update();\n });\n });\n renderWatch.renderEnd('multibar horizontal chart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n multibar.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt.value = chart.x()(evt.data);\n evt['series'] = {\n key: evt.data.key,\n value: chart.y()(evt.data),\n color: evt.color\n };\n tooltip.data(evt).hidden(false);\n });\n\n multibar.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n\n multibar.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.multibar = multibar;\n chart.legend = legend;\n chart.controls = controls;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.state = state;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},\n controlLabels: {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n multibar.duration(duration);\n xAxis.duration(duration);\n yAxis.duration(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n }},\n barColor: {get: function(){return multibar.barColor;}, set: function(_){\n multibar.barColor(_);\n legend.color(function(d,i) {return d3.rgb('#ccc').darker(i * 1.5).toString();})\n }}\n });\n\n nv.utils.inheritOptions(chart, multibar);\n nv.utils.initOptions(chart);\n\n return chart;\n};\nnv.models.multiChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 30, right: 20, bottom: 50, left: 60},\n color = nv.utils.defaultColor(),\n width = null,\n height = null,\n showLegend = true,\n noData = null,\n yDomain1,\n yDomain2,\n getX = function(d) { return d.x },\n getY = function(d) { return d.y},\n interpolate = 'monotone',\n useVoronoi = true\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var x = d3.scale.linear(),\n yScale1 = d3.scale.linear(),\n yScale2 = d3.scale.linear(),\n\n lines1 = nv.models.line().yScale(yScale1),\n lines2 = nv.models.line().yScale(yScale2),\n\n bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),\n bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),\n\n stack1 = nv.models.stackedArea().yScale(yScale1),\n stack2 = nv.models.stackedArea().yScale(yScale2),\n\n xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),\n yAxis1 = nv.models.axis().scale(yScale1).orient('left'),\n yAxis2 = nv.models.axis().scale(yScale2).orient('right'),\n\n legend = nv.models.legend().height(30),\n tooltip = nv.models.tooltip(),\n dispatch = d3.dispatch();\n\n function chart(selection) {\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n\n chart.update = function() { container.transition().call(chart); };\n chart.container = this;\n\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n var dataLines1 = data.filter(function(d) {return d.type == 'line' && d.yAxis == 1});\n var dataLines2 = data.filter(function(d) {return d.type == 'line' && d.yAxis == 2});\n var dataBars1 = data.filter(function(d) {return d.type == 'bar' && d.yAxis == 1});\n var dataBars2 = data.filter(function(d) {return d.type == 'bar' && d.yAxis == 2});\n var dataStack1 = data.filter(function(d) {return d.type == 'area' && d.yAxis == 1});\n var dataStack2 = data.filter(function(d) {return d.type == 'area' && d.yAxis == 2});\n\n // Display noData message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container);\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n var series1 = data.filter(function(d) {return !d.disabled && d.yAxis == 1})\n .map(function(d) {\n return d.values.map(function(d,i) {\n return { x: d.x, y: d.y }\n })\n });\n\n var series2 = data.filter(function(d) {return !d.disabled && d.yAxis == 2})\n .map(function(d) {\n return d.values.map(function(d,i) {\n return { x: d.x, y: d.y }\n })\n });\n\n x .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))\n .range([0, availableWidth]);\n\n var wrap = container.selectAll('g.wrap.multiChart').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiChart').append('g');\n\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y1 nv-axis');\n gEnter.append('g').attr('class', 'nv-y2 nv-axis');\n gEnter.append('g').attr('class', 'lines1Wrap');\n gEnter.append('g').attr('class', 'lines2Wrap');\n gEnter.append('g').attr('class', 'bars1Wrap');\n gEnter.append('g').attr('class', 'bars2Wrap');\n gEnter.append('g').attr('class', 'stack1Wrap');\n gEnter.append('g').attr('class', 'stack2Wrap');\n gEnter.append('g').attr('class', 'legendWrap');\n\n var g = wrap.select('g');\n\n var color_array = data.map(function(d,i) {\n return data[i].color || color(d, i);\n });\n\n if (showLegend) {\n var legendWidth = legend.align() ? availableWidth / 2 : availableWidth;\n var legendXPosition = legend.align() ? legendWidth : 0;\n\n legend.width(legendWidth);\n legend.color(color_array);\n\n g.select('.legendWrap')\n .datum(data.map(function(series) {\n series.originalKey = series.originalKey === undefined ? series.key : series.originalKey;\n series.key = series.originalKey + (series.yAxis == 1 ? '' : ' (right axis)');\n return series;\n }))\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n g.select('.legendWrap')\n .attr('transform', 'translate(' + legendXPosition + ',' + (-margin.top) +')');\n }\n\n lines1\n .width(availableWidth)\n .height(availableHeight)\n .interpolate(interpolate)\n .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'line'}));\n lines2\n .width(availableWidth)\n .height(availableHeight)\n .interpolate(interpolate)\n .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}));\n bars1\n .width(availableWidth)\n .height(availableHeight)\n .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'bar'}));\n bars2\n .width(availableWidth)\n .height(availableHeight)\n .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'bar'}));\n stack1\n .width(availableWidth)\n .height(availableHeight)\n .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'area'}));\n stack2\n .width(availableWidth)\n .height(availableHeight)\n .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'area'}));\n\n g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n var lines1Wrap = g.select('.lines1Wrap')\n .datum(dataLines1.filter(function(d){return !d.disabled}));\n var bars1Wrap = g.select('.bars1Wrap')\n .datum(dataBars1.filter(function(d){return !d.disabled}));\n var stack1Wrap = g.select('.stack1Wrap')\n .datum(dataStack1.filter(function(d){return !d.disabled}));\n var lines2Wrap = g.select('.lines2Wrap')\n .datum(dataLines2.filter(function(d){return !d.disabled}));\n var bars2Wrap = g.select('.bars2Wrap')\n .datum(dataBars2.filter(function(d){return !d.disabled}));\n var stack2Wrap = g.select('.stack2Wrap')\n .datum(dataStack2.filter(function(d){return !d.disabled}));\n\n var extraValue1 = dataStack1.length ? dataStack1.map(function(a){return a.values}).reduce(function(a,b){\n return a.map(function(aVal,i){return {x: aVal.x, y: aVal.y + b[i].y}})\n }).concat([{x:0, y:0}]) : [];\n var extraValue2 = dataStack2.length ? dataStack2.map(function(a){return a.values}).reduce(function(a,b){\n return a.map(function(aVal,i){return {x: aVal.x, y: aVal.y + b[i].y}})\n }).concat([{x:0, y:0}]) : [];\n\n yScale1 .domain(yDomain1 || d3.extent(d3.merge(series1).concat(extraValue1), function(d) { return d.y } ))\n .range([0, availableHeight]);\n\n yScale2 .domain(yDomain2 || d3.extent(d3.merge(series2).concat(extraValue2), function(d) { return d.y } ))\n .range([0, availableHeight]);\n\n lines1.yDomain(yScale1.domain());\n bars1.yDomain(yScale1.domain());\n stack1.yDomain(yScale1.domain());\n\n lines2.yDomain(yScale2.domain());\n bars2.yDomain(yScale2.domain());\n stack2.yDomain(yScale2.domain());\n\n if(dataStack1.length){d3.transition(stack1Wrap).call(stack1);}\n if(dataStack2.length){d3.transition(stack2Wrap).call(stack2);}\n\n if(dataBars1.length){d3.transition(bars1Wrap).call(bars1);}\n if(dataBars2.length){d3.transition(bars2Wrap).call(bars2);}\n\n if(dataLines1.length){d3.transition(lines1Wrap).call(lines1);}\n if(dataLines2.length){d3.transition(lines2Wrap).call(lines2);}\n\n xAxis\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize(-availableHeight, 0);\n\n g.select('.nv-x.nv-axis')\n .attr('transform', 'translate(0,' + availableHeight + ')');\n d3.transition(g.select('.nv-x.nv-axis'))\n .call(xAxis);\n\n yAxis1\n ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )\n .tickSize( -availableWidth, 0);\n\n\n d3.transition(g.select('.nv-y1.nv-axis'))\n .call(yAxis1);\n\n yAxis2\n ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )\n .tickSize( -availableWidth, 0);\n\n d3.transition(g.select('.nv-y2.nv-axis'))\n .call(yAxis2);\n\n g.select('.nv-y1.nv-axis')\n .classed('nv-disabled', series1.length ? false : true)\n .attr('transform', 'translate(' + x.range()[0] + ',0)');\n\n g.select('.nv-y2.nv-axis')\n .classed('nv-disabled', series2.length ? false : true)\n .attr('transform', 'translate(' + x.range()[1] + ',0)');\n\n legend.dispatch.on('stateChange', function(newState) {\n chart.update();\n });\n\n //============================================================\n // Event Handling/Dispatching\n //------------------------------------------------------------\n\n function mouseover_line(evt) {\n var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;\n evt.value = evt.point.x;\n evt.series = {\n value: evt.point.y,\n color: evt.point.color\n };\n tooltip\n .duration(100)\n .valueFormatter(function(d, i) {\n return yaxis.tickFormat()(d, i);\n })\n .data(evt)\n .position(evt.pos)\n .hidden(false);\n }\n\n function mouseover_stack(evt) {\n var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;\n evt.point['x'] = stack1.x()(evt.point);\n evt.point['y'] = stack1.y()(evt.point);\n tooltip\n .duration(100)\n .valueFormatter(function(d, i) {\n return yaxis.tickFormat()(d, i);\n })\n .data(evt)\n .position(evt.pos)\n .hidden(false);\n }\n\n function mouseover_bar(evt) {\n var yaxis = data[evt.data.series].yAxis === 2 ? yAxis2 : yAxis1;\n\n evt.value = bars1.x()(evt.data);\n evt['series'] = {\n value: bars1.y()(evt.data),\n color: evt.color\n };\n tooltip\n .duration(0)\n .valueFormatter(function(d, i) {\n return yaxis.tickFormat()(d, i);\n })\n .data(evt)\n .hidden(false);\n }\n\n lines1.dispatch.on('elementMouseover.tooltip', mouseover_line);\n lines2.dispatch.on('elementMouseover.tooltip', mouseover_line);\n lines1.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n lines2.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n\n stack1.dispatch.on('elementMouseover.tooltip', mouseover_stack);\n stack2.dispatch.on('elementMouseover.tooltip', mouseover_stack);\n stack1.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n stack2.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n\n bars1.dispatch.on('elementMouseover.tooltip', mouseover_bar);\n bars2.dispatch.on('elementMouseover.tooltip', mouseover_bar);\n\n bars1.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n bars2.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n bars1.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n bars2.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n });\n\n return chart;\n }\n\n //============================================================\n // Global getters and setters\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.lines1 = lines1;\n chart.lines2 = lines2;\n chart.bars1 = bars1;\n chart.bars2 = bars2;\n chart.stack1 = stack1;\n chart.stack2 = stack2;\n chart.xAxis = xAxis;\n chart.yAxis1 = yAxis1;\n chart.yAxis2 = yAxis2;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n yDomain1: {get: function(){return yDomain1;}, set: function(_){yDomain1=_;}},\n yDomain2: {get: function(){return yDomain2;}, set: function(_){yDomain2=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n interpolate: {get: function(){return interpolate;}, set: function(_){interpolate=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }},\n x: {get: function(){return getX;}, set: function(_){\n getX = _;\n lines1.x(_);\n lines2.x(_);\n bars1.x(_);\n bars2.x(_);\n stack1.x(_);\n stack2.x(_);\n }},\n y: {get: function(){return getY;}, set: function(_){\n getY = _;\n lines1.y(_);\n lines2.y(_);\n stack1.y(_);\n stack2.y(_);\n bars1.y(_);\n bars2.y(_);\n }},\n useVoronoi: {get: function(){return useVoronoi;}, set: function(_){\n useVoronoi=_;\n lines1.useVoronoi(_);\n lines2.useVoronoi(_);\n stack1.useVoronoi(_);\n stack2.useVoronoi(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\n\nnv.models.ohlcBar = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = null\n , height = null\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , container = null\n , x = d3.scale.linear()\n , y = d3.scale.linear()\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , getOpen = function(d) { return d.open }\n , getClose = function(d) { return d.close }\n , getHigh = function(d) { return d.high }\n , getLow = function(d) { return d.low }\n , forceX = []\n , forceY = []\n , padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart\n , clipEdge = true\n , color = nv.utils.defaultColor()\n , interactive = false\n , xDomain\n , yDomain\n , xRange\n , yRange\n , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd', 'chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove')\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n function chart(selection) {\n selection.each(function(data) {\n container = d3.select(this);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n nv.utils.initSVG(container);\n\n // ohlc bar width.\n var w = (availableWidth / data[0].values.length) * .9;\n\n // Setup Scales\n x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));\n\n if (padData)\n x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);\n else\n x.range(xRange || [5 + w/2, availableWidth - w/2 - 5]);\n\n y.domain(yDomain || [\n d3.min(data[0].values.map(getLow).concat(forceY)),\n d3.max(data[0].values.map(getHigh).concat(forceY))\n ]\n ).range(yRange || [availableHeight, 0]);\n\n // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point\n if (x.domain()[0] === x.domain()[1])\n x.domain()[0] ?\n x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])\n : x.domain([-1,1]);\n\n if (y.domain()[0] === y.domain()[1])\n y.domain()[0] ?\n y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])\n : y.domain([-1,1]);\n\n // Setup containers and skeleton of chart\n var wrap = d3.select(this).selectAll('g.nv-wrap.nv-ohlcBar').data([data[0].values]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-ohlcBar');\n var defsEnter = wrapEnter.append('defs');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-ticks');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n container\n .on('click', function(d,i) {\n dispatch.chartClick({\n data: d,\n index: i,\n pos: d3.event,\n id: id\n });\n });\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-chart-clip-path-' + id)\n .append('rect');\n\n wrap.select('#nv-chart-clip-path-' + id + ' rect')\n .attr('width', availableWidth)\n .attr('height', availableHeight);\n\n g .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');\n\n var ticks = wrap.select('.nv-ticks').selectAll('.nv-tick')\n .data(function(d) { return d });\n ticks.exit().remove();\n\n ticks.enter().append('path')\n .attr('class', function(d,i,j) { return (getOpen(d,i) > getClose(d,i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i })\n .attr('d', function(d,i) {\n return 'm0,0l0,'\n + (y(getOpen(d,i))\n - y(getHigh(d,i)))\n + 'l'\n + (-w/2)\n + ',0l'\n + (w/2)\n + ',0l0,'\n + (y(getLow(d,i)) - y(getOpen(d,i)))\n + 'l0,'\n + (y(getClose(d,i))\n - y(getLow(d,i)))\n + 'l'\n + (w/2)\n + ',0l'\n + (-w/2)\n + ',0z';\n })\n .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',' + y(getHigh(d,i)) + ')'; })\n .attr('fill', function(d,i) { return color[0]; })\n .attr('stroke', function(d,i) { return color[0]; })\n .attr('x', 0 )\n .attr('y', function(d,i) { return y(Math.max(0, getY(d,i))) })\n .attr('height', function(d,i) { return Math.abs(y(getY(d,i)) - y(0)) });\n\n // the bar colors are controlled by CSS currently\n ticks.attr('class', function(d,i,j) {\n return (getOpen(d,i) > getClose(d,i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i;\n });\n\n d3.transition(ticks)\n .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',' + y(getHigh(d,i)) + ')'; })\n .attr('d', function(d,i) {\n var w = (availableWidth / data[0].values.length) * .9;\n return 'm0,0l0,'\n + (y(getOpen(d,i))\n - y(getHigh(d,i)))\n + 'l'\n + (-w/2)\n + ',0l'\n + (w/2)\n + ',0l0,'\n + (y(getLow(d,i))\n - y(getOpen(d,i)))\n + 'l0,'\n + (y(getClose(d,i))\n - y(getLow(d,i)))\n + 'l'\n + (w/2)\n + ',0l'\n + (-w/2)\n + ',0z';\n });\n });\n\n return chart;\n }\n\n\n //Create methods to allow outside functions to highlight a specific bar.\n chart.highlightPoint = function(pointIndex, isHoverOver) {\n chart.clearHighlights();\n container.select(\".nv-ohlcBar .nv-tick-0-\" + pointIndex)\n .classed(\"hover\", isHoverOver)\n ;\n };\n\n chart.clearHighlights = function() {\n container.select(\".nv-ohlcBar .nv-tick.hover\")\n .classed(\"hover\", false)\n ;\n };\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},\n forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},\n padData: {get: function(){return padData;}, set: function(_){padData=_;}},\n clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},\n\n x: {get: function(){return getX;}, set: function(_){getX=_;}},\n y: {get: function(){return getY;}, set: function(_){getY=_;}},\n open: {get: function(){return getOpen();}, set: function(_){getOpen=_;}},\n close: {get: function(){return getClose();}, set: function(_){getClose=_;}},\n high: {get: function(){return getHigh;}, set: function(_){getHigh=_;}},\n low: {get: function(){return getLow;}, set: function(_){getLow=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top != undefined ? _.top : margin.top;\n margin.right = _.right != undefined ? _.right : margin.right;\n margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;\n margin.left = _.left != undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n return chart;\n};\n// Code adapted from Jason Davies' \"Parallel Coordinates\"\n// http://bl.ocks.org/jasondavies/1341281\nnv.models.parallelCoordinates = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 30, right: 0, bottom: 10, left: 0}\n , width = null\n , height = null\n , x = d3.scale.ordinal()\n , y = {}\n , dimensionNames = []\n , dimensionFormats = []\n , color = nv.utils.defaultColor()\n , filters = []\n , active = []\n , dragging = []\n , lineTension = 1\n , dispatch = d3.dispatch('brush', 'elementMouseover', 'elementMouseout')\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n function chart(selection) {\n selection.each(function(data) {\n var container = d3.select(this);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n nv.utils.initSVG(container);\n\n active = data; //set all active before first brush call\n\n // Setup Scales\n x.rangePoints([0, availableWidth], 1).domain(dimensionNames);\n\n //Set as true if all values on an axis are missing.\n var onlyNanValues = {};\n // Extract the list of dimensions and create a scale for each.\n dimensionNames.forEach(function(d) {\n var extent = d3.extent(data, function(p) { return +p[d]; });\n onlyNanValues[d] = false;\n //If there is no values to display on an axis, set the extent to 0\n if (extent[0] === undefined) {\n onlyNanValues[d] = true;\n extent[0] = 0;\n extent[1] = 0;\n }\n //Scale axis if there is only one value\n if (extent[0] === extent[1]) {\n extent[0] = extent[0] - 1;\n extent[1] = extent[1] + 1;\n }\n //Use 90% of (availableHeight - 12) for the axis range, 12 reprensenting the space necessary to display \"undefined values\" text.\n //The remaining 10% are used to display the missingValue line.\n y[d] = d3.scale.linear()\n .domain(extent)\n .range([(availableHeight - 12) * 0.9, 0]);\n\n y[d].brush = d3.svg.brush().y(y[d]).on('brush', brush);\n\n return d != 'name';\n });\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-parallelCoordinates').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-parallelCoordinates');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-parallelCoordinates background');\n gEnter.append('g').attr('class', 'nv-parallelCoordinates foreground');\n gEnter.append('g').attr('class', 'nv-parallelCoordinates missingValuesline');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n var line = d3.svg.line().interpolate('cardinal').tension(lineTension),\n axis = d3.svg.axis().orient('left'),\n axisDrag = d3.behavior.drag()\n .on('dragstart', dragStart)\n .on('drag', dragMove)\n .on('dragend', dragEnd);\n\n //Add missing value line at the bottom of the chart\n var missingValuesline, missingValueslineText;\n var step = x.range()[1] - x.range()[0];\n var axisWithMissingValues = [];\n var lineData = [0 + step / 2, availableHeight - 12, availableWidth - step / 2, availableHeight - 12];\n missingValuesline = wrap.select('.missingValuesline').selectAll('line').data([lineData]);\n missingValuesline.enter().append('line');\n missingValuesline.exit().remove();\n missingValuesline.attr(\"x1\", function(d) { return d[0]; })\n .attr(\"y1\", function(d) { return d[1]; })\n .attr(\"x2\", function(d) { return d[2]; })\n .attr(\"y2\", function(d) { return d[3]; });\n\n //Add the text \"undefined values\" under the missing value line\n missingValueslineText = wrap.select('.missingValuesline').selectAll('text').data([\"undefined values\"]);\n missingValueslineText.append('text').data([\"undefined values\"]);\n missingValueslineText.enter().append('text');\n missingValueslineText.exit().remove();\n missingValueslineText.attr(\"y\", availableHeight)\n //To have the text right align with the missingValues line, substract 92 representing the text size.\n .attr(\"x\", availableWidth - 92 - step / 2)\n .text(function(d) { return d; });\n\n // Add grey background lines for context.\n var background = wrap.select('.background').selectAll('path').data(data);\n background.enter().append('path');\n background.exit().remove();\n background.attr('d', path);\n\n // Add blue foreground lines for focus.\n var foreground = wrap.select('.foreground').selectAll('path').data(data);\n foreground.enter().append('path')\n foreground.exit().remove();\n foreground.attr('d', path).attr('stroke', color);\n foreground.on(\"mouseover\", function (d, i) {\n d3.select(this).classed('hover', true);\n dispatch.elementMouseover({\n label: d.name,\n data: d.data,\n index: i,\n pos: [d3.mouse(this.parentNode)[0], d3.mouse(this.parentNode)[1]]\n });\n\n });\n foreground.on(\"mouseout\", function (d, i) {\n d3.select(this).classed('hover', false);\n dispatch.elementMouseout({\n label: d.name,\n data: d.data,\n index: i\n });\n });\n\n // Add a group element for each dimension.\n var dimensions = g.selectAll('.dimension').data(dimensionNames);\n var dimensionsEnter = dimensions.enter().append('g').attr('class', 'nv-parallelCoordinates dimension');\n dimensionsEnter.append('g').attr('class', 'nv-parallelCoordinates nv-axis');\n dimensionsEnter.append('g').attr('class', 'nv-parallelCoordinates-brush');\n dimensionsEnter.append('text').attr('class', 'nv-parallelCoordinates nv-label');\n\n dimensions.attr('transform', function(d) { return 'translate(' + x(d) + ',0)'; });\n dimensions.exit().remove();\n\n // Add an axis and title.\n dimensions.select('.nv-label')\n .style(\"cursor\", \"move\")\n .attr('dy', '-1em')\n .attr('text-anchor', 'middle')\n .text(String)\n .on(\"mouseover\", function(d, i) {\n dispatch.elementMouseover({\n dim: d,\n pos: [d3.mouse(this.parentNode.parentNode)[0], d3.mouse(this.parentNode.parentNode)[1]]\n });\n })\n .on(\"mouseout\", function(d, i) {\n dispatch.elementMouseout({\n dim: d\n });\n })\n .call(axisDrag);\n\n dimensions.select('.nv-axis')\n .each(function (d, i) {\n d3.select(this).call(axis.scale(y[d]).tickFormat(d3.format(dimensionFormats[i])));\n });\n\n dimensions.select('.nv-parallelCoordinates-brush')\n .each(function (d) {\n d3.select(this).call(y[d].brush);\n })\n .selectAll('rect')\n .attr('x', -8)\n .attr('width', 16);\n\n // Returns the path for a given data point.\n function path(d) {\n return line(dimensionNames.map(function (p) {\n //If value if missing, put the value on the missing value line\n if(isNaN(d[p]) || isNaN(parseFloat(d[p]))) {\n var domain = y[p].domain();\n var range = y[p].range();\n var min = domain[0] - (domain[1] - domain[0]) / 9;\n\n //If it's not already the case, allow brush to select undefined values\n if(axisWithMissingValues.indexOf(p) < 0) {\n\n var newscale = d3.scale.linear().domain([min, domain[1]]).range([availableHeight - 12, range[1]]);\n y[p].brush.y(newscale);\n axisWithMissingValues.push(p);\n }\n\n return [x(p), y[p](min)];\n }\n\n //If parallelCoordinate contain missing values show the missing values line otherwise, hide it.\n if(axisWithMissingValues.length > 0) {\n missingValuesline.style(\"display\", \"inline\");\n missingValueslineText.style(\"display\", \"inline\");\n } else {\n missingValuesline.style(\"display\", \"none\");\n missingValueslineText.style(\"display\", \"none\");\n }\n\n return [x(p), y[p](d[p])];\n }));\n }\n\n // Handles a brush event, toggling the display of foreground lines.\n function brush() {\n var actives = dimensionNames.filter(function(p) { return !y[p].brush.empty(); }),\n extents = actives.map(function(p) { return y[p].brush.extent(); });\n\n filters = []; //erase current filters\n actives.forEach(function(d,i) {\n filters[i] = {\n dimension: d,\n extent: extents[i]\n }\n });\n\n active = []; //erase current active list\n foreground.style('display', function(d) {\n var isActive = actives.every(function(p, i) {\n if(isNaN(d[p]) && extents[i][0] == y[p].brush.y().domain()[0]) return true;\n return extents[i][0] <= d[p] && d[p] <= extents[i][1];\n });\n if (isActive) active.push(d);\n return isActive ? null : 'none';\n });\n\n dispatch.brush({\n filters: filters,\n active: active\n });\n }\n\n function dragStart(d, i) {\n dragging[d] = this.parentNode.__origin__ = x(d);\n background.attr(\"visibility\", \"hidden\");\n\n }\n\n function dragMove(d, i) {\n dragging[d] = Math.min(availableWidth, Math.max(0, this.parentNode.__origin__ += d3.event.x));\n foreground.attr(\"d\", path);\n dimensionNames.sort(function (a, b) { return position(a) - position(b); });\n x.domain(dimensionNames);\n dimensions.attr(\"transform\", function(d) { return \"translate(\" + position(d) + \")\"; });\n }\n\n function dragEnd(d, i) {\n delete this.parentNode.__origin__;\n delete dragging[d];\n d3.select(this.parentNode).attr(\"transform\", \"translate(\" + x(d) + \")\");\n foreground\n .attr(\"d\", path);\n background\n .attr(\"d\", path)\n .attr(\"visibility\", null);\n\n }\n\n function position(d) {\n var v = dragging[d];\n return v == null ? x(d) : v;\n }\n });\n\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width= _;}},\n height: {get: function(){return height;}, set: function(_){height= _;}},\n dimensionNames: {get: function() { return dimensionNames;}, set: function(_){dimensionNames= _;}},\n dimensionFormats : {get: function(){return dimensionFormats;}, set: function (_){dimensionFormats=_;}},\n lineTension: {get: function(){return lineTension;}, set: function(_){lineTension = _;}},\n\n // deprecated options\n dimensions: {get: function (){return dimensionNames;}, set: function(_){\n // deprecated after 1.8.1\n nv.deprecated('dimensions', 'use dimensionNames instead');\n dimensionNames = _;\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n return chart;\n};\nnv.models.pie = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 500\n , height = 500\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , container = null\n , color = nv.utils.defaultColor()\n , valueFormat = d3.format(',.2f')\n , showLabels = true\n , labelsOutside = false\n , labelType = \"key\"\n , labelThreshold = .02 //if slice percentage is under this, don't show label\n , donut = false\n , title = false\n , growOnHover = true\n , titleOffset = 0\n , labelSunbeamLayout = false\n , startAngle = false\n , padAngle = false\n , endAngle = false\n , cornerRadius = 0\n , donutRatio = 0.5\n , arcsRadius = []\n , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')\n ;\n\n var arcs = [];\n var arcsOver = [];\n\n //============================================================\n // chart function\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch);\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right\n , availableHeight = height - margin.top - margin.bottom\n , radius = Math.min(availableWidth, availableHeight) / 2\n , arcsRadiusOuter = []\n , arcsRadiusInner = []\n ;\n\n container = d3.select(this)\n if (arcsRadius.length === 0) {\n var outer = radius - radius / 5;\n var inner = donutRatio * radius;\n for (var i = 0; i < data[0].length; i++) {\n arcsRadiusOuter.push(outer);\n arcsRadiusInner.push(inner);\n }\n } else {\n arcsRadiusOuter = arcsRadius.map(function (d) { return (d.outer - d.outer / 5) * radius; });\n arcsRadiusInner = arcsRadius.map(function (d) { return (d.inner - d.inner / 5) * radius; });\n donutRatio = d3.min(arcsRadius.map(function (d) { return (d.inner - d.inner / 5); }));\n }\n nv.utils.initSVG(container);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('.nv-wrap.nv-pie').data(data);\n var wrapEnter = wrap.enter().append('g').attr('class','nvd3 nv-wrap nv-pie nv-chart-' + id);\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n var g_pie = gEnter.append('g').attr('class', 'nv-pie');\n gEnter.append('g').attr('class', 'nv-pieLabels');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');\n g.select('.nv-pieLabels').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');\n\n //\n container.on('click', function(d,i) {\n dispatch.chartClick({\n data: d,\n index: i,\n pos: d3.event,\n id: id\n });\n });\n\n arcs = [];\n arcsOver = [];\n for (var i = 0; i < data[0].length; i++) {\n\n var arc = d3.svg.arc().outerRadius(arcsRadiusOuter[i]);\n var arcOver = d3.svg.arc().outerRadius(arcsRadiusOuter[i] + 5);\n\n if (startAngle !== false) {\n arc.startAngle(startAngle);\n arcOver.startAngle(startAngle);\n }\n if (endAngle !== false) {\n arc.endAngle(endAngle);\n arcOver.endAngle(endAngle);\n }\n if (donut) {\n arc.innerRadius(arcsRadiusInner[i]);\n arcOver.innerRadius(arcsRadiusInner[i]);\n }\n\n if (arc.cornerRadius && cornerRadius) {\n arc.cornerRadius(cornerRadius);\n arcOver.cornerRadius(cornerRadius);\n }\n\n arcs.push(arc);\n arcsOver.push(arcOver);\n }\n\n // Setup the Pie chart and choose the data element\n var pie = d3.layout.pie()\n .sort(null)\n .value(function(d) { return d.disabled ? 0 : getY(d) });\n\n // padAngle added in d3 3.5\n if (pie.padAngle && padAngle) {\n pie.padAngle(padAngle);\n }\n\n // if title is specified and donut, put it in the middle\n if (donut && title) {\n g_pie.append(\"text\").attr('class', 'nv-pie-title');\n\n wrap.select('.nv-pie-title')\n .style(\"text-anchor\", \"middle\")\n .text(function (d) {\n return title;\n })\n .style(\"font-size\", (Math.min(availableWidth, availableHeight)) * donutRatio * 2 / (title.length + 2) + \"px\")\n .attr(\"dy\", \"0.35em\") // trick to vertically center text\n .attr('transform', function(d, i) {\n return 'translate(0, '+ titleOffset + ')';\n });\n }\n\n var slices = wrap.select('.nv-pie').selectAll('.nv-slice').data(pie);\n var pieLabels = wrap.select('.nv-pieLabels').selectAll('.nv-label').data(pie);\n\n slices.exit().remove();\n pieLabels.exit().remove();\n\n var ae = slices.enter().append('g');\n ae.attr('class', 'nv-slice');\n ae.on('mouseover', function(d, i) {\n d3.select(this).classed('hover', true);\n if (growOnHover) {\n d3.select(this).select(\"path\").transition()\n .duration(70)\n .attr(\"d\", arcsOver[i]);\n }\n dispatch.elementMouseover({\n data: d.data,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n });\n ae.on('mouseout', function(d, i) {\n d3.select(this).classed('hover', false);\n if (growOnHover) {\n d3.select(this).select(\"path\").transition()\n .duration(50)\n .attr(\"d\", arcs[i]);\n }\n dispatch.elementMouseout({data: d.data, index: i});\n });\n ae.on('mousemove', function(d, i) {\n dispatch.elementMousemove({data: d.data, index: i});\n });\n ae.on('click', function(d, i) {\n dispatch.elementClick({\n data: d.data,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n });\n ae.on('dblclick', function(d, i) {\n dispatch.elementDblClick({\n data: d.data,\n index: i,\n color: d3.select(this).style(\"fill\")\n });\n });\n\n slices.attr('fill', function(d,i) { return color(d.data, i); });\n slices.attr('stroke', function(d,i) { return color(d.data, i); });\n\n var paths = ae.append('path').each(function(d) {\n this._current = d;\n });\n\n slices.select('path')\n .transition()\n .attr('d', function (d, i) { return arcs[i](d); })\n .attrTween('d', arcTween);\n\n if (showLabels) {\n // This does the normal label\n var labelsArc = [];\n for (var i = 0; i < data[0].length; i++) {\n labelsArc.push(arcs[i]);\n\n if (labelsOutside) {\n if (donut) {\n labelsArc[i] = d3.svg.arc().outerRadius(arcs[i].outerRadius());\n if (startAngle !== false) labelsArc[i].startAngle(startAngle);\n if (endAngle !== false) labelsArc[i].endAngle(endAngle);\n }\n } else if (!donut) {\n labelsArc[i].innerRadius(0);\n }\n }\n\n pieLabels.enter().append(\"g\").classed(\"nv-label\",true).each(function(d,i) {\n var group = d3.select(this);\n\n group.attr('transform', function (d, i) {\n if (labelSunbeamLayout) {\n d.outerRadius = arcsRadiusOuter[i] + 10; // Set Outer Coordinate\n d.innerRadius = arcsRadiusOuter[i] + 15; // Set Inner Coordinate\n var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);\n if ((d.startAngle + d.endAngle) / 2 < Math.PI) {\n rotateAngle -= 90;\n } else {\n rotateAngle += 90;\n }\n return 'translate(' + labelsArc[i].centroid(d) + ') rotate(' + rotateAngle + ')';\n } else {\n d.outerRadius = radius + 10; // Set Outer Coordinate\n d.innerRadius = radius + 15; // Set Inner Coordinate\n return 'translate(' + labelsArc[i].centroid(d) + ')'\n }\n });\n\n group.append('rect')\n .style('stroke', '#fff')\n .style('fill', '#fff')\n .attr(\"rx\", 3)\n .attr(\"ry\", 3);\n\n group.append('text')\n .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned\n .style('fill', '#000')\n });\n\n var labelLocationHash = {};\n var avgHeight = 14;\n var avgWidth = 140;\n var createHashKey = function(coordinates) {\n return Math.floor(coordinates[0]/avgWidth) * avgWidth + ',' + Math.floor(coordinates[1]/avgHeight) * avgHeight;\n };\n\n pieLabels.watchTransition(renderWatch, 'pie labels').attr('transform', function (d, i) {\n if (labelSunbeamLayout) {\n d.outerRadius = arcsRadiusOuter[i] + 10; // Set Outer Coordinate\n d.innerRadius = arcsRadiusOuter[i] + 15; // Set Inner Coordinate\n var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);\n if ((d.startAngle + d.endAngle) / 2 < Math.PI) {\n rotateAngle -= 90;\n } else {\n rotateAngle += 90;\n }\n return 'translate(' + labelsArc[i].centroid(d) + ') rotate(' + rotateAngle + ')';\n } else {\n d.outerRadius = radius + 10; // Set Outer Coordinate\n d.innerRadius = radius + 15; // Set Inner Coordinate\n\n /*\n Overlapping pie labels are not good. What this attempts to do is, prevent overlapping.\n Each label location is hashed, and if a hash collision occurs, we assume an overlap.\n Adjust the label's y-position to remove the overlap.\n */\n var center = labelsArc[i].centroid(d);\n if (d.value) {\n var hashKey = createHashKey(center);\n if (labelLocationHash[hashKey]) {\n center[1] -= avgHeight;\n }\n labelLocationHash[createHashKey(center)] = true;\n }\n return 'translate(' + center + ')'\n }\n });\n\n pieLabels.select(\".nv-label text\")\n .style('text-anchor', function(d,i) {\n //center the text on it's origin or begin/end if orthogonal aligned\n return labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle';\n })\n .text(function(d, i) {\n var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);\n var label = '';\n if (!d.value || percent < labelThreshold) return '';\n\n if(typeof labelType === 'function') {\n label = labelType(d, i, {\n 'key': getX(d.data),\n 'value': getY(d.data),\n 'percent': valueFormat(percent)\n });\n } else {\n switch (labelType) {\n case 'key':\n label = getX(d.data);\n break;\n case 'value':\n label = valueFormat(getY(d.data));\n break;\n case 'percent':\n label = d3.format('%')(percent);\n break;\n }\n }\n return label;\n })\n ;\n }\n\n\n // Computes the angle of an arc, converting from radians to degrees.\n function angle(d) {\n var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;\n return a > 90 ? a - 180 : a;\n }\n\n function arcTween(a, idx) {\n a.endAngle = isNaN(a.endAngle) ? 0 : a.endAngle;\n a.startAngle = isNaN(a.startAngle) ? 0 : a.startAngle;\n if (!donut) a.innerRadius = 0;\n var i = d3.interpolate(this._current, a);\n this._current = i(0);\n return function (t) {\n return arcs[idx](i(t));\n };\n }\n });\n\n renderWatch.renderEnd('pie immediate');\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n arcsRadius: { get: function () { return arcsRadius; }, set: function (_) { arcsRadius = _; } },\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n showLabels: {get: function(){return showLabels;}, set: function(_){showLabels=_;}},\n title: {get: function(){return title;}, set: function(_){title=_;}},\n titleOffset: {get: function(){return titleOffset;}, set: function(_){titleOffset=_;}},\n labelThreshold: {get: function(){return labelThreshold;}, set: function(_){labelThreshold=_;}},\n valueFormat: {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},\n x: {get: function(){return getX;}, set: function(_){getX=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n endAngle: {get: function(){return endAngle;}, set: function(_){endAngle=_;}},\n startAngle: {get: function(){return startAngle;}, set: function(_){startAngle=_;}},\n padAngle: {get: function(){return padAngle;}, set: function(_){padAngle=_;}},\n cornerRadius: {get: function(){return cornerRadius;}, set: function(_){cornerRadius=_;}},\n donutRatio: {get: function(){return donutRatio;}, set: function(_){donutRatio=_;}},\n labelsOutside: {get: function(){return labelsOutside;}, set: function(_){labelsOutside=_;}},\n labelSunbeamLayout: {get: function(){return labelSunbeamLayout;}, set: function(_){labelSunbeamLayout=_;}},\n donut: {get: function(){return donut;}, set: function(_){donut=_;}},\n growOnHover: {get: function(){return growOnHover;}, set: function(_){growOnHover=_;}},\n\n // depreciated after 1.7.1\n pieLabelsOutside: {get: function(){return labelsOutside;}, set: function(_){\n labelsOutside=_;\n nv.deprecated('pieLabelsOutside', 'use labelsOutside instead');\n }},\n // depreciated after 1.7.1\n donutLabelsOutside: {get: function(){return labelsOutside;}, set: function(_){\n labelsOutside=_;\n nv.deprecated('donutLabelsOutside', 'use labelsOutside instead');\n }},\n // deprecated after 1.7.1\n labelFormat: {get: function(){ return valueFormat;}, set: function(_) {\n valueFormat=_;\n nv.deprecated('labelFormat','use valueFormat instead');\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = typeof _.top != 'undefined' ? _.top : margin.top;\n margin.right = typeof _.right != 'undefined' ? _.right : margin.right;\n margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;\n margin.left = typeof _.left != 'undefined' ? _.left : margin.left;\n }},\n y: {get: function(){return getY;}, set: function(_){\n getY=d3.functor(_);\n }},\n color: {get: function(){return color;}, set: function(_){\n color=nv.utils.getColor(_);\n }},\n labelType: {get: function(){return labelType;}, set: function(_){\n labelType= _ || 'key';\n }}\n });\n\n nv.utils.initOptions(chart);\n return chart;\n};\nnv.models.pieChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var pie = nv.models.pie();\n var legend = nv.models.legend();\n var tooltip = nv.models.tooltip();\n\n var margin = {top: 30, right: 20, bottom: 20, left: 20}\n , width = null\n , height = null\n , showLegend = true\n , legendPosition = \"top\"\n , color = nv.utils.defaultColor()\n , state = nv.utils.state()\n , defaultState = null\n , noData = null\n , duration = 250\n , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState','renderEnd')\n ;\n\n tooltip\n .headerEnabled(false)\n .duration(0)\n .valueFormatter(function(d, i) {\n return pie.valueFormat()(d, i);\n });\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch);\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled })\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.active !== undefined) {\n data.forEach(function (series, i) {\n series.disabled = !state.active[i];\n });\n }\n }\n };\n\n //============================================================\n // Chart function\n //------------------------------------------------------------\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(pie);\n\n selection.each(function(data) {\n var container = d3.select(this);\n nv.utils.initSVG(container);\n\n var that = this;\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() { container.transition().call(chart); };\n chart.container = this;\n\n state.setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n //set state.disabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length) {\n nv.utils.noData(chart, container);\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-pieChart').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-pieChart').append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-pieWrap');\n gEnter.append('g').attr('class', 'nv-legendWrap');\n\n // Legend\n if (showLegend) {\n if (legendPosition === \"top\") {\n legend.width( availableWidth ).key(pie.x());\n\n wrap.select('.nv-legendWrap')\n .datum(data)\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n wrap.select('.nv-legendWrap')\n .attr('transform', 'translate(0,' + (-margin.top) +')');\n } else if (legendPosition === \"right\") {\n var legendWidth = nv.models.legend().width();\n if (availableWidth / 2 < legendWidth) {\n legendWidth = (availableWidth / 2)\n }\n legend.height(availableHeight).key(pie.x());\n legend.width(legendWidth);\n availableWidth -= legend.width();\n\n wrap.select('.nv-legendWrap')\n .datum(data)\n .call(legend)\n .attr('transform', 'translate(' + (availableWidth) +',0)');\n }\n }\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n // Main Chart Component(s)\n pie.width(availableWidth).height(availableHeight);\n var pieWrap = g.select('.nv-pieWrap').datum([data]);\n d3.transition(pieWrap).call(pie);\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState) {\n state[key] = newState[key];\n }\n dispatch.stateChange(state);\n chart.update();\n });\n\n // Update chart from a state object passed to event handler\n dispatch.on('changeState', function(e) {\n if (typeof e.disabled !== 'undefined') {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n state.disabled = e.disabled;\n }\n chart.update();\n });\n });\n\n renderWatch.renderEnd('pieChart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n pie.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt['series'] = {\n key: chart.x()(evt.data),\n value: chart.y()(evt.data),\n color: evt.color\n };\n tooltip.data(evt).hidden(false);\n });\n\n pie.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n\n pie.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.legend = legend;\n chart.dispatch = dispatch;\n chart.pie = pie;\n chart.tooltip = tooltip;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n // use Object get/set functionality to map between vars and chart functions\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n legendPosition: {get: function(){return legendPosition;}, set: function(_){legendPosition=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n color: {get: function(){return color;}, set: function(_){\n color = _;\n legend.color(color);\n pie.color(color);\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n }},\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }}\n });\n nv.utils.inheritOptions(chart, pie);\n nv.utils.initOptions(chart);\n return chart;\n};\n\nnv.models.scatter = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = null\n , height = null\n , color = nv.utils.defaultColor() // chooses color\n , id = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't select one\n , container = null\n , x = d3.scale.linear()\n , y = d3.scale.linear()\n , z = d3.scale.linear() //linear because d3.svg.shape.size is treated as area\n , getX = function(d) { return d.x } // accessor to get the x value\n , getY = function(d) { return d.y } // accessor to get the y value\n , getSize = function(d) { return d.size || 1} // accessor to get the point size\n , getShape = function(d) { return d.shape || 'circle' } // accessor to get point shape\n , forceX = [] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)\n , forceY = [] // List of numbers to Force into the Y scale\n , forceSize = [] // List of numbers to Force into the Size scale\n , interactive = true // If true, plots a voronoi overlay for advanced point intersection\n , pointActive = function(d) { return !d.notActive } // any points that return false will be filtered out\n , padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart\n , padDataOuter = .1 //outerPadding to imitate ordinal scale outer padding\n , clipEdge = false // if true, masks points within x and y scale\n , clipVoronoi = true // if true, masks each point with a circle... can turn off to slightly increase performance\n , showVoronoi = false // display the voronoi areas\n , clipRadius = function() { return 25 } // function to get the radius for voronoi point clips\n , xDomain = null // Override x domain (skips the calculation from data)\n , yDomain = null // Override y domain\n , xRange = null // Override x range\n , yRange = null // Override y range\n , sizeDomain = null // Override point size domain\n , sizeRange = null\n , singlePoint = false\n , dispatch = d3.dispatch('elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'renderEnd')\n , useVoronoi = true\n , duration = 250\n ;\n\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var x0, y0, z0 // used to store previous scales\n , timeoutID\n , needsUpdate = false // Flag for when the points are visually updating, but the interactive layer is behind, to disable tooltips\n , renderWatch = nv.utils.renderWatch(dispatch, duration)\n , _sizeRange_def = [16, 256]\n ;\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n container = d3.select(this);\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n nv.utils.initSVG(container);\n\n //add series index to each data point for reference\n data.forEach(function(series, i) {\n series.values.forEach(function(point) {\n point.series = i;\n });\n });\n\n // Setup Scales\n // remap and flatten the data for use in calculating the scales' domains\n var seriesData = (xDomain && yDomain && sizeDomain) ? [] : // if we know xDomain and yDomain and sizeDomain, no need to calculate.... if Size is constant remember to set sizeDomain to speed up performance\n d3.merge(\n data.map(function(d) {\n return d.values.map(function(d,i) {\n return { x: getX(d,i), y: getY(d,i), size: getSize(d,i) }\n })\n })\n );\n\n x .domain(xDomain || d3.extent(seriesData.map(function(d) { return d.x; }).concat(forceX)))\n\n if (padData && data[0])\n x.range(xRange || [(availableWidth * padDataOuter + availableWidth) / (2 *data[0].values.length), availableWidth - availableWidth * (1 + padDataOuter) / (2 * data[0].values.length) ]);\n //x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);\n else\n x.range(xRange || [0, availableWidth]);\n\n y .domain(yDomain || d3.extent(seriesData.map(function(d) { return d.y }).concat(forceY)))\n .range(yRange || [availableHeight, 0]);\n\n z .domain(sizeDomain || d3.extent(seriesData.map(function(d) { return d.size }).concat(forceSize)))\n .range(sizeRange || _sizeRange_def);\n\n // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point\n singlePoint = x.domain()[0] === x.domain()[1] || y.domain()[0] === y.domain()[1];\n\n if (x.domain()[0] === x.domain()[1])\n x.domain()[0] ?\n x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])\n : x.domain([-1,1]);\n\n if (y.domain()[0] === y.domain()[1])\n y.domain()[0] ?\n y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])\n : y.domain([-1,1]);\n\n if ( isNaN(x.domain()[0])) {\n x.domain([-1,1]);\n }\n\n if ( isNaN(y.domain()[0])) {\n y.domain([-1,1]);\n }\n\n x0 = x0 || x;\n y0 = y0 || y;\n z0 = z0 || z;\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-scatter').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatter nv-chart-' + id);\n var defsEnter = wrapEnter.append('defs');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n wrap.classed('nv-single-point', singlePoint);\n gEnter.append('g').attr('class', 'nv-groups');\n gEnter.append('g').attr('class', 'nv-point-paths');\n wrapEnter.append('g').attr('class', 'nv-point-clips');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-edge-clip-' + id)\n .append('rect');\n\n wrap.select('#nv-edge-clip-' + id + ' rect')\n .attr('width', availableWidth)\n .attr('height', (availableHeight > 0) ? availableHeight : 0);\n\n g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');\n\n function updateInteractiveLayer() {\n // Always clear needs-update flag regardless of whether or not\n // we will actually do anything (avoids needless invocations).\n needsUpdate = false;\n\n if (!interactive) return false;\n\n // inject series and point index for reference into voronoi\n if (useVoronoi === true) {\n var vertices = d3.merge(data.map(function(group, groupIndex) {\n return group.values\n .map(function(point, pointIndex) {\n // *Adding noise to make duplicates very unlikely\n // *Injecting series and point index for reference\n /* *Adding a 'jitter' to the points, because there's an issue in d3.geom.voronoi.\n */\n var pX = getX(point,pointIndex);\n var pY = getY(point,pointIndex);\n\n return [x(pX)+ Math.random() * 1e-4,\n y(pY)+ Math.random() * 1e-4,\n groupIndex,\n pointIndex, point]; //temp hack to add noise until I think of a better way so there are no duplicates\n })\n .filter(function(pointArray, pointIndex) {\n return pointActive(pointArray[4], pointIndex); // Issue #237.. move filter to after map, so pointIndex is correct!\n })\n })\n );\n\n if (vertices.length == 0) return false; // No active points, we're done\n if (vertices.length < 3) {\n // Issue #283 - Adding 2 dummy points to the voronoi b/c voronoi requires min 3 points to work\n vertices.push([x.range()[0] - 20, y.range()[0] - 20, null, null]);\n vertices.push([x.range()[1] + 20, y.range()[1] + 20, null, null]);\n vertices.push([x.range()[0] - 20, y.range()[0] + 20, null, null]);\n vertices.push([x.range()[1] + 20, y.range()[1] - 20, null, null]);\n }\n\n // keep voronoi sections from going more than 10 outside of graph\n // to avoid overlap with other things like legend etc\n var bounds = d3.geom.polygon([\n [-10,-10],\n [-10,height + 10],\n [width + 10,height + 10],\n [width + 10,-10]\n ]);\n\n var voronoi = d3.geom.voronoi(vertices).map(function(d, i) {\n return {\n 'data': bounds.clip(d),\n 'series': vertices[i][2],\n 'point': vertices[i][3]\n }\n });\n\n // nuke all voronoi paths on reload and recreate them\n wrap.select('.nv-point-paths').selectAll('path').remove();\n var pointPaths = wrap.select('.nv-point-paths').selectAll('path').data(voronoi);\n var vPointPaths = pointPaths\n .enter().append(\"svg:path\")\n .attr(\"d\", function(d) {\n if (!d || !d.data || d.data.length === 0)\n return 'M 0 0';\n else\n return \"M\" + d.data.join(\",\") + \"Z\";\n })\n .attr(\"id\", function(d,i) {\n return \"nv-path-\"+i; })\n .attr(\"clip-path\", function(d,i) { return \"url(#nv-clip-\"+i+\")\"; })\n ;\n\n // good for debugging point hover issues\n if (showVoronoi) {\n vPointPaths.style(\"fill\", d3.rgb(230, 230, 230))\n .style('fill-opacity', 0.4)\n .style('stroke-opacity', 1)\n .style(\"stroke\", d3.rgb(200,200,200));\n }\n\n if (clipVoronoi) {\n // voronoi sections are already set to clip,\n // just create the circles with the IDs they expect\n wrap.select('.nv-point-clips').selectAll('clipPath').remove();\n wrap.select('.nv-point-clips').selectAll(\"clipPath\")\n .data(vertices)\n .enter().append(\"svg:clipPath\")\n .attr(\"id\", function(d, i) { return \"nv-clip-\"+i;})\n .append(\"svg:circle\")\n .attr('cx', function(d) { return d[0]; })\n .attr('cy', function(d) { return d[1]; })\n .attr('r', clipRadius);\n }\n\n var mouseEventCallback = function(d, mDispatch) {\n if (needsUpdate) return 0;\n var series = data[d.series];\n if (series === undefined) return;\n var point = series.values[d.point];\n point['color'] = color(series, d.series);\n\n // standardize attributes for tooltip.\n point['x'] = getX(point);\n point['y'] = getY(point);\n\n // can't just get box of event node since it's actually a voronoi polygon\n var box = container.node().getBoundingClientRect();\n var scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n var pos = {\n left: x(getX(point, d.point)) + box.left + scrollLeft + margin.left + 10,\n top: y(getY(point, d.point)) + box.top + scrollTop + margin.top + 10\n };\n\n mDispatch({\n point: point,\n series: series,\n pos: pos,\n seriesIndex: d.series,\n pointIndex: d.point\n });\n };\n\n pointPaths\n .on('click', function(d) {\n mouseEventCallback(d, dispatch.elementClick);\n })\n .on('dblclick', function(d) {\n mouseEventCallback(d, dispatch.elementDblClick);\n })\n .on('mouseover', function(d) {\n mouseEventCallback(d, dispatch.elementMouseover);\n })\n .on('mouseout', function(d, i) {\n mouseEventCallback(d, dispatch.elementMouseout);\n });\n\n } else {\n // add event handlers to points instead voronoi paths\n wrap.select('.nv-groups').selectAll('.nv-group')\n .selectAll('.nv-point')\n //.data(dataWithPoints)\n //.style('pointer-events', 'auto') // recativate events, disabled by css\n .on('click', function(d,i) {\n //nv.log('test', d, i);\n if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point\n var series = data[d.series],\n point = series.values[i];\n\n dispatch.elementClick({\n point: point,\n series: series,\n pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],\n seriesIndex: d.series,\n pointIndex: i\n });\n })\n .on('dblclick', function(d,i) {\n if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point\n var series = data[d.series],\n point = series.values[i];\n\n dispatch.elementDblClick({\n point: point,\n series: series,\n pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],\n seriesIndex: d.series,\n pointIndex: i\n });\n })\n .on('mouseover', function(d,i) {\n if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point\n var series = data[d.series],\n point = series.values[i];\n\n dispatch.elementMouseover({\n point: point,\n series: series,\n pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],\n seriesIndex: d.series,\n pointIndex: i,\n color: color(d, i)\n });\n })\n .on('mouseout', function(d,i) {\n if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point\n var series = data[d.series],\n point = series.values[i];\n\n dispatch.elementMouseout({\n point: point,\n series: series,\n seriesIndex: d.series,\n pointIndex: i,\n color: color(d, i)\n });\n });\n }\n }\n\n needsUpdate = true;\n var groups = wrap.select('.nv-groups').selectAll('.nv-group')\n .data(function(d) { return d }, function(d) { return d.key });\n groups.enter().append('g')\n .style('stroke-opacity', 1e-6)\n .style('fill-opacity', 1e-6);\n groups.exit()\n .remove();\n groups\n .attr('class', function(d,i) { return 'nv-group nv-series-' + i })\n .classed('hover', function(d) { return d.hover });\n groups.watchTransition(renderWatch, 'scatter: groups')\n .style('fill', function(d,i) { return color(d, i) })\n .style('stroke', function(d,i) { return color(d, i) })\n .style('stroke-opacity', 1)\n .style('fill-opacity', .5);\n\n // create the points, maintaining their IDs from the original data set\n var points = groups.selectAll('path.nv-point')\n .data(function(d) {\n return d.values.map(\n function (point, pointIndex) {\n return [point, pointIndex]\n }).filter(\n function(pointArray, pointIndex) {\n return pointActive(pointArray[0], pointIndex)\n })\n });\n points.enter().append('path')\n .style('fill', function (d) { return d.color })\n .style('stroke', function (d) { return d.color })\n .attr('transform', function(d) {\n return 'translate(' + x0(getX(d[0],d[1])) + ',' + y0(getY(d[0],d[1])) + ')'\n })\n .attr('d',\n nv.utils.symbol()\n .type(function(d) { return getShape(d[0]); })\n .size(function(d) { return z(getSize(d[0],d[1])) })\n );\n points.exit().remove();\n groups.exit().selectAll('path.nv-point')\n .watchTransition(renderWatch, 'scatter exit')\n .attr('transform', function(d) {\n return 'translate(' + x(getX(d[0],d[1])) + ',' + y(getY(d[0],d[1])) + ')'\n })\n .remove();\n points.each(function(d) {\n d3.select(this)\n .classed('nv-point', true)\n .classed('nv-point-' + d[1], true)\n .classed('nv-noninteractive', !interactive)\n .classed('hover',false)\n ;\n });\n points\n .watchTransition(renderWatch, 'scatter points')\n .attr('transform', function(d) {\n //nv.log(d, getX(d[0],d[1]), x(getX(d[0],d[1])));\n return 'translate(' + x(getX(d[0],d[1])) + ',' + y(getY(d[0],d[1])) + ')'\n })\n .attr('d',\n nv.utils.symbol()\n .type(function(d) { return getShape(d[0]); })\n .size(function(d) { return z(getSize(d[0],d[1])) })\n );\n\n // Delay updating the invisible interactive layer for smoother animation\n clearTimeout(timeoutID); // stop repeat calls to updateInteractiveLayer\n timeoutID = setTimeout(updateInteractiveLayer, 300);\n //updateInteractiveLayer();\n\n //store old scales for use in transitions on update\n x0 = x.copy();\n y0 = y.copy();\n z0 = z.copy();\n\n });\n renderWatch.renderEnd('scatter immediate');\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n // utility function calls provided by this chart\n chart._calls = new function() {\n this.clearHighlights = function () {\n nv.dom.write(function() {\n container.selectAll(\".nv-point.hover\").classed(\"hover\", false);\n });\n return null;\n };\n this.highlightPoint = function (seriesIndex, pointIndex, isHoverOver) {\n nv.dom.write(function() {\n container.select(\" .nv-series-\" + seriesIndex + \" .nv-point-\" + pointIndex)\n .classed(\"hover\", isHoverOver);\n });\n };\n };\n\n // trigger calls from events too\n dispatch.on('elementMouseover.point', function(d) {\n if (interactive) chart._calls.highlightPoint(d.seriesIndex,d.pointIndex,true);\n });\n\n dispatch.on('elementMouseout.point', function(d) {\n if (interactive) chart._calls.highlightPoint(d.seriesIndex,d.pointIndex,false);\n });\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n pointScale: {get: function(){return z;}, set: function(_){z=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n pointDomain: {get: function(){return sizeDomain;}, set: function(_){sizeDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n pointRange: {get: function(){return sizeRange;}, set: function(_){sizeRange=_;}},\n forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},\n forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},\n forcePoint: {get: function(){return forceSize;}, set: function(_){forceSize=_;}},\n interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},\n pointActive: {get: function(){return pointActive;}, set: function(_){pointActive=_;}},\n padDataOuter: {get: function(){return padDataOuter;}, set: function(_){padDataOuter=_;}},\n padData: {get: function(){return padData;}, set: function(_){padData=_;}},\n clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},\n clipVoronoi: {get: function(){return clipVoronoi;}, set: function(_){clipVoronoi=_;}},\n clipRadius: {get: function(){return clipRadius;}, set: function(_){clipRadius=_;}},\n showVoronoi: {get: function(){return showVoronoi;}, set: function(_){showVoronoi=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n\n\n // simple functor options\n x: {get: function(){return getX;}, set: function(_){getX = d3.functor(_);}},\n y: {get: function(){return getY;}, set: function(_){getY = d3.functor(_);}},\n pointSize: {get: function(){return getSize;}, set: function(_){getSize = d3.functor(_);}},\n pointShape: {get: function(){return getShape;}, set: function(_){getShape = d3.functor(_);}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }},\n useVoronoi: {get: function(){return useVoronoi;}, set: function(_){\n useVoronoi = _;\n if (useVoronoi === false) {\n clipVoronoi = false;\n }\n }}\n });\n\n nv.utils.initOptions(chart);\n return chart;\n};\n\nnv.models.scatterChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var scatter = nv.models.scatter()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , legend = nv.models.legend()\n , distX = nv.models.distribution()\n , distY = nv.models.distribution()\n , tooltip = nv.models.tooltip()\n ;\n\n var margin = {top: 30, right: 20, bottom: 50, left: 75}\n , width = null\n , height = null\n , container = null\n , color = nv.utils.defaultColor()\n , x = scatter.xScale()\n , y = scatter.yScale()\n , showDistX = false\n , showDistY = false\n , showLegend = true\n , showXAxis = true\n , showYAxis = true\n , rightAlignYAxis = false\n , state = nv.utils.state()\n , defaultState = null\n , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')\n , noData = null\n , duration = 250\n ;\n\n scatter.xScale(x).yScale(y);\n xAxis.orient('bottom').tickPadding(10);\n yAxis\n .orient((rightAlignYAxis) ? 'right' : 'left')\n .tickPadding(10)\n ;\n distX.axis('x');\n distY.axis('y');\n tooltip\n .headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n })\n .valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n });\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var x0, y0\n , renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled })\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.active !== undefined)\n data.forEach(function(series,i) {\n series.disabled = !state.active[i];\n });\n }\n };\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(scatter);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n if (showDistX) renderWatch.models(distX);\n if (showDistY) renderWatch.models(distY);\n\n selection.each(function(data) {\n var that = this;\n\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() {\n if (duration === 0)\n container.call(chart);\n else\n container.transition().duration(duration).call(chart);\n };\n chart.container = this;\n\n state\n .setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n // DEPRECATED set state.disableddisabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display noData message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container);\n renderWatch.renderEnd('scatter immediate');\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = scatter.xScale();\n y = scatter.yScale();\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id());\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n // background for pointer events\n gEnter.append('rect').attr('class', 'nvd3 nv-background').style(\"pointer-events\",\"none\");\n\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y nv-axis');\n gEnter.append('g').attr('class', 'nv-scatterWrap');\n gEnter.append('g').attr('class', 'nv-regressionLinesWrap');\n gEnter.append('g').attr('class', 'nv-distWrap');\n gEnter.append('g').attr('class', 'nv-legendWrap');\n\n if (rightAlignYAxis) {\n g.select(\".nv-y.nv-axis\")\n .attr(\"transform\", \"translate(\" + availableWidth + \",0)\");\n }\n\n // Legend\n if (showLegend) {\n var legendWidth = availableWidth;\n legend.width(legendWidth);\n\n wrap.select('.nv-legendWrap')\n .datum(data)\n .call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n wrap.select('.nv-legendWrap')\n .attr('transform', 'translate(0' + ',' + (-margin.top) +')');\n }\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n // Main Chart Component(s)\n scatter\n .width(availableWidth)\n .height(availableHeight)\n .color(data.map(function(d,i) {\n d.color = d.color || color(d, i);\n return d.color;\n }).filter(function(d,i) { return !data[i].disabled }));\n\n wrap.select('.nv-scatterWrap')\n .datum(data.filter(function(d) { return !d.disabled }))\n .call(scatter);\n\n\n wrap.select('.nv-regressionLinesWrap')\n .attr('clip-path', 'url(#nv-edge-clip-' + scatter.id() + ')');\n\n var regWrap = wrap.select('.nv-regressionLinesWrap').selectAll('.nv-regLines')\n .data(function (d) {\n return d;\n });\n\n regWrap.enter().append('g').attr('class', 'nv-regLines');\n\n var regLine = regWrap.selectAll('.nv-regLine')\n .data(function (d) {\n return [d]\n });\n\n regLine.enter()\n .append('line').attr('class', 'nv-regLine')\n .style('stroke-opacity', 0);\n\n // don't add lines unless we have slope and intercept to use\n regLine.filter(function(d) {\n return d.intercept && d.slope;\n })\n .watchTransition(renderWatch, 'scatterPlusLineChart: regline')\n .attr('x1', x.range()[0])\n .attr('x2', x.range()[1])\n .attr('y1', function (d, i) {\n return y(x.domain()[0] * d.slope + d.intercept)\n })\n .attr('y2', function (d, i) {\n return y(x.domain()[1] * d.slope + d.intercept)\n })\n .style('stroke', function (d, i, j) {\n return color(d, j)\n })\n .style('stroke-opacity', function (d, i) {\n return (d.disabled || typeof d.slope === 'undefined' || typeof d.intercept === 'undefined') ? 0 : 1\n });\n\n // Setup Axes\n if (showXAxis) {\n xAxis\n .scale(x)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize( -availableHeight , 0);\n\n g.select('.nv-x.nv-axis')\n .attr('transform', 'translate(0,' + y.range()[0] + ')')\n .call(xAxis);\n }\n\n if (showYAxis) {\n yAxis\n .scale(y)\n ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )\n .tickSize( -availableWidth, 0);\n\n g.select('.nv-y.nv-axis')\n .call(yAxis);\n }\n\n\n if (showDistX) {\n distX\n .getData(scatter.x())\n .scale(x)\n .width(availableWidth)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled }));\n gEnter.select('.nv-distWrap').append('g')\n .attr('class', 'nv-distributionX');\n g.select('.nv-distributionX')\n .attr('transform', 'translate(0,' + y.range()[0] + ')')\n .datum(data.filter(function(d) { return !d.disabled }))\n .call(distX);\n }\n\n if (showDistY) {\n distY\n .getData(scatter.y())\n .scale(y)\n .width(availableHeight)\n .color(data.map(function(d,i) {\n return d.color || color(d, i);\n }).filter(function(d,i) { return !data[i].disabled }));\n gEnter.select('.nv-distWrap').append('g')\n .attr('class', 'nv-distributionY');\n g.select('.nv-distributionY')\n .attr('transform', 'translate(' + (rightAlignYAxis ? availableWidth : -distY.size() ) + ',0)')\n .datum(data.filter(function(d) { return !d.disabled }))\n .call(distY);\n }\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState)\n state[key] = newState[key];\n dispatch.stateChange(state);\n chart.update();\n });\n\n // Update chart from a state object passed to event handler\n dispatch.on('changeState', function(e) {\n if (typeof e.disabled !== 'undefined') {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n state.disabled = e.disabled;\n }\n chart.update();\n });\n\n // mouseover needs availableHeight so we just keep scatter mouse events inside the chart block\n scatter.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n container.select('.nv-chart-' + scatter.id() + ' .nv-series-' + evt.seriesIndex + ' .nv-distx-' + evt.pointIndex)\n .attr('y1', 0);\n container.select('.nv-chart-' + scatter.id() + ' .nv-series-' + evt.seriesIndex + ' .nv-disty-' + evt.pointIndex)\n .attr('x2', distY.size());\n });\n\n scatter.dispatch.on('elementMouseover.tooltip', function(evt) {\n container.select('.nv-series-' + evt.seriesIndex + ' .nv-distx-' + evt.pointIndex)\n .attr('y1', evt.pos.top - availableHeight - margin.top);\n container.select('.nv-series-' + evt.seriesIndex + ' .nv-disty-' + evt.pointIndex)\n .attr('x2', evt.pos.left + distX.size() - margin.left);\n tooltip.position(evt.pos).data(evt).hidden(false);\n });\n\n //store old scales for use in transitions on update\n x0 = x.copy();\n y0 = y.copy();\n\n });\n\n renderWatch.renderEnd('scatter with line immediate');\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.scatter = scatter;\n chart.legend = legend;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.distX = distX;\n chart.distY = distY;\n chart.tooltip = tooltip;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n container: {get: function(){return container;}, set: function(_){container=_;}},\n showDistX: {get: function(){return showDistX;}, set: function(_){showDistX=_;}},\n showDistY: {get: function(){return showDistY;}, set: function(_){showDistY=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n duration: {get: function(){return duration;}, set: function(_){duration=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n tooltipXContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'This option is removed, put values into main tooltip.');\n }},\n tooltipYContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'This option is removed, put values into main tooltip.');\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){\n rightAlignYAxis = _;\n yAxis.orient( (_) ? 'right' : 'left');\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n distX.color(color);\n distY.color(color);\n }}\n });\n\n nv.utils.inheritOptions(chart, scatter);\n nv.utils.initOptions(chart);\n return chart;\n};\n\nnv.models.sparkline = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 2, right: 0, bottom: 2, left: 0}\n , width = 400\n , height = 32\n , container = null\n , animate = true\n , x = d3.scale.linear()\n , y = d3.scale.linear()\n , getX = function(d) { return d.x }\n , getY = function(d) { return d.y }\n , color = nv.utils.getColor(['#000'])\n , xDomain\n , yDomain\n , xRange\n , yRange\n ;\n\n function chart(selection) {\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right,\n availableHeight = height - margin.top - margin.bottom;\n\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n // Setup Scales\n x .domain(xDomain || d3.extent(data, getX ))\n .range(xRange || [0, availableWidth]);\n\n y .domain(yDomain || d3.extent(data, getY ))\n .range(yRange || [availableHeight, 0]);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-sparkline').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparkline');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')\n\n var paths = wrap.selectAll('path')\n .data(function(d) { return [d] });\n paths.enter().append('path');\n paths.exit().remove();\n paths\n .style('stroke', function(d,i) { return d.color || color(d, i) })\n .attr('d', d3.svg.line()\n .x(function(d,i) { return x(getX(d,i)) })\n .y(function(d,i) { return y(getY(d,i)) })\n );\n\n // TODO: Add CURRENT data point (Need Min, Mac, Current / Most recent)\n var points = wrap.selectAll('circle.nv-point')\n .data(function(data) {\n var yValues = data.map(function(d, i) { return getY(d,i); });\n function pointIndex(index) {\n if (index != -1) {\n var result = data[index];\n result.pointIndex = index;\n return result;\n } else {\n return null;\n }\n }\n var maxPoint = pointIndex(yValues.lastIndexOf(y.domain()[1])),\n minPoint = pointIndex(yValues.indexOf(y.domain()[0])),\n currentPoint = pointIndex(yValues.length - 1);\n return [minPoint, maxPoint, currentPoint].filter(function (d) {return d != null;});\n });\n points.enter().append('circle');\n points.exit().remove();\n points\n .attr('cx', function(d,i) { return x(getX(d,d.pointIndex)) })\n .attr('cy', function(d,i) { return y(getY(d,d.pointIndex)) })\n .attr('r', 2)\n .attr('class', function(d,i) {\n return getX(d, d.pointIndex) == x.domain()[1] ? 'nv-point nv-currentValue' :\n getY(d, d.pointIndex) == y.domain()[0] ? 'nv-point nv-minValue' : 'nv-point nv-maxValue'\n });\n });\n\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},\n yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},\n xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},\n yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},\n xScale: {get: function(){return x;}, set: function(_){x=_;}},\n yScale: {get: function(){return y;}, set: function(_){y=_;}},\n animate: {get: function(){return animate;}, set: function(_){animate=_;}},\n\n //functor options\n x: {get: function(){return getX;}, set: function(_){getX=d3.functor(_);}},\n y: {get: function(){return getY;}, set: function(_){getY=d3.functor(_);}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n return chart;\n};\n\nnv.models.sparklinePlus = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var sparkline = nv.models.sparkline();\n\n var margin = {top: 15, right: 100, bottom: 10, left: 50}\n , width = null\n , height = null\n , x\n , y\n , index = []\n , paused = false\n , xTickFormat = d3.format(',r')\n , yTickFormat = d3.format(',.2f')\n , showLastValue = true\n , alignValue = true\n , rightAlignValue = false\n , noData = null\n ;\n\n function chart(selection) {\n selection.each(function(data) {\n var container = d3.select(this);\n nv.utils.initSVG(container);\n\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() { container.call(chart); };\n chart.container = this;\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n var currentValue = sparkline.y()(data[data.length-1], data.length-1);\n\n // Setup Scales\n x = sparkline.xScale();\n y = sparkline.yScale();\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-sparklineplus').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparklineplus');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-sparklineWrap');\n gEnter.append('g').attr('class', 'nv-valueWrap');\n gEnter.append('g').attr('class', 'nv-hoverArea');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n // Main Chart Component(s)\n var sparklineWrap = g.select('.nv-sparklineWrap');\n\n sparkline.width(availableWidth).height(availableHeight);\n sparklineWrap.call(sparkline);\n\n if (showLastValue) {\n var valueWrap = g.select('.nv-valueWrap');\n var value = valueWrap.selectAll('.nv-currentValue')\n .data([currentValue]);\n\n value.enter().append('text').attr('class', 'nv-currentValue')\n .attr('dx', rightAlignValue ? -8 : 8)\n .attr('dy', '.9em')\n .style('text-anchor', rightAlignValue ? 'end' : 'start');\n\n value\n .attr('x', availableWidth + (rightAlignValue ? margin.right : 0))\n .attr('y', alignValue ? function (d) {\n return y(d)\n } : 0)\n .style('fill', sparkline.color()(data[data.length - 1], data.length - 1))\n .text(yTickFormat(currentValue));\n }\n\n gEnter.select('.nv-hoverArea').append('rect')\n .on('mousemove', sparklineHover)\n .on('click', function() { paused = !paused })\n .on('mouseout', function() { index = []; updateValueLine(); });\n\n g.select('.nv-hoverArea rect')\n .attr('transform', function(d) { return 'translate(' + -margin.left + ',' + -margin.top + ')' })\n .attr('width', availableWidth + margin.left + margin.right)\n .attr('height', availableHeight + margin.top);\n\n //index is currently global (within the chart), may or may not keep it that way\n function updateValueLine() {\n if (paused) return;\n\n var hoverValue = g.selectAll('.nv-hoverValue').data(index);\n\n var hoverEnter = hoverValue.enter()\n .append('g').attr('class', 'nv-hoverValue')\n .style('stroke-opacity', 0)\n .style('fill-opacity', 0);\n\n hoverValue.exit()\n .transition().duration(250)\n .style('stroke-opacity', 0)\n .style('fill-opacity', 0)\n .remove();\n\n hoverValue\n .attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })\n .transition().duration(250)\n .style('stroke-opacity', 1)\n .style('fill-opacity', 1);\n\n if (!index.length) return;\n\n hoverEnter.append('line')\n .attr('x1', 0)\n .attr('y1', -margin.top)\n .attr('x2', 0)\n .attr('y2', availableHeight);\n\n hoverEnter.append('text').attr('class', 'nv-xValue')\n .attr('x', -6)\n .attr('y', -margin.top)\n .attr('text-anchor', 'end')\n .attr('dy', '.9em');\n\n g.select('.nv-hoverValue .nv-xValue')\n .text(xTickFormat(sparkline.x()(data[index[0]], index[0])));\n\n hoverEnter.append('text').attr('class', 'nv-yValue')\n .attr('x', 6)\n .attr('y', -margin.top)\n .attr('text-anchor', 'start')\n .attr('dy', '.9em');\n\n g.select('.nv-hoverValue .nv-yValue')\n .text(yTickFormat(sparkline.y()(data[index[0]], index[0])));\n }\n\n function sparklineHover() {\n if (paused) return;\n\n var pos = d3.mouse(this)[0] - margin.left;\n\n function getClosestIndex(data, x) {\n var distance = Math.abs(sparkline.x()(data[0], 0) - x);\n var closestIndex = 0;\n for (var i = 0; i < data.length; i++){\n if (Math.abs(sparkline.x()(data[i], i) - x) < distance) {\n distance = Math.abs(sparkline.x()(data[i], i) - x);\n closestIndex = i;\n }\n }\n return closestIndex;\n }\n\n index = [getClosestIndex(data, Math.round(x.invert(pos)))];\n updateValueLine();\n }\n\n });\n\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.sparkline = sparkline;\n\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n xTickFormat: {get: function(){return xTickFormat;}, set: function(_){xTickFormat=_;}},\n yTickFormat: {get: function(){return yTickFormat;}, set: function(_){yTickFormat=_;}},\n showLastValue: {get: function(){return showLastValue;}, set: function(_){showLastValue=_;}},\n alignValue: {get: function(){return alignValue;}, set: function(_){alignValue=_;}},\n rightAlignValue: {get: function(){return rightAlignValue;}, set: function(_){rightAlignValue=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }}\n });\n\n nv.utils.inheritOptions(chart, sparkline);\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\nnv.models.stackedArea = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = 960\n , height = 500\n , color = nv.utils.defaultColor() // a function that computes the color\n , id = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't selet one\n , container = null\n , getX = function(d) { return d.x } // accessor to get the x value from a data point\n , getY = function(d) { return d.y } // accessor to get the y value from a data point\n , style = 'stack'\n , offset = 'zero'\n , order = 'default'\n , interpolate = 'linear' // controls the line interpolation\n , clipEdge = false // if true, masks lines within x and y scale\n , x //can be accessed via chart.xScale()\n , y //can be accessed via chart.yScale()\n , scatter = nv.models.scatter()\n , duration = 250\n , dispatch = d3.dispatch('areaClick', 'areaMouseover', 'areaMouseout','renderEnd', 'elementClick', 'elementMouseover', 'elementMouseout')\n ;\n\n scatter\n .pointSize(2.2) // default size\n .pointDomain([2.2, 2.2]) // all the same size by default\n ;\n\n /************************************\n * offset:\n * 'wiggle' (stream)\n * 'zero' (stacked)\n * 'expand' (normalize to 100%)\n * 'silhouette' (simple centered)\n *\n * order:\n * 'inside-out' (stream)\n * 'default' (input order)\n ************************************/\n\n var renderWatch = nv.utils.renderWatch(dispatch, duration);\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(scatter);\n selection.each(function(data) {\n var availableWidth = width - margin.left - margin.right,\n availableHeight = height - margin.top - margin.bottom;\n\n container = d3.select(this);\n nv.utils.initSVG(container);\n\n // Setup Scales\n x = scatter.xScale();\n y = scatter.yScale();\n\n var dataRaw = data;\n // Injecting point index into each point because d3.layout.stack().out does not give index\n data.forEach(function(aseries, i) {\n aseries.seriesIndex = i;\n aseries.values = aseries.values.map(function(d, j) {\n d.index = j;\n d.seriesIndex = i;\n return d;\n });\n });\n\n var dataFiltered = data.filter(function(series) {\n return !series.disabled;\n });\n\n data = d3.layout.stack()\n .order(order)\n .offset(offset)\n .values(function(d) { return d.values }) //TODO: make values customizeable in EVERY model in this fashion\n .x(getX)\n .y(getY)\n .out(function(d, y0, y) {\n d.display = {\n y: y,\n y0: y0\n };\n })\n (dataFiltered);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-stackedarea').data([data]);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-stackedarea');\n var defsEnter = wrapEnter.append('defs');\n var gEnter = wrapEnter.append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-areaWrap');\n gEnter.append('g').attr('class', 'nv-scatterWrap');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n \n // If the user has not specified forceY, make sure 0 is included in the domain\n // Otherwise, use user-specified values for forceY\n if (scatter.forceY().length == 0) {\n scatter.forceY().push(0);\n }\n \n scatter\n .width(availableWidth)\n .height(availableHeight)\n .x(getX)\n .y(function(d) { return d.display.y + d.display.y0 })\n .forceY([0])\n .color(data.map(function(d,i) {\n return d.color || color(d, d.seriesIndex);\n }));\n\n var scatterWrap = g.select('.nv-scatterWrap')\n .datum(data);\n\n scatterWrap.call(scatter);\n\n defsEnter.append('clipPath')\n .attr('id', 'nv-edge-clip-' + id)\n .append('rect');\n\n wrap.select('#nv-edge-clip-' + id + ' rect')\n .attr('width', availableWidth)\n .attr('height', availableHeight);\n\n g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');\n\n var area = d3.svg.area()\n .x(function(d,i) { return x(getX(d,i)) })\n .y0(function(d) {\n return y(d.display.y0)\n })\n .y1(function(d) {\n return y(d.display.y + d.display.y0)\n })\n .interpolate(interpolate);\n\n var zeroArea = d3.svg.area()\n .x(function(d,i) { return x(getX(d,i)) })\n .y0(function(d) { return y(d.display.y0) })\n .y1(function(d) { return y(d.display.y0) });\n\n var path = g.select('.nv-areaWrap').selectAll('path.nv-area')\n .data(function(d) { return d });\n\n path.enter().append('path').attr('class', function(d,i) { return 'nv-area nv-area-' + i })\n .attr('d', function(d,i){\n return zeroArea(d.values, d.seriesIndex);\n })\n .on('mouseover', function(d,i) {\n d3.select(this).classed('hover', true);\n dispatch.areaMouseover({\n point: d,\n series: d.key,\n pos: [d3.event.pageX, d3.event.pageY],\n seriesIndex: d.seriesIndex\n });\n })\n .on('mouseout', function(d,i) {\n d3.select(this).classed('hover', false);\n dispatch.areaMouseout({\n point: d,\n series: d.key,\n pos: [d3.event.pageX, d3.event.pageY],\n seriesIndex: d.seriesIndex\n });\n })\n .on('click', function(d,i) {\n d3.select(this).classed('hover', false);\n dispatch.areaClick({\n point: d,\n series: d.key,\n pos: [d3.event.pageX, d3.event.pageY],\n seriesIndex: d.seriesIndex\n });\n });\n\n path.exit().remove();\n path.style('fill', function(d,i){\n return d.color || color(d, d.seriesIndex)\n })\n .style('stroke', function(d,i){ return d.color || color(d, d.seriesIndex) });\n path.watchTransition(renderWatch,'stackedArea path')\n .attr('d', function(d,i) {\n return area(d.values,i)\n });\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n scatter.dispatch.on('elementMouseover.area', function(e) {\n g.select('.nv-chart-' + id + ' .nv-area-' + e.seriesIndex).classed('hover', true);\n });\n scatter.dispatch.on('elementMouseout.area', function(e) {\n g.select('.nv-chart-' + id + ' .nv-area-' + e.seriesIndex).classed('hover', false);\n });\n\n //Special offset functions\n chart.d3_stackedOffset_stackPercent = function(stackData) {\n var n = stackData.length, //How many series\n m = stackData[0].length, //how many points per series\n i,\n j,\n o,\n y0 = [];\n\n for (j = 0; j < m; ++j) { //Looping through all points\n for (i = 0, o = 0; i < dataRaw.length; i++) { //looping through all series\n o += getY(dataRaw[i].values[j]); //total y value of all series at a certian point in time.\n }\n\n if (o) for (i = 0; i < n; i++) { //(total y value of all series at point in time i) != 0\n stackData[i][j][1] /= o;\n } else { //(total y value of all series at point in time i) == 0\n for (i = 0; i < n; i++) {\n stackData[i][j][1] = 0;\n }\n }\n }\n for (j = 0; j < m; ++j) y0[j] = 0;\n return y0;\n };\n\n });\n\n renderWatch.renderEnd('stackedArea immediate');\n return chart;\n }\n\n //============================================================\n // Global getters and setters\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.scatter = scatter;\n\n scatter.dispatch.on('elementClick', function(){ dispatch.elementClick.apply(this, arguments); });\n scatter.dispatch.on('elementMouseover', function(){ dispatch.elementMouseover.apply(this, arguments); });\n scatter.dispatch.on('elementMouseout', function(){ dispatch.elementMouseout.apply(this, arguments); });\n\n chart.interpolate = function(_) {\n if (!arguments.length) return interpolate;\n interpolate = _;\n return chart;\n };\n\n chart.duration = function(_) {\n if (!arguments.length) return duration;\n duration = _;\n renderWatch.reset(duration);\n scatter.duration(duration);\n return chart;\n };\n\n chart.dispatch = dispatch;\n chart.scatter = scatter;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},\n offset: {get: function(){return offset;}, set: function(_){offset=_;}},\n order: {get: function(){return order;}, set: function(_){order=_;}},\n interpolate: {get: function(){return interpolate;}, set: function(_){interpolate=_;}},\n\n // simple functor options\n x: {get: function(){return getX;}, set: function(_){getX = d3.functor(_);}},\n y: {get: function(){return getY;}, set: function(_){getY = d3.functor(_);}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n }},\n style: {get: function(){return style;}, set: function(_){\n style = _;\n switch (style) {\n case 'stack':\n chart.offset('zero');\n chart.order('default');\n break;\n case 'stream':\n chart.offset('wiggle');\n chart.order('inside-out');\n break;\n case 'stream-center':\n chart.offset('silhouette');\n chart.order('inside-out');\n break;\n case 'expand':\n chart.offset('expand');\n chart.order('default');\n break;\n case 'stack_percent':\n chart.offset(chart.d3_stackedOffset_stackPercent);\n chart.order('default');\n break;\n }\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n scatter.duration(duration);\n }}\n });\n\n nv.utils.inheritOptions(chart, scatter);\n nv.utils.initOptions(chart);\n\n return chart;\n};\n\nnv.models.stackedAreaChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var stacked = nv.models.stackedArea()\n , xAxis = nv.models.axis()\n , yAxis = nv.models.axis()\n , legend = nv.models.legend()\n , controls = nv.models.legend()\n , interactiveLayer = nv.interactiveGuideline()\n , tooltip = nv.models.tooltip()\n ;\n\n var margin = {top: 30, right: 25, bottom: 50, left: 60}\n , width = null\n , height = null\n , color = nv.utils.defaultColor()\n , showControls = true\n , showLegend = true\n , showXAxis = true\n , showYAxis = true\n , rightAlignYAxis = false\n , useInteractiveGuideline = false\n , x //can be accessed via chart.xScale()\n , y //can be accessed via chart.yScale()\n , state = nv.utils.state()\n , defaultState = null\n , noData = null\n , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd')\n , controlWidth = 250\n , controlOptions = ['Stacked','Stream','Expanded']\n , controlLabels = {}\n , duration = 250\n ;\n\n state.style = stacked.style();\n xAxis.orient('bottom').tickPadding(7);\n yAxis.orient((rightAlignYAxis) ? 'right' : 'left');\n\n tooltip\n .headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n })\n .valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n });\n\n interactiveLayer.tooltip\n .headerFormatter(function(d, i) {\n return xAxis.tickFormat()(d, i);\n })\n .valueFormatter(function(d, i) {\n return yAxis.tickFormat()(d, i);\n });\n\n var oldYTickFormat = null,\n oldValueFormatter = null;\n\n controls.updateState(false);\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch);\n var style = stacked.style();\n\n var stateGetter = function(data) {\n return function(){\n return {\n active: data.map(function(d) { return !d.disabled }),\n style: stacked.style()\n };\n }\n };\n\n var stateSetter = function(data) {\n return function(state) {\n if (state.style !== undefined)\n style = state.style;\n if (state.active !== undefined)\n data.forEach(function(series,i) {\n series.disabled = !state.active[i];\n });\n }\n };\n\n var percentFormatter = d3.format('%');\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(stacked);\n if (showXAxis) renderWatch.models(xAxis);\n if (showYAxis) renderWatch.models(yAxis);\n\n selection.each(function(data) {\n var container = d3.select(this),\n that = this;\n nv.utils.initSVG(container);\n\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() { container.transition().duration(duration).call(chart); };\n chart.container = this;\n\n state\n .setter(stateSetter(data), chart.update)\n .getter(stateGetter(data))\n .update();\n\n // DEPRECATED set state.disabled\n state.disabled = data.map(function(d) { return !!d.disabled });\n\n if (!defaultState) {\n var key;\n defaultState = {};\n for (key in state) {\n if (state[key] instanceof Array)\n defaultState[key] = state[key].slice(0);\n else\n defaultState[key] = state[key];\n }\n }\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {\n nv.utils.noData(chart, container)\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup Scales\n x = stacked.xScale();\n y = stacked.yScale();\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-stackedAreaChart').data([data]);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-stackedAreaChart').append('g');\n var g = wrap.select('g');\n\n gEnter.append(\"rect\").style(\"opacity\",0);\n gEnter.append('g').attr('class', 'nv-x nv-axis');\n gEnter.append('g').attr('class', 'nv-y nv-axis');\n gEnter.append('g').attr('class', 'nv-stackedWrap');\n gEnter.append('g').attr('class', 'nv-legendWrap');\n gEnter.append('g').attr('class', 'nv-controlsWrap');\n gEnter.append('g').attr('class', 'nv-interactive');\n\n g.select(\"rect\").attr(\"width\",availableWidth).attr(\"height\",availableHeight);\n\n // Legend\n if (showLegend) {\n var legendWidth = (showControls) ? availableWidth - controlWidth : availableWidth;\n\n legend.width(legendWidth);\n g.select('.nv-legendWrap').datum(data).call(legend);\n\n if ( margin.top != legend.height()) {\n margin.top = legend.height();\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n g.select('.nv-legendWrap')\n .attr('transform', 'translate(' + (availableWidth-legendWidth) + ',' + (-margin.top) +')');\n }\n\n // Controls\n if (showControls) {\n var controlsData = [\n {\n key: controlLabels.stacked || 'Stacked',\n metaKey: 'Stacked',\n disabled: stacked.style() != 'stack',\n style: 'stack'\n },\n {\n key: controlLabels.stream || 'Stream',\n metaKey: 'Stream',\n disabled: stacked.style() != 'stream',\n style: 'stream'\n },\n {\n key: controlLabels.expanded || 'Expanded',\n metaKey: 'Expanded',\n disabled: stacked.style() != 'expand',\n style: 'expand'\n },\n {\n key: controlLabels.stack_percent || 'Stack %',\n metaKey: 'Stack_Percent',\n disabled: stacked.style() != 'stack_percent',\n style: 'stack_percent'\n }\n ];\n\n controlWidth = (controlOptions.length/3) * 260;\n controlsData = controlsData.filter(function(d) {\n return controlOptions.indexOf(d.metaKey) !== -1;\n });\n\n controls\n .width( controlWidth )\n .color(['#444', '#444', '#444']);\n\n g.select('.nv-controlsWrap')\n .datum(controlsData)\n .call(controls);\n\n if ( margin.top != Math.max(controls.height(), legend.height()) ) {\n margin.top = Math.max(controls.height(), legend.height());\n availableHeight = nv.utils.availableHeight(height, container, margin);\n }\n\n g.select('.nv-controlsWrap')\n .attr('transform', 'translate(0,' + (-margin.top) +')');\n }\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n if (rightAlignYAxis) {\n g.select(\".nv-y.nv-axis\")\n .attr(\"transform\", \"translate(\" + availableWidth + \",0)\");\n }\n\n //Set up interactive layer\n if (useInteractiveGuideline) {\n interactiveLayer\n .width(availableWidth)\n .height(availableHeight)\n .margin({left: margin.left, top: margin.top})\n .svgContainer(container)\n .xScale(x);\n wrap.select(\".nv-interactive\").call(interactiveLayer);\n }\n\n stacked\n .width(availableWidth)\n .height(availableHeight);\n\n var stackedWrap = g.select('.nv-stackedWrap')\n .datum(data);\n\n stackedWrap.transition().call(stacked);\n\n // Setup Axes\n if (showXAxis) {\n xAxis.scale(x)\n ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )\n .tickSize( -availableHeight, 0);\n\n g.select('.nv-x.nv-axis')\n .attr('transform', 'translate(0,' + availableHeight + ')');\n\n g.select('.nv-x.nv-axis')\n .transition().duration(0)\n .call(xAxis);\n }\n\n if (showYAxis) {\n var ticks;\n if (stacked.offset() === 'wiggle') {\n ticks = 0;\n }\n else {\n ticks = nv.utils.calcTicksY(availableHeight/36, data);\n }\n yAxis.scale(y)\n ._ticks(ticks)\n .tickSize(-availableWidth, 0);\n\n if (stacked.style() === 'expand' || stacked.style() === 'stack_percent') {\n var currentFormat = yAxis.tickFormat();\n\n if ( !oldYTickFormat || currentFormat !== percentFormatter )\n oldYTickFormat = currentFormat;\n\n //Forces the yAxis to use percentage in 'expand' mode.\n yAxis.tickFormat(percentFormatter);\n }\n else {\n if (oldYTickFormat) {\n yAxis.tickFormat(oldYTickFormat);\n oldYTickFormat = null;\n }\n }\n\n g.select('.nv-y.nv-axis')\n .transition().duration(0)\n .call(yAxis);\n }\n\n //============================================================\n // Event Handling/Dispatching (in chart's scope)\n //------------------------------------------------------------\n\n stacked.dispatch.on('areaClick.toggle', function(e) {\n if (data.filter(function(d) { return !d.disabled }).length === 1)\n data.forEach(function(d) {\n d.disabled = false;\n });\n else\n data.forEach(function(d,i) {\n d.disabled = (i != e.seriesIndex);\n });\n\n state.disabled = data.map(function(d) { return !!d.disabled });\n dispatch.stateChange(state);\n\n chart.update();\n });\n\n legend.dispatch.on('stateChange', function(newState) {\n for (var key in newState)\n state[key] = newState[key];\n dispatch.stateChange(state);\n chart.update();\n });\n\n controls.dispatch.on('legendClick', function(d,i) {\n if (!d.disabled) return;\n\n controlsData = controlsData.map(function(s) {\n s.disabled = true;\n return s;\n });\n d.disabled = false;\n\n stacked.style(d.style);\n\n\n state.style = stacked.style();\n dispatch.stateChange(state);\n\n chart.update();\n });\n\n interactiveLayer.dispatch.on('elementMousemove', function(e) {\n stacked.clearHighlights();\n var singlePoint, pointIndex, pointXLocation, allData = [];\n data\n .filter(function(series, i) {\n series.seriesIndex = i;\n return !series.disabled;\n })\n .forEach(function(series,i) {\n pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());\n var point = series.values[pointIndex];\n var pointYValue = chart.y()(point, pointIndex);\n if (pointYValue != null) {\n stacked.highlightPoint(i, pointIndex, true);\n }\n if (typeof point === 'undefined') return;\n if (typeof singlePoint === 'undefined') singlePoint = point;\n if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));\n\n //If we are in 'expand' mode, use the stacked percent value instead of raw value.\n var tooltipValue = (stacked.style() == 'expand') ? point.display.y : chart.y()(point,pointIndex);\n allData.push({\n key: series.key,\n value: tooltipValue,\n color: color(series,series.seriesIndex),\n stackedValue: point.display\n });\n });\n\n allData.reverse();\n\n //Highlight the tooltip entry based on which stack the mouse is closest to.\n if (allData.length > 2) {\n var yValue = chart.yScale().invert(e.mouseY);\n var yDistMax = Infinity, indexToHighlight = null;\n allData.forEach(function(series,i) {\n\n //To handle situation where the stacked area chart is negative, we need to use absolute values\n //when checking if the mouse Y value is within the stack area.\n yValue = Math.abs(yValue);\n var stackedY0 = Math.abs(series.stackedValue.y0);\n var stackedY = Math.abs(series.stackedValue.y);\n if ( yValue >= stackedY0 && yValue <= (stackedY + stackedY0))\n {\n indexToHighlight = i;\n return;\n }\n });\n if (indexToHighlight != null)\n allData[indexToHighlight].highlight = true;\n }\n\n var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));\n\n var valueFormatter = interactiveLayer.tooltip.valueFormatter();\n // Keeps track of the tooltip valueFormatter if the chart changes to expanded view\n if (stacked.style() === 'expand' || stacked.style() === 'stack_percent') {\n if ( !oldValueFormatter ) {\n oldValueFormatter = valueFormatter;\n }\n //Forces the tooltip to use percentage in 'expand' mode.\n valueFormatter = d3.format(\".1%\");\n }\n else {\n if (oldValueFormatter) {\n valueFormatter = oldValueFormatter;\n oldValueFormatter = null;\n }\n }\n\n interactiveLayer.tooltip\n .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})\n .chartContainer(that.parentNode)\n .valueFormatter(valueFormatter)\n .data(\n {\n value: xValue,\n series: allData\n }\n )();\n\n interactiveLayer.renderGuideLine(pointXLocation);\n\n });\n\n interactiveLayer.dispatch.on(\"elementMouseout\",function(e) {\n stacked.clearHighlights();\n });\n\n // Update chart from a state object passed to event handler\n dispatch.on('changeState', function(e) {\n\n if (typeof e.disabled !== 'undefined' && data.length === e.disabled.length) {\n data.forEach(function(series,i) {\n series.disabled = e.disabled[i];\n });\n\n state.disabled = e.disabled;\n }\n\n if (typeof e.style !== 'undefined') {\n stacked.style(e.style);\n style = e.style;\n }\n\n chart.update();\n });\n\n });\n\n renderWatch.renderEnd('stacked Area chart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n stacked.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt.point['x'] = stacked.x()(evt.point);\n evt.point['y'] = stacked.y()(evt.point);\n tooltip.data(evt).position(evt.pos).hidden(false);\n });\n\n stacked.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true)\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.stacked = stacked;\n chart.legend = legend;\n chart.controls = controls;\n chart.xAxis = xAxis;\n chart.yAxis = yAxis;\n chart.interactiveLayer = interactiveLayer;\n chart.tooltip = tooltip;\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},\n showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},\n showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},\n controlLabels: {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},\n controlOptions: {get: function(){return controlOptions;}, set: function(_){controlOptions=_;}},\n\n // deprecated options\n tooltips: {get: function(){return tooltip.enabled();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');\n tooltip.enabled(!!_);\n }},\n tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){\n // deprecated after 1.7.1\n nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');\n tooltip.contentGenerator(_);\n }},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n stacked.duration(duration);\n xAxis.duration(duration);\n yAxis.duration(duration);\n }},\n color: {get: function(){return color;}, set: function(_){\n color = nv.utils.getColor(_);\n legend.color(color);\n stacked.color(color);\n }},\n rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){\n rightAlignYAxis = _;\n yAxis.orient( rightAlignYAxis ? 'right' : 'left');\n }},\n useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){\n useInteractiveGuideline = !!_;\n chart.interactive(!_);\n chart.useVoronoi(!_);\n stacked.scatter.interactive(!_);\n }}\n });\n\n nv.utils.inheritOptions(chart, stacked);\n nv.utils.initOptions(chart);\n\n return chart;\n};\n// based on http://bl.ocks.org/kerryrodden/477c1bfb081b783f80ad\nnv.models.sunburst = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var margin = {top: 0, right: 0, bottom: 0, left: 0}\n , width = null\n , height = null\n , mode = \"count\"\n , modes = {count: function(d) { return 1; }, size: function(d) { return d.size }}\n , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one\n , container = null\n , color = nv.utils.defaultColor()\n , duration = 500\n , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMousemove', 'elementMouseover', 'elementMouseout', 'renderEnd')\n ;\n\n var x = d3.scale.linear().range([0, 2 * Math.PI]);\n var y = d3.scale.sqrt();\n\n var partition = d3.layout.partition()\n .sort(null)\n .value(function(d) { return 1; });\n\n var arc = d3.svg.arc()\n .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })\n .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })\n .innerRadius(function(d) { return Math.max(0, y(d.y)); })\n .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });\n\n // Keep track of the current and previous node being displayed as the root.\n var node, prevNode;\n // Keep track of the root node\n var rootNode;\n\n //============================================================\n // chart function\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch);\n\n function chart(selection) {\n renderWatch.reset();\n selection.each(function(data) {\n container = d3.select(this);\n var availableWidth = nv.utils.availableWidth(width, container, margin);\n var availableHeight = nv.utils.availableHeight(height, container, margin);\n var radius = Math.min(availableWidth, availableHeight) / 2;\n var path;\n\n nv.utils.initSVG(container);\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('.nv-wrap.nv-sunburst').data(data);\n var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sunburst nv-chart-' + id);\n\n var g = wrapEnter.selectAll('nv-sunburst');\n\n wrap.attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');\n\n container.on('click', function (d, i) {\n dispatch.chartClick({\n data: d,\n index: i,\n pos: d3.event,\n id: id\n });\n });\n\n y.range([0, radius]);\n\n node = node || data;\n rootNode = data[0];\n partition.value(modes[mode] || modes[\"count\"]);\n path = g.data(partition.nodes).enter()\n .append(\"path\")\n .attr(\"d\", arc)\n .style(\"fill\", function (d) {\n return color((d.children ? d : d.parent).name);\n })\n .style(\"stroke\", \"#FFF\")\n .on(\"click\", function(d) {\n if (prevNode !== node && node !== d) prevNode = node;\n node = d;\n path.transition()\n .duration(duration)\n .attrTween(\"d\", arcTweenZoom(d));\n })\n .each(stash)\n .on(\"dblclick\", function(d) {\n if (prevNode.parent == d) {\n path.transition()\n .duration(duration)\n .attrTween(\"d\", arcTweenZoom(rootNode));\n }\n })\n .each(stash)\n .on('mouseover', function(d,i){\n d3.select(this).classed('hover', true).style('opacity', 0.8);\n dispatch.elementMouseover({\n data: d,\n color: d3.select(this).style(\"fill\")\n });\n })\n .on('mouseout', function(d,i){\n d3.select(this).classed('hover', false).style('opacity', 1);\n dispatch.elementMouseout({\n data: d\n });\n })\n .on('mousemove', function(d,i){\n dispatch.elementMousemove({\n data: d\n });\n });\n\n\n\n // Setup for switching data: stash the old values for transition.\n function stash(d) {\n d.x0 = d.x;\n d.dx0 = d.dx;\n }\n\n // When switching data: interpolate the arcs in data space.\n function arcTweenData(a, i) {\n var oi = d3.interpolate({x: a.x0, dx: a.dx0}, a);\n\n function tween(t) {\n var b = oi(t);\n a.x0 = b.x;\n a.dx0 = b.dx;\n return arc(b);\n }\n\n if (i == 0) {\n // If we are on the first arc, adjust the x domain to match the root node\n // at the current zoom level. (We only need to do this once.)\n var xd = d3.interpolate(x.domain(), [node.x, node.x + node.dx]);\n return function (t) {\n x.domain(xd(t));\n return tween(t);\n };\n } else {\n return tween;\n }\n }\n\n // When zooming: interpolate the scales.\n function arcTweenZoom(d) {\n var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),\n yd = d3.interpolate(y.domain(), [d.y, 1]),\n yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);\n return function (d, i) {\n return i\n ? function (t) {\n return arc(d);\n }\n : function (t) {\n x.domain(xd(t));\n y.domain(yd(t)).range(yr(t));\n return arc(d);\n };\n };\n }\n\n });\n\n renderWatch.renderEnd('sunburst immediate');\n return chart;\n }\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n chart.dispatch = dispatch;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n width: {get: function(){return width;}, set: function(_){width=_;}},\n height: {get: function(){return height;}, set: function(_){height=_;}},\n mode: {get: function(){return mode;}, set: function(_){mode=_;}},\n id: {get: function(){return id;}, set: function(_){id=_;}},\n duration: {get: function(){return duration;}, set: function(_){duration=_;}},\n\n // options that require extra logic in the setter\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top != undefined ? _.top : margin.top;\n margin.right = _.right != undefined ? _.right : margin.right;\n margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;\n margin.left = _.left != undefined ? _.left : margin.left;\n }},\n color: {get: function(){return color;}, set: function(_){\n color=nv.utils.getColor(_);\n }}\n });\n\n nv.utils.initOptions(chart);\n return chart;\n};\nnv.models.sunburstChart = function() {\n \"use strict\";\n\n //============================================================\n // Public Variables with Default Settings\n //------------------------------------------------------------\n\n var sunburst = nv.models.sunburst();\n var tooltip = nv.models.tooltip();\n\n var margin = {top: 30, right: 20, bottom: 20, left: 20}\n , width = null\n , height = null\n , color = nv.utils.defaultColor()\n , id = Math.round(Math.random() * 100000)\n , defaultState = null\n , noData = null\n , duration = 250\n , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState','renderEnd')\n ;\n\n //============================================================\n // Private Variables\n //------------------------------------------------------------\n\n var renderWatch = nv.utils.renderWatch(dispatch);\n tooltip.headerEnabled(false).duration(0).valueFormatter(function(d, i) {\n return d;\n });\n\n //============================================================\n // Chart function\n //------------------------------------------------------------\n\n function chart(selection) {\n renderWatch.reset();\n renderWatch.models(sunburst);\n\n selection.each(function(data) {\n var container = d3.select(this);\n nv.utils.initSVG(container);\n\n var that = this;\n var availableWidth = nv.utils.availableWidth(width, container, margin),\n availableHeight = nv.utils.availableHeight(height, container, margin);\n\n chart.update = function() {\n if (duration === 0)\n container.call(chart);\n else\n container.transition().duration(duration).call(chart)\n };\n chart.container = this;\n\n // Display No Data message if there's nothing to show.\n if (!data || !data.length) {\n nv.utils.noData(chart, container);\n return chart;\n } else {\n container.selectAll('.nv-noData').remove();\n }\n\n // Setup containers and skeleton of chart\n var wrap = container.selectAll('g.nv-wrap.nv-sunburstChart').data(data);\n var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sunburstChart').append('g');\n var g = wrap.select('g');\n\n gEnter.append('g').attr('class', 'nv-sunburstWrap');\n\n wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n // Main Chart Component(s)\n sunburst.width(availableWidth).height(availableHeight);\n var sunWrap = g.select('.nv-sunburstWrap').datum(data);\n d3.transition(sunWrap).call(sunburst);\n\n });\n\n renderWatch.renderEnd('sunburstChart immediate');\n return chart;\n }\n\n //============================================================\n // Event Handling/Dispatching (out of chart's scope)\n //------------------------------------------------------------\n\n sunburst.dispatch.on('elementMouseover.tooltip', function(evt) {\n evt['series'] = {\n key: evt.data.name,\n value: evt.data.size,\n color: evt.color\n };\n tooltip.data(evt).hidden(false);\n });\n\n sunburst.dispatch.on('elementMouseout.tooltip', function(evt) {\n tooltip.hidden(true);\n });\n\n sunburst.dispatch.on('elementMousemove.tooltip', function(evt) {\n tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();\n });\n\n //============================================================\n // Expose Public Variables\n //------------------------------------------------------------\n\n // expose chart's sub-components\n chart.dispatch = dispatch;\n chart.sunburst = sunburst;\n chart.tooltip = tooltip;\n chart.options = nv.utils.optionsFunc.bind(chart);\n\n // use Object get/set functionality to map between vars and chart functions\n chart._options = Object.create({}, {\n // simple options, just get/set the necessary values\n noData: {get: function(){return noData;}, set: function(_){noData=_;}},\n defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},\n\n // options that require extra logic in the setter\n color: {get: function(){return color;}, set: function(_){\n color = _;\n sunburst.color(color);\n }},\n duration: {get: function(){return duration;}, set: function(_){\n duration = _;\n renderWatch.reset(duration);\n sunburst.duration(duration);\n }},\n margin: {get: function(){return margin;}, set: function(_){\n margin.top = _.top !== undefined ? _.top : margin.top;\n margin.right = _.right !== undefined ? _.right : margin.right;\n margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;\n margin.left = _.left !== undefined ? _.left : margin.left;\n }}\n });\n nv.utils.inheritOptions(chart, sunburst);\n nv.utils.initOptions(chart);\n return chart;\n};\n\nnv.version = \"1.8.1\";\n})();\n/**************************************************************************\n* AngularJS-nvD3, v1.0.5; MIT License; 03/12/2015 08:27\n* http://krispo.github.io/angular-nvd3\n**************************************************************************/\n(function(){\n\n 'use strict';\n\n angular.module('nvd3', [])\n\n .directive('nvd3', ['nvd3Utils', function(nvd3Utils){\n return {\n restrict: 'AE',\n scope: {\n data: '=', //chart data, [required]\n options: '=', //chart options, according to nvd3 core api, [required]\n api: '=?', //directive global api, [optional]\n events: '=?', //global events that directive would subscribe to, [optional]\n config: '=?', //global directive configuration, [optional]\n onReady: '&?' //callback function that is called with internal scope when directive is created [optional]\n },\n link: function(scope, element, attrs){\n var defaultConfig = {\n extended: false,\n visible: true,\n disabled: false,\n refreshDataOnly: true,\n deepWatchOptions: true,\n deepWatchData: true,\n deepWatchDataDepth: 2, // 0 - by reference (cheap), 1 - by collection item (the middle), 2 - by value (expensive)\n debounce: 10 // default 10ms, time silence to prevent refresh while multiple options changes at a time\n };\n\n //flag indicates if directive and chart is ready\n scope.isReady = false;\n\n //basic directive configuration\n scope._config = angular.extend(defaultConfig, scope.config);\n\n //directive global api\n scope.api = {\n // Fully refresh directive\n refresh: function(){\n scope.api.updateWithOptions(scope.options);\n scope.isReady = true;\n },\n\n // Fully refresh directive with specified timeout\n refreshWithTimeout: function(t){\n setTimeout(function(){\n scope.api.refresh();\n }, t);\n },\n\n // Update chart layout (for example if container is resized)\n update: function() {\n if (scope.chart && scope.svg) {\n scope.svg.datum(scope.data).call(scope.chart);\n // scope.chart.update();\n } else {\n scope.api.refresh();\n }\n },\n\n // Update chart layout with specified timeout\n updateWithTimeout: function(t){\n setTimeout(function(){\n scope.api.update();\n }, t);\n },\n\n // Update chart with new options\n updateWithOptions: function(options){\n // Clearing\n scope.api.clearElement();\n\n // Exit if options are not yet bound\n if (angular.isDefined(options) === false) return;\n\n // Exit if chart is hidden\n if (!scope._config.visible) return;\n\n // Initialize chart with specific type\n scope.chart = nv.models[options.chart.type]();\n\n // Generate random chart ID\n scope.chart.id = Math.random().toString(36).substr(2, 15);\n\n angular.forEach(scope.chart, function(value, key){\n if (key[0] === '_');\n else if ([\n 'clearHighlights',\n 'highlightPoint',\n 'id',\n 'options',\n 'resizeHandler',\n 'state',\n 'open',\n 'close',\n 'tooltipContent'\n ].indexOf(key) >= 0);\n\n else if (key === 'dispatch') {\n if (options.chart[key] === undefined || options.chart[key] === null) {\n if (scope._config.extended) options.chart[key] = {};\n }\n configureEvents(scope.chart[key], options.chart[key]);\n }\n\n else if ([\n 'bars',\n 'bars1',\n 'bars2',\n 'boxplot',\n 'bullet',\n 'controls',\n 'discretebar',\n 'distX',\n 'distY',\n 'interactiveLayer',\n 'legend',\n 'lines',\n 'lines1',\n 'lines2',\n 'multibar',\n 'pie',\n 'scatter',\n 'sparkline',\n 'stack1',\n 'stack2',\n 'sunburst',\n 'tooltip',\n 'x2Axis',\n 'xAxis',\n 'y1Axis',\n 'y2Axis',\n 'y3Axis',\n 'y4Axis',\n 'yAxis',\n 'yAxis1',\n 'yAxis2'\n ].indexOf(key) >= 0 ||\n // stacked is a component for stackedAreaChart, but a boolean for multiBarChart and multiBarHorizontalChart\n (key === 'stacked' && options.chart.type === 'stackedAreaChart')) {\n if (options.chart[key] === undefined || options.chart[key] === null) {\n if (scope._config.extended) options.chart[key] = {};\n }\n configure(scope.chart[key], options.chart[key], options.chart.type);\n }\n\n //TODO: need to fix bug in nvd3\n else if ((key === 'xTickFormat' || key === 'yTickFormat') && options.chart.type === 'lineWithFocusChart');\n else if ((key === 'tooltips') && options.chart.type === 'boxPlotChart');\n else if ((key === 'tooltipXContent' || key === 'tooltipYContent') && options.chart.type === 'scatterChart');\n\n else if (options.chart[key] === undefined || options.chart[key] === null){\n if (scope._config.extended) {\n if (key==='barColor')\n options.chart[key] = value()();\n else\n options.chart[key] = value();\n }\n }\n\n else scope.chart[key](options.chart[key]);\n });\n\n // Update with data\n if (options.chart.type === 'sunburstChart') {\n scope.api.updateWithData(angular.copy(scope.data));\n } else {\n scope.api.updateWithData(scope.data);\n }\n\n // Configure wrappers\n if (options['title'] || scope._config.extended) configureWrapper('title');\n if (options['subtitle'] || scope._config.extended) configureWrapper('subtitle');\n if (options['caption'] || scope._config.extended) configureWrapper('caption');\n\n\n // Configure styles\n if (options['styles'] || scope._config.extended) configureStyles();\n\n nv.addGraph(function() {\n if (!scope.chart) return;\n\n // Remove resize handler. Due to async execution should be placed here, not in the clearElement\n if (scope.chart.resizeHandler) scope.chart.resizeHandler.clear();\n\n // Update the chart when window resizes\n scope.chart.resizeHandler = nv.utils.windowResize(function() {\n scope.chart && scope.chart.update && scope.chart.update();\n });\n\n /// Zoom feature\n if (options.chart.zoom !== undefined && [\n 'scatterChart',\n 'lineChart',\n 'candlestickBarChart',\n 'cumulativeLineChart',\n 'historicalBarChart',\n 'ohlcBarChart',\n 'stackedAreaChart'\n ].indexOf(options.chart.type) > -1) {\n nvd3Utils.zoom(scope, options);\n }\n\n return scope.chart;\n }, options.chart['callback']);\n },\n\n // Update chart with new data\n updateWithData: function (data){\n if (data) {\n // remove whole svg element with old data\n d3.select(element[0]).select('svg').remove();\n\n var h, w;\n\n // Select the current element to add