From cbaecced9fbf52e10e924f24d7ce3ca8e9512fc5 Mon Sep 17 00:00:00 2001 From: Tyron Madlener Date: Tue, 31 May 2011 12:14:14 +0200 Subject: [PATCH] Replaced minified highchart files with source files --- js/highcharts/exporting.js | 690 +- js/highcharts/exporting.src.js | 673 -- js/highcharts/highcharts.js | 10829 +++++++++++++++++++++++++++++- js/highcharts/highcharts.src.js | 10671 ----------------------------- 4 files changed, 11340 insertions(+), 11523 deletions(-) delete mode 100644 js/highcharts/exporting.src.js delete mode 100644 js/highcharts/highcharts.src.js diff --git a/js/highcharts/exporting.js b/js/highcharts/exporting.js index 792c1274f2..4577f67a9a 100644 --- a/js/highcharts/exporting.js +++ b/js/highcharts/exporting.js @@ -1,21 +1,673 @@ -/* - Highcharts JS v2.1.4 (2011-03-02) - Exporting module +/** + * @license Highcharts JS v2.1.4 (2011-03-02) + * Exporting module + * + * (c) 2010 Torstein Hønsi + * + * License: www.highcharts.com/license + */ - (c) 2010 Torstein H?nsi +// JSLint options: +/*global Highcharts, document, window, Math, setTimeout */ - License: www.highcharts.com/license -*/ -(function(){var k=Highcharts,y=k.Chart,C=k.addEvent,r=k.createElement,z=k.discardElement,u=k.css,w=k.merge,s=k.each,p=k.extend,D=Math.max,q=document,E=window,A="ontouchstart"in q.documentElement,B=k.setOptions({lang:{downloadPNG:"Download PNG image",downloadJPEG:"Download JPEG image",downloadPDF:"Download PDF document",downloadSVG:"Download SVG vector image",exportButtonTitle:"Export to raster or vector image",printButtonTitle:"Print the chart"}});B.navigation={menuStyle:{border:"1px solid #A0A0A0", -background:"#FFFFFF"},menuItemStyle:{padding:"0 5px",background:"none",color:"#303030",fontSize:A?"14px":"11px"},menuItemHoverStyle:{background:"#4572A5",color:"#FFFFFF"},buttonOptions:{align:"right",backgroundColor:{linearGradient:[0,0,0,20],stops:[[0.4,"#F7F7F7"],[0.6,"#E3E3E3"]]},borderColor:"#B0B0B0",borderRadius:3,borderWidth:1,height:20,hoverBorderColor:"#909090",hoverSymbolFill:"#81A7CF",hoverSymbolStroke:"#4572A5",symbolFill:"#E0E0E0",symbolStroke:"#A0A0A0",symbolX:11.5,symbolY:10.5,verticalAlign:"top", -width:24,y:10}};B.exporting={type:"image/png",url:"http://export.highcharts.com/",width:800,buttons:{exportButton:{symbol:"exportIcon",x:-10,symbolFill:"#A8BF77",hoverSymbolFill:"#768F3E",_titleKey:"exportButtonTitle",menuItems:[{textKey:"downloadPNG",onclick:function(){this.exportChart()}},{textKey:"downloadJPEG",onclick:function(){this.exportChart({type:"image/jpeg"})}},{textKey:"downloadPDF",onclick:function(){this.exportChart({type:"application/pdf"})}},{textKey:"downloadSVG",onclick:function(){this.exportChart({type:"image/svg+xml"})}}]}, -printButton:{symbol:"printIcon",x:-36,symbolFill:"#B5C9DF",hoverSymbolFill:"#779ABF",_titleKey:"printButtonTitle",onclick:function(){this.print()}}}};p(y.prototype,{getSVG:function(b){var c=this,a,f,d,i,e,h,j=w(c.options,b);if(!q.createElementNS)q.createElementNS=function(l,g){var n=q.createElement(g);n.getBBox=function(){return c.renderer.Element.prototype.getBBox.apply({element:n})};return n};a=r("div",null,{position:"absolute",top:"-9999em",width:c.chartWidth+"px",height:c.chartHeight+"px"},q.body); -p(j.chart,{renderTo:a,forExport:true});j.exporting.enabled=false;j.chart.plotBackgroundImage=null;j.series=[];s(c.series,function(l){d=l.options;d.animation=false;d.showCheckbox=false;if(d&&d.marker&&/^url\(/.test(d.marker.symbol))d.marker.symbol="circle";d.data=[];s(l.data,function(g){i=g.config;e={x:g.x,y:g.y,name:g.name};typeof i=="object"&&g.config&&i.constructor!=Array&&p(e,i);d.data.push(e);(h=g.config&&g.config.marker)&&/^url\(/.test(h.symbol)&&delete h.symbol});j.series.push(d)});b=new Highcharts.Chart(j); -f=b.container.innerHTML;j=null;b.destroy();z(a);f=f.replace(/zIndex="[^"]+"/g,"").replace(/isShadow="[^"]+"/g,"").replace(/symbolName="[^"]+"/g,"").replace(/jQuery[0-9]+="[^"]+"/g,"").replace(/isTracker="[^"]+"/g,"").replace(/url\([^#]+#/g,"url(#").replace(/id=([^" >]+)/g,'id="$1"').replace(/class=([^" ]+)/g,'class="$1"').replace(/ transform /g," ").replace(/:(path|rect)/g,"$1").replace(/style="([^"]+)"/g,function(l){return l.toLowerCase()});f=f.replace(/(url\(#highcharts-[0-9]+)"/g,"$1").replace(/"/g, -"'");if(f.match(/ xmlns="/g).length==2)f=f.replace(/xmlns="[^"]+"/,"");return f},exportChart:function(b,c){var a,f=this.getSVG(c);b=w(this.options.exporting,b);a=r("form",{method:"post",action:b.url},{display:"none"},q.body);s(["filename","type","width","svg"],function(d){r("input",{type:"hidden",name:d,value:{filename:b.filename||"chart",type:b.type,width:b.width,svg:f}[d]},null,a)});a.submit();z(a)},print:function(){var b=this,c=b.container,a=[],f=c.parentNode,d=q.body,i=d.childNodes;if(!b.isPrinting){b.isPrinting= -true;s(i,function(e,h){if(e.nodeType==1){a[h]=e.style.display;e.style.display="none"}});d.appendChild(c);E.print();setTimeout(function(){f.appendChild(c);s(i,function(e,h){if(e.nodeType==1)e.style.display=a[h]});b.isPrinting=false},1E3)}},contextMenu:function(b,c,a,f,d,i){var e=this,h=e.options.navigation,j=h.menuItemStyle,l=e.chartWidth,g=e.chartHeight,n="cache-"+b,m=e[n],o=D(d,i),t,x;if(!m){e[n]=m=r("div",{className:"highcharts-"+b},{position:"absolute",zIndex:1E3,padding:o+"px"},e.container);t= -r("div",null,p({MozBoxShadow:"3px 3px 10px #888",WebkitBoxShadow:"3px 3px 10px #888",boxShadow:"3px 3px 10px #888"},h.menuStyle),m);x=function(){u(m,{display:"none"})};C(m,"mouseleave",x);s(c,function(v){if(v)r("div",{onmouseover:function(){u(this,h.menuItemHoverStyle)},onmouseout:function(){u(this,j)},innerHTML:v.text||k.getOptions().lang[v.textKey]},p({cursor:"pointer"},j),t)[A?"ontouchstart":"onclick"]=function(){x();v.onclick.apply(e,arguments)}});e.exportMenuWidth=m.offsetWidth;e.exportMenuHeight= -m.offsetHeight}b={display:"block"};if(a+e.exportMenuWidth>l)b.right=l-a-d-o+"px";else b.left=a-o+"px";if(f+i+e.exportMenuHeight>g)b.bottom=g-f-o+"px";else b.top=f+i-o+"px";u(m,b)},addButton:function(b){function c(){g.attr(o);l.attr(m)}var a=this,f=a.renderer,d=w(a.options.navigation.buttonOptions,b),i=d.onclick,e=d.menuItems,h=d.width,j=d.height,l,g,n;b=d.borderWidth;var m={stroke:d.borderColor},o={stroke:d.symbolStroke,fill:d.symbolFill};if(d.enabled!==false){l=f.rect(0,0,h,j,d.borderRadius,b).align(d, -true).attr(p({fill:d.backgroundColor,"stroke-width":b,zIndex:19},m)).add();n=f.rect(0,0,h,j,0).align(d).attr({fill:"rgba(255, 255, 255, 0.001)",title:k.getOptions().lang[d._titleKey],zIndex:21}).css({cursor:"pointer"}).on("mouseover",function(){g.attr({stroke:d.hoverSymbolStroke,fill:d.hoverSymbolFill});l.attr({stroke:d.hoverBorderColor})}).on("mouseout",c).on("click",c).add();if(e)i=function(){c();var t=n.getBBox();a.contextMenu("export-menu",e,t.x,t.y,h,j)};n.on("click",function(){i.apply(a,arguments)}); -g=f.symbol(d.symbol,d.symbolX,d.symbolY,(d.symbolSize||12)/2).align(d,true).attr(p(o,{"stroke-width":d.symbolStrokeWidth||1,zIndex:20})).add()}}});k.Renderer.prototype.symbols.exportIcon=function(b,c,a){return["M",b-a,c+a,"L",b+a,c+a,b+a,c+a*0.5,b-a,c+a*0.5,"Z","M",b,c+a*0.5,"L",b-a*0.5,c-a/3,b-a/6,c-a/3,b-a/6,c-a,b+a/6,c-a,b+a/6,c-a/3,b+a*0.5,c-a/3,"Z"]};k.Renderer.prototype.symbols.printIcon=function(b,c,a){return["M",b-a,c+a*0.5,"L",b+a,c+a*0.5,b+a,c-a/3,b-a,c-a/3,"Z","M",b-a*0.5,c-a/3,"L",b-a* -0.5,c-a,b+a*0.5,c-a,b+a*0.5,c-a/3,"Z","M",b-a*0.5,c+a*0.5,"L",b-a*0.75,c+a,b+a*0.75,c+a,b+a*0.5,c+a*0.5,"Z"]};y.prototype.callbacks.push(function(b){var c,a=b.options.exporting,f=a.buttons;if(a.enabled!==false)for(c in f)b.addButton(f[c])})})(); +(function() { // encapsulate + +// create shortcuts +var HC = Highcharts, + Chart = HC.Chart, + addEvent = HC.addEvent, + createElement = HC.createElement, + discardElement = HC.discardElement, + css = HC.css, + merge = HC.merge, + each = HC.each, + extend = HC.extend, + math = Math, + mathMax = math.max, + doc = document, + win = window, + hasTouch = 'ontouchstart' in doc.documentElement, + M = 'M', + L = 'L', + DIV = 'div', + HIDDEN = 'hidden', + NONE = 'none', + PREFIX = 'highcharts-', + ABSOLUTE = 'absolute', + PX = 'px', + + + + // Add language and get the defaultOptions + defaultOptions = HC.setOptions({ + lang: { + downloadPNG: 'Download PNG image', + downloadJPEG: 'Download JPEG image', + downloadPDF: 'Download PDF document', + downloadSVG: 'Download SVG vector image', + exportButtonTitle: 'Export to raster or vector image', + printButtonTitle: 'Print the chart' + } + }); + +// Buttons and menus are collected in a separate config option set called 'navigation'. +// This can be extended later to add control buttons like zoom and pan right click menus. +defaultOptions.navigation = { + menuStyle: { + border: '1px solid #A0A0A0', + background: '#FFFFFF' + }, + menuItemStyle: { + padding: '0 5px', + background: NONE, + color: '#303030', + fontSize: hasTouch ? '14px' : '11px' + }, + menuItemHoverStyle: { + background: '#4572A5', + color: '#FFFFFF' + }, + + buttonOptions: { + align: 'right', + backgroundColor: { + linearGradient: [0, 0, 0, 20], + stops: [ + [0.4, '#F7F7F7'], + [0.6, '#E3E3E3'] + ] + }, + borderColor: '#B0B0B0', + borderRadius: 3, + borderWidth: 1, + //enabled: true, + height: 20, + hoverBorderColor: '#909090', + hoverSymbolFill: '#81A7CF', + hoverSymbolStroke: '#4572A5', + symbolFill: '#E0E0E0', + //symbolSize: 12, + symbolStroke: '#A0A0A0', + //symbolStrokeWidth: 1, + symbolX: 11.5, + symbolY: 10.5, + verticalAlign: 'top', + width: 24, + y: 10 + } +}; + + + +// Add the export related options +defaultOptions.exporting = { + //enabled: true, + //filename: 'chart', + type: 'image/png', + url: 'http://export.highcharts.com/', + width: 800, + buttons: { + exportButton: { + //enabled: true, + symbol: 'exportIcon', + x: -10, + symbolFill: '#A8BF77', + hoverSymbolFill: '#768F3E', + _titleKey: 'exportButtonTitle', + menuItems: [{ + textKey: 'downloadPNG', + onclick: function() { + this.exportChart(); + } + }, { + textKey: 'downloadJPEG', + onclick: function() { + this.exportChart({ + type: 'image/jpeg' + }); + } + }, { + textKey: 'downloadPDF', + onclick: function() { + this.exportChart({ + type: 'application/pdf' + }); + } + }, { + textKey: 'downloadSVG', + onclick: function() { + this.exportChart({ + type: 'image/svg+xml' + }); + } + }/*, { + text: 'View SVG', + onclick: function() { + var svg = this.getSVG() + .replace(//g, '>'); + + doc.body.innerHTML = '
'+ svg +'
'; + } + }*/] + + }, + printButton: { + //enabled: true, + symbol: 'printIcon', + x: -36, + symbolFill: '#B5C9DF', + hoverSymbolFill: '#779ABF', + _titleKey: 'printButtonTitle', + onclick: function() { + this.print(); + } + } + } +}; + + + +extend(Chart.prototype, { + /** + * Return an SVG representation of the chart + * + * @param additionalOptions {Object} Additional chart options for the generated SVG representation + */ + getSVG: function(additionalOptions) { + var chart = this, + chartCopy, + sandbox, + svg, + seriesOptions, + config, + pointOptions, + pointMarker, + options = merge(chart.options, additionalOptions); // copy the options and add extra options + + // IE compatibility hack for generating SVG content that it doesn't really understand + if (!doc.createElementNS) { + doc.createElementNS = function(ns, tagName) { + var elem = doc.createElement(tagName); + elem.getBBox = function() { + return chart.renderer.Element.prototype.getBBox.apply({ element: elem }); + }; + return elem; + }; + } + + // create a sandbox where a new chart will be generated + sandbox = createElement(DIV, null, { + position: ABSOLUTE, + top: '-9999em', + width: chart.chartWidth + PX, + height: chart.chartHeight + PX + }, doc.body); + + // override some options + extend(options.chart, { + renderTo: sandbox, + forExport: true + }); + options.exporting.enabled = false; // hide buttons in print + options.chart.plotBackgroundImage = null; // the converter doesn't handle images + // prepare for replicating the chart + options.series = []; + each(chart.series, function(serie) { + seriesOptions = serie.options; + + seriesOptions.animation = false; // turn off animation + seriesOptions.showCheckbox = false; + + // remove image markers + if (seriesOptions && seriesOptions.marker && /^url\(/.test(seriesOptions.marker.symbol)) { + seriesOptions.marker.symbol = 'circle'; + } + + seriesOptions.data = []; + + each(serie.data, function(point) { + + // extend the options by those values that can be expressed in a number or array config + config = point.config; + pointOptions = { + x: point.x, + y: point.y, + name: point.name + }; + + if (typeof config == 'object' && point.config && config.constructor != Array) { + extend(pointOptions, config); + } + + seriesOptions.data.push(pointOptions); // copy fresh updated data + + // remove image markers + pointMarker = point.config && point.config.marker; + if (pointMarker && /^url\(/.test(pointMarker.symbol)) { + delete pointMarker.symbol; + } + }); + + options.series.push(seriesOptions); + }); + + // generate the chart copy + chartCopy = new Highcharts.Chart(options); + + // get the SVG from the container's innerHTML + svg = chartCopy.container.innerHTML; + + // free up memory + options = null; + chartCopy.destroy(); + discardElement(sandbox); + + // sanitize + svg = svg + .replace(/zIndex="[^"]+"/g, '') + .replace(/isShadow="[^"]+"/g, '') + .replace(/symbolName="[^"]+"/g, '') + .replace(/jQuery[0-9]+="[^"]+"/g, '') + .replace(/isTracker="[^"]+"/g, '') + .replace(/url\([^#]+#/g, 'url(#') + /*.replace(/')*/ + /* This fails in IE < 8 + .replace(/([0-9]+)\.([0-9]+)/g, function(s1, s2, s3) { // round off to save weight + return s2 +'.'+ s3[0]; + })*/ + + // IE specific + .replace(/id=([^" >]+)/g, 'id="$1"') + .replace(/class=([^" ]+)/g, 'class="$1"') + .replace(/ transform /g, ' ') + .replace(/:(path|rect)/g, '$1') + .replace(/style="([^"]+)"/g, function(s) { + return s.toLowerCase(); + }); + + // IE9 beta bugs with innerHTML. Test again with final IE9. + svg = svg.replace(/(url\(#highcharts-[0-9]+)"/g, '$1') + .replace(/"/g, "'"); + if (svg.match(/ xmlns="/g).length == 2) { + svg = svg.replace(/xmlns="[^"]+"/, ''); + } + + return svg; + }, + + /** + * Submit the SVG representation of the chart to the server + * @param {Object} options Exporting options. Possible members are url, type and width. + * @param {Object} chartOptions Additional chart options for the SVG representation of the chart + */ + exportChart: function(options, chartOptions) { + var form, + chart = this, + svg = chart.getSVG(chartOptions); + + // merge the options + options = merge(chart.options.exporting, options); + + // create the form + form = createElement('form', { + method: 'post', + action: options.url + }, { + display: NONE + }, doc.body); + + // add the values + each(['filename', 'type', 'width', 'svg'], function(name) { + createElement('input', { + type: HIDDEN, + name: name, + value: { + filename: options.filename || 'chart', + type: options.type, + width: options.width, + svg: svg + }[name] + }, null, form); + }); + + // submit + form.submit(); + + // clean up + discardElement(form); + }, + + /** + * Print the chart + */ + print: function() { + + var chart = this, + container = chart.container, + origDisplay = [], + origParent = container.parentNode, + body = doc.body, + childNodes = body.childNodes; + + if (chart.isPrinting) { // block the button while in printing mode + return; + } + + chart.isPrinting = true; + + // hide all body content + each(childNodes, function(node, i) { + if (node.nodeType == 1) { + origDisplay[i] = node.style.display; + node.style.display = NONE; + } + }); + + // pull out the chart + body.appendChild(container); + + // print + win.print(); + + // allow the browser to prepare before reverting + setTimeout(function() { + + // put the chart back in + origParent.appendChild(container); + + // restore all body content + each(childNodes, function(node, i) { + if (node.nodeType == 1) { + node.style.display = origDisplay[i]; + } + }); + + chart.isPrinting = false; + + }, 1000); + + }, + + /** + * Display a popup menu for choosing the export type + * + * @param {String} name An identifier for the menu + * @param {Array} items A collection with text and onclicks for the items + * @param {Number} x The x position of the opener button + * @param {Number} y The y position of the opener button + * @param {Number} width The width of the opener button + * @param {Number} height The height of the opener button + */ + contextMenu: function(name, items, x, y, width, height) { + var chart = this, + navOptions = chart.options.navigation, + menuItemStyle = navOptions.menuItemStyle, + chartWidth = chart.chartWidth, + chartHeight = chart.chartHeight, + cacheName = 'cache-'+ name, + menu = chart[cacheName], + menuPadding = mathMax(width, height), // for mouse leave detection + boxShadow = '3px 3px 10px #888', + innerMenu, + hide, + menuStyle; + + // create the menu only the first time + if (!menu) { + + // create a HTML element above the SVG + chart[cacheName] = menu = createElement(DIV, { + className: PREFIX + name + }, { + position: ABSOLUTE, + zIndex: 1000, + padding: menuPadding + PX + }, chart.container); + + innerMenu = createElement(DIV, null, + extend({ + MozBoxShadow: boxShadow, + WebkitBoxShadow: boxShadow, + boxShadow: boxShadow + }, navOptions.menuStyle) , menu); + + // hide on mouse out + hide = function() { + css(menu, { display: NONE }); + }; + + addEvent(menu, 'mouseleave', hide); + + + // create the items + each(items, function(item) { + if (item) { + var div = createElement(DIV, { + onmouseover: function() { + css(this, navOptions.menuItemHoverStyle); + }, + onmouseout: function() { + css(this, menuItemStyle); + }, + innerHTML: item.text || HC.getOptions().lang[item.textKey] + }, extend({ + cursor: 'pointer' + }, menuItemStyle), innerMenu); + + div[hasTouch ? 'ontouchstart' : 'onclick'] = function() { + hide(); + item.onclick.apply(chart, arguments); + }; + + } + }); + + chart.exportMenuWidth = menu.offsetWidth; + chart.exportMenuHeight = menu.offsetHeight; + } + + menuStyle = { display: 'block' }; + + // if outside right, right align it + if (x + chart.exportMenuWidth > chartWidth) { + menuStyle.right = (chartWidth - x - width - menuPadding) + PX; + } else { + menuStyle.left = (x - menuPadding) + PX; + } + // if outside bottom, bottom align it + if (y + height + chart.exportMenuHeight > chartHeight) { + menuStyle.bottom = (chartHeight - y - menuPadding) + PX; + } else { + menuStyle.top = (y + height - menuPadding) + PX; + } + + css(menu, menuStyle); + }, + + /** + * Add the export button to the chart + */ + addButton: function(options) { + var chart = this, + renderer = chart.renderer, + btnOptions = merge(chart.options.navigation.buttonOptions, options), + onclick = btnOptions.onclick, + menuItems = btnOptions.menuItems, + /*position = chart.getAlignment(btnOptions), + buttonLeft = position.x, + buttonTop = position.y,*/ + buttonWidth = btnOptions.width, + buttonHeight = btnOptions.height, + box, + symbol, + button, + borderWidth = btnOptions.borderWidth, + boxAttr = { + stroke: btnOptions.borderColor + + }, + symbolAttr = { + stroke: btnOptions.symbolStroke, + fill: btnOptions.symbolFill + }; + + if (btnOptions.enabled === false) { + return; + } + + // element to capture the click + function revert() { + symbol.attr(symbolAttr); + box.attr(boxAttr); + } + + // the box border + box = renderer.rect( + 0, + 0, + buttonWidth, + buttonHeight, + btnOptions.borderRadius, + borderWidth + ) + //.translate(buttonLeft, buttonTop) // to allow gradients + .align(btnOptions, true) + .attr(extend({ + fill: btnOptions.backgroundColor, + 'stroke-width': borderWidth, + zIndex: 19 + }, boxAttr)).add(); + + // the invisible element to track the clicks + button = renderer.rect( + 0, + 0, + buttonWidth, + buttonHeight, + 0 + ) + .align(btnOptions) + .attr({ + fill: 'rgba(255, 255, 255, 0.001)', + title: HC.getOptions().lang[btnOptions._titleKey], + zIndex: 21 + }).css({ + cursor: 'pointer' + }) + .on('mouseover', function() { + symbol.attr({ + stroke: btnOptions.hoverSymbolStroke, + fill: btnOptions.hoverSymbolFill + }); + box.attr({ + stroke: btnOptions.hoverBorderColor + }); + }) + .on('mouseout', revert) + .on('click', revert) + .add(); + + //addEvent(button.element, 'click', revert); + + // add the click event + if (menuItems) { + onclick = function(e) { + revert(); + var bBox = button.getBBox(); + chart.contextMenu('export-menu', menuItems, bBox.x, bBox.y, buttonWidth, buttonHeight); + }; + } + /*addEvent(button.element, 'click', function() { + onclick.apply(chart, arguments); + });*/ + button.on('click', function() { + onclick.apply(chart, arguments); + }); + + // the icon + symbol = renderer.symbol( + btnOptions.symbol, + btnOptions.symbolX, + btnOptions.symbolY, + (btnOptions.symbolSize || 12) / 2 + ) + .align(btnOptions, true) + .attr(extend(symbolAttr, { + 'stroke-width': btnOptions.symbolStrokeWidth || 1, + zIndex: 20 + })).add(); + + + + } +}); + +// Create the export icon +HC.Renderer.prototype.symbols.exportIcon = function(x, y, radius) { + return [ + M, // the disk + x - radius, y + radius, + L, + x + radius, y + radius, + x + radius, y + radius * 0.5, + x - radius, y + radius * 0.5, + 'Z', + M, // the arrow + x, y + radius * 0.5, + L, + x - radius * 0.5, y - radius / 3, + x - radius / 6, y - radius / 3, + x - radius / 6, y - radius, + x + radius / 6, y - radius, + x + radius / 6, y - radius / 3, + x + radius * 0.5, y - radius / 3, + 'Z' + ]; +}; +// Create the print icon +HC.Renderer.prototype.symbols.printIcon = function(x, y, radius) { + return [ + M, // the printer + x - radius, y + radius * 0.5, + L, + x + radius, y + radius * 0.5, + x + radius, y - radius / 3, + x - radius, y - radius / 3, + 'Z', + M, // the upper sheet + x - radius * 0.5, y - radius / 3, + L, + x - radius * 0.5, y - radius, + x + radius * 0.5, y - radius, + x + radius * 0.5, y - radius / 3, + 'Z', + M, // the lower sheet + x - radius * 0.5, y + radius * 0.5, + L, + x - radius * 0.75, y + radius, + x + radius * 0.75, y + radius, + x + radius * 0.5, y + radius * 0.5, + 'Z' + ]; +}; + + +// Add the buttons on chart load +Chart.prototype.callbacks.push(function(chart) { + var n, + exportingOptions = chart.options.exporting, + buttons = exportingOptions.buttons; + + if (exportingOptions.enabled !== false) { + + for (n in buttons) { + chart.addButton(buttons[n]); + } + } +}); + + +})(); \ No newline at end of file diff --git a/js/highcharts/exporting.src.js b/js/highcharts/exporting.src.js deleted file mode 100644 index 4577f67a9a..0000000000 --- a/js/highcharts/exporting.src.js +++ /dev/null @@ -1,673 +0,0 @@ -/** - * @license Highcharts JS v2.1.4 (2011-03-02) - * Exporting module - * - * (c) 2010 Torstein Hønsi - * - * License: www.highcharts.com/license - */ - -// JSLint options: -/*global Highcharts, document, window, Math, setTimeout */ - -(function() { // encapsulate - -// create shortcuts -var HC = Highcharts, - Chart = HC.Chart, - addEvent = HC.addEvent, - createElement = HC.createElement, - discardElement = HC.discardElement, - css = HC.css, - merge = HC.merge, - each = HC.each, - extend = HC.extend, - math = Math, - mathMax = math.max, - doc = document, - win = window, - hasTouch = 'ontouchstart' in doc.documentElement, - M = 'M', - L = 'L', - DIV = 'div', - HIDDEN = 'hidden', - NONE = 'none', - PREFIX = 'highcharts-', - ABSOLUTE = 'absolute', - PX = 'px', - - - - // Add language and get the defaultOptions - defaultOptions = HC.setOptions({ - lang: { - downloadPNG: 'Download PNG image', - downloadJPEG: 'Download JPEG image', - downloadPDF: 'Download PDF document', - downloadSVG: 'Download SVG vector image', - exportButtonTitle: 'Export to raster or vector image', - printButtonTitle: 'Print the chart' - } - }); - -// Buttons and menus are collected in a separate config option set called 'navigation'. -// This can be extended later to add control buttons like zoom and pan right click menus. -defaultOptions.navigation = { - menuStyle: { - border: '1px solid #A0A0A0', - background: '#FFFFFF' - }, - menuItemStyle: { - padding: '0 5px', - background: NONE, - color: '#303030', - fontSize: hasTouch ? '14px' : '11px' - }, - menuItemHoverStyle: { - background: '#4572A5', - color: '#FFFFFF' - }, - - buttonOptions: { - align: 'right', - backgroundColor: { - linearGradient: [0, 0, 0, 20], - stops: [ - [0.4, '#F7F7F7'], - [0.6, '#E3E3E3'] - ] - }, - borderColor: '#B0B0B0', - borderRadius: 3, - borderWidth: 1, - //enabled: true, - height: 20, - hoverBorderColor: '#909090', - hoverSymbolFill: '#81A7CF', - hoverSymbolStroke: '#4572A5', - symbolFill: '#E0E0E0', - //symbolSize: 12, - symbolStroke: '#A0A0A0', - //symbolStrokeWidth: 1, - symbolX: 11.5, - symbolY: 10.5, - verticalAlign: 'top', - width: 24, - y: 10 - } -}; - - - -// Add the export related options -defaultOptions.exporting = { - //enabled: true, - //filename: 'chart', - type: 'image/png', - url: 'http://export.highcharts.com/', - width: 800, - buttons: { - exportButton: { - //enabled: true, - symbol: 'exportIcon', - x: -10, - symbolFill: '#A8BF77', - hoverSymbolFill: '#768F3E', - _titleKey: 'exportButtonTitle', - menuItems: [{ - textKey: 'downloadPNG', - onclick: function() { - this.exportChart(); - } - }, { - textKey: 'downloadJPEG', - onclick: function() { - this.exportChart({ - type: 'image/jpeg' - }); - } - }, { - textKey: 'downloadPDF', - onclick: function() { - this.exportChart({ - type: 'application/pdf' - }); - } - }, { - textKey: 'downloadSVG', - onclick: function() { - this.exportChart({ - type: 'image/svg+xml' - }); - } - }/*, { - text: 'View SVG', - onclick: function() { - var svg = this.getSVG() - .replace(//g, '>'); - - doc.body.innerHTML = '
'+ svg +'
'; - } - }*/] - - }, - printButton: { - //enabled: true, - symbol: 'printIcon', - x: -36, - symbolFill: '#B5C9DF', - hoverSymbolFill: '#779ABF', - _titleKey: 'printButtonTitle', - onclick: function() { - this.print(); - } - } - } -}; - - - -extend(Chart.prototype, { - /** - * Return an SVG representation of the chart - * - * @param additionalOptions {Object} Additional chart options for the generated SVG representation - */ - getSVG: function(additionalOptions) { - var chart = this, - chartCopy, - sandbox, - svg, - seriesOptions, - config, - pointOptions, - pointMarker, - options = merge(chart.options, additionalOptions); // copy the options and add extra options - - // IE compatibility hack for generating SVG content that it doesn't really understand - if (!doc.createElementNS) { - doc.createElementNS = function(ns, tagName) { - var elem = doc.createElement(tagName); - elem.getBBox = function() { - return chart.renderer.Element.prototype.getBBox.apply({ element: elem }); - }; - return elem; - }; - } - - // create a sandbox where a new chart will be generated - sandbox = createElement(DIV, null, { - position: ABSOLUTE, - top: '-9999em', - width: chart.chartWidth + PX, - height: chart.chartHeight + PX - }, doc.body); - - // override some options - extend(options.chart, { - renderTo: sandbox, - forExport: true - }); - options.exporting.enabled = false; // hide buttons in print - options.chart.plotBackgroundImage = null; // the converter doesn't handle images - // prepare for replicating the chart - options.series = []; - each(chart.series, function(serie) { - seriesOptions = serie.options; - - seriesOptions.animation = false; // turn off animation - seriesOptions.showCheckbox = false; - - // remove image markers - if (seriesOptions && seriesOptions.marker && /^url\(/.test(seriesOptions.marker.symbol)) { - seriesOptions.marker.symbol = 'circle'; - } - - seriesOptions.data = []; - - each(serie.data, function(point) { - - // extend the options by those values that can be expressed in a number or array config - config = point.config; - pointOptions = { - x: point.x, - y: point.y, - name: point.name - }; - - if (typeof config == 'object' && point.config && config.constructor != Array) { - extend(pointOptions, config); - } - - seriesOptions.data.push(pointOptions); // copy fresh updated data - - // remove image markers - pointMarker = point.config && point.config.marker; - if (pointMarker && /^url\(/.test(pointMarker.symbol)) { - delete pointMarker.symbol; - } - }); - - options.series.push(seriesOptions); - }); - - // generate the chart copy - chartCopy = new Highcharts.Chart(options); - - // get the SVG from the container's innerHTML - svg = chartCopy.container.innerHTML; - - // free up memory - options = null; - chartCopy.destroy(); - discardElement(sandbox); - - // sanitize - svg = svg - .replace(/zIndex="[^"]+"/g, '') - .replace(/isShadow="[^"]+"/g, '') - .replace(/symbolName="[^"]+"/g, '') - .replace(/jQuery[0-9]+="[^"]+"/g, '') - .replace(/isTracker="[^"]+"/g, '') - .replace(/url\([^#]+#/g, 'url(#') - /*.replace(/')*/ - /* This fails in IE < 8 - .replace(/([0-9]+)\.([0-9]+)/g, function(s1, s2, s3) { // round off to save weight - return s2 +'.'+ s3[0]; - })*/ - - // IE specific - .replace(/id=([^" >]+)/g, 'id="$1"') - .replace(/class=([^" ]+)/g, 'class="$1"') - .replace(/ transform /g, ' ') - .replace(/:(path|rect)/g, '$1') - .replace(/style="([^"]+)"/g, function(s) { - return s.toLowerCase(); - }); - - // IE9 beta bugs with innerHTML. Test again with final IE9. - svg = svg.replace(/(url\(#highcharts-[0-9]+)"/g, '$1') - .replace(/"/g, "'"); - if (svg.match(/ xmlns="/g).length == 2) { - svg = svg.replace(/xmlns="[^"]+"/, ''); - } - - return svg; - }, - - /** - * Submit the SVG representation of the chart to the server - * @param {Object} options Exporting options. Possible members are url, type and width. - * @param {Object} chartOptions Additional chart options for the SVG representation of the chart - */ - exportChart: function(options, chartOptions) { - var form, - chart = this, - svg = chart.getSVG(chartOptions); - - // merge the options - options = merge(chart.options.exporting, options); - - // create the form - form = createElement('form', { - method: 'post', - action: options.url - }, { - display: NONE - }, doc.body); - - // add the values - each(['filename', 'type', 'width', 'svg'], function(name) { - createElement('input', { - type: HIDDEN, - name: name, - value: { - filename: options.filename || 'chart', - type: options.type, - width: options.width, - svg: svg - }[name] - }, null, form); - }); - - // submit - form.submit(); - - // clean up - discardElement(form); - }, - - /** - * Print the chart - */ - print: function() { - - var chart = this, - container = chart.container, - origDisplay = [], - origParent = container.parentNode, - body = doc.body, - childNodes = body.childNodes; - - if (chart.isPrinting) { // block the button while in printing mode - return; - } - - chart.isPrinting = true; - - // hide all body content - each(childNodes, function(node, i) { - if (node.nodeType == 1) { - origDisplay[i] = node.style.display; - node.style.display = NONE; - } - }); - - // pull out the chart - body.appendChild(container); - - // print - win.print(); - - // allow the browser to prepare before reverting - setTimeout(function() { - - // put the chart back in - origParent.appendChild(container); - - // restore all body content - each(childNodes, function(node, i) { - if (node.nodeType == 1) { - node.style.display = origDisplay[i]; - } - }); - - chart.isPrinting = false; - - }, 1000); - - }, - - /** - * Display a popup menu for choosing the export type - * - * @param {String} name An identifier for the menu - * @param {Array} items A collection with text and onclicks for the items - * @param {Number} x The x position of the opener button - * @param {Number} y The y position of the opener button - * @param {Number} width The width of the opener button - * @param {Number} height The height of the opener button - */ - contextMenu: function(name, items, x, y, width, height) { - var chart = this, - navOptions = chart.options.navigation, - menuItemStyle = navOptions.menuItemStyle, - chartWidth = chart.chartWidth, - chartHeight = chart.chartHeight, - cacheName = 'cache-'+ name, - menu = chart[cacheName], - menuPadding = mathMax(width, height), // for mouse leave detection - boxShadow = '3px 3px 10px #888', - innerMenu, - hide, - menuStyle; - - // create the menu only the first time - if (!menu) { - - // create a HTML element above the SVG - chart[cacheName] = menu = createElement(DIV, { - className: PREFIX + name - }, { - position: ABSOLUTE, - zIndex: 1000, - padding: menuPadding + PX - }, chart.container); - - innerMenu = createElement(DIV, null, - extend({ - MozBoxShadow: boxShadow, - WebkitBoxShadow: boxShadow, - boxShadow: boxShadow - }, navOptions.menuStyle) , menu); - - // hide on mouse out - hide = function() { - css(menu, { display: NONE }); - }; - - addEvent(menu, 'mouseleave', hide); - - - // create the items - each(items, function(item) { - if (item) { - var div = createElement(DIV, { - onmouseover: function() { - css(this, navOptions.menuItemHoverStyle); - }, - onmouseout: function() { - css(this, menuItemStyle); - }, - innerHTML: item.text || HC.getOptions().lang[item.textKey] - }, extend({ - cursor: 'pointer' - }, menuItemStyle), innerMenu); - - div[hasTouch ? 'ontouchstart' : 'onclick'] = function() { - hide(); - item.onclick.apply(chart, arguments); - }; - - } - }); - - chart.exportMenuWidth = menu.offsetWidth; - chart.exportMenuHeight = menu.offsetHeight; - } - - menuStyle = { display: 'block' }; - - // if outside right, right align it - if (x + chart.exportMenuWidth > chartWidth) { - menuStyle.right = (chartWidth - x - width - menuPadding) + PX; - } else { - menuStyle.left = (x - menuPadding) + PX; - } - // if outside bottom, bottom align it - if (y + height + chart.exportMenuHeight > chartHeight) { - menuStyle.bottom = (chartHeight - y - menuPadding) + PX; - } else { - menuStyle.top = (y + height - menuPadding) + PX; - } - - css(menu, menuStyle); - }, - - /** - * Add the export button to the chart - */ - addButton: function(options) { - var chart = this, - renderer = chart.renderer, - btnOptions = merge(chart.options.navigation.buttonOptions, options), - onclick = btnOptions.onclick, - menuItems = btnOptions.menuItems, - /*position = chart.getAlignment(btnOptions), - buttonLeft = position.x, - buttonTop = position.y,*/ - buttonWidth = btnOptions.width, - buttonHeight = btnOptions.height, - box, - symbol, - button, - borderWidth = btnOptions.borderWidth, - boxAttr = { - stroke: btnOptions.borderColor - - }, - symbolAttr = { - stroke: btnOptions.symbolStroke, - fill: btnOptions.symbolFill - }; - - if (btnOptions.enabled === false) { - return; - } - - // element to capture the click - function revert() { - symbol.attr(symbolAttr); - box.attr(boxAttr); - } - - // the box border - box = renderer.rect( - 0, - 0, - buttonWidth, - buttonHeight, - btnOptions.borderRadius, - borderWidth - ) - //.translate(buttonLeft, buttonTop) // to allow gradients - .align(btnOptions, true) - .attr(extend({ - fill: btnOptions.backgroundColor, - 'stroke-width': borderWidth, - zIndex: 19 - }, boxAttr)).add(); - - // the invisible element to track the clicks - button = renderer.rect( - 0, - 0, - buttonWidth, - buttonHeight, - 0 - ) - .align(btnOptions) - .attr({ - fill: 'rgba(255, 255, 255, 0.001)', - title: HC.getOptions().lang[btnOptions._titleKey], - zIndex: 21 - }).css({ - cursor: 'pointer' - }) - .on('mouseover', function() { - symbol.attr({ - stroke: btnOptions.hoverSymbolStroke, - fill: btnOptions.hoverSymbolFill - }); - box.attr({ - stroke: btnOptions.hoverBorderColor - }); - }) - .on('mouseout', revert) - .on('click', revert) - .add(); - - //addEvent(button.element, 'click', revert); - - // add the click event - if (menuItems) { - onclick = function(e) { - revert(); - var bBox = button.getBBox(); - chart.contextMenu('export-menu', menuItems, bBox.x, bBox.y, buttonWidth, buttonHeight); - }; - } - /*addEvent(button.element, 'click', function() { - onclick.apply(chart, arguments); - });*/ - button.on('click', function() { - onclick.apply(chart, arguments); - }); - - // the icon - symbol = renderer.symbol( - btnOptions.symbol, - btnOptions.symbolX, - btnOptions.symbolY, - (btnOptions.symbolSize || 12) / 2 - ) - .align(btnOptions, true) - .attr(extend(symbolAttr, { - 'stroke-width': btnOptions.symbolStrokeWidth || 1, - zIndex: 20 - })).add(); - - - - } -}); - -// Create the export icon -HC.Renderer.prototype.symbols.exportIcon = function(x, y, radius) { - return [ - M, // the disk - x - radius, y + radius, - L, - x + radius, y + radius, - x + radius, y + radius * 0.5, - x - radius, y + radius * 0.5, - 'Z', - M, // the arrow - x, y + radius * 0.5, - L, - x - radius * 0.5, y - radius / 3, - x - radius / 6, y - radius / 3, - x - radius / 6, y - radius, - x + radius / 6, y - radius, - x + radius / 6, y - radius / 3, - x + radius * 0.5, y - radius / 3, - 'Z' - ]; -}; -// Create the print icon -HC.Renderer.prototype.symbols.printIcon = function(x, y, radius) { - return [ - M, // the printer - x - radius, y + radius * 0.5, - L, - x + radius, y + radius * 0.5, - x + radius, y - radius / 3, - x - radius, y - radius / 3, - 'Z', - M, // the upper sheet - x - radius * 0.5, y - radius / 3, - L, - x - radius * 0.5, y - radius, - x + radius * 0.5, y - radius, - x + radius * 0.5, y - radius / 3, - 'Z', - M, // the lower sheet - x - radius * 0.5, y + radius * 0.5, - L, - x - radius * 0.75, y + radius, - x + radius * 0.75, y + radius, - x + radius * 0.5, y + radius * 0.5, - 'Z' - ]; -}; - - -// Add the buttons on chart load -Chart.prototype.callbacks.push(function(chart) { - var n, - exportingOptions = chart.options.exporting, - buttons = exportingOptions.buttons; - - if (exportingOptions.enabled !== false) { - - for (n in buttons) { - chart.addButton(buttons[n]); - } - } -}); - - -})(); \ No newline at end of file diff --git a/js/highcharts/highcharts.js b/js/highcharts/highcharts.js index aa9de94e13..c15862b4f0 100644 --- a/js/highcharts/highcharts.js +++ b/js/highcharts/highcharts.js @@ -1,162 +1,10671 @@ -/* - Highcharts JS v2.1.4 (2011-03-02) +// ==ClosureCompiler== +// @compilation_level SIMPLE_OPTIMIZATIONS - (c) 2009-2010 Torstein H?nsi +/** + * @license Highcharts JS v2.1.4 (2011-03-02) + * + * (c) 2009-2010 Torstein Hønsi + * + * License: www.highcharts.com/license + */ + +// JSLint options: +/*jslint forin: true */ +/*global document, window, navigator, setInterval, clearInterval, clearTimeout, setTimeout, location, jQuery, $ */ + +(function() { +// encapsulated variables +var doc = document, + win = window, + math = Math, + mathRound = math.round, + mathFloor = math.floor, + mathCeil = math.ceil, + mathMax = math.max, + mathMin = math.min, + mathAbs = math.abs, + mathCos = math.cos, + mathSin = math.sin, + mathPI = math.PI, + deg2rad = mathPI * 2 / 360, + + + // some variables + userAgent = navigator.userAgent, + isIE = /msie/i.test(userAgent) && !win.opera, + docMode8 = doc.documentMode == 8, + isWebKit = /AppleWebKit/.test(userAgent), + isFirefox = /Firefox/.test(userAgent), + //hasSVG = win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"), + hasSVG = !!doc.createElementNS && !!doc.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect, + SVG_NS = 'http://www.w3.org/2000/svg', + hasTouch = 'ontouchstart' in doc.documentElement, + colorCounter, + symbolCounter, + symbolSizes = {}, + idCounter = 0, + timeFactor = 1, // 1 = JavaScript time, 1000 = Unix time + garbageBin, + defaultOptions, + dateFormat, // function + globalAnimation, + pathAnim, + + + // some constants for frequently used strings + UNDEFINED, + DIV = 'div', + ABSOLUTE = 'absolute', + RELATIVE = 'relative', + HIDDEN = 'hidden', + PREFIX = 'highcharts-', + VISIBLE = 'visible', + PX = 'px', + NONE = 'none', + M = 'M', + L = 'L', + /* + * Empirical lowest possible opacities for TRACKER_FILL + * IE6: 0.002 + * IE7: 0.002 + * IE8: 0.002 + * IE9: 0.00000000001 (unlimited) + * FF: 0.00000000001 (unlimited) + * Chrome: 0.000001 + * Safari: 0.000001 + * Opera: 0.00000000001 (unlimited) + */ + TRACKER_FILL = 'rgba(192,192,192,'+ (hasSVG ? 0.000001 : 0.002) +')', // invisible but clickable + NORMAL_STATE = '', + HOVER_STATE = 'hover', + SELECT_STATE = 'select', + + // time methods, changed based on whether or not UTC is used + makeTime, + getMinutes, + getHours, + getDay, + getDate, + getMonth, + getFullYear, + setMinutes, + setHours, + setDate, + setMonth, + setFullYear, + + // check for a custom HighchartsAdapter defined prior to this file + globalAdapter = win.HighchartsAdapter, + adapter = globalAdapter || {}, + + // Utility functions. If the HighchartsAdapter is not defined, adapter is an empty object + // and all the utility functions will be null. In that case they are populated by the + // default adapters below. + each = adapter.each, + grep = adapter.grep, + map = adapter.map, + merge = adapter.merge, + hyphenate = adapter.hyphenate, + addEvent = adapter.addEvent, + removeEvent = adapter.removeEvent, + fireEvent = adapter.fireEvent, + animate = adapter.animate, + stop = adapter.stop, + + // lookup over the types and the associated classes + seriesTypes = {}, + hoverChart; + +/** + * Extend an object with the members of another + * @param {Object} a The object to be extended + * @param {Object} b The object to add to the first one + */ +function extend(a, b) { + if (!a) { + a = {}; + } + for (var n in b) { + a[n] = b[n]; + } + return a; +} + +/** + * Shortcut for parseInt + * @param {Object} s + */ +function pInt(s, mag) { + return parseInt(s, mag || 10); +} + +/** + * Check for string + * @param {Object} s + */ +function isString(s) { + return typeof s == 'string'; +} + +/** + * Check for object + * @param {Object} obj + */ +function isObject(obj) { + return typeof obj == 'object'; +} + +/** + * Check for number + * @param {Object} n + */ +function isNumber(n) { + return typeof n == 'number'; +} + +/** + * Remove last occurence of an item from an array + * @param {Array} arr + * @param {Mixed} item + */ +function erase(arr, item) { + var i = arr.length; + while (i--) { + if (arr[i] == item) { + arr.splice(i, 1); + break; + } + } + //return arr; +} + +/** + * Returns true if the object is not null or undefined. Like MooTools' $.defined. + * @param {Object} obj + */ +function defined (obj) { + return obj !== UNDEFINED && obj !== null; +} + +/** + * Set or get an attribute or an object of attributes. Can't use jQuery attr because + * it attempts to set expando properties on the SVG element, which is not allowed. + * + * @param {Object} elem The DOM element to receive the attribute(s) + * @param {String|Object} prop The property or an abject of key-value pairs + * @param {String} value The value if a single property is set + */ +function attr(elem, prop, value) { + var key, + setAttribute = 'setAttribute', + ret; + + // if the prop is a string + if (isString(prop)) { + // set the value + if (defined(value)) { + + elem[setAttribute](prop, value); + + // get the value + } else if (elem && elem.getAttribute) { // elem not defined when printing pie demo... + ret = elem.getAttribute(prop); + } + + // else if prop is defined, it is a hash of key/value pairs + } else if (defined(prop) && isObject(prop)) { + for (key in prop) { + elem[setAttribute](key, prop[key]); + } + } + return ret; +} +/** + * Check if an element is an array, and if not, make it into an array. Like + * MooTools' $.splat. + */ +function splat(obj) { + if (!obj || obj.constructor != Array) { + obj = [obj]; + } + return obj; +} + + + +/** + * Return the first value that is defined. Like MooTools' $.pick. + */ +function pick() { + var args = arguments, + i, + arg, + length = args.length; + for (i = 0; i < length; i++) { + arg = args[i]; + if (typeof arg !== 'undefined' && arg !== null) { + return arg; + } + } +} +/** + * Make a style string from a JS object + * @param {Object} style + */ +function serializeCSS(style) { + var s = '', + key; + // serialize the declaration + for (key in style) { + s += hyphenate(key) +':'+ style[key] + ';'; + } + return s; + +} +/** + * Set CSS on a give element + * @param {Object} el + * @param {Object} styles + */ +function css (el, styles) { + if (isIE) { + if (styles && styles.opacity !== UNDEFINED) { + styles.filter = 'alpha(opacity='+ (styles.opacity * 100) +')'; + } + } + extend(el.style, styles); +} + +/** + * Utility function to create element with attributes and styles + * @param {Object} tag + * @param {Object} attribs + * @param {Object} styles + * @param {Object} parent + * @param {Object} nopad + */ +function createElement (tag, attribs, styles, parent, nopad) { + var el = doc.createElement(tag); + if (attribs) { + extend(el, attribs); + } + if (nopad) { + css(el, {padding: 0, border: NONE, margin: 0}); + } + if (styles) { + css(el, styles); + } + if (parent) { + parent.appendChild(el); + } + return el; +} + +/** + * Set the global animation to either a given value, or fall back to the + * given chart's animation option + * @param {Object} animation + * @param {Object} chart + */ +function setAnimation(animation, chart) { + globalAnimation = pick(animation, chart.animation); +} + +/* + * Define the adapter for frameworks. If an external adapter is not defined, + * Highcharts reverts to the built-in jQuery adapter. + */ +if (globalAdapter && globalAdapter.init) { + globalAdapter.init(); +} +if (!globalAdapter && win.jQuery) { + var jQ = jQuery; + + /** + * Utility for iterating over an array. Parameters are reversed compared to jQuery. + * @param {Array} arr + * @param {Function} fn + */ + each = function(arr, fn) { + for (var i = 0, len = arr.length; i < len; i++) { + if (fn.call(arr[i], arr[i], i, arr) === false) { + return i; + } + } + }; + + /** + * Filter an array + */ + grep = jQ.grep; + + /** + * Map an array + * @param {Array} arr + * @param {Function} fn + */ + map = function(arr, fn){ + //return jQuery.map(arr, fn); + var results = []; + for (var i = 0, len = arr.length; i < len; i++) { + results[i] = fn.call(arr[i], arr[i], i, arr); + } + return results; + + }; + + /** + * Deep merge two objects and return a third object + */ + merge = function(){ + var args = arguments; + return jQ.extend(true, null, args[0], args[1], args[2], args[3]); + }; + + /** + * Convert a camelCase string to a hyphenated string + * @param {String} str + */ + hyphenate = function (str) { + return str.replace(/([A-Z])/g, function(a, b){ return '-'+ b.toLowerCase(); }); + }; + + /** + * Add an event listener + * @param {Object} el A HTML element or custom object + * @param {String} event The event type + * @param {Function} fn The event handler + */ + addEvent = function (el, event, fn){ + jQ(el).bind(event, fn); + }; + + /** + * Remove event added with addEvent + * @param {Object} el The object + * @param {String} eventType The event type. Leave blank to remove all events. + * @param {Function} handler The function to remove + */ + removeEvent = function(el, eventType, handler) { + // workaround for jQuery issue with unbinding custom events: + // http://forum.jquery.com/topic/javascript-error-when-unbinding-a-custom-event-using-jquery-1-4-2 + var func = doc.removeEventListener ? 'removeEventListener' : 'detachEvent'; + if (doc[func] && !el[func]) { + el[func] = function() {}; + } + + jQ(el).unbind(eventType, handler); + }; + + /** + * Fire an event on a custom object + * @param {Object} el + * @param {String} type + * @param {Object} eventArguments + * @param {Function} defaultFunction + */ + fireEvent = function(el, type, eventArguments, defaultFunction) { + var event = jQ.Event(type), + detachedType = 'detached'+ type; + extend(event, eventArguments); + + // Prevent jQuery from triggering the object method that is named the + // same as the event. For example, if the event is 'select', jQuery + // attempts calling el.select and it goes into a loop. + if (el[type]) { + el[detachedType] = el[type]; + el[type] = null; + } + + // trigger it + jQ(el).trigger(event); + + // attach the method + if (el[detachedType]) { + el[type] = el[detachedType]; + el[detachedType] = null; + } + + if (defaultFunction && !event.isDefaultPrevented()) { + defaultFunction(event); + } + }; + + /** + * Animate a HTML element or SVG element wrapper + * @param {Object} el + * @param {Object} params + * @param {Object} options jQuery-like animation options: duration, easing, callback + */ + animate = function (el, params, options) { + var $el = jQ(el); + if (params.d) { + el.toD = params.d; // keep the array form for paths, used in jQ.fx.step.d + params.d = 1; // because in jQuery, animating to an array has a different meaning + } + + $el.stop(); + $el.animate(params, options); + + }; + /** + * Stop running animation + */ + stop = function (el) { + jQ(el).stop(); + }; + + + // extend jQuery + jQ.extend( jQ.easing, { + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + } + }); + + // extend the animate function to allow SVG animations + var oldStepDefault = jQuery.fx.step._default, + oldCur = jQuery.fx.prototype.cur; + + // do the step + jQ.fx.step._default = function(fx){ + var elem = fx.elem; + if (elem.attr) { // is SVG element wrapper + elem.attr(fx.prop, fx.now); + } else { + oldStepDefault.apply(this, arguments); + } + }; + // animate paths + jQ.fx.step.d = function(fx) { + var elem = fx.elem; + + + // Normally start and end should be set in state == 0, but sometimes, + // for reasons unknown, this doesn't happen. Perhaps state == 0 is skipped + // in these cases + if (!fx.started) { + var ends = pathAnim.init(elem, elem.d, elem.toD); + fx.start = ends[0]; + fx.end = ends[1]; + fx.started = true; + } + + + // interpolate each value of the path + elem.attr('d', pathAnim.step(fx.start, fx.end, fx.pos, elem.toD)); + + }; + // get the current value + jQ.fx.prototype.cur = function() { + var elem = this.elem, + r; + if (elem.attr) { // is SVG element wrapper + r = elem.attr(this.prop); + } else { + r = oldCur.apply(this, arguments); + } + return r; + }; +} + + +/** + * Add a global listener for mousemove events + */ +/*addEvent(doc, 'mousemove', function(e) { + if (globalMouseMove) { + globalMouseMove(e); + } +});*/ + +/** + * Path interpolation algorithm used across adapters + */ +pathAnim = { + /** + * Prepare start and end values so that the path can be animated one to one + */ + init: function(elem, fromD, toD) { + fromD = fromD || ''; + var shift = elem.shift, + bezier = fromD.indexOf('C') > -1, + numParams = bezier ? 7 : 3, + endLength, + slice, + i, + start = fromD.split(' '), + end = [].concat(toD), // copy + startBaseLine, + endBaseLine, + sixify = function(arr) { // in splines make move points have six parameters like bezier curves + i = arr.length; + while (i--) { + if (arr[i] == M) { + arr.splice(i + 1, 0, arr[i+1], arr[i+2], arr[i+1], arr[i+2]); + } + } + }; + + if (bezier) { + sixify(start); + sixify(end); + } + + // pull out the base lines before padding + if (elem.isArea) { + startBaseLine = start.splice(start.length - 6, 6); + endBaseLine = end.splice(end.length - 6, 6); + } + + // if shifting points, prepend a dummy point to the end path + if (shift) { + + end = [].concat(end).splice(0, numParams).concat(end); + elem.shift = false; // reset for following animations + } + + // copy and append last point until the length matches the end length + if (start.length) { + endLength = end.length; + while (start.length < endLength) { + + //bezier && sixify(start); + slice = [].concat(start).splice(start.length - numParams, numParams); + if (bezier) { // disable first control point + slice[numParams - 6] = slice[numParams - 2]; + slice[numParams - 5] = slice[numParams - 1]; + } + start = start.concat(slice); + } + } + + if (startBaseLine) { // append the base lines for areas + start = start.concat(startBaseLine); + end = end.concat(endBaseLine); + } + return [start, end]; + }, + + /** + * Interpolate each value of the path and return the array + */ + step: function(start, end, pos, complete) { + var ret = [], + i = start.length, + startVal; + + if (pos == 1) { // land on the final path without adjustment points appended in the ends + ret = complete; + + } else if (i == end.length && pos < 1) { + while (i--) { + startVal = parseFloat(start[i]); + ret[i] = + isNaN(startVal) ? // a letter instruction like M or L + start[i] : + pos * (parseFloat(end[i] - startVal)) + startVal; + + } + } else { // if animation is finished or length not matching, land on right value + ret = end; + } + return ret; + } +}; + +/** + * Set the time methods globally based on the useUTC option. Time method can be either + * local time or UTC (default). + */ +function setTimeMethods() { + var useUTC = defaultOptions.global.useUTC; + + makeTime = useUTC ? Date.UTC : function(year, month, date, hours, minutes, seconds) { + return new Date( + year, + month, + pick(date, 1), + pick(hours, 0), + pick(minutes, 0), + pick(seconds, 0) + ).getTime(); + }; + getMinutes = useUTC ? 'getUTCMinutes' : 'getMinutes'; + getHours = useUTC ? 'getUTCHours' : 'getHours'; + getDay = useUTC ? 'getUTCDay' : 'getDay'; + getDate = useUTC ? 'getUTCDate' : 'getDate'; + getMonth = useUTC ? 'getUTCMonth' : 'getMonth'; + getFullYear = useUTC ? 'getUTCFullYear' : 'getFullYear'; + setMinutes = useUTC ? 'setUTCMinutes' : 'setMinutes'; + setHours = useUTC ? 'setUTCHours' : 'setHours'; + setDate = useUTC ? 'setUTCDate' : 'setDate'; + setMonth = useUTC ? 'setUTCMonth' : 'setMonth'; + setFullYear = useUTC ? 'setUTCFullYear' : 'setFullYear'; + +} + +/** + * Merge the default options with custom options and return the new options structure + * @param {Object} options The new custom options + */ +function setOptions(options) { + defaultOptions = merge(defaultOptions, options); + + // apply UTC + setTimeMethods(); + + return defaultOptions; +} + +/** + * Get the updated default options. Merely exposing defaultOptions for outside modules + * isn't enough because the setOptions method creates a new object. + */ +function getOptions() { + return defaultOptions; +} + +/** + * Discard an element by moving it to the bin and delete + * @param {Object} The HTML node to discard + */ +function discardElement(element) { + // create a garbage bin element, not part of the DOM + if (!garbageBin) { + garbageBin = createElement(DIV); + } + + // move the node and empty bin + if (element) { + garbageBin.appendChild(element); + } + garbageBin.innerHTML = ''; +} + +/* **************************************************************************** + * Handle the options * + *****************************************************************************/ +var + +defaultLabelOptions = { + enabled: true, + // rotation: 0, + align: 'center', + x: 0, + y: 15, + /*formatter: function() { + return this.value; + },*/ + style: { + color: '#666', + fontSize: '11px', + lineHeight: '14px' + } +}; + +defaultOptions = { + colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', + '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'], + symbols: ['circle', 'diamond', 'square', 'triangle', 'triangle-down'], + lang: { + loading: 'Loading...', + months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', + 'August', 'September', 'October', 'November', 'December'], + weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], + decimalPoint: '.', + resetZoom: 'Reset zoom', + resetZoomTitle: 'Reset zoom level 1:1', + thousandsSep: ',' + }, + global: { + useUTC: true + }, + chart: { + //animation: true, + //alignTicks: false, + //reflow: true, + //className: null, + //events: { load, selection }, + //margin: [null], + //marginTop: null, + //marginRight: null, + //marginBottom: null, + //marginLeft: null, + borderColor: '#4572A7', + //borderWidth: 0, + borderRadius: 5, + defaultSeriesType: 'line', + ignoreHiddenSeries: true, + //inverted: false, + //shadow: false, + spacingTop: 10, + spacingRight: 10, + spacingBottom: 15, + spacingLeft: 10, + style: { + fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font + fontSize: '12px' + }, + backgroundColor: '#FFFFFF', + //plotBackgroundColor: null, + plotBorderColor: '#C0C0C0' + //plotBorderWidth: 0, + //plotShadow: false, + //zoomType: '' + }, + title: { + text: 'Chart title', + align: 'center', + // floating: false, + // margin: 15, + // x: 0, + // verticalAlign: 'top', + y: 15, // docs + style: { + color: '#3E576F', + fontSize: '16px' + } + + }, + subtitle: { + text: '', + align: 'center', + // floating: false + // x: 0, + // verticalAlign: 'top', + y: 30, // docs + style: { + color: '#6D869F' + } + }, + + plotOptions: { + line: { // base series options + allowPointSelect: false, + showCheckbox: false, + animation: { + duration: 1000 + }, + //cursor: 'default', + //dashStyle: null, + //enableMouseTracking: true, + events: {}, + lineWidth: 2, + shadow: true, + // stacking: null, + marker: { + enabled: true, + //symbol: null, + lineWidth: 0, + radius: 4, + lineColor: '#FFFFFF', + //fillColor: null, + states: { // states for a single point + hover: { + //radius: base + 2 + }, + select: { + fillColor: '#FFFFFF', + lineColor: '#000000', + lineWidth: 2 + } + } + }, + point: { + events: {} + }, + dataLabels: merge(defaultLabelOptions, { + enabled: false, + y: -6, + formatter: function() { + return this.y; + } + }), + + //pointStart: 0, + //pointInterval: 1, + showInLegend: true, + states: { // states for the entire series + hover: { + //enabled: false, + //lineWidth: base + 1, + marker: { + // lineWidth: base + 1, + // radius: base + 1 + } + }, + select: { + marker: {} + } + }, + stickyTracking: true + //zIndex: null + } + }, + labels: { + //items: [], + style: { + //font: defaultFont, + position: ABSOLUTE, + color: '#3E576F' + } + }, + legend: { + enabled: true, + align: 'center', + //floating: false, + layout: 'horizontal', + labelFormatter: function() { + return this.name; + }, + // lineHeight: 16, // docs: deprecated + borderWidth: 1, + borderColor: '#909090', + borderRadius: 5, + // margin: 10, + // reversed: false, + shadow: false, + // backgroundColor: null, + style: { + padding: '5px' + }, + itemStyle: { + cursor: 'pointer', + color: '#3E576F' + }, + itemHoverStyle: { + cursor: 'pointer', + color: '#000000' + }, + itemHiddenStyle: { + color: '#C0C0C0' + }, + itemCheckboxStyle: { + position: ABSOLUTE, + width: '13px', // for IE precision + height: '13px' + }, + // itemWidth: undefined, + symbolWidth: 16, + symbolPadding: 5, + verticalAlign: 'bottom', + // width: undefined, + x: 0, // docs + y: 0 // docs + }, + + loading: { + hideDuration: 100, + labelStyle: { + fontWeight: 'bold', + position: RELATIVE, + top: '1em' + }, + showDuration: 100, + style: { + position: ABSOLUTE, + backgroundColor: 'white', + opacity: 0.5, + textAlign: 'center' + } + }, + + tooltip: { + enabled: true, + //crosshairs: null, + backgroundColor: 'rgba(255, 255, 255, .85)', + borderWidth: 2, + borderRadius: 5, + //formatter: defaultFormatter, + shadow: true, + //shared: false, + snap: hasTouch ? 25 : 10, + style: { + color: '#333333', + fontSize: '12px', + padding: '5px', + whiteSpace: 'nowrap' + } + }, + + toolbar: { + itemStyle: { + color: '#4572A7', + cursor: 'pointer' + } + }, + + credits: { + enabled: true, + text: 'Highcharts.com', + href: 'http://www.highcharts.com', + position: { + align: 'right', + x: -10, + verticalAlign: 'bottom', + y: -5 + }, + style: { + cursor: 'pointer', + color: '#909090', + fontSize: '10px' + } + } +}; + +// Axis defaults +var defaultXAxisOptions = { + // allowDecimals: null, + // alternateGridColor: null, + // categories: [], + dateTimeLabelFormats: { + second: '%H:%M:%S', + minute: '%H:%M', + hour: '%H:%M', + day: '%e. %b', + week: '%e. %b', + month: '%b \'%y', + year: '%Y' + }, + endOnTick: false, + gridLineColor: '#C0C0C0', + // gridLineDashStyle: 'solid', // docs + // gridLineWidth: 0, + // reversed: false, + + labels: defaultLabelOptions, + // { step: null }, + lineColor: '#C0D0E0', + lineWidth: 1, + //linkedTo: null, + max: null, + min: null, + minPadding: 0.01, + maxPadding: 0.01, + //maxZoom: null, + minorGridLineColor: '#E0E0E0', + // minorGridLineDashStyle: null, + minorGridLineWidth: 1, + minorTickColor: '#A0A0A0', + //minorTickInterval: null, + minorTickLength: 2, + minorTickPosition: 'outside', // inside or outside + //minorTickWidth: 0, + //opposite: false, + //offset: 0, + //plotBands: [{ + // events: {}, + // zIndex: 1, + // labels: { align, x, verticalAlign, y, style, rotation, textAlign } + //}], + //plotLines: [{ + // events: {} + // dashStyle: {} + // zIndex: + // labels: { align, x, verticalAlign, y, style, rotation, textAlign } + //}], + //reversed: false, + // showFirstLabel: true, + // showLastLabel: false, + startOfWeek: 1, + startOnTick: false, + tickColor: '#C0D0E0', + //tickInterval: null, + tickLength: 5, + tickmarkPlacement: 'between', // on or between + tickPixelInterval: 100, + tickPosition: 'outside', + tickWidth: 1, + title: { + //text: null, + align: 'middle', // low, middle or high + //margin: 0 for horizontal, 10 for vertical axes, + //rotation: 0, + //side: 'outside', + style: { + color: '#6D869F', + //font: defaultFont.replace('normal', 'bold') + fontWeight: 'bold' + } + //x: 0, + //y: 0 + }, + type: 'linear' // linear or datetime +}, + +defaultYAxisOptions = merge(defaultXAxisOptions, { + endOnTick: true, + gridLineWidth: 1, + tickPixelInterval: 72, + showLastLabel: true, + labels: { + align: 'right', + x: -8, + y: 3 + }, + lineWidth: 0, + maxPadding: 0.05, + minPadding: 0.05, + startOnTick: true, + tickWidth: 0, + title: { + rotation: 270, + text: 'Y-values' + } +}), + +defaultLeftAxisOptions = { + labels: { + align: 'right', + x: -8, + y: null // docs + }, + title: { + rotation: 270 + } +}, +defaultRightAxisOptions = { + labels: { + align: 'left', + x: 8, + y: null // docs + }, + title: { + rotation: 90 + } +}, +defaultBottomAxisOptions = { // horizontal axis + labels: { + align: 'center', + x: 0, + y: 14 + // staggerLines: null + }, + title: { + rotation: 0 + } +}, +defaultTopAxisOptions = merge(defaultBottomAxisOptions, { + labels: { + y: -5 + // staggerLines: null + } +}); + + + + +// Series defaults +var defaultPlotOptions = defaultOptions.plotOptions, + defaultSeriesOptions = defaultPlotOptions.line; +//defaultPlotOptions.line = merge(defaultSeriesOptions); +defaultPlotOptions.spline = merge(defaultSeriesOptions); +defaultPlotOptions.scatter = merge(defaultSeriesOptions, { + lineWidth: 0, + states: { + hover: { + lineWidth: 0 + } + } +}); +defaultPlotOptions.area = merge(defaultSeriesOptions, { + // threshold: 0, + // lineColor: null, // overrides color, but lets fillColor be unaltered + // fillOpacity: 0.75, + // fillColor: null + +}); +defaultPlotOptions.areaspline = merge(defaultPlotOptions.area); +defaultPlotOptions.column = merge(defaultSeriesOptions, { + borderColor: '#FFFFFF', + borderWidth: 1, + borderRadius: 0, + //colorByPoint: undefined, + groupPadding: 0.2, + marker: null, // point options are specified in the base options + pointPadding: 0.1, + //pointWidth: null, + minPointLength: 0, + states: { + hover: { + brightness: 0.1, + shadow: false + }, + select: { + color: '#C0C0C0', + borderColor: '#000000', + shadow: false + } + } +}); +defaultPlotOptions.bar = merge(defaultPlotOptions.column, { + dataLabels: { + align: 'left', + x: 5, + y: 0 + } +}); +defaultPlotOptions.pie = merge(defaultSeriesOptions, { + //dragType: '', // n/a + borderColor: '#FFFFFF', + borderWidth: 1, + center: ['50%', '50%'], + colorByPoint: true, // always true for pies + dataLabels: { + // align: null, + // connectorWidth: 1, + // connectorColor: '#606060', + // connectorPadding: 5, + distance: 30, + enabled: true, + formatter: function() { + return this.point.name; + }, + y: 5 + }, + //innerSize: 0, + legendType: 'point', + marker: null, // point options are specified in the base options + size: '75%', + showInLegend: false, + slicedOffset: 10, + states: { + hover: { + brightness: 0.1, + shadow: false + } + } + +}); + +// set the default time methods +setTimeMethods(); + + +/** + * Extend a prototyped class by new members + * @param {Object} parent + * @param {Object} members + */ +function extendClass(parent, members) { + var object = function(){}; + object.prototype = new parent(); + extend(object.prototype, members); + return object; +} + + +/** + * Handle color operations. The object methods are chainable. + * @param {String} input The input color in either rbga or hex format + */ +var Color = function(input) { + // declare variables + var rgba = [], result; + + /** + * Parse the input color to rgba array + * @param {String} input + */ + function init(input) { + + // rgba + if((result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]?(?:\.[0-9]+)?)\s*\)/.exec(input))) { + rgba = [pInt(result[1]), pInt(result[2]), pInt(result[3]), parseFloat(result[4], 10)]; + } + + // hex + else if((result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(input))) { + rgba = [pInt(result[1],16), pInt(result[2],16), pInt(result[3],16), 1]; + } + + } + /** + * Return the color a specified format + * @param {String} format + */ + function get(format) { + var ret; + + // it's NaN if gradient colors on a column chart + if (rgba && !isNaN(rgba[0])) { + if (format == 'rgb') { + ret = 'rgb('+ rgba[0] +','+ rgba[1] +','+ rgba[2] +')'; + } else if (format == 'a') { + ret = rgba[3]; + } else { + ret = 'rgba('+ rgba.join(',') +')'; + } + } else { + ret = input; + } + return ret; + } + + /** + * Brighten the color + * @param {Number} alpha + */ + function brighten(alpha) { + if (isNumber(alpha) && alpha !== 0) { + var i; + for (i = 0; i < 3; i++) { + rgba[i] += pInt(alpha * 255); + + if (rgba[i] < 0) { + rgba[i] = 0; + } + if (rgba[i] > 255) { + rgba[i] = 255; + } + } + } + return this; + } + /** + * Set the color's opacity to a given alpha value + * @param {Number} alpha + */ + function setOpacity(alpha) { + rgba[3] = alpha; + return this; + } + + // initialize: parse the input + init(input); + + // public methods + return { + get: get, + brighten: brighten, + setOpacity: setOpacity + }; +}; + + + +/** + * Format a number and return a string based on input settings + * @param {Number} number The input number to format + * @param {Number} decimals The amount of decimals + * @param {String} decPoint The decimal point, defaults to the one given in the lang options + * @param {String} thousandsSep The thousands separator, defaults to the one given in the lang options + */ +function numberFormat (number, decimals, decPoint, thousandsSep) { + var lang = defaultOptions.lang, + // http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_number_format/ + n = number, c = isNaN(decimals = mathAbs(decimals)) ? 2 : decimals, + d = decPoint === undefined ? lang.decimalPoint : decPoint, + t = thousandsSep === undefined ? lang.thousandsSep : thousandsSep, s = n < 0 ? "-" : "", + i = pInt(n = mathAbs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0; + + return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + + (c ? d + mathAbs(n - i).toFixed(c).slice(2) : ""); +} + +/** + * Based on http://www.php.net/manual/en/function.strftime.php + * @param {String} format + * @param {Number} timestamp + * @param {Boolean} capitalize + */ +dateFormat = function (format, timestamp, capitalize) { + function pad (number) { + return number.toString().replace(/^([0-9])$/, '0$1'); + } + + if (!defined(timestamp) || isNaN(timestamp)) { + return 'Invalid date'; + } + format = pick(format, '%Y-%m-%d %H:%M:%S'); + + var date = new Date(timestamp * timeFactor), + + // get the basic time values + hours = date[getHours](), + day = date[getDay](), + dayOfMonth = date[getDate](), + month = date[getMonth](), + fullYear = date[getFullYear](), + lang = defaultOptions.lang, + langWeekdays = lang.weekdays, + langMonths = lang.months, + + // list all format keys + replacements = { + + // Day + 'a': langWeekdays[day].substr(0, 3), // Short weekday, like 'Mon' + 'A': langWeekdays[day], // Long weekday, like 'Monday' + 'd': pad(dayOfMonth), // Two digit day of the month, 01 to 31 + 'e': dayOfMonth, // Day of the month, 1 through 31 + + // Week (none implemented) + + // Month + 'b': langMonths[month].substr(0, 3), // Short month, like 'Jan' + 'B': langMonths[month], // Long month, like 'January' + 'm': pad(month + 1), // Two digit month number, 01 through 12 + + // Year + 'y': fullYear.toString().substr(2, 2), // Two digits year, like 09 for 2009 + 'Y': fullYear, // Four digits year, like 2009 + + // Time + 'H': pad(hours), // Two digits hours in 24h format, 00 through 23 + 'I': pad((hours % 12) || 12), // Two digits hours in 12h format, 00 through 11 + 'l': (hours % 12) || 12, // Hours in 12h format, 1 through 12 + 'M': pad(date[getMinutes]()), // Two digits minutes, 00 through 59 + 'p': hours < 12 ? 'AM' : 'PM', // Upper case AM or PM + 'P': hours < 12 ? 'am' : 'pm', // Lower case AM or PM + 'S': pad(date.getSeconds()) // Two digits seconds, 00 through 59 + + }; + + + // do the replaces + for (var key in replacements) { + format = format.replace('%'+ key, replacements[key]); + } + + // Optionally capitalize the string and return + return capitalize ? format.substr(0, 1).toUpperCase() + format.substr(1) : format; +}; + + + +/** + * Loop up the node tree and add offsetWidth and offsetHeight to get the + * total page offset for a given element. Used by Opera and iOS on hover and + * all browsers on point click. + * + * @param {Object} el + * + */ +function getPosition (el) { + var p = { left: el.offsetLeft, top: el.offsetTop }; + while ((el = el.offsetParent)) { + p.left += el.offsetLeft; + p.top += el.offsetTop; + if (el != doc.body && el != doc.documentElement) { + p.left -= el.scrollLeft; + p.top -= el.scrollTop; + } + } + return p; +} + + +/** + * A wrapper object for SVG elements + */ +function SVGElement () {} + +SVGElement.prototype = { + /** + * Initialize the SVG renderer + * @param {Object} renderer + * @param {String} nodeName + */ + init: function(renderer, nodeName) { + this.element = doc.createElementNS(SVG_NS, nodeName); + this.renderer = renderer; + }, + /** + * Animate a given attribute + * @param {Object} params + * @param {Number} options The same options as in jQuery animation + * @param {Function} complete Function to perform at the end of animation + */ + animate: function(params, options, complete) { + var animOptions = pick(options, globalAnimation, true); + if (animOptions) { + animOptions = merge(animOptions); + if (complete) { // allows using a callback with the global animation without overwriting it + animOptions.complete = complete; + } + animate(this, params, animOptions); + } else { + this.attr(params); + if (complete) { + complete(); + } + } + }, + /** + * Set or get a given attribute + * @param {Object|String} hash + * @param {Mixed|Undefined} val + */ + attr: function(hash, val) { + var key, + value, + i, + child, + element = this.element, + nodeName = element.nodeName, + renderer = this.renderer, + skipAttr, + shadows = this.shadows, + hasSetSymbolSize, + ret = this; + + // single key-value pair + if (isString(hash) && defined(val)) { + key = hash; + hash = {}; + hash[key] = val; + } + + // used as a getter: first argument is a string, second is undefined + if (isString(hash)) { + key = hash; + if (nodeName == 'circle') { + key = { x: 'cx', y: 'cy' }[key] || key; + } else if (key == 'strokeWidth') { + key = 'stroke-width'; + } + ret = attr(element, key) || this[key] || 0; + + if (key != 'd' && key != 'visibility') { // 'd' is string in animation step + ret = parseFloat(ret); + } + + // setter + } else { + + for (key in hash) { + skipAttr = false; // reset + value = hash[key]; + + // paths + if (key == 'd') { + if (value && value.join) { // join path + value = value.join(' '); + } + if (/(NaN| {2}|^$)/.test(value)) { + value = 'M 0 0'; + } + this.d = value; // shortcut for animations + + // update child tspans x values + } else if (key == 'x' && nodeName == 'text') { + for (i = 0; i < element.childNodes.length; i++ ) { + child = element.childNodes[i]; + // if the x values are equal, the tspan represents a linebreak + if (attr(child, 'x') == attr(element, 'x')) { + //child.setAttribute('x', value); + attr(child, 'x', value); + } + } + + if (this.rotation) { + attr(element, 'transform', 'rotate('+ this.rotation +' '+ value +' '+ + pInt(hash.y || attr(element, 'y')) +')'); + } + + // apply gradients + } else if (key == 'fill') { + value = renderer.color(value, element, key); + + // circle x and y + } else if (nodeName == 'circle' && (key == 'x' || key == 'y')) { + key = { x: 'cx', y: 'cy' }[key] || key; + + // translation and text rotation + } else if (key == 'translateX' || key == 'translateY' || key == 'rotation' || key == 'verticalAlign') { + this[key] = value; + this.updateTransform(); + skipAttr = true; + + // apply opacity as subnode (required by legacy WebKit and Batik) + } else if (key == 'stroke') { + value = renderer.color(value, element, key); + + // emulate VML's dashstyle implementation + } else if (key == 'dashstyle') { + key = 'stroke-dasharray'; + if (value) { + value = value.toLowerCase() + .replace('shortdashdotdot', '3,1,1,1,1,1,') + .replace('shortdashdot', '3,1,1,1') + .replace('shortdot', '1,1,') + .replace('shortdash', '3,1,') + .replace('longdash', '8,3,') + .replace(/dot/g, '1,3,') + .replace('dash', '4,3,') + .replace(/,$/, '') + .split(','); // ending comma + + i = value.length; + while (i--) { + value[i] = pInt(value[i]) * hash['stroke-width']; + } + value = value.join(','); + } + + // special + } else if (key == 'isTracker') { + this[key] = value; + + // IE9/MooTools combo: MooTools returns objects instead of numbers and IE9 Beta 2 + // is unable to cast them. Test again with final IE9. + } else if (key == 'width') { + value = pInt(value); + + // Text alignment + } else if (key == 'align') { + key = 'text-anchor'; + value = { left: 'start', center: 'middle', right: 'end' }[value]; + } + + + + // jQuery animate changes case + if (key == 'strokeWidth') { + key = 'stroke-width'; + } + + // Chrome/Win < 6 bug (http://code.google.com/p/chromium/issues/detail?id=15461) + if (isWebKit && key == 'stroke-width' && value === 0) { + value = 0.000001; + } + + // symbols + if (this.symbolName && /^(x|y|r|start|end|innerR)/.test(key)) { + + + if (!hasSetSymbolSize) { + this.symbolAttr(hash); + hasSetSymbolSize = true; + } + skipAttr = true; + } + + // let the shadow follow the main element + if (shadows && /^(width|height|visibility|x|y|d)$/.test(key)) { + i = shadows.length; + while (i--) { + attr(shadows[i], key, value); + } + } + + /* trows errors in Chrome + if ((key == 'width' || key == 'height') && nodeName == 'rect' && value < 0) { + console.log(element); + } + */ + + + + if (key == 'text') { + // only one node allowed + this.textStr = value; + if (this.added) { + renderer.buildText(this); + } + } else if (!skipAttr) { + //element.setAttribute(key, value); + attr(element, key, value); + } + + } + + } + return ret; + }, + + /** + * If one of the symbol size affecting parameters are changed, + * check all the others only once for each call to an element's + * .attr() method + * @param {Object} hash + */ + symbolAttr: function(hash) { + var wrapper = this; + + each (['x', 'y', 'r', 'start', 'end', 'width', 'height', 'innerR'], function(key) { + wrapper[key] = pick(hash[key], wrapper[key]); + }); + + wrapper.attr({ + d: wrapper.renderer.symbols[wrapper.symbolName](wrapper.x, wrapper.y, wrapper.r, { + start: wrapper.start, + end: wrapper.end, + width: wrapper.width, + height: wrapper.height, + innerR: wrapper.innerR + }) + }); + }, + + /** + * Apply a clipping path to this object + * @param {String} id + */ + clip: function(clipRect) { + return this.attr('clip-path', 'url('+ this.renderer.url +'#'+ clipRect.id +')'); + }, + + /** + * Calculate the coordinates needed for drawing a rectangle crisply and return the + * calculated attributes + * @param {Number} strokeWidth + * @param {Number} x + * @param {Number} y + * @param {Number} width + * @param {Number} height + */ + crisp: function(strokeWidth, x, y, width, height) { + + var wrapper = this, + key, + attr = {}, + values = {}, + normalizer; + + strokeWidth = strokeWidth || wrapper.strokeWidth || 0; + normalizer = strokeWidth % 2 / 2; + + // normalize for crisp edges + values.x = mathFloor(x || wrapper.x || 0) + normalizer; + values.y = mathFloor(y || wrapper.y || 0) + normalizer; + values.width = mathFloor((width || wrapper.width || 0) - 2 * normalizer); + values.height = mathFloor((height || wrapper.height || 0) - 2 * normalizer); + values.strokeWidth = strokeWidth; + + for (key in values) { + if (wrapper[key] != values[key]) { // only set attribute if changed + wrapper[key] = attr[key] = values[key]; + } + } + + return attr; + }, + + /** + * Set styles for the element + * @param {Object} styles + */ + css: function(styles) { + var elemWrapper = this, + elem = elemWrapper.element, + textWidth = styles && styles.width && elem.nodeName == 'text'; + + // convert legacy + if (styles && styles.color) { + styles.fill = styles.color; + } + + // save the styles in an object + styles = extend( + elemWrapper.styles, + styles + ); + + + // store object + elemWrapper.styles = styles; + + // serialize and set style attribute + if (isIE && !hasSVG) { // legacy IE doesn't support setting style attribute + if (textWidth) { + delete styles.width; + } + css(elemWrapper.element, styles); + } else { + elemWrapper.attr({ + style: serializeCSS(styles) + }); + } + + + // re-build text + if (textWidth && elemWrapper.added) { + elemWrapper.renderer.buildText(elemWrapper); + } + + return elemWrapper; + }, + + /** + * Add an event listener + * @param {String} eventType + * @param {Function} handler + */ + on: function(eventType, handler) { + var fn = handler; + // touch + if (hasTouch && eventType == 'click') { + eventType = 'touchstart'; + fn = function(e) { + e.preventDefault(); + handler(); + } + } + // simplest possible event model for internal use + this.element['on'+ eventType] = fn; + return this; + }, + + + /** + * Move an object and its children by x and y values + * @param {Number} x + * @param {Number} y + */ + translate: function(x, y) { + return this.attr({ + translateX: x, + translateY: y + }); + }, + + /** + * Invert a group, rotate and flip + */ + invert: function() { + var wrapper = this; + wrapper.inverted = true; + wrapper.updateTransform(); + return wrapper; + }, + + /** + * Private method to update the transform attribute based on internal + * properties + */ + updateTransform: function() { + var wrapper = this, + translateX = wrapper.translateX || 0, + translateY = wrapper.translateY || 0, + inverted = wrapper.inverted, + rotation = wrapper.rotation, + transform = []; + + // flipping affects translate as adjustment for flipping around the group's axis + if (inverted) { + translateX += wrapper.attr('width'); + translateY += wrapper.attr('height'); + } + + // apply translate + if (translateX || translateY) { + transform.push('translate('+ translateX +','+ translateY +')'); + } + + // apply rotation + if (inverted) { + transform.push('rotate(90) scale(-1,1)'); + } else if (rotation) { // text rotation + transform.push('rotate('+ rotation +' '+ wrapper.x +' '+ wrapper.y +')'); + } + + if (transform.length) { + attr(wrapper.element, 'transform', transform.join(' ')); + } + }, + /** + * Bring the element to the front + */ + toFront: function() { + var element = this.element; + element.parentNode.appendChild(element); + return this; + }, + + + /** + * Break down alignment options like align, verticalAlign, x and y + * to x and y relative to the chart. + * + * @param {Object} alignOptions + * @param {Boolean} alignByTranslate + * @param {Object} box The box to align to, needs a width and height + * + */ + align: function(alignOptions, alignByTranslate, box) { + + if (!alignOptions) { // called on resize + alignOptions = this.alignOptions; + alignByTranslate = this.alignByTranslate; + } else { // first call on instanciate + this.alignOptions = alignOptions; + this.alignByTranslate = alignByTranslate; + if (!box) { // boxes other than renderer handle this internally + this.renderer.alignedObjects.push(this); + } + } + + box = pick(box, this.renderer); + + var align = alignOptions.align, + vAlign = alignOptions.verticalAlign, + x = (box.x || 0) + (alignOptions.x || 0), // default: left align + y = (box.y || 0) + (alignOptions.y || 0), // default: top align + attribs = {}; + + + // align + if (/^(right|center)$/.test(align)) { + x += (box.width - (alignOptions.width || 0) ) / + { right: 1, center: 2 }[align]; + } + attribs[alignByTranslate ? 'translateX' : 'x'] = mathRound(x); + + + // vertical align + if (/^(bottom|middle)$/.test(vAlign)) { + y += (box.height - (alignOptions.height || 0)) / + ({ bottom: 1, middle: 2 }[vAlign] || 1); + + } + attribs[alignByTranslate ? 'translateY' : 'y'] = mathRound(y); + + // animate only if already placed + this[this.placed ? 'animate' : 'attr'](attribs); + this.placed = true; + + return this; + }, + + /** + * Get the bounding box (width, height, x and y) for the element + */ + getBBox: function() { + var bBox, + width, + height, + rotation = this.rotation, + rad = rotation * deg2rad; + + try { // fails in Firefox if the container has display: none + // use extend because IE9 is not allowed to change width and height in case + // of rotation (below) + bBox = extend({}, this.element.getBBox()); + } catch(e) { + bBox = { width: 0, height: 0 }; + } + width = bBox.width; + height = bBox.height; + + // adjust for rotated text + if (rotation) { + bBox.width = mathAbs(height * mathSin(rad)) + mathAbs(width * mathCos(rad)); + bBox.height = mathAbs(height * mathCos(rad)) + mathAbs(width * mathSin(rad)); + } + + return bBox; + }, + + /* * + * Manually compute width and height of rotated text from non-rotated. Shared by SVG and VML + * @param {Object} bBox + * @param {number} rotation + * / + rotateBBox: function(bBox, rotation) { + var rad = rotation * math.PI * 2 / 360, // radians + width = bBox.width, + height = bBox.height; + + + },*/ + + /** + * Show the element + */ + show: function() { + return this.attr({ visibility: VISIBLE }); + }, + + /** + * Hide the element + */ + hide: function() { + return this.attr({ visibility: HIDDEN }); + }, + + /** + * Add the element + * @param {Object|Undefined} parent Can be an element, an element wrapper or undefined + * to append the element to the renderer.box. + */ + add: function(parent) { + + var renderer = this.renderer, + parentWrapper = parent || renderer, + parentNode = parentWrapper.element || renderer.box, + childNodes = parentNode.childNodes, + element = this.element, + zIndex = attr(element, 'zIndex'), + otherElement, + otherZIndex, + i; + + // mark as inverted + this.parentInverted = parent && parent.inverted; + + // build formatted text + if (this.textStr !== undefined) { + renderer.buildText(this); + } + + // mark the container as having z indexed children + if (zIndex) { + parentWrapper.handleZ = true; + zIndex = pInt(zIndex); + } + + // insert according to this and other elements' zIndex + if (parentWrapper.handleZ) { // this element or any of its siblings has a z index + for (i = 0; i < childNodes.length; i++) { + otherElement = childNodes[i]; + otherZIndex = attr(otherElement, 'zIndex'); + if (otherElement != element && ( + // insert before the first element with a higher zIndex + pInt(otherZIndex) > zIndex || + // if no zIndex given, insert before the first element with a zIndex + (!defined(zIndex) && defined(otherZIndex)) + + )) { + parentNode.insertBefore(element, otherElement); + return this; + } + } + } + + // default: append at the end + parentNode.appendChild(element); + + this.added = true; + + return this; + }, + + /** + * Destroy the element and element wrapper + */ + destroy: function() { + var wrapper = this, + element = wrapper.element || {}, + shadows = wrapper.shadows, + parentNode = element.parentNode, + key; + + // remove events + element.onclick = element.onmouseout = element.onmouseover = element.onmousemove = null; + stop(wrapper); // stop running animations + + // remove element + if (parentNode) { + parentNode.removeChild(element); + } + + // destroy shadows + if (shadows) { + each(shadows, function(shadow) { + parentNode = shadow.parentNode; + if (parentNode) { // the entire chart HTML can be overwritten + parentNode.removeChild(shadow); + } + }); + } + + // remove from alignObjects + erase(wrapper.renderer.alignedObjects, wrapper); + + for (key in wrapper) { + delete wrapper[key]; + } + + return null; + }, + + /** + * Empty a group element + */ + empty: function() { + var element = this.element, + childNodes = element.childNodes, + i = childNodes.length; + + while (i--) { + element.removeChild(childNodes[i]); + } + }, + + /** + * Add a shadow to the element. Must be done after the element is added to the DOM + * @param {Boolean} apply + */ + shadow: function(apply) { + var shadows = [], + i, + shadow, + element = this.element, + + // compensate for inverted plot area + transform = this.parentInverted ? '(-1,-1)' : '(1,1)'; + + + if (apply) { + for (i = 1; i <= 3; i++) { + shadow = element.cloneNode(0); + attr(shadow, { + 'isShadow': 'true', + 'stroke': 'rgb(0, 0, 0)', + 'stroke-opacity': 0.05 * i, + 'stroke-width': 7 - 2 * i, + 'transform': 'translate'+ transform, + 'fill': NONE + }); + + + element.parentNode.insertBefore(shadow, element); + + shadows.push(shadow); + } + + this.shadows = shadows; + } + return this; + + } +}; + + + +/** + * The default SVG renderer + */ +var SVGRenderer = function() { + this.init.apply(this, arguments); +}; +SVGRenderer.prototype = { + /** + * Initialize the SVGRenderer + * @param {Object} container + * @param {Number} width + * @param {Number} height + * @param {Boolean} forExport + */ + init: function(container, width, height, forExport) { + var renderer = this, + loc = location, + boxWrapper; + + renderer.Element = SVGElement; + boxWrapper = renderer.createElement('svg') + .attr({ + xmlns: SVG_NS, + version: '1.1' + }); + container.appendChild(boxWrapper.element); + + // object properties + renderer.box = boxWrapper.element; + renderer.boxWrapper = boxWrapper; + renderer.alignedObjects = []; + renderer.url = isIE ? '' : loc.href.replace(/#.*?$/, ''); // page url used for internal references + renderer.defs = this.createElement('defs').add(); + renderer.forExport = forExport; + + renderer.setSize(width, height, false); + + }, + + + /** + * Create a wrapper for an SVG element + * @param {Object} nodeName + */ + createElement: function(nodeName) { + var wrapper = new this.Element(); + wrapper.init(this, nodeName); + return wrapper; + }, + + + /** + * Parse a simple HTML string into SVG tspans + * + * @param {Object} textNode The parent text SVG node + */ + buildText: function(wrapper) { + var textNode = wrapper.element, + lines = pick(wrapper.textStr, '').toString() + .replace(/<(b|strong)>/g, '') + .replace(/<(i|em)>/g, '') + .replace(//g, '') + .split(/]?>/g), + childNodes = textNode.childNodes, + styleRegex = /style="([^"]+)"/, + hrefRegex = /href="([^"]+)"/, + parentX = attr(textNode, 'x'), + textStyles = wrapper.styles, + reverse = isFirefox && textStyles && textStyles.HcDirection == 'rtl' && !this.forExport, // issue #38 + arr, + width = textStyles && pInt(textStyles.width), + textLineHeight = textStyles && textStyles.lineHeight, + lastLine, + i = childNodes.length; + + // remove old text + while (i--) { + textNode.removeChild(childNodes[i]); + } + + if (width && !wrapper.added) { + this.box.appendChild(textNode); // attach it to the DOM to read offset width + } + + each(lines, function(line, lineNo) { + var spans, spanNo = 0, lineHeight; + + line = line.replace(//g, '|||'); + spans = line.split('|||'); + + each(spans, function (span) { + if (span !== '' || spans.length == 1) { + var attributes = {}, + tspan = doc.createElementNS(SVG_NS, 'tspan'); + if (styleRegex.test(span)) { + attr( + tspan, + 'style', + span.match(styleRegex)[1].replace(/(;| |^)color([ :])/, '$1fill$2') + ); + } + if (hrefRegex.test(span)) { + attr(tspan, 'onclick', 'location.href=\"'+ span.match(hrefRegex)[1] +'\"'); + css(tspan, { cursor: 'pointer' }); + } + + span = span.replace(/<(.|\n)*?>/g, '') || ' '; + + // issue #38 workaround. + if (reverse) { + arr = []; + i = span.length; + while (i--) { + arr.push(span.charAt(i)) + } + span = arr.join(''); + } + + // add the text node + tspan.appendChild(doc.createTextNode(span)); + + if (!spanNo) { // first span in a line, align it to the left + attributes.x = parentX; + } else { + // Firefox ignores spaces at the front or end of the tspan + attributes.dx = 3; // space + } + + // first span on subsequent line, add the line height + if (!spanNo) { + if (lineNo) { + // Webkit and opera sometimes return 'normal' as the line height. In that + // case, webkit uses offsetHeight, while Opera falls back to 18 + lineHeight = pInt(window.getComputedStyle(lastLine, null).getPropertyValue('line-height')); + if (isNaN(lineHeight)) { + lineHeight = textLineHeight || lastLine.offsetHeight || 18; + } + attr(tspan, 'dy', lineHeight); + } + lastLine = tspan; // record for use in next line + } + + // add attributes + attr(tspan, attributes); + + // append it + textNode.appendChild(tspan); + + spanNo++; + + // check width and apply soft breaks + if (width) { + var words = span.replace(/-/g, '- ').split(' '), + tooLong, + actualWidth, + rest = []; + + while (words.length || rest.length) { + actualWidth = textNode.getBBox().width; + tooLong = actualWidth > width; + if (!tooLong || words.length == 1) { // new line needed + words = rest; + rest = []; + if (words.length) { + tspan = doc.createElementNS(SVG_NS, 'tspan'); + attr(tspan, { + x: parentX, + dy: textLineHeight || 16 + }); + textNode.appendChild(tspan); + + if (actualWidth > width) { // a single word is pressing it out + width = actualWidth; + } + } + } else { // append to existing line tspan + tspan.removeChild(tspan.firstChild); + rest.unshift(words.pop()); + } + + tspan.appendChild(doc.createTextNode(words.join(' ').replace(/- /g, '-'))); + } + + } + } + }); + }); + + + }, + + /** + * Make a straight line crisper by not spilling out to neighbour pixels + * @param {Array} points + * @param {Number} width + */ + crispLine: function(points, width) { + // points format: [M, 0, 0, L, 100, 0] + // normalize to a crisp line + if (points[1] == points[4]) { + points[1] = points[4] = mathRound(points[1]) + (width % 2 / 2); + } + if (points[2] == points[5]) { + points[2] = points[5] = mathRound(points[2]) + (width % 2 / 2); + } + return points; + }, + + + /** + * Draw a path + * @param {Array} path An SVG path in array form + */ + path: function (path) { + return this.createElement('path').attr({ + d: path, + fill: NONE + }); + }, + + /** + * Draw and return an SVG circle + * @param {Number} x The x position + * @param {Number} y The y position + * @param {Number} r The radius + */ + circle: function (x, y, r) { + var attr = isObject(x) ? + x : + { + x: x, + y: y, + r: r + }; + + return this.createElement('circle').attr(attr); + }, + + /** + * Draw and return an arc + * @param {Number} x X position + * @param {Number} y Y position + * @param {Number} r Radius + * @param {Number} innerR Inner radius like used in donut charts + * @param {Number} start Starting angle + * @param {Number} end Ending angle + */ + arc: function (x, y, r, innerR, start, end) { + // arcs are defined as symbols for the ability to set + // attributes in attr and animate + + if (isObject(x)) { + y = x.y; + r = x.r; + innerR = x.innerR; + start = x.start; + end = x.end; + x = x.x; + } + + return this.symbol('arc', x || 0, y || 0, r || 0, { + innerR: innerR || 0, + start: start || 0, + end: end || 0 + }); + }, + + /** + * Draw and return a rectangle + * @param {Number} x Left position + * @param {Number} y Top position + * @param {Number} width + * @param {Number} height + * @param {Number} r Border corner radius + * @param {Number} strokeWidth A stroke width can be supplied to allow crisp drawing + */ + rect: function (x, y, width, height, r, strokeWidth) { + if (isObject(x)) { + y = x.y; + width = x.width; + height = x.height; + r = x.r; + x = x.x; + } + var wrapper = this.createElement('rect').attr({ + rx: r, + ry: r, + fill: NONE + }); + + return wrapper.attr(wrapper.crisp(strokeWidth, x, y, mathMax(width, 0), mathMax(height, 0))); + }, + + /** + * Resize the box and re-align all aligned elements + * @param {Object} width + * @param {Object} height + * @param {Boolean} animate + * + */ + setSize: function(width, height, animate) { + var renderer = this, + alignedObjects = renderer.alignedObjects, + i = alignedObjects.length; + + renderer.width = width; + renderer.height = height; + + renderer.boxWrapper[pick(animate, true) ? 'animate' : 'attr']({ + width: width, + height: height + }); + + while (i--) { + alignedObjects[i].align(); + } + }, + + /** + * Create a group + * @param {String} name The group will be given a class name of 'highcharts-{name}'. + * This can be used for styling and scripting. + */ + g: function(name) { + return this.createElement('g').attr( + defined(name) && { 'class': PREFIX + name } + ); + }, + + /** + * Display an image + * @param {String} src + * @param {Number} x + * @param {Number} y + * @param {Number} width + * @param {Number} height + */ + image: function(src, x, y, width, height) { + var attribs = { + preserveAspectRatio: NONE + }, + elemWrapper; + + // optional properties + if (arguments.length > 1) { + extend(attribs, { + x: x, + y: y, + width: width, + height: height + }); + } + + elemWrapper = this.createElement('image').attr(attribs); + + // set the href in the xlink namespace + elemWrapper.element.setAttributeNS('http://www.w3.org/1999/xlink', + 'href', src); + + return elemWrapper; + }, + + /** + * Draw a symbol out of pre-defined shape paths from the namespace 'symbol' object. + * + * @param {Object} symbol + * @param {Object} x + * @param {Object} y + * @param {Object} radius + * @param {Object} options + */ + symbol: function(symbol, x, y, radius, options) { + + var obj, + + // get the symbol definition function + symbolFn = this.symbols[symbol], + + // check if there's a path defined for this symbol + path = symbolFn && symbolFn( + x, + y, + radius, + options + ), + + imageRegex = /^url\((.*?)\)$/, + imageSrc; + + if (path) { + + obj = this.path(path); + // expando properties for use in animate and attr + extend(obj, { + symbolName: symbol, + x: x, + y: y, + r: radius + }); + if (options) { + extend(obj, options); + } + + + // image symbols + } else if (imageRegex.test(symbol)) { + + imageSrc = symbol.match(imageRegex)[1]; + + // create the image synchronously, add attribs async + obj = this.image(imageSrc) + .attr({ + x: x, + y: y + }); + + // create a dummy JavaScript image to get the width and height + createElement('img', { + onload: function() { + var img = this, + size = symbolSizes[img.src] || [img.width, img.height]; + obj.attr({ + width: size[0], + height: size[1] + }).translate( + -mathRound(size[0] / 2), + -mathRound(size[1] / 2) + ); + }, + src: imageSrc + }); + + // default circles + } else { + obj = this.circle(x, y, radius); + } + + return obj; + }, + + /** + * An extendable collection of functions for defining symbol paths. + */ + symbols: { + 'square': function (x, y, radius) { + var len = 0.707 * radius; + return [ + M, x-len, y-len, + L, x+len, y-len, + x+len, y+len, + x-len, y+len, + 'Z' + ]; + }, + + 'triangle': function (x, y, radius) { + return [ + M, x, y-1.33 * radius, + L, x+radius, y + 0.67 * radius, + x-radius, y + 0.67 * radius, + 'Z' + ]; + }, + + 'triangle-down': function (x, y, radius) { + return [ + M, x, y + 1.33 * radius, + L, x-radius, y-0.67 * radius, + x+radius, y-0.67 * radius, + 'Z' + ]; + }, + 'diamond': function (x, y, radius) { + return [ + M, x, y-radius, + L, x+radius, y, + x, y+radius, + x-radius, y, + 'Z' + ]; + }, + 'arc': function (x, y, radius, options) { + var start = options.start, + end = options.end - 0.000001, // to prevent cos and sin of start and end from becoming equal on 360 arcs + innerRadius = options.innerR, + cosStart = mathCos(start), + sinStart = mathSin(start), + cosEnd = mathCos(end), + sinEnd = mathSin(end), + longArc = options.end - start < mathPI ? 0 : 1; + + return [ + M, + x + radius * cosStart, + y + radius * sinStart, + 'A', // arcTo + radius, // x radius + radius, // y radius + 0, // slanting + longArc, // long or short arc + 1, // clockwise + x + radius * cosEnd, + y + radius * sinEnd, + L, + x + innerRadius * cosEnd, + y + innerRadius * sinEnd, + 'A', // arcTo + innerRadius, // x radius + innerRadius, // y radius + 0, // slanting + longArc, // long or short arc + 0, // clockwise + x + innerRadius * cosStart, + y + innerRadius * sinStart, + + 'Z' // close + ]; + } + }, + + /** + * Define a clipping rectangle + * @param {String} id + * @param {Number} x + * @param {Number} y + * @param {Number} width + * @param {Number} height + */ + clipRect: function (x, y, width, height) { + var wrapper, + id = PREFIX + idCounter++, + + clipPath = this.createElement('clipPath').attr({ + id: id + }).add(this.defs); + + wrapper = this.rect(x, y, width, height, 0).add(clipPath); + wrapper.id = id; + + return wrapper; + }, + + + /** + * Take a color and return it if it's a string, make it a gradient if it's a + * gradient configuration object + * + * @param {Object} color The color or config object + */ + color: function(color, elem, prop) { + var colorObject, + regexRgba = /^rgba/; + if (color && color.linearGradient) { + var renderer = this, + strLinearGradient = 'linearGradient', + linearGradient = color[strLinearGradient], + id = PREFIX + idCounter++, + gradientObject, + stopColor, + stopOpacity; + gradientObject = renderer.createElement(strLinearGradient).attr({ + id: id, + gradientUnits: 'userSpaceOnUse', + x1: linearGradient[0], + y1: linearGradient[1], + x2: linearGradient[2], + y2: linearGradient[3] + }).add(renderer.defs); + + each(color.stops, function(stop) { + if (regexRgba.test(stop[1])) { + colorObject = Color(stop[1]); + stopColor = colorObject.get('rgb'); + stopOpacity = colorObject.get('a'); + } else { + stopColor = stop[1]; + stopOpacity = 1; + } + renderer.createElement('stop').attr({ + offset: stop[0], + 'stop-color': stopColor, + 'stop-opacity': stopOpacity + }).add(gradientObject); + }); + + return 'url('+ this.url +'#'+ id +')'; + + // Webkit and Batik can't show rgba. + } else if (regexRgba.test(color)) { + colorObject = Color(color); + attr(elem, prop +'-opacity', colorObject.get('a')); + + return colorObject.get('rgb'); + + + } else { + return color; + } + + }, + + + /** + * Add text to the SVG object + * @param {String} str + * @param {Number} x Left position + * @param {Number} y Top position + */ + text: function(str, x, y) { + + // declare variables + var defaultChartStyle = defaultOptions.chart.style, + wrapper; + + x = mathRound(pick(x, 0)); + y = mathRound(pick(y, 0)); + + wrapper = this.createElement('text') + .attr({ + x: x, + y: y, + text: str + }) + .css({ + 'font-family': defaultChartStyle.fontFamily, + 'font-size': defaultChartStyle.fontSize + }); + + wrapper.x = x; + wrapper.y = y; + return wrapper; + } +}; // end SVGRenderer + + + + +/* **************************************************************************** + * * + * START OF INTERNET EXPLORER <= 8 SPECIFIC CODE * + * * + * For applications and websites that don't need IE support, like platform * + * targeted mobile apps and web apps, this code can be removed. * + * * + *****************************************************************************/ +var VMLRenderer; +if (!hasSVG) { + +/** + * The VML element wrapper. + */ +var VMLElement = extendClass( SVGElement, { + + /** + * Initialize a new VML element wrapper. It builds the markup as a string + * to minimize DOM traffic. + * @param {Object} renderer + * @param {Object} nodeName + */ + init: function(renderer, nodeName) { + var markup = ['<', nodeName, ' filled="f" stroked="f"'], + style = ['position: ', ABSOLUTE, ';']; + + // divs and shapes need size + if (nodeName == 'shape' || nodeName == DIV) { + style.push('left:0;top:0;width:10px;height:10px;'); + } + if (docMode8) { + style.push('visibility: ', nodeName == DIV ? HIDDEN : VISIBLE); + } + + markup.push(' style="', style.join(''), '"/>'); + + // create element with default attributes and style + if (nodeName) { + markup = nodeName == DIV || nodeName == 'span' || nodeName == 'img' ? + markup.join('') + : renderer.prepVML(markup); + this.element = createElement(markup); + } + + this.renderer = renderer; + }, + + /** + * Add the node to the given parent + * @param {Object} parent + */ + add: function(parent) { + var wrapper = this, + renderer = wrapper.renderer, + element = wrapper.element, + box = renderer.box, + inverted = parent && parent.inverted, + + // get the parent node + parentNode = parent ? + parent.element || parent : + box; + + + // if the parent group is inverted, apply inversion on all children + if (inverted) { // only on groups + renderer.invertChild(element, parentNode); + } + + // issue #140 workaround - related to #61 and #74 + if (docMode8 && parentNode.gVis == HIDDEN) { + css(element, { visibility: HIDDEN }); + } + + // append it + parentNode.appendChild(element); + + // align text after adding to be able to read offset + wrapper.added = true; + if (wrapper.alignOnAdd) { + wrapper.updateTransform(); + } + + return wrapper; + }, + + /** + * Get or set attributes + */ + attr: function(hash, val) { + var key, + value, + i, + element = this.element || {}, + elemStyle = element.style, + nodeName = element.nodeName, + renderer = this.renderer, + symbolName = this.symbolName, + childNodes, + hasSetSymbolSize, + shadows = this.shadows, + skipAttr, + ret = this; + + // single key-value pair + if (isString(hash) && defined(val)) { + key = hash; + hash = {}; + hash[key] = val; + } + + // used as a getter, val is undefined + if (isString(hash)) { + key = hash; + if (key == 'strokeWidth' || key == 'stroke-width') { + ret = this.strokeweight; + } else { + ret = this[key]; + } + + // setter + } else { + for (key in hash) { + value = hash[key]; + skipAttr = false; + + // prepare paths + // symbols + if (symbolName && /^(x|y|r|start|end|width|height|innerR)/.test(key)) { + // if one of the symbol size affecting parameters are changed, + // check all the others only once for each call to an element's + // .attr() method + if (!hasSetSymbolSize) { + + this.symbolAttr(hash); + + hasSetSymbolSize = true; + } + + skipAttr = true; + + } else if (key == 'd') { + value = value || []; + this.d = value.join(' '); // used in getter for animation + + // convert paths + i = value.length; + var convertedPath = []; + while (i--) { + + // Multiply by 10 to allow subpixel precision. + // Substracting half a pixel seems to make the coordinates + // align with SVG, but this hasn't been tested thoroughly + if (isNumber(value[i])) { + convertedPath[i] = mathRound(value[i] * 10) - 5; + } + // close the path + else if (value[i] == 'Z') { + convertedPath[i] = 'x'; + } + else { + convertedPath[i] = value[i]; + } + + } + value = convertedPath.join(' ') || 'x'; + element.path = value; + + // update shadows + if (shadows) { + i = shadows.length; + while (i--) { + shadows[i].path = value; + } + } + skipAttr = true; + + // directly mapped to css + } else if (key == 'zIndex' || key == 'visibility') { + + // issue 61 workaround + if (docMode8 && key == 'visibility' && nodeName == 'DIV') { + element.gVis = value; + childNodes = element.childNodes; + i = childNodes.length; + while (i--) { + css(childNodes[i], { visibility: value }); + } + if (value == VISIBLE) { // issue 74 + value = null; + } + } + + if (value) { + elemStyle[key] = value; + } + + + + skipAttr = true; + + // width and height + } else if (/^(width|height)$/.test(key)) { + + + // clipping rectangle special + if (this.updateClipping) { + this[key] = value; + this.updateClipping(); + + } else { + // normal + elemStyle[key] = value; + } + + skipAttr = true; + + // x and y + } else if (/^(x|y)$/.test(key)) { + + this[key] = value; // used in getter + + if (element.tagName == 'SPAN') { + this.updateTransform(); + + } else { + elemStyle[{ x: 'left', y: 'top' }[key]] = value; + } + + // class name + } else if (key == 'class') { + // IE8 Standards mode has problems retrieving the className + element.className = value; + + // stroke + } else if (key == 'stroke') { + + value = renderer.color(value, element, key); + + key = 'strokecolor'; + + // stroke width + } else if (key == 'stroke-width' || key == 'strokeWidth') { + element.stroked = value ? true : false; + key = 'strokeweight'; + this[key] = value; // used in getter, issue #113 + if (isNumber(value)) { + value += PX; + } + + // dashStyle + } else if (key == 'dashstyle') { + var strokeElem = element.getElementsByTagName('stroke')[0] || + createElement(renderer.prepVML(['']), null, null, element); + strokeElem[key] = value || 'solid'; + this.dashstyle = value; /* because changing stroke-width will change the dash length + and cause an epileptic effect */ + skipAttr = true; + + // fill + } else if (key == 'fill') { + + if (nodeName == 'SPAN') { // text color + elemStyle.color = value; + } else { + element.filled = value != NONE ? true : false; + + value = renderer.color(value, element, key); + + key = 'fillcolor'; + } + + // translation for animation + } else if (key == 'translateX' || key == 'translateY' || key == 'rotation' || key == 'align') { + if (key == 'align') { + key = 'textAlign'; + } + this[key] = value; + this.updateTransform(); + + skipAttr = true; + } + + // text for rotated and non-rotated elements + else if (key == 'text') { + element.innerHTML = value; + skipAttr = true; + } + + + // let the shadow follow the main element + if (shadows && key == 'visibility') { + i = shadows.length; + while (i--) { + shadows[i].style[key] = value; + } + } + + + + if (!skipAttr) { + if (docMode8) { // IE8 setAttribute bug + element[key] = value; + } else { + attr(element, key, value); + } + } + } + } + return ret; + }, + + /** + * Set the element's clipping to a predefined rectangle + * + * @param {String} id The id of the clip rectangle + */ + clip: function(clipRect) { + var wrapper = this, + clipMembers = clipRect.members; + + clipMembers.push(wrapper); + wrapper.destroyClip = function() { + erase(clipMembers, wrapper); + }; + return wrapper.css(clipRect.getCSS(wrapper.inverted)); + }, + + /** + * Set styles for the element + * @param {Object} styles + */ + css: function(styles) { + var wrapper = this, + element = wrapper.element, + textWidth = styles && element.tagName == 'SPAN' && styles.width; + + /*if (textWidth) { + extend(styles, { + display: 'block', + whiteSpace: 'normal' + }); + }*/ + if (textWidth) { + delete styles.width; + wrapper.textWidth = textWidth; + wrapper.updateTransform(); + } + + wrapper.styles = extend(wrapper.styles, styles); + css(wrapper.element, styles); + + + + return wrapper; + }, + + /** + * Extend element.destroy by removing it from the clip members array + */ + destroy: function() { + var wrapper = this; + + if (wrapper.destroyClip) { + wrapper.destroyClip(); + } + + SVGElement.prototype.destroy.apply(wrapper); + }, + + /** + * Remove all child nodes of a group, except the v:group element + */ + empty: function() { + var element = this.element, + childNodes = element.childNodes, + i = childNodes.length, + node; + + while (i--) { + node = childNodes[i]; + node.parentNode.removeChild(node); + } + }, + + /** + * VML override for calculating the bounding box based on offsets + * + * @return {Object} A hash containing values for x, y, width and height + */ + + getBBox: function() { + var element = this.element; + + // faking getBBox in exported SVG in legacy IE + if (element.nodeName == 'text') { + element.style.position = ABSOLUTE; + } + + return { + x: element.offsetLeft, + y: element.offsetTop, + width: element.offsetWidth, + height: element.offsetHeight + }; + + }, + + /** + * Add an event listener. VML override for normalizing event parameters. + * @param {String} eventType + * @param {Function} handler + */ + on: function(eventType, handler) { + // simplest possible event model for internal use + this.element['on'+ eventType] = function() { + var evt = win.event; + evt.target = evt.srcElement; + handler(evt); + }; + return this; + }, + + + /** + * VML override private method to update elements based on internal + * properties based on SVG transform + */ + updateTransform: function(hash) { + // aligning non added elements is expensive + if (!this.added) { + this.alignOnAdd = true; + return; + } + + var wrapper = this, + elem = wrapper.element, + translateX = wrapper.translateX || 0, + translateY = wrapper.translateY || 0, + x = wrapper.x || 0, + y = wrapper.y || 0, + align = wrapper.textAlign || 'left', + alignCorrection = { left: 0, center: 0.5, right: 1 }[align], + nonLeft = align && align != 'left'; + + // apply translate + if (translateX || translateY) { + wrapper.css({ + marginLeft: translateX, + marginTop: translateY + }); + } + + // apply inversion + if (wrapper.inverted) { // wrapper is a group + each(elem.childNodes, function(child) { + wrapper.renderer.invertChild(child, elem); + }); + } + + if (elem.tagName == 'SPAN') { + + var width, height, + rotation = wrapper.rotation, + lineHeight, + radians = 0, + costheta = 1, + sintheta = 0, + quad, + textWidth = pInt(wrapper.textWidth), + xCorr = wrapper.xCorr || 0, + yCorr = wrapper.yCorr || 0, + currentTextTransform = [rotation, align, elem.innerHTML, wrapper.textWidth].join(','); + + if (currentTextTransform != wrapper.cTT) { // do the calculations and DOM access only if properties changed + + if (defined(rotation)) { + radians = rotation * deg2rad; // deg to rad + costheta = mathCos(radians); + sintheta = mathSin(radians); + + // Adjust for alignment and rotation. + // Test case: http://highcharts.com/tests/?file=text-rotation + css(elem, { + filter: rotation ? ['progid:DXImageTransform.Microsoft.Matrix(M11=', costheta, + ', M12=', -sintheta, ', M21=', sintheta, ', M22=', costheta, + ', sizingMethod=\'auto expand\')'].join('') : NONE + }); + } + + width = elem.offsetWidth; + height = elem.offsetHeight; + + // update textWidth + if (width > textWidth) { + css(elem, { + width: textWidth +PX, + display: 'block', + whiteSpace: 'normal' + }); + width = textWidth; + } + + // correct x and y + lineHeight = mathRound(pInt(elem.style.fontSize || 12) * 1.2); + xCorr = costheta < 0 && -width; + yCorr = sintheta < 0 && -height; + + // correct for lineHeight and corners spilling out after rotation + quad = costheta * sintheta < 0; + xCorr += sintheta * lineHeight * (quad ? 1 - alignCorrection : alignCorrection); + yCorr -= costheta * lineHeight * (rotation ? (quad ? alignCorrection : 1 - alignCorrection) : 1); + + // correct for the length/height of the text + if (nonLeft) { + xCorr -= width * alignCorrection * (costheta < 0 ? -1 : 1); + if (rotation) { + yCorr -= height * alignCorrection * (sintheta < 0 ? -1 : 1); + } + css(elem, { + textAlign: align + }); + } + + // record correction + wrapper.xCorr = xCorr; + wrapper.yCorr = yCorr; + } + + // apply position with correction + css(elem, { + left: x + xCorr, + top: y + yCorr + }); + + // record current text transform + wrapper.cTT = currentTextTransform; + } + }, + + /** + * Apply a drop shadow by copying elements and giving them different strokes + * @param {Boolean} apply + */ + shadow: function(apply) { + var shadows = [], + i, + element = this.element, + renderer = this.renderer, + shadow, + elemStyle = element.style, + markup, + path = element.path; + + // the path is some mysterious string-like object that can be cast to a string + if (''+ element.path === '') { + path = 'x'; + } + + if (apply) { + for (i = 1; i <= 3; i++) { + markup = ['']; + shadow = createElement(renderer.prepVML(markup), + null, { + left: pInt(elemStyle.left) + 1, + top: pInt(elemStyle.top) + 1 + } + ); + + // apply the opacity + markup = ['']; + createElement(renderer.prepVML(markup), null, null, shadow); + + + // insert it + element.parentNode.insertBefore(shadow, element); + + // record it + shadows.push(shadow); + + } + + this.shadows = shadows; + } + return this; + + } +}); + +/** + * The VML renderer + */ +VMLRenderer = function() { + this.init.apply(this, arguments); +}; +VMLRenderer.prototype = merge( SVGRenderer.prototype, { // inherit SVGRenderer + + isIE8: userAgent.indexOf('MSIE 8.0') > -1, + + + /** + * Initialize the VMLRenderer + * @param {Object} container + * @param {Number} width + * @param {Number} height + */ + init: function(container, width, height) { + var renderer = this, + boxWrapper; + + renderer.Element = VMLElement; + renderer.alignedObjects = []; + + boxWrapper = renderer.createElement(DIV); + container.appendChild(boxWrapper.element); + + + // generate the containing box + renderer.box = boxWrapper.element; + renderer.boxWrapper = boxWrapper; + + + renderer.setSize(width, height, false); + + // The only way to make IE6 and IE7 print is to use a global namespace. However, + // with IE8 the only way to make the dynamic shapes visible in screen and print mode + // seems to be to add the xmlns attribute and the behaviour style inline. + if (!doc.namespaces.hcv) { + + doc.namespaces.add('hcv', 'urn:schemas-microsoft-com:vml'); + + // setup default css + doc.createStyleSheet().cssText = + 'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke'+ + '{ behavior:url(#default#VML); display: inline-block; } '; + + } + }, + + /** + * Define a clipping rectangle. In VML it is accomplished by storing the values + * for setting the CSS style to all associated members. + * + * @param {Number} x + * @param {Number} y + * @param {Number} width + * @param {Number} height + */ + clipRect: function (x, y, width, height) { + + // create a dummy element + var clipRect = this.createElement(); + + // mimic a rectangle with its style object for automatic updating in attr + return extend(clipRect, { + members: [], + left: x, + top: y, + width: width, + height: height, + getCSS: function(inverted) { + var rect = this,//clipRect.element.style, + top = rect.top, + left = rect.left, + right = left + rect.width, + bottom = top + rect.height, + ret = { + clip: 'rect('+ + mathRound(inverted ? left : top) + 'px,'+ + mathRound(inverted ? bottom : right) + 'px,'+ + mathRound(inverted ? right : bottom) + 'px,'+ + mathRound(inverted ? top : left) +'px)' + }; + + // issue 74 workaround + if (!inverted && docMode8) { + extend(ret, { + width: right +PX, + height: bottom +PX + }); + } + return ret; + }, + + // used in attr and animation to update the clipping of all members + updateClipping: function() { + each(clipRect.members, function(member) { + member.css(clipRect.getCSS(member.inverted)); + }); + } + }); + + }, + + + /** + * Take a color and return it if it's a string, make it a gradient if it's a + * gradient configuration object, and apply opacity. + * + * @param {Object} color The color or config object + */ + color: function(color, elem, prop) { + var colorObject, + regexRgba = /^rgba/, + markup; + + if (color && color.linearGradient) { + + var stopColor, + stopOpacity, + linearGradient = color.linearGradient, + angle, + color1, + opacity1, + color2, + opacity2; + + each(color.stops, function(stop, i) { + if (regexRgba.test(stop[1])) { + colorObject = Color(stop[1]); + stopColor = colorObject.get('rgb'); + stopOpacity = colorObject.get('a'); + } else { + stopColor = stop[1]; + stopOpacity = 1; + } + + if (!i) { // first + color1 = stopColor; + opacity1 = stopOpacity; + } else { + color2 = stopColor; + opacity2 = stopOpacity; + } + }); + + + + // calculate the angle based on the linear vector + angle = 90 - math.atan( + (linearGradient[3] - linearGradient[1]) / // y vector + (linearGradient[2] - linearGradient[0]) // x vector + ) * 180 / mathPI; + + // when colors attribute is used, the meanings of opacity and o:opacity2 + // are reversed. + markup = ['<', prop, ' colors="0% ', color1, ',100% ', color2, '" angle="', angle, + '" opacity="', opacity2, '" o:opacity2="', opacity1, + '" type="gradient" focus="100%" />']; + createElement(this.prepVML(markup), null, null, elem); + + + + // if the color is an rgba color, split it and add a fill node + // to hold the opacity component + } else if (regexRgba.test(color) && elem.tagName != 'IMG') { + + colorObject = Color(color); + + markup = ['<', prop, ' opacity="', colorObject.get('a'), '"/>']; + createElement(this.prepVML(markup), null, null, elem); + + return colorObject.get('rgb'); + + + } else { + return color; + } + + }, + + /** + * Take a VML string and prepare it for either IE8 or IE6/IE7. + * @param {Array} markup A string array of the VML markup to prepare + */ + prepVML: function(markup) { + var vmlStyle = 'display:inline-block;behavior:url(#default#VML);', + isIE8 = this.isIE8; + + markup = markup.join(''); + + if (isIE8) { // add xmlns and style inline + markup = markup.replace('/>', ' xmlns="urn:schemas-microsoft-com:vml" />'); + if (markup.indexOf('style="') == -1) { + markup = markup.replace('/>', ' style="'+ vmlStyle +'" />'); + } else { + markup = markup.replace('style="', 'style="'+ vmlStyle); + } + + } else { // add namespace + markup = markup.replace('<', ' 1) { + obj.css({ + left: x, + top: y, + width: width, + height: height + }); + } + return obj; + }, + + /** + * VML uses a shape for rect to overcome bugs and rotation problems + */ + rect: function(x, y, width, height, r, strokeWidth) { + + if (isObject(x)) { + y = x.y; + width = x.width; + height = x.height; + r = x.r; + x = x.x; + } + var wrapper = this.symbol('rect'); + wrapper.r = r; + + return wrapper.attr(wrapper.crisp(strokeWidth, x, y, mathMax(width, 0), mathMax(height, 0))); + }, + + /** + * In the VML renderer, each child of an inverted div (group) is inverted + * @param {Object} element + * @param {Object} parentNode + */ + invertChild: function(element, parentNode) { + var parentStyle = parentNode.style; + + css(element, { + flip: 'x', + left: pInt(parentStyle.width) - 10, + top: pInt(parentStyle.height) - 10, + rotation: -90 + }); + }, + + /** + * Symbol definitions that override the parent SVG renderer's symbols + * + */ + symbols: { + // VML specific arc function + arc: function (x, y, radius, options) { + var start = options.start, + end = options.end, + cosStart = mathCos(start), + sinStart = mathSin(start), + cosEnd = mathCos(end), + sinEnd = mathSin(end), + innerRadius = options.innerR, + circleCorrection = 0.07 / radius, + innerCorrection = innerRadius && 0.1 / innerRadius || 0; + + if (end - start === 0) { // no angle, don't show it. + return ['x']; + + //} else if (end - start == 2 * mathPI) { // full circle + } else if (2 * mathPI - end + start < circleCorrection) { // full circle + // empirical correction found by trying out the limits for different radii + cosEnd = - circleCorrection; + } else if (end - start < innerCorrection) { // issue #186, another mysterious VML arc problem + cosEnd = mathCos(start + innerCorrection); + } + + return [ + 'wa', // clockwise arc to + x - radius, // left + y - radius, // top + x + radius, // right + y + radius, // bottom + x + radius * cosStart, // start x + y + radius * sinStart, // start y + x + radius * cosEnd, // end x + y + radius * sinEnd, // end y + + + 'at', // anti clockwise arc to + x - innerRadius, // left + y - innerRadius, // top + x + innerRadius, // right + y + innerRadius, // bottom + x + innerRadius * cosEnd, // start x + y + innerRadius * sinEnd, // start y + x + innerRadius * cosStart, // end x + y + innerRadius * sinStart, // end y + + 'x', // finish path + 'e' // close + ]; + + }, + // Add circle symbol path. This performs significantly faster than v:oval. + circle: function (x, y, r) { + return [ + 'wa', // clockwisearcto + x - r, // left + y - r, // top + x + r, // right + y + r, // bottom + x + r, // start x + y, // start y + x + r, // end x + y, // end y + //'x', // finish path + 'e' // close + ]; + }, + /** + * Add rectangle symbol path which eases rotation and omits arcsize problems + * compared to the built-in VML roundrect shape + * + * @param {Number} left Left position + * @param {Number} top Top position + * @param {Number} r Border radius + * @param {Object} options Width and height + */ + + rect: function (left, top, r, options) { + if (!defined(options)) { + return []; + } + var width = options.width, + height = options.height, + right = left + width, + bottom = top + height; + + r = mathMin(r, width, height); + + return [ + M, + left + r, top, + + L, + right - r, top, + 'wa', + right - 2 * r, top, + right, top + 2 * r, + right - r, top, + right, top + r, + + L, + right, bottom - r, + 'wa', + right - 2 * r, bottom - 2 * r, + right, bottom, + right, bottom - r, + right - r, bottom, + + L, + left + r, bottom, + 'wa', + left, bottom - 2 * r, + left + 2 * r, bottom, + left + r, bottom, + left, bottom - r, + + L, + left, top + r, + 'wa', + left, top, + left + 2 * r, top + 2 * r, + left, top + r, + left + r, top, + + + 'x', + 'e' + ]; + + } + } +}); +} +/* **************************************************************************** + * * + * END OF INTERNET EXPLORER <= 8 SPECIFIC CODE * + * * + *****************************************************************************/ + +/** + * General renderer + */ +var Renderer = hasSVG ? SVGRenderer : VMLRenderer; + + +/** + * The chart class + * @param {Object} options + * @param {Function} callback Function to run when the chart has loaded + */ +function Chart (options, callback) { + + defaultXAxisOptions = merge(defaultXAxisOptions, defaultOptions.xAxis); + defaultYAxisOptions = merge(defaultYAxisOptions, defaultOptions.yAxis); + defaultOptions.xAxis = defaultOptions.yAxis = null; + + // Handle regular options + options = merge(defaultOptions, options); + + // Define chart variables + var optionsChart = options.chart, + optionsMargin = optionsChart.margin, + margin = isObject(optionsMargin) ? + optionsMargin : + [optionsMargin, optionsMargin, optionsMargin, optionsMargin], + optionsMarginTop = pick(optionsChart.marginTop, margin[0]), + optionsMarginRight = pick(optionsChart.marginRight, margin[1]), + optionsMarginBottom = pick(optionsChart.marginBottom, margin[2]), + optionsMarginLeft = pick(optionsChart.marginLeft, margin[3]), + spacingTop = optionsChart.spacingTop, + spacingRight = optionsChart.spacingRight, + spacingBottom = optionsChart.spacingBottom, + spacingLeft = optionsChart.spacingLeft, + spacingBox, + chartTitleOptions, + chartSubtitleOptions, + plotTop, + marginRight, + marginBottom, + plotLeft, + axisOffset, + renderTo, + renderToClone, + container, + containerId, + containerWidth, + containerHeight, + chartWidth, + chartHeight, + oldChartWidth, + oldChartHeight, + chartBackground, + plotBackground, + plotBGImage, + plotBorder, + chart = this, + chartEvents = optionsChart.events, + runChartClick = chartEvents && !!chartEvents.click, + eventType, + isInsidePlot, // function + tooltip, + mouseIsDown, + loadingDiv, + loadingSpan, + loadingShown, + plotHeight, + plotWidth, + tracker, + trackerGroup, + placeTrackerGroup, + legend, + legendWidth, + legendHeight, + chartPosition,// = getPosition(container), + hasCartesianSeries = optionsChart.showAxes, + isResizing = 0, + axes = [], + maxTicks, // handle the greatest amount of ticks on grouped axes + series = [], + inverted, + renderer, + tooltipTick, + tooltipInterval, + hoverX, + drawChartBox, // function + getMargins, // function + resetMargins, // function + setChartSize, // function + resize, + zoom, // function + zoomOut; // function + + + /** + * Create a new axis object + * @param {Object} chart + * @param {Object} options + */ + function Axis (chart, options) { + + // Define variables + var isXAxis = options.isX, + opposite = options.opposite, // needed in setOptions + horiz = inverted ? !isXAxis : isXAxis, + side = horiz ? + (opposite ? 0 /* top */ : 2 /* bottom */) : + (opposite ? 1 /* right*/ : 3 /* left */ ), + stacks = {}; + + + options = merge( + isXAxis ? defaultXAxisOptions : defaultYAxisOptions, + [defaultTopAxisOptions, defaultRightAxisOptions, + defaultBottomAxisOptions, defaultLeftAxisOptions][side], + options + ); + + var axis = this, + isDatetimeAxis = options.type == 'datetime', + offset = options.offset || 0, + xOrY = isXAxis ? 'x' : 'y', + axisLength, + transA, // translation factor + oldTransA, // used for prerendering + transB = horiz ? plotLeft : marginBottom, // translation addend + translate, // fn + getPlotLinePath, // fn + axisGroup, + gridGroup, + axisLine, + dataMin, + dataMax, + associatedSeries, + userSetMin, + userSetMax, + max = null, + min = null, + oldMin, + oldMax, + minPadding = options.minPadding, + maxPadding = options.maxPadding, + isLinked = defined(options.linkedTo), + ignoreMinPadding, // can be set to true by a column or bar series + ignoreMaxPadding, + usePercentage, + events = options.events, + eventType, + plotLinesAndBands = [], + tickInterval, + minorTickInterval, + magnitude, + tickPositions, // array containing predefined positions + ticks = {}, + minorTicks = {}, + alternateBands = {}, + tickAmount, + labelOffset, + axisTitleMargin,// = options.title.margin, + dateTimeLabelFormat, + categories = options.categories, + labelFormatter = options.labels.formatter || // can be overwritten by dynamic format + function() { + var value = this.value, + ret; + + if (dateTimeLabelFormat) { // datetime axis + ret = dateFormat(dateTimeLabelFormat, value); + + } else if (tickInterval % 1000000 === 0) { // use M abbreviation + ret = (value / 1000000) +'M'; + + } else if (tickInterval % 1000 === 0) { // use k abbreviation + ret = (value / 1000) +'k'; + + } else if (!categories && value >= 1000) { // add thousands separators + ret = numberFormat(value, 0); + + } else { // strings (categories) and small numbers + ret = value; + } + return ret; + }, + + staggerLines = horiz && options.labels.staggerLines, + reversed = options.reversed, + tickmarkOffset = (categories && options.tickmarkPlacement == 'between') ? 0.5 : 0; + + /** + * The Tick class + */ + function Tick(pos, minor) { + var tick = this; + tick.pos = pos; + tick.minor = minor; + tick.isNew = true; + + if (!minor) { + tick.addLabel(); + } + } + Tick.prototype = { + /** + * Write the tick label + */ + addLabel: function() { + var pos = this.pos, + labelOptions = options.labels, + str, + withLabel = !((pos == min && !pick(options.showFirstLabel, 1)) || + (pos == max && !pick(options.showLastLabel, 0))), + width = categories && horiz && categories.length && + !labelOptions.step && !labelOptions.staggerLines && + !labelOptions.rotation && + plotWidth / categories.length || + !horiz && plotWidth / 2, + css, + label = this.label; + + + // get the string + str = labelFormatter.call({ + isFirst: pos == tickPositions[0], + isLast: pos == tickPositions[tickPositions.length - 1], + dateTimeLabelFormat: dateTimeLabelFormat, + value: (categories && categories[pos] ? categories[pos] : pos) + }); + + // prepare CSS + css = width && { width: (width - 2 * (labelOptions.padding || 10)) +PX }; + css = extend(css, labelOptions.style); + + // first call + if (label === UNDEFINED) { + this.label = + defined(str) && withLabel && labelOptions.enabled ? + renderer.text( + str, + 0, + 0 + ) + .attr({ + align: labelOptions.align, + rotation: labelOptions.rotation + }) + // without position absolute, IE export sometimes is wrong + .css(css) + .add(axisGroup): + null; + + // update + } else if (label) { + label.attr({ text: str }) + .css(css); + } + }, + /** + * Get the offset height or width of the label + */ + getLabelSize: function() { + var label = this.label; + return label ? + ((this.labelBBox = label.getBBox()))[horiz ? 'height' : 'width'] : + 0; + }, + /** + * Put everything in place + * + * @param index {Number} + * @param old {Boolean} Use old coordinates to prepare an animation into new position + */ + render: function(index, old) { + var tick = this, + major = !tick.minor, + label = tick.label, + pos = tick.pos, + labelOptions = options.labels, + gridLine = tick.gridLine, + gridLineWidth = major ? options.gridLineWidth : options.minorGridLineWidth, + gridLineColor = major ? options.gridLineColor : options.minorGridLineColor, + dashStyle = major ? + options.gridLineDashStyle : + options.minorGridLineDashStyle, + gridLinePath, + mark = tick.mark, + markPath, + tickLength = major ? options.tickLength : options.minorTickLength, + tickWidth = major ? options.tickWidth : (options.minorTickWidth || 0), + tickColor = major ? options.tickColor : options.minorTickColor, + tickPosition = major ? options.tickPosition : options.minorTickPosition, + step = labelOptions.step, + cHeight = old && oldChartHeight || chartHeight, + attribs, + x, + y; + + // get x and y position for ticks and labels + x = horiz ? + translate(pos + tickmarkOffset, null, null, old) + transB : + plotLeft + offset + (opposite ? (old && oldChartWidth || chartWidth) - marginRight - plotLeft : 0); + + y = horiz ? + cHeight - marginBottom + offset - (opposite ? plotHeight : 0) : + cHeight - translate(pos + tickmarkOffset, null, null, old) - transB; + + // create the grid line + if (gridLineWidth) { + gridLinePath = getPlotLinePath(pos + tickmarkOffset, gridLineWidth, old); + + if (gridLine === UNDEFINED) { + attribs = { + stroke: gridLineColor, + 'stroke-width': gridLineWidth + }; + if (dashStyle) { + attribs.dashstyle = dashStyle; + } + tick.gridLine = gridLine = + gridLineWidth ? + renderer.path(gridLinePath) + .attr(attribs).add(gridGroup) : + null; + } + if (gridLine && gridLinePath) { + gridLine.animate({ + d: gridLinePath + }); + } + } + + // create the tick mark + if (tickWidth) { + + // negate the length + if (tickPosition == 'inside') { + tickLength = -tickLength; + } + if (opposite) { + tickLength = -tickLength; + } + + markPath = renderer.crispLine([ + M, + x, + y, + L, + x + (horiz ? 0 : -tickLength), + y + (horiz ? tickLength : 0) + ], tickWidth); + + if (mark) { // updating + mark.animate({ + d: markPath + }); + } else { // first time + tick.mark = renderer.path( + markPath + ).attr({ + stroke: tickColor, + 'stroke-width': tickWidth + }).add(axisGroup); + } + } + + // the label is created on init - now move it into place + if (label) { + x = x + labelOptions.x - (tickmarkOffset && horiz ? + tickmarkOffset * transA * (reversed ? -1 : 1) : 0); + y = y + labelOptions.y - (tickmarkOffset && !horiz ? + tickmarkOffset * transA * (reversed ? 1 : -1) : 0); + + // vertically centered + if (!defined(labelOptions.y)) { + y += parseInt(label.styles.lineHeight) * 0.9 - label.getBBox().height / 2; + } + + + // correct for staggered labels + if (staggerLines) { + y += (index % staggerLines) * 16; + } + // apply step + if (step) { + // show those indices dividable by step + label[index % step ? 'hide' : 'show'](); + } + + label[tick.isNew ? 'attr' : 'animate']({ + x: x, + y: y + }); + + } + + tick.isNew = false; + }, + /** + * Destructor for the tick prototype + */ + destroy: function() { + var tick = this, + n; + for (n in tick) { + if (tick[n] && tick[n].destroy) { + tick[n].destroy(); + } + } + } + }; + + /** + * The object wrapper for plot lines and plot bands + * @param {Object} options + */ + function PlotLineOrBand(options) { + var plotLine = this; + if (options) { + plotLine.options = options; + plotLine.id = options.id; + } + + //plotLine.render() + return plotLine; + } + + PlotLineOrBand.prototype = { + + /** + * Render the plot line or plot band. If it is already existing, + * move it. + */ + render: function () { + var plotLine = this, + options = plotLine.options, + optionsLabel = options.label, + label = plotLine.label, + width = options.width, + to = options.to, + toPath, // bands only + from = options.from, + dashStyle = options.dashStyle, + svgElem = plotLine.svgElem, + path = [], + addEvent, + eventType, + xs, + ys, + x, + y, + color = options.color, + zIndex = options.zIndex, + events = options.events, + attribs; + + // plot line + if (width) { + path = getPlotLinePath(options.value, width); + attribs = { + stroke: color, + 'stroke-width': width + }; + if (dashStyle) { + attribs.dashstyle = dashStyle; + } + } + + // plot band + else if (defined(from) && defined(to)) { + // keep within plot area + from = mathMax(from, min); + to = mathMin(to, max); + + toPath = getPlotLinePath(to); + path = getPlotLinePath(from); + if (path && toPath) { + path.push( + toPath[4], + toPath[5], + toPath[1], + toPath[2] + ); + } else { // outside the axis area + path = null; + } + attribs = { + fill: color + }; + } else { + return; + } + // zIndex + if (defined(zIndex)) { + attribs.zIndex = zIndex; + } + + // common for lines and bands + if (svgElem) { + if (path) { + svgElem.animate({ + d: path + }, null, svgElem.onGetPath); + } else { + svgElem.hide(); + svgElem.onGetPath = function() { + svgElem.show(); + } + } + } else if (path && path.length) { + plotLine.svgElem = svgElem = renderer.path(path) + .attr(attribs).add(); + + // events + if (events) { + addEvent = function(eventType) { + svgElem.on(eventType, function(e) { + events[eventType].apply(plotLine, [e]); + }); + }; + for (eventType in events) { + addEvent(eventType); + } + } + } + + // the plot band/line label + if (optionsLabel && defined(optionsLabel.text) && path && path.length && plotWidth > 0 && plotHeight > 0) { + // apply defaults + optionsLabel = merge({ + align: horiz && toPath && 'center', + x: horiz ? !toPath && 4 : 10, + verticalAlign : !horiz && toPath && 'middle', + y: horiz ? toPath ? 16 : 10 : toPath ? 6 : -4, + rotation: horiz && !toPath && 90 + }, optionsLabel); + + // add the SVG element + if (!label) { + plotLine.label = label = renderer.text( + optionsLabel.text, + 0, + 0 + ) + .attr({ + align: optionsLabel.textAlign || optionsLabel.align, + rotation: optionsLabel.rotation, + zIndex: zIndex + }) + .css(optionsLabel.style) + .add(); + } + + // get the bounding box and align the label + xs = [path[1], path[4], path[6] || path[1]]; + ys = [path[2], path[5], path[7] || path[2]]; + x = mathMin.apply(math, xs); + y = mathMin.apply(math, ys); + + label.align(optionsLabel, false, { + x: x, + y: y, + width: mathMax.apply(math, xs) - x, + height: mathMax.apply(math, ys) - y + }); + label.show(); + + } else if (label) { // move out of sight + label.hide(); + } + + // chainable + return plotLine; + }, + + /** + * Remove the plot line or band + */ + destroy: function() { + var obj = this, + n; + + for (n in obj) { + if (obj[n] && obj[n].destroy) { + obj[n].destroy(); // destroy SVG wrappers + } + delete obj[n]; + } + // remove it from the lookup + erase(plotLinesAndBands, obj); + } + }; + + + /** + * Get the minimum and maximum for the series of each axis + */ + function getSeriesExtremes() { + var posStack = [], + negStack = [], + run; + + // reset dataMin and dataMax in case we're redrawing + dataMin = dataMax = null; + + // get an overview of what series are associated with this axis + associatedSeries = []; + + each(series, function(serie) { + run = false; + + + // match this axis against the series' given or implicated axis + each(['xAxis', 'yAxis'], function(strAxis) { + if ( + // the series is a cartesian type, and... + serie.isCartesian && + // we're in the right x or y dimension, and... + (strAxis == 'xAxis' && isXAxis || strAxis == 'yAxis' && !isXAxis) && ( + // the axis number is given in the options and matches this axis index, or + (serie.options[strAxis] == options.index) || + // the axis index is not given + (serie.options[strAxis] === UNDEFINED && options.index === 0) + ) + ) { + serie[strAxis] = axis; + associatedSeries.push(serie); + + // the series is visible, run the min/max detection + run = true; + } + }); + // ignore hidden series if opted + if (!serie.visible && optionsChart.ignoreHiddenSeries) { + run = false; + } + + if (run) { + + var stacking, + posPointStack, + negPointStack, + stackKey, + negKey; + + if (!isXAxis) { + stacking = serie.options.stacking; + usePercentage = stacking == 'percent'; + + // create a stack for this particular series type + if (stacking) { + stackKey = serie.type + pick(serie.options.stack, ''); + negKey = '-'+ stackKey; + serie.stackKey = stackKey; // used in translate + + posPointStack = posStack[stackKey] || []; // contains the total values for each x + posStack[stackKey] = posPointStack; + + negPointStack = negStack[negKey] || []; + negStack[negKey] = negPointStack; + } + if (usePercentage) { + dataMin = 0; + dataMax = 99; + } + } + if (serie.isCartesian) { // line, column etc. need axes, pie doesn't + each(serie.data, function(point, i) { + var pointX = point.x, + pointY = point.y, + isNegative = pointY < 0, + pointStack = isNegative ? negPointStack : posPointStack, + key = isNegative ? negKey : stackKey, + totalPos, + pointLow; + + // initial values + if (dataMin === null) { + + // start out with the first point + dataMin = dataMax = point[xOrY]; + } + + // x axis + if (isXAxis) { + if (pointX > dataMax) { + dataMax = pointX; + } else if (pointX < dataMin) { + dataMin = pointX; + } + } + + // y axis + else if (defined(pointY)) { + if (stacking) { + pointStack[pointX] = + defined(pointStack[pointX]) ? + pointStack[pointX] + pointY : pointY; + } + totalPos = pointStack ? pointStack[pointX] : pointY; + pointLow = pick(point.low, totalPos); + if (!usePercentage) { + if (totalPos > dataMax) { + dataMax = totalPos; + } else if (pointLow < dataMin) { + dataMin = pointLow; + } + } + if (stacking) { + // add the series + if (!stacks[key]) { + stacks[key] = {}; + } + stacks[key][pointX] = { + total: totalPos, + cum: totalPos + }; + } + } + }); + + + // For column, areas and bars, set the minimum automatically to zero + // and prevent that minPadding is added in setScale + if (/(area|column|bar)/.test(serie.type) && !isXAxis) { + if (dataMin >= 0) { + dataMin = 0; + ignoreMinPadding = true; + } else if (dataMax < 0) { + dataMax = 0; + ignoreMaxPadding = true; + } + } + } + } + }); + + } + + /** + * Translate from axis value to pixel position on the chart, or back + * + */ + translate = function(val, backwards, cvsCoord, old) { + var sign = 1, + cvsOffset = 0, + localA = old ? oldTransA : transA, + localMin = old ? oldMin : min, + returnValue; + + if (!localA) { + localA = transA; + } + + if (cvsCoord) { + sign *= -1; // canvas coordinates inverts the value + cvsOffset = axisLength; + } + if (reversed) { // reversed axis + sign *= -1; + cvsOffset -= sign * axisLength; + } + + if (backwards) { // reverse translation + if (reversed) { + val = axisLength - val; + } + returnValue = val / localA + localMin; // from chart pixel to value + + } else { // normal translation + returnValue = sign * (val - localMin) * localA + cvsOffset; // from value to chart pixel + } + + return returnValue; + }; + + /** + * Create the path for a plot line that goes from the given value on + * this axis, across the plot to the opposite side + * @param {Number} value + * @param {Number} lineWidth Used for calculation crisp line + * @param {Number] old Use old coordinates (for resizing and rescaling) + */ + getPlotLinePath = function(value, lineWidth, old) { + var x1, + y1, + x2, + y2, + translatedValue = translate(value, null, null, old), + cHeight = old && oldChartHeight || chartHeight, + cWidth = old && oldChartWidth || chartWidth, + skip; + + x1 = x2 = mathRound(translatedValue + transB); + y1 = y2 = mathRound(cHeight - translatedValue - transB); + + if (isNaN(translatedValue)) { // no min or max + skip = true; + + } else if (horiz) { + y1 = plotTop; + y2 = cHeight - marginBottom; + if (x1 < plotLeft || x1 > plotLeft + plotWidth) { + skip = true; + } + } else { + x1 = plotLeft; + x2 = cWidth - marginRight; + if (y1 < plotTop || y1 > plotTop + plotHeight) { + skip = true; + } + } + return skip ? + null : + renderer.crispLine([M, x1, y1, L, x2, y2], lineWidth || 0); + }; + + /** + * Take an interval and normalize it to multiples of 1, 2, 2.5 and 5 + * @param {Number} interval + */ + function normalizeTickInterval(interval, multiples) { + var normalized; + + // round to a tenfold of 1, 2, 2.5 or 5 + magnitude = multiples ? 1 : math.pow(10, mathFloor(math.log(interval) / math.LN10)); + normalized = interval / magnitude; + + // multiples for a linear scale + if (!multiples) { + multiples = [1, 2, 2.5, 5, 10]; + //multiples = [1, 2, 2.5, 4, 5, 7.5, 10]; + + // the allowDecimals option + if (options.allowDecimals === false) { + if (magnitude == 1) { + multiples = [1, 2, 5, 10]; + } else if (magnitude <= 0.1) { + multiples = [1 / magnitude]; + } + } + } + + // normalize the interval to the nearest multiple + for (var i = 0; i < multiples.length; i++) { + interval = multiples[i]; + if (normalized <= (multiples[i] + (multiples[i+1] || multiples[i])) / 2) { + break; + } + } + + // multiply back to the correct magnitude + interval *= magnitude; + + return interval; + } + + /** + * Set the tick positions to a time unit that makes sense, for example + * on the first of each month or on every Monday. + */ + function setDateTimeTickPositions() { + tickPositions = []; + var i, + useUTC = defaultOptions.global.useUTC, + oneSecond = 1000 / timeFactor, + oneMinute = 60000 / timeFactor, + oneHour = 3600000 / timeFactor, + oneDay = 24 * 3600000 / timeFactor, + oneWeek = 7 * 24 * 3600000 / timeFactor, + oneMonth = 30 * 24 * 3600000 / timeFactor, + oneYear = 31556952000 / timeFactor, + + units = [[ + 'second', // unit name + oneSecond, // fixed incremental unit + [1, 2, 5, 10, 15, 30] // allowed multiples + ], [ + 'minute', // unit name + oneMinute, // fixed incremental unit + [1, 2, 5, 10, 15, 30] // allowed multiples + ], [ + 'hour', // unit name + oneHour, // fixed incremental unit + [1, 2, 3, 4, 6, 8, 12] // allowed multiples + ], [ + 'day', // unit name + oneDay, // fixed incremental unit + [1, 2] // allowed multiples + ], [ + 'week', // unit name + oneWeek, // fixed incremental unit + [1, 2] // allowed multiples + ], [ + 'month', + oneMonth, + [1, 2, 3, 4, 6] + ], [ + 'year', + oneYear, + null + ]], + + unit = units[6], // default unit is years + interval = unit[1], + multiples = unit[2]; + + // loop through the units to find the one that best fits the tickInterval + for (i = 0; i < units.length; i++) { + unit = units[i]; + interval = unit[1]; + multiples = unit[2]; + + + if (units[i+1]) { + // lessThan is in the middle between the highest multiple and the next unit. + var lessThan = (interval * multiples[multiples.length - 1] + + units[i + 1][1]) / 2; + + // break and keep the current unit + if (tickInterval <= lessThan) { + break; + } + } + } + + // prevent 2.5 years intervals, though 25, 250 etc. are allowed + if (interval == oneYear && tickInterval < 5 * interval) { + multiples = [1, 2, 5]; + } + + // get the minimum value by flooring the date + var multitude = normalizeTickInterval(tickInterval / interval, multiples), + minYear, // used in months and years as a basis for Date.UTC() + minDate = new Date(min * timeFactor); + + minDate.setMilliseconds(0); + + if (interval >= oneSecond) { // second + minDate.setSeconds(interval >= oneMinute ? 0 : + multitude * mathFloor(minDate.getSeconds() / multitude)); + } + + if (interval >= oneMinute) { // minute + minDate[setMinutes](interval >= oneHour ? 0 : + multitude * mathFloor(minDate[getMinutes]() / multitude)); + } + + if (interval >= oneHour) { // hour + minDate[setHours](interval >= oneDay ? 0 : + multitude * mathFloor(minDate[getHours]() / multitude)); + } + + if (interval >= oneDay) { // day + minDate[setDate](interval >= oneMonth ? 1 : + multitude * mathFloor(minDate[getDate]() / multitude)); + } + + if (interval >= oneMonth) { // month + minDate[setMonth](interval >= oneYear ? 0 : + multitude * mathFloor(minDate[getMonth]() / multitude)); + minYear = minDate[getFullYear](); + } + + if (interval >= oneYear) { // year + minYear -= minYear % multitude; + minDate[setFullYear](minYear); + } + + // week is a special case that runs outside the hierarchy + if (interval == oneWeek) { + // get start of current week, independent of multitude + minDate[setDate](minDate[getDate]() - minDate[getDay]() + + options.startOfWeek); + } + + + // get tick positions + i = 1; // prevent crash just in case + minYear = minDate[getFullYear](); + var time = minDate.getTime() / timeFactor, + minMonth = minDate[getMonth](), + minDateDate = minDate[getDate](); + + // iterate and add tick positions at appropriate values + while (time < max && i < plotWidth) { + tickPositions.push(time); + + // if the interval is years, use Date.UTC to increase years + if (interval == oneYear) { + time = makeTime(minYear + i * multitude, 0) / timeFactor; + + // if the interval is months, use Date.UTC to increase months + } else if (interval == oneMonth) { + time = makeTime(minYear, minMonth + i * multitude) / timeFactor; + + // if we're using global time, the interval is not fixed as it jumps + // one hour at the DST crossover + } else if (!useUTC && (interval == oneDay || interval == oneWeek)) { + time = makeTime(minYear, minMonth, minDateDate + + i * multitude * (interval == oneDay ? 1 : 7)); + + // else, the interval is fixed and we use simple addition + } else { + time += interval * multitude; + } + + i++; + } + // push the last time + tickPositions.push(time); + + + // dynamic label formatter + dateTimeLabelFormat = options.dateTimeLabelFormats[unit[0]]; + } + + /** + * Fix JS round off float errors + * @param {Number} num + */ + function correctFloat(num) { + var invMag, ret = num; + if (defined(magnitude)) { + invMag = (magnitude < 1 ? mathRound(1 / magnitude) : 1) * 10; + ret = mathRound(num * invMag) / invMag; + } + return ret; + } + + /** + * Set the tick positions of a linear axis to round values like whole tens or every five. + */ + function setLinearTickPositions() { + + var i, + roundedMin = mathFloor(min / tickInterval) * tickInterval, + roundedMax = mathCeil(max / tickInterval) * tickInterval; + + tickPositions = []; + + // populate the intermediate values + i = correctFloat(roundedMin); + while (i <= roundedMax) { + tickPositions.push(i); + i = correctFloat(i + tickInterval); + } + + } + + /** + * Set the tick positions to round values and optionally extend the extremes + * to the nearest tick + */ + function setTickPositions(secondPass) { + var length, + catPad, + linkedParent, + linkedParentExtremes, + tickIntervalOption = options.tickInterval, + tickPixelIntervalOption = options.tickPixelInterval, + maxZoom = options.maxZoom || ( + isXAxis ? + mathMin(chart.smallestInterval * 5, dataMax - dataMin) : + null + ), + zoomOffset; + + + axisLength = horiz ? plotWidth : plotHeight; + + // linked axis gets the extremes from the parent axis + if (isLinked) { + linkedParent = chart[isXAxis ? 'xAxis' : 'yAxis'][options.linkedTo]; + linkedParentExtremes = linkedParent.getExtremes(); + min = pick(linkedParentExtremes.min, linkedParentExtremes.dataMin); + max = pick(linkedParentExtremes.max, linkedParentExtremes.dataMax); + } + + // initial min and max from the extreme data values + else { + min = pick(userSetMin, options.min, dataMin); + max = pick(userSetMax, options.max, dataMax); + } + + // maxZoom exceeded, just center the selection + if (max - min < maxZoom) { + zoomOffset = (maxZoom - max + min) / 2; + // if min and max options have been set, don't go beyond it + min = mathMax(min - zoomOffset, pick(options.min, min - zoomOffset), dataMin); + max = mathMin(min + maxZoom, pick(options.max, min + maxZoom), dataMax); + } + + // pad the values to get clear of the chart's edges + if (!categories && !usePercentage && !isLinked && defined(min) && defined(max)) { + length = (max - min) || 1; + if (!defined(options.min) && !defined(userSetMin) && minPadding && (dataMin < 0 || !ignoreMinPadding)) { + min -= length * minPadding; + } + if (!defined(options.max) && !defined(userSetMax) && maxPadding && (dataMax > 0 || !ignoreMaxPadding)) { + max += length * maxPadding; + } + } + + // get tickInterval + if (min == max) { + tickInterval = 1; + } else if (isLinked && !tickIntervalOption && + tickPixelIntervalOption == linkedParent.options.tickPixelInterval) { + tickInterval = linkedParent.tickInterval; + } else { + tickInterval = pick( + tickIntervalOption, + categories ? // for categoried axis, 1 is default, for linear axis use tickPix + 1 : + (max - min) * tickPixelIntervalOption / axisLength + ); + } + + if (!isDatetimeAxis && !defined(options.tickInterval)) { // linear + tickInterval = normalizeTickInterval(tickInterval); + } + axis.tickInterval = tickInterval; // record for linked axis + + // get minorTickInterval + minorTickInterval = options.minorTickInterval === 'auto' && tickInterval ? + tickInterval / 5 : options.minorTickInterval; + + // find the tick positions + if (isDatetimeAxis) { + setDateTimeTickPositions(); + } else { + setLinearTickPositions(); + } + + if (!isLinked) { + // pad categorised axis to nearest half unit + if (categories || (isXAxis && chart.hasColumn)) { + catPad = (categories ? 1 : tickInterval) * 0.5; + if (categories || !defined(pick(options.min, userSetMin))) { + min -= catPad; + } + if (categories || !defined(pick(options.max, userSetMax))) { + max += catPad; + } + } + + // reset min/max or remove extremes based on start/end on tick + var roundedMin = tickPositions[0], + roundedMax = tickPositions[tickPositions.length - 1]; + + if (options.startOnTick) { + min = roundedMin; + } else if (min > roundedMin) { + tickPositions.shift(); + } + + if (options.endOnTick) { + max = roundedMax; + } else if (max < roundedMax) { + tickPositions.pop(); + } + + // record the greatest number of ticks for multi axis + if (!maxTicks) { // first call, or maxTicks have been reset after a zoom operation + maxTicks = { + x: 0, + y: 0 + }; + } + + if (!isDatetimeAxis && tickPositions.length > maxTicks[xOrY]) { + maxTicks[xOrY] = tickPositions.length; + } + } + + + } + + /** + * When using multiple axes, adjust the number of ticks to match the highest + * number of ticks in that group + */ + function adjustTickAmount() { + + if (maxTicks && !isDatetimeAxis && !categories && !isLinked) { // only apply to linear scale + var oldTickAmount = tickAmount, + calculatedTickAmount = tickPositions.length; + + // set the axis-level tickAmount to use below + tickAmount = maxTicks[xOrY]; + + if (calculatedTickAmount < tickAmount) { + while (tickPositions.length < tickAmount) { + tickPositions.push( correctFloat( + tickPositions[tickPositions.length - 1] + tickInterval + )); + } + transA *= (calculatedTickAmount - 1) / (tickAmount - 1); + max = tickPositions[tickPositions.length - 1]; + + } + if (defined(oldTickAmount) && tickAmount != oldTickAmount) { + axis.isDirty = true; + } + } + + } + + /** + * Set the scale based on data min and max, user set min and max or options + * + */ + function setScale() { + var type, + i; + + oldMin = min; + oldMax = max; + + // get data extremes if needed + getSeriesExtremes(); + + // get fixed positions based on tickInterval + setTickPositions(); + + // the translation factor used in translate function + oldTransA = transA; + transA = axisLength / ((max - min) || 1); + + // reset stacks + if (!isXAxis) { + for (type in stacks) { + for (i in stacks[type]) { + stacks[type][i].cum = stacks[type][i].total; + } + } + } + + // mark as dirty if it is not already set to dirty and extremes have changed + if (!axis.isDirty) { + axis.isDirty = (min != oldMin || max != oldMax); + } + + } + + /** + * Set the extremes and optionally redraw + * @param {Number} newMin + * @param {Number} newMax + * @param {Boolean} redraw + * @param {Boolean|Object} animation Whether to apply animation, and optionally animation + * configuration + * + */ + function setExtremes(newMin, newMax, redraw, animation) { + + redraw = pick(redraw, true); // defaults to true + + fireEvent(axis, 'setExtremes', { // fire an event to enable syncing of multiple charts + min: newMin, + max: newMax + }, function() { // the default event handler + + userSetMin = newMin; + userSetMax = newMax; + + + // redraw + if (redraw) { + chart.redraw(animation); + } + }); + + } + + /** + * Get the actual axis extremes + */ + function getExtremes() { + return { + min: min, + max: max, + dataMin: dataMin, + dataMax: dataMax + }; + } + + /** + * Get the zero plane either based on zero or on the min or max value. + * Used in bar and area plots + */ + function getThreshold(threshold) { + if (min > threshold) { + threshold = min; + } else if (max < threshold) { + threshold = max; + } + + return translate(threshold, 0, 1); + } + + /** + * Add a plot band or plot line after render time + * + * @param options {Object} The plotBand or plotLine configuration object + */ + function addPlotBandOrLine(options) { + var obj = new PlotLineOrBand(options).render(); + plotLinesAndBands.push(obj); + return obj; + } + + /** + * Render the tick labels to a preliminary position to get their sizes + */ + function getOffset() { + + var hasData = associatedSeries.length && defined(min) && defined(max), + titleOffset = 0, + titleMargin = 0, + axisTitleOptions = options.title, + labelOptions = options.labels, + directionFactor = [-1, 1, 1, -1][side]; + + if (!axisGroup) { + axisGroup = renderer.g('axis') + .attr({ zIndex: 7 }) + .add(); + gridGroup = renderer.g('grid') + .attr({ zIndex: 1 }) + .add(); + } + + labelOffset = 0; // reset + + if (hasData || isLinked) { + each(tickPositions, function(pos) { + if (!ticks[pos]) { + ticks[pos] = new Tick(pos); + } else { + ticks[pos].addLabel(); // update labels depending on tick interval + } + + // left side must be align: right and right side must have align: left for labels + if (side === 0 || side == 2 || { 1: 'left', 3: 'right' }[side] == labelOptions.align) { + + // get the highest offset + labelOffset = mathMax( + ticks[pos].getLabelSize(), + labelOffset + ); + } + + }); + + if (staggerLines) { + labelOffset += (staggerLines - 1) * 16; + } + + } else { // doesn't have data + for (var n in ticks) { + ticks[n].destroy(); + delete ticks[n]; + } + } + + if (axisTitleOptions && axisTitleOptions.text) { + if (!axis.axisTitle) { + axis.axisTitle = renderer.text( + axisTitleOptions.text, + 0, + 0 + ) + .attr({ + zIndex: 7, + rotation: axisTitleOptions.rotation || 0, + align: + axisTitleOptions.textAlign || + { low: 'left', middle: 'center', high: 'right' }[axisTitleOptions.align] + }) + .css(axisTitleOptions.style) + .add(); + } + + titleOffset = axis.axisTitle.getBBox()[horiz ? 'height' : 'width']; + titleMargin = pick(axisTitleOptions.margin, horiz ? 5 : 10); + + } + + // handle automatic or user set offset + offset = directionFactor * (options.offset || axisOffset[side]); + + axisTitleMargin = + labelOffset + + (side != 2 && labelOffset && directionFactor * options.labels[horiz ? 'y' : 'x']) + + titleMargin; + + axisOffset[side] = mathMax( + axisOffset[side], + axisTitleMargin + titleOffset + directionFactor * offset + ); + + } + + /** + * Render the axis + */ + function render() { + var axisTitleOptions = options.title, + alternateGridColor = options.alternateGridColor, + lineWidth = options.lineWidth, + lineLeft, + lineTop, + linePath, + hasRendered = chart.hasRendered, + slideInTicks = hasRendered && defined(oldMin) && !isNaN(oldMin), + hasData = associatedSeries.length && defined(min) && defined(max); + + // update metrics + axisLength = horiz ? plotWidth : plotHeight; + transA = axisLength / ((max - min) || 1); + transB = horiz ? plotLeft : marginBottom; // translation addend + + // If the series has data draw the ticks. Else only the line and title + if (hasData || isLinked) { + + // minor ticks + if (minorTickInterval && !categories) { + var pos = min + (tickPositions[0] - min) % minorTickInterval; + for (pos; pos <= max; pos += minorTickInterval) { + if (!minorTicks[pos]) { + minorTicks[pos] = new Tick(pos, true); + } + + // render new ticks in old position + if (slideInTicks && minorTicks[pos].isNew) { + minorTicks[pos].render(null, true); + } + + + minorTicks[pos].isActive = true; + minorTicks[pos].render(); + } + } + + // major ticks + each(tickPositions, function(pos, i) { + // linked axes need an extra check to find out if + if (!isLinked || (pos >= min && pos <= max)) { + + // render new ticks in old position + if (slideInTicks && ticks[pos].isNew) { + ticks[pos].render(i, true); + } + + ticks[pos].isActive = true; + ticks[pos].render(i); + } + }); + + // alternate grid color + if (alternateGridColor) { + each(tickPositions, function(pos, i) { + if (i % 2 === 0 && pos < max) { + /*plotLinesAndBands.push(new PlotLineOrBand({ + from: pos, + to: tickPositions[i + 1] !== UNDEFINED ? tickPositions[i + 1] : max, + color: alternateGridColor + }));*/ + + if (!alternateBands[pos]) { + alternateBands[pos] = new PlotLineOrBand(); + } + alternateBands[pos].options = { + from: pos, + to: tickPositions[i + 1] !== UNDEFINED ? tickPositions[i + 1] : max, + color: alternateGridColor + }; + alternateBands[pos].render(); + alternateBands[pos].isActive = true; + } + }); + } + + // custom plot bands (behind grid lines) + /*if (!hasRendered) { // only first time + each(options.plotBands || [], function(plotBandOptions) { + plotLinesAndBands.push(new PlotLineOrBand( + extend({ zIndex: 1 }, plotBandOptions) + ).render()); + }); + }*/ + + + + + // custom plot lines and bands + if (!hasRendered) { // only first time + each((options.plotLines || []).concat(options.plotBands || []), function(plotLineOptions) { + plotLinesAndBands.push(new PlotLineOrBand(plotLineOptions).render()); + }); + } + + + + } // end if hasData + + // remove inactive ticks + each([ticks, minorTicks, alternateBands], function(coll) { + for (var pos in coll) { + if (!coll[pos].isActive) { + coll[pos].destroy(); + delete coll[pos]; + } else { + coll[pos].isActive = false; // reset + } + } + }); + + + + + // Static items. As the axis group is cleared on subsequent calls + // to render, these items are added outside the group. + // axis line + if (lineWidth) { + lineLeft = plotLeft + (opposite ? plotWidth : 0) + offset; + lineTop = chartHeight - marginBottom - (opposite ? plotHeight : 0) + offset; + + linePath = renderer.crispLine([ + M, + horiz ? + plotLeft: + lineLeft, + horiz ? + lineTop: + plotTop, + L, + horiz ? + chartWidth - marginRight : + lineLeft, + horiz ? + lineTop: + chartHeight - marginBottom + ], lineWidth); + if (!axisLine) { + axisLine = renderer.path(linePath) + .attr({ + stroke: options.lineColor, + 'stroke-width': lineWidth, + zIndex: 7 + }) + .add(); + } else { + axisLine.animate({ d: linePath }); + } + + } + + if (axis.axisTitle) { + // compute anchor points for each of the title align options + var margin = horiz ? plotLeft : plotTop, + fontSize = pInt(axisTitleOptions.style.fontSize || 12), + // the position in the length direction of the axis + alongAxis = { + low: margin + (horiz ? 0 : axisLength), + middle: margin + axisLength / 2, + high: margin + (horiz ? axisLength : 0) + }[axisTitleOptions.align], + + // the position in the perpendicular direction of the axis + offAxis = (horiz ? plotTop + plotHeight : plotLeft) + + (horiz ? 1 : -1) * // horizontal axis reverses the margin + (opposite ? -1 : 1) * // so does opposite axes + axisTitleMargin + + //(isIE ? fontSize / 3 : 0)+ // preliminary fix for vml's centerline + (side == 2 ? fontSize : 0); + + axis.axisTitle[hasRendered ? 'animate' : 'attr']({ + x: horiz ? + alongAxis: + offAxis + (opposite ? plotWidth : 0) + offset + + (axisTitleOptions.x || 0), // x + y: horiz ? + offAxis - (opposite ? plotHeight : 0) + offset: + alongAxis + (axisTitleOptions.y || 0) // y + }); + + } + + axis.isDirty = false; + } + + /** + * Remove a plot band or plot line from the chart by id + * @param {Object} id + */ + function removePlotBandOrLine(id) { + var i = plotLinesAndBands.length; + while (i--) { + if (plotLinesAndBands[i].id == id) { + plotLinesAndBands[i].destroy(); + } + } + } + + /** + * Redraw the axis to reflect changes in the data or axis extremes + */ + function redraw() { + + // hide tooltip and hover states + if (tracker.resetTracker) { + tracker.resetTracker(); + } + + // render the axis + render(); + + // move plot lines and bands + each(plotLinesAndBands, function(plotLine) { + plotLine.render(); + }); + + // mark associated series as dirty and ready for redraw + each(associatedSeries, function(series) { + series.isDirty = true; + }); + + } + + /** + * Set new axis categories and optionally redraw + * @param {Array} newCategories + * @param {Boolean} doRedraw + */ + function setCategories(newCategories, doRedraw) { + // set the categories + axis.categories = categories = newCategories; + + // force reindexing tooltips + each(associatedSeries, function(series) { + series.translate(); + series.setTooltipPoints(true); + }); + + + // optionally redraw + axis.isDirty = true; + + if (pick(doRedraw, true)) { + chart.redraw(); + } + } + + + + // Run Axis + + // inverted charts have reversed xAxes as default + if (inverted && isXAxis && reversed === UNDEFINED) { + reversed = true; + } + + + // expose some variables + extend(axis, { + addPlotBand: addPlotBandOrLine, + addPlotLine: addPlotBandOrLine, + adjustTickAmount: adjustTickAmount, + categories: categories, + getExtremes: getExtremes, + getPlotLinePath: getPlotLinePath, + getThreshold: getThreshold, + isXAxis: isXAxis, + options: options, + plotLinesAndBands: plotLinesAndBands, + getOffset: getOffset, + render: render, + setCategories: setCategories, + setExtremes: setExtremes, + setScale: setScale, + setTickPositions: setTickPositions, + translate: translate, + redraw: redraw, + removePlotBand: removePlotBandOrLine, + removePlotLine: removePlotBandOrLine, + reversed: reversed, + stacks: stacks + }); + + // register event listeners + for (eventType in events) { + addEvent(axis, eventType, events[eventType]); + } + + // set min and max + setScale(); + + } // end Axis + + + /** + * The toolbar object + * + * @param {Object} chart + */ + function Toolbar(chart) { + var buttons = {}; + + function add(id, text, title, fn) { + if (!buttons[id]) { + var button = renderer.text( + text, + 0, + 0 + ) + .css(options.toolbar.itemStyle) + .align({ + align: 'right', + x: - marginRight - 20, + y: plotTop + 30 + }) + .on('click', fn) + /*.on('touchstart', function(e) { + e.stopPropagation(); // don't fire the container event + fn(); + })*/ + .attr({ + align: 'right', + zIndex: 20 + }) + .add(); + buttons[id] = button; + } + } + function remove(id) { + discardElement(buttons[id].element); + buttons[id] = null; + } + + // public + return { + add: add, + remove: remove + }; + } + + /** + * The tooltip object + * @param {Object} options Tooltip options + */ + function Tooltip (options) { + var currentSeries, + borderWidth = options.borderWidth, + crosshairsOptions = options.crosshairs, + crosshairs = [], + style = options.style, + shared = options.shared, + padding = pInt(style.padding), + boxOffLeft = borderWidth + padding, // off left/top position as IE can't + //properly handle negative positioned shapes + tooltipIsHidden = true, + boxWidth, + boxHeight, + currentX = 0, + currentY = 0; + + // remove padding CSS and apply padding on box instead + style.padding = 0; + + // create the elements + var group = renderer.g('tooltip') + .attr({ zIndex: 8 }) + .add(), + + box = renderer.rect(boxOffLeft, boxOffLeft, 0, 0, options.borderRadius, borderWidth) + .attr({ + fill: options.backgroundColor, + 'stroke-width': borderWidth + }) + .add(group) + .shadow(options.shadow), + label = renderer.text('', padding + boxOffLeft, pInt(style.fontSize) + padding + boxOffLeft) + .attr({ zIndex: 1 }) + .css(style) + .add(group); + + group.hide(); + + /** + * In case no user defined formatter is given, this will be used + */ + function defaultFormatter() { + var pThis = this, + items = pThis.points || splat(pThis), + xAxis = items[0].series.xAxis, + x = pThis.x, + isDateTime = xAxis && xAxis.options.type == 'datetime', + useHeader = isString(x) || isDateTime, + series, + s; + + // build the header + s = useHeader ? + ['', + (isDateTime ? dateFormat('%A, %b %e, %Y', x) : x), + '
'] : []; + + // build the values + each(items, function(item) { + s.push(item.point.tooltipFormatter(useHeader)); + }); + return s.join(''); + } + + /** + * Provide a soft movement for the tooltip + * + * @param {Number} finalX + * @param {Number} finalY + */ + function move(finalX, finalY) { + + currentX = tooltipIsHidden ? finalX : (2 * currentX + finalX) / 3; + currentY = tooltipIsHidden ? finalY : (currentY + finalY) / 2; + + group.translate(currentX, currentY); + + + // run on next tick of the mouse tracker + if (mathAbs(finalX - currentX) > 1 || mathAbs(finalY - currentY) > 1) { + tooltipTick = function() { + move(finalX, finalY); + }; + } else { + tooltipTick = null; + } + } + + /** + * Hide the tooltip + */ + function hide() { + if (!tooltipIsHidden) { + var hoverPoints = chart.hoverPoints; + + group.hide(); + + each(crosshairs, function(crosshair) { + if (crosshair) { + crosshair.hide(); + } + }); + + // hide previous hoverPoints and set new + if (hoverPoints) { + each (hoverPoints, function(point) { + point.setState(); + }); + } + chart.hoverPoints = null; + + + tooltipIsHidden = true; + } + + } + + /** + * Refresh the tooltip's text and position. + * @param {Object} point + * + */ + function refresh(point) { + var x, + y, + boxX, + boxY, + show, + bBox, + plotX, + plotY = 0, + textConfig = {}, + text, + pointConfig = [], + tooltipPos = point.tooltipPos, + formatter = options.formatter || defaultFormatter, + hoverPoints = chart.hoverPoints, + getConfig = function(point) { + return { + series: point.series, + point: point, + x: point.category, + y: point.y, + percentage: point.percentage, + total: point.total || point.stackTotal + }; + }; + + // shared tooltip, array is sent over + if (shared) { + + // hide previous hoverPoints and set new + if (hoverPoints) { + each (hoverPoints, function(point) { + point.setState(); + }); + } + chart.hoverPoints = point; + + each(point, function(item, i) { + /*var series = item.series, + hoverPoint = series.hoverPoint; + if (hoverPoint) { + hoverPoint.setState(); + } + series.hoverPoint = item;*/ + item.setState(HOVER_STATE); + plotY += item.plotY; // for average + + pointConfig.push(getConfig(item)); + }); + + plotX = point[0].plotX; + plotY = mathRound(plotY) / point.length; // mathRound because Opera 10 has problems here + + textConfig = { + x: point[0].category + }; + textConfig.points = pointConfig; + point = point[0]; + + // single point tooltip + } else { + textConfig = getConfig(point); + } + text = formatter.call(textConfig); + + // register the current series + currentSeries = point.series; + + // get the reference point coordinates (pie charts use tooltipPos) + plotX = shared ? plotX : point.plotX; + plotY = shared ? plotY : point.plotY; + x = mathRound(tooltipPos ? tooltipPos[0] : (inverted ? plotWidth - plotY : plotX)); + y = mathRound(tooltipPos ? tooltipPos[1] : (inverted ? plotHeight - plotX : plotY)); + + + // hide tooltip if the point falls outside the plot + show = shared || !point.series.isCartesian || isInsidePlot(x, y); + + // update the inner HTML + if (text === false || !show) { + hide(); + } else { + + // show it + if (tooltipIsHidden) { + group.show(); + tooltipIsHidden = false; + } + + // update text + label.attr({ + text: text + }); + + // get the bounding box + bBox = label.getBBox(); + boxWidth = bBox.width + 2 * padding; + boxHeight = bBox.height + 2 * padding; + + // set the size of the box + box.attr({ + width: boxWidth, + height: boxHeight, + stroke: options.borderColor || point.color || currentSeries.color || '#606060' + }); + + // keep the box within the chart area + boxX = x - boxWidth + plotLeft - 25; + boxY = y - boxHeight + plotTop + 10; + + // it is too far to the left, adjust it + if (boxX < 7) { + boxX = 7; + boxY -= 30; + } + + + if (boxY < 5) { + boxY = 5; // above + } else if (boxY + boxHeight > chartHeight) { + boxY = chartHeight - boxHeight - 5; // below + } + + // do the move + move(mathRound(boxX - boxOffLeft), mathRound(boxY - boxOffLeft)); + + + } + + + // crosshairs + if (crosshairsOptions) { + crosshairsOptions = splat(crosshairsOptions); // [x, y] + + var path, + i = crosshairsOptions.length, + attribs, + axis; + + while (i--) { + if (crosshairsOptions[i] && (axis = point.series[i ? 'yAxis' : 'xAxis'])) { + path = axis + .getPlotLinePath(point[i ? 'y' : 'x'], 1); + if (crosshairs[i]) { + crosshairs[i].attr({ d: path, visibility: VISIBLE }); + + } else { + attribs = { + 'stroke-width': crosshairsOptions[i].width || 1, + stroke: crosshairsOptions[i].color || '#C0C0C0', + zIndex: 2 + }; + if (crosshairsOptions[i].dashStyle) { + attribs.dashstyle = crosshairsOptions[i].dashStyle; + } + crosshairs[i] = renderer.path(path) + .attr(attribs) + .add(); + } + } + } + } + } + + + + // public members + return { + shared: shared, + refresh: refresh, + hide: hide + }; + } + + /** + * The mouse tracker object + * @param {Object} chart + * @param {Object} options + */ + function MouseTracker (chart, options) { + + + var mouseDownX, + mouseDownY, + hasDragged, + selectionMarker, + zoomType = optionsChart.zoomType, + zoomX = /x/.test(zoomType), + zoomY = /y/.test(zoomType), + zoomHor = zoomX && !inverted || zoomY && inverted, + zoomVert = zoomY && !inverted || zoomX && inverted; + + /** + * Add crossbrowser support for chartX and chartY + * @param {Object} e The event object in standard browsers + */ + function normalizeMouseEvent(e) { + var ePos; + + // common IE normalizing + e = e || win.event; + if (!e.target) { + e.target = e.srcElement; + } + + // iOS + ePos = e.touches ? e.touches.item(0) : e; + + // in certain cases, get mouse position + if (e.type != 'mousemove' || win.opera) { // only Opera needs position on mouse move, see below + chartPosition = getPosition(container); + } + + // chartX and chartY + if (isIE) { // IE including IE9 that has chartX but in a different meaning + e.chartX = e.x; + e.chartY = e.y; + } else { + if (ePos.layerX === UNDEFINED) { // Opera and iOS + e.chartX = ePos.pageX - chartPosition.left; + e.chartY = ePos.pageY - chartPosition.top; + } else { + e.chartX = e.layerX; + e.chartY = e.layerY; + } + } + + return e; + } + + /** + * Get the click position in terms of axis values. + * + * @param {Object} e A mouse event + */ + function getMouseCoordinates(e) { + var coordinates = { + xAxis: [], + yAxis: [] + }; + each(axes, function(axis, i) { + var translate = axis.translate, + isXAxis = axis.isXAxis, + isHorizontal = inverted ? !isXAxis : isXAxis; + + coordinates[isXAxis ? 'xAxis' : 'yAxis'].push({ + axis: axis, + value: translate( + isHorizontal ? + e.chartX - plotLeft : + plotHeight - e.chartY + plotTop, + true + ) + }); + }); + return coordinates; + } + + /** + * With line type charts with a single tracker, get the point closest to the mouse + */ + function onmousemove (e) { + var point, + points, + hoverPoint = chart.hoverPoint, + hoverSeries = chart.hoverSeries, + i, + j, + distance = chartWidth, + index = inverted ? e.chartY : e.chartX - plotLeft; // wtf? + + // shared tooltip + if (tooltip && options.shared) { + points = []; + + // loop over all series and find the ones with points closest to the mouse + i = series.length; + for (j = 0; j < i; j++) { + if (series[j].visible && series[j].tooltipPoints.length) { + point = series[j].tooltipPoints[index]; + point._dist = mathAbs(index - point.plotX); + distance = mathMin(distance, point._dist); + points.push(point); + } + } + // remove furthest points + i = points.length; + while (i--) { + if (points[i]._dist > distance) { + points.splice(i, 1); + } + } + // refresh the tooltip if necessary + if (points.length && (points[0].plotX != hoverX)) { + tooltip.refresh(points); + hoverX = points[0].plotX; + } + } + + // separate tooltip and general mouse events + if (hoverSeries && hoverSeries.tracker) { // only use for line-type series with common tracker + + // get the point + point = hoverSeries.tooltipPoints[index]; + + // a new point is hovered, refresh the tooltip + if (point && point != hoverPoint) { + + // trigger the events + point.onMouseOver(); + + } + } + } + + + + /** + * Reset the tracking by hiding the tooltip, the hover series state and the hover point + */ + function resetTracker() { + var hoverSeries = chart.hoverSeries, + hoverPoint = chart.hoverPoint; + + if (hoverPoint) { + hoverPoint.onMouseOut(); + } + + if (hoverSeries) { + hoverSeries.onMouseOut(); + } + + if (tooltip) { + tooltip.hide(); + } + + hoverX = null; + } + + /** + * Mouse up or outside the plot area + */ + function drop() { + if (selectionMarker) { + var selectionData = { + xAxis: [], + yAxis: [] + }, + selectionBox = selectionMarker.getBBox(), + selectionLeft = selectionBox.x - plotLeft, + selectionTop = selectionBox.y - plotTop; + + + // a selection has been made + if (hasDragged) { + + // record each axis' min and max + each(axes, function(axis, i) { + var translate = axis.translate, + isXAxis = axis.isXAxis, + isHorizontal = inverted ? !isXAxis : isXAxis, + selectionMin = translate( + isHorizontal ? + selectionLeft : + plotHeight - selectionTop - selectionBox.height, + true + ), + selectionMax = translate( + isHorizontal ? + selectionLeft + selectionBox.width : + plotHeight - selectionTop, + true + ); + + selectionData[isXAxis ? 'xAxis' : 'yAxis'].push({ + axis: axis, + min: mathMin(selectionMin, selectionMax), // for reversed axes + max: mathMax(selectionMin, selectionMax) + }); + + }); + fireEvent(chart, 'selection', selectionData, zoom); + + } + selectionMarker = selectionMarker.destroy(); + } + + chart.mouseIsDown = mouseIsDown = hasDragged = false; + removeEvent(doc, hasTouch ? 'touchend' : 'mouseup', drop); + + } + + /** + * Set the JS events on the container element + */ + function setDOMEvents () { + var lastWasOutsidePlot = true; + + /* + * Record the starting position of a dragoperation + */ + container.onmousedown = function(e) { + e = normalizeMouseEvent(e); + + // record the start position + //e.preventDefault && e.preventDefault(); + + chart.mouseIsDown = mouseIsDown = true; + mouseDownX = e.chartX; + mouseDownY = e.chartY; + + addEvent(doc, hasTouch ? 'touchend' : 'mouseup', drop); + }; + + // The mousemove, touchmove and touchstart event handler + var mouseMove = function(e) { + + // let the system handle multitouch operations like two finger scroll + // and pinching + if (e && e.touches && e.touches.length > 1) { + return; + } + + // normalize + e = normalizeMouseEvent(e); + if (!hasTouch) { // not for touch devices + e.returnValue = false; + } + + var chartX = e.chartX, + chartY = e.chartY, + isOutsidePlot = !isInsidePlot(chartX - plotLeft, chartY - plotTop); + + // on touch devices, only trigger click if a handler is defined + if (hasTouch && e.type == 'touchstart') { + if (attr(e.target, 'isTracker')) { + if (!chart.runTrackerClick) { + e.preventDefault(); + } + } else if (!runChartClick && !isOutsidePlot) { + e.preventDefault(); + } + } + + // cancel on mouse outside + if (isOutsidePlot) { + + if (!lastWasOutsidePlot) { + // reset the tracker + resetTracker(); + } + + // drop the selection if any and reset mouseIsDown and hasDragged + //drop(); + if (chartX < plotLeft) { + chartX = plotLeft; + } else if (chartX > plotLeft + plotWidth) { + chartX = plotLeft + plotWidth; + } + + if (chartY < plotTop) { + chartY = plotTop; + } else if (chartY > plotTop + plotHeight) { + chartY = plotTop + plotHeight; + } + + } + + if (mouseIsDown && e.type != 'touchstart') { // make selection + + // determine if the mouse has moved more than 10px + if ((hasDragged = Math.sqrt( + Math.pow(mouseDownX - chartX, 2) + + Math.pow(mouseDownY - chartY, 2) + ) > 10)) { + + // make a selection + if (hasCartesianSeries && (zoomX || zoomY) && + isInsidePlot(mouseDownX - plotLeft, mouseDownY - plotTop)) { + if (!selectionMarker) { + selectionMarker = renderer.rect( + plotLeft, + plotTop, + zoomHor ? 1 : plotWidth, + zoomVert ? 1 : plotHeight, + 0 + ) + .attr({ + fill: 'rgba(69,114,167,0.25)', + zIndex: 7 + }) + .add(); + } + } + + // adjust the width of the selection marker + if (selectionMarker && zoomHor) { + var xSize = chartX - mouseDownX; + selectionMarker.attr({ + width: mathAbs(xSize), + x: (xSize > 0 ? 0 : xSize) + mouseDownX + }); + } + // adjust the height of the selection marker + if (selectionMarker && zoomVert) { + var ySize = chartY - mouseDownY; + selectionMarker.attr({ + height: mathAbs(ySize), + y: (ySize > 0 ? 0 : ySize) + mouseDownY + }); + } + } + + } else if (!isOutsidePlot) { + // show the tooltip + onmousemove(e); + } + + lastWasOutsidePlot = isOutsidePlot; + + // when outside plot, allow touch-drag by returning true + return isOutsidePlot || !hasCartesianSeries; + }; + + /* + * When the mouse enters the container, run mouseMove + */ + container.onmousemove = mouseMove; + + /* + * When the mouse leaves the container, hide the tracking (tooltip). + */ + addEvent(container, 'mouseleave', resetTracker); + + + container.ontouchstart = function(e) { + // For touch devices, use touchmove to zoom + if (zoomX || zoomY) { + container.onmousedown(e); + } + // Show tooltip and prevent the lower mouse pseudo event + mouseMove(e); + }; + + /* + * Allow dragging the finger over the chart to read the values on touch + * devices + */ + container.ontouchmove = mouseMove; + + /* + * Allow dragging the finger over the chart to read the values on touch + * devices + */ + container.ontouchend = function() { + if (hasDragged) { + resetTracker(); + } + }; + + + // MooTools 1.2.3 doesn't fire this in IE when using addEvent + container.onclick = function(e) { + var hoverPoint = chart.hoverPoint; + e = normalizeMouseEvent(e); + + e.cancelBubble = true; // IE specific + + + if (!hasDragged) { + if (hoverPoint && attr(e.target, 'isTracker')) { + var plotX = hoverPoint.plotX, + plotY = hoverPoint.plotY; + + // add page position info + extend(hoverPoint, { + pageX: chartPosition.left + plotLeft + + (inverted ? plotWidth - plotY : plotX), + pageY: chartPosition.top + plotTop + + (inverted ? plotHeight - plotX : plotY) + }); + + // the series click event + fireEvent(hoverPoint.series, 'click', extend(e, { + point: hoverPoint + })); + + // the point click event + hoverPoint.firePointEvent('click', e); + + } else { + extend(e, getMouseCoordinates(e)); + + // fire a click event in the chart + if (isInsidePlot(e.chartX - plotLeft, e.chartY - plotTop)) { + fireEvent(chart, 'click', e); + } + } + + + } + // reset mouseIsDown and hasDragged + hasDragged = false; + }; + + } + + /** + * Create the image map that listens for mouseovers + */ + placeTrackerGroup = function() { + + // first create - plot positions is not final at this stage + if (!trackerGroup) { + chart.trackerGroup = trackerGroup = renderer.g('tracker') + .attr({ zIndex: 9 }) + .add(); + + // then position - this happens on load and after resizing and changing + // axis or box positions + } else { + trackerGroup.translate(plotLeft, plotTop); + if (inverted) { + trackerGroup.attr({ + width: chart.plotWidth, + height: chart.plotHeight + }).invert(); + } + } + }; + + + // Run MouseTracker + placeTrackerGroup(); + if (options.enabled) { + chart.tooltip = tooltip = Tooltip(options); + } + + setDOMEvents(); + + // set the fixed interval ticking for the smooth tooltip + tooltipInterval = setInterval(function() { + if (tooltipTick) { + tooltipTick(); + } + }, 32); + + // expose properties + extend(this, { + zoomX: zoomX, + zoomY: zoomY, + resetTracker: resetTracker + }); + } + + + + /** + * The overview of the chart's series + * @param {Object} chart + */ + var Legend = function(chart) { + + var options = chart.options.legend; + + if (!options.enabled) { + return; + } + + var horizontal = options.layout == 'horizontal', + symbolWidth = options.symbolWidth, + symbolPadding = options.symbolPadding, + allItems, + style = options.style, + itemStyle = options.itemStyle, + itemHoverStyle = options.itemHoverStyle, + itemHiddenStyle = options.itemHiddenStyle, + padding = pInt(style.padding), + rightPadding = 20, + //lineHeight = options.lineHeight || 16, + y = 18, + initialItemX = 4 + padding + symbolWidth + symbolPadding, + itemX, + itemY, + lastItemY, + itemHeight = 0, + box, + legendBorderWidth = options.borderWidth, + legendBackgroundColor = options.backgroundColor, + legendGroup, + offsetWidth, + widthOption = options.width, + series = chart.series, + reversedLegend = options.reversed; + + + + /** + * Set the colors for the legend item + * @param {Object} item A Series or Point instance + * @param {Object} visible Dimmed or colored + */ + function colorizeItem(item, visible) { + var legendItem = item.legendItem, + legendLine = item.legendLine, + legendSymbol = item.legendSymbol, + hiddenColor = itemHiddenStyle.color, + textColor = visible ? options.itemStyle.color : hiddenColor, + symbolColor = visible ? item.color : hiddenColor; + if (legendItem) { + legendItem.css({ fill: textColor }); + } + if (legendLine) { + legendLine.attr({ stroke: symbolColor }); + } + if (legendSymbol) { + legendSymbol.attr({ + stroke: symbolColor, + fill: symbolColor + }); + } + } + + /** + * Position the legend item + * @param {Object} item A Series or Point instance + * @param {Object} visible Dimmed or colored + */ + function positionItem(item, itemX, itemY) { + var legendItem = item.legendItem, + legendLine = item.legendLine, + legendSymbol = item.legendSymbol, + checkbox = item.checkbox; + if (legendItem) { + legendItem.attr({ + x: itemX, + y: itemY + }); + } + if (legendLine) { + legendLine.translate(itemX, itemY - 4); + } + if (legendSymbol) { + legendSymbol.attr({ + x: itemX + legendSymbol.xOff, + y: itemY + legendSymbol.yOff + }); + } + if (checkbox) { + checkbox.x = itemX; + checkbox.y = itemY; + } + } + + /** + * Destroy a single legend item + * @param {Object} item The series or point + */ + function destroyItem(item) { + var checkbox = item.checkbox; + + // pull out from the array + //erase(allItems, item); + + // destroy SVG elements + each(['legendItem', 'legendLine', 'legendSymbol'], function(key) { + if (item[key]) { + item[key].destroy(); + } + }); + + if (checkbox) { + discardElement(item.checkbox); + } + + + } + + + /** + * Position the checkboxes after the width is determined + */ + function positionCheckboxes() { + each(allItems, function(item) { + var checkbox = item.checkbox; + if (checkbox) { + css(checkbox, { + left: (legendGroup.attr('translateX') + item.legendItemWidth + checkbox.x - 40) +PX, + top: (legendGroup.attr('translateY') + checkbox.y - 11) + PX + }); + } + }); + } + + /** + * Render a single specific legend item + * @param {Object} item A series or point + */ + function renderItem(item) { + var bBox, + itemWidth, + legendSymbol, + symbolX, + symbolY, + attribs, + simpleSymbol, + li = item.legendItem, + series = item.series || item, + i = allItems.length; + + + if (!li) { // generate it once, later move it + + // let these series types use a simple symbol + simpleSymbol = /^(bar|pie|area|column)$/.test(series.type); + + // generate the list item text + item.legendItem = li = renderer.text( + options.labelFormatter.call(item), + 0, + 0 + ) + .css(item.visible ? itemStyle : itemHiddenStyle) + .on('mouseover', function() { + item.setState(HOVER_STATE); + li.css(itemHoverStyle); + }) + .on('mouseout', function() { + li.css(item.visible ? itemStyle : itemHiddenStyle); + item.setState(); + }) + .on('click', function(event) { + var strLegendItemClick = 'legendItemClick', + fnLegendItemClick = function() { + item.setVisible(); + }; + + // click the name or symbol + if (item.firePointEvent) { // point + item.firePointEvent(strLegendItemClick, null, fnLegendItemClick); + } else { + fireEvent(item, strLegendItemClick, null, fnLegendItemClick); + } + }) + .attr({ zIndex: 2 }) + .add(legendGroup); + + // draw the line + if (!simpleSymbol && item.options && item.options.lineWidth) { + var itemOptions = item.options; + attribs = { + 'stroke-width': itemOptions.lineWidth, + zIndex: 2 + }; + if (itemOptions.dashStyle) { + attribs.dashstyle = itemOptions.dashStyle; + } + item.legendLine = renderer.path([ + M, + -symbolWidth - symbolPadding, + 0, + L, + -symbolPadding, + 0 + ]) + .attr(attribs) + .add(legendGroup); + } + + // draw a simple symbol + if (simpleSymbol) { // bar|pie|area|column + //legendLayer.drawRect( + legendSymbol = renderer.rect( + (symbolX = -symbolWidth - symbolPadding), + (symbolY = -11), + symbolWidth, + 12, + 2 + ).attr({ + 'stroke-width': 0, + zIndex: 3 + }).add(legendGroup); + } + + // draw the marker + else if (item.options && item.options.marker && item.options.marker.enabled) { + legendSymbol = renderer.symbol( + item.symbol, + (symbolX = -symbolWidth / 2 - symbolPadding), + (symbolY = -4), + item.options.marker.radius + ) + .attr(item.pointAttr[NORMAL_STATE]) + .attr({ zIndex: 3 }) + .add(legendGroup); + + + } + if (legendSymbol) { + legendSymbol.xOff = symbolX; + legendSymbol.yOff = symbolY; + } + + item.legendSymbol = legendSymbol; + + // colorize the items + colorizeItem(item, item.visible); + + + // add the HTML checkbox on top + if (item.options && item.options.showCheckbox) { + item.checkbox = createElement('input', { + type: 'checkbox', + checked: item.selected, + defaultChecked: item.selected // required by IE7 + }, options.itemCheckboxStyle, container); + + addEvent(item.checkbox, 'click', function(event) { + var target = event.target; + fireEvent(item, 'checkboxClick', { + checked: target.checked + }, + function() { + item.select(); + } + ); + }); + } + } + + + // calculate the positions for the next line + bBox = li.getBBox(); + + itemWidth = item.legendItemWidth = + options.itemWidth || symbolWidth + symbolPadding + bBox.width + rightPadding; + itemHeight = bBox.height; + + // if the item exceeds the width, start a new line + if (horizontal && itemX - initialItemX + itemWidth > + (widthOption || (chartWidth - 2 * padding - initialItemX))) { + itemX = initialItemX; + itemY += itemHeight; + } + lastItemY = itemY; + + // position the newly generated or reordered items + positionItem(item, itemX, itemY); + + // advance + if (horizontal) { + itemX += itemWidth; + } else { + itemY += itemHeight; + } + + // the width of the widest item + offsetWidth = widthOption || mathMax( + horizontal ? itemX - initialItemX : itemWidth, + offsetWidth + ); + + + + // add it all to an array to use below + allItems.push(item); + } + + /** + * Render the legend. This method can be called both before and after + * chart.render. If called after, it will only rearrange items instead + * of creating new ones. + */ + function renderLegend() { + itemX = initialItemX; + itemY = y; + offsetWidth = 0; + lastItemY = 0; + + allItems = []; + + if (!legendGroup) { + legendGroup = renderer.g('legend') + .attr({ zIndex: 7 }) + .add(); + } + + + // add HTML for each series + if (reversedLegend) { + series.reverse(); + } + each(series, function(serie) { + if (!serie.options.showInLegend) { + return; + } + + // use points or series for the legend item depending on legendType + var items = (serie.options.legendType == 'point') ? + serie.data : [serie]; + + // render all items + each(items, renderItem); + }); + if (reversedLegend) { // restore + series.reverse(); + } + + + + // Draw the border + legendWidth = widthOption || offsetWidth; + legendHeight = lastItemY - y + itemHeight; + + if (legendBorderWidth || legendBackgroundColor) { + legendWidth += 2 * padding; + legendHeight += 2 * padding; + + if (!box) { + box = renderer.rect( + 0, + 0, + legendWidth, + legendHeight, + options.borderRadius, + legendBorderWidth || 0 + ).attr({ + stroke: options.borderColor, + 'stroke-width': legendBorderWidth || 0, + fill: legendBackgroundColor || NONE + }) + .add(legendGroup) + .shadow(options.shadow); + + } else if (legendWidth > 0 && legendHeight > 0) { + box.animate( + box.crisp(null, null, null, legendWidth, legendHeight) + ); + } + + // hide the border if no items + box[allItems.length ? 'show' : 'hide'](); + } + + // 1.x compatibility: positioning based on style + var props = ['left', 'right', 'top', 'bottom'], + prop, + i = 4; + while(i--) { + prop = props[i]; + if (style[prop] && style[prop] != 'auto') { + options[i < 2 ? 'align' : 'verticalAlign'] = prop; + options[i < 2 ? 'x' : 'y'] = pInt(style[prop]) * (i % 2 ? -1 : 1); + } + } + + legendGroup.align(extend(options, { + width: legendWidth, + height: legendHeight + }), true, spacingBox); + + if (!isResizing) { + positionCheckboxes(); + } + } + + + // run legend + renderLegend(); + + // move checkboxes + addEvent(chart, 'endResize', positionCheckboxes); + + // expose + return { + colorizeItem: colorizeItem, + destroyItem: destroyItem, + renderLegend: renderLegend + }; + }; + + + + + + + /** + * Initialize an individual series, called internally before render time + */ + function initSeries(options) { + var type = options.type || optionsChart.type || optionsChart.defaultSeriesType, + typeClass = seriesTypes[type], + serie, + hasRendered = chart.hasRendered; + + // an inverted chart can't take a column series and vice versa + if (hasRendered) { + if (inverted && type == 'column') { + typeClass = seriesTypes.bar; + } else if (!inverted && type == 'bar') { + typeClass = seriesTypes.column; + } + } + + serie = new typeClass(); + + serie.init(chart, options); + + // set internal chart properties + if (!hasRendered && serie.inverted) { + inverted = true; + } + if (serie.isCartesian) { + hasCartesianSeries = serie.isCartesian; + } + + series.push(serie); + + return serie; + } + + /** + * Add a series dynamically after time + * + * @param {Object} options The config options + * @param {Boolean} redraw Whether to redraw the chart after adding. Defaults to true. + * @param {Boolean|Object} animation Whether to apply animation, and optionally animation + * configuration + * + * @return {Object} series The newly created series object + */ + function addSeries(options, redraw, animation) { + var series; + + if (options) { + setAnimation(animation, chart); + redraw = pick(redraw, true); // defaults to true + + fireEvent(chart, 'addSeries', { options: options }, function() { + series = initSeries(options); + series.isDirty = true; + + chart.isDirtyLegend = true; // the series array is out of sync with the display + if (redraw) { + chart.redraw(); + } + }); + } + + return series; + } + + /** + * Check whether a given point is within the plot area + * + * @param {Number} x Pixel x relative to the coordinateSystem + * @param {Number} y Pixel y relative to the coordinateSystem + */ + isInsidePlot = function(x, y) { + return x >= 0 && + x <= plotWidth && + y >= 0 && + y <= plotHeight; + }; + + /** + * Adjust all axes tick amounts + */ + function adjustTickAmounts() { + if (optionsChart.alignTicks !== false) { + each(axes, function(axis) { + axis.adjustTickAmount(); + }); + } + maxTicks = null; + } + + /** + * Redraw legend, axes or series based on updated data + * + * @param {Boolean|Object} animation Whether to apply animation, and optionally animation + * configuration + */ + function redraw(animation) { + var redrawLegend = chart.isDirtyLegend, + hasStackedSeries, + isDirtyBox = chart.isDirtyBox, // todo: check if it has actually changed? + seriesLength = series.length, + i = seriesLength, + clipRect = chart.clipRect, + serie; + + setAnimation(animation, chart); + + // link stacked series + while (i--) { + serie = series[i]; + if (serie.isDirty && serie.options.stacking) { + hasStackedSeries = true; + break; + } + } + if (hasStackedSeries) { // mark others as dirty + i = seriesLength; + while (i--) { + serie = series[i]; + if (serie.options.stacking) { + serie.isDirty = true; + } + } + } + + // handle updated data in the series + each(series, function(serie) { + if (serie.isDirty) { // prepare the data so axis can read it + serie.cleanData(); + serie.getSegments(); + + if (serie.options.legendType == 'point') { + redrawLegend = true; + } + } + }); + + // handle added or removed series + if (redrawLegend && legend.renderLegend) { // series or pie points are added or removed + // draw legend graphics + legend.renderLegend(); + + chart.isDirtyLegend = false; + } + + if (hasCartesianSeries) { + if (!isResizing) { + + // reset maxTicks + maxTicks = null; + + // set axes scales + each(axes, function(axis) { + axis.setScale(); + }); + } + adjustTickAmounts(); + getMargins(); + + // redraw axes + each(axes, function(axis) { + if (axis.isDirty || isDirtyBox) { + axis.redraw(); + isDirtyBox = true; // always redraw box to reflect changes in the axis labels + } + }); + + + } + + // the plot areas size has changed + if (isDirtyBox) { + drawChartBox(); + placeTrackerGroup(); + + // move clip rect + if (clipRect) { + stop(clipRect); + clipRect.animate({ // for chart resize + width: chart.plotSizeX, + height: chart.plotSizeY + }); + } + + } + + + // redraw affected series + each(series, function(serie) { + if (serie.isDirty && serie.visible && + (!serie.isCartesian || serie.xAxis)) { // issue #153 + serie.redraw(); + } + }); + + + // hide tooltip and hover states + if (tracker && tracker.resetTracker) { + tracker.resetTracker(); + } + + // fire the event + fireEvent(chart, 'redraw'); + } + + + + /** + * Dim the chart and show a loading text or symbol + * @param {String} str An optional text to show in the loading label instead of the default one + */ + function showLoading(str) { + var loadingOptions = options.loading; + + // create the layer at the first call + if (!loadingDiv) { + loadingDiv = createElement(DIV, { + className: 'highcharts-loading' + }, extend(loadingOptions.style, { + left: plotLeft + PX, + top: plotTop + PX, + width: plotWidth + PX, + height: plotHeight + PX, + zIndex: 10, + display: NONE + }), container); + + loadingSpan = createElement( + 'span', + null, + loadingOptions.labelStyle, + loadingDiv + ); + + } + + // update text + loadingSpan.innerHTML = str || options.lang.loading; + + // show it + if (!loadingShown) { + css(loadingDiv, { opacity: 0, display: '' }); + animate(loadingDiv, { + opacity: loadingOptions.style.opacity + }, { + duration: loadingOptions.showDuration + }); + loadingShown = true; + } + } + /** + * Hide the loading layer + */ + function hideLoading() { + animate(loadingDiv, { + opacity: 0 + }, { + duration: options.loading.hideDuration, + complete: function() { + css(loadingDiv, { display: NONE }); + } + }); + loadingShown = false; + } + + /** + * Get an axis, series or point object by id. + * @param id {String} The id as given in the configuration options + */ + function get(id) { + var i, + j, + data; + + // search axes + for (i = 0; i < axes.length; i++) { + if (axes[i].options.id == id) { + return axes[i]; + } + } + + // search series + for (i = 0; i < series.length; i++) { + if (series[i].options.id == id) { + return series[i]; + } + } + + // search points + for (i = 0; i < series.length; i++) { + data = series[i].data; + for (j = 0; j < data.length; j++) { + if (data[j].id == id) { + return data[j]; + } + } + } + return null; + } + + /** + * Create the Axis instances based on the config options + */ + function getAxes() { + var xAxisOptions = options.xAxis || {}, + yAxisOptions = options.yAxis || {}, + axis; + + // make sure the options are arrays and add some members + xAxisOptions = splat(xAxisOptions); + each(xAxisOptions, function(axis, i) { + axis.index = i; + axis.isX = true; + }); + + yAxisOptions = splat(yAxisOptions); + each(yAxisOptions, function(axis, i) { + axis.index = i; + }); + + // concatenate all axis options into one array + axes = xAxisOptions.concat(yAxisOptions); + + // loop the options and construct axis objects + chart.xAxis = []; + chart.yAxis = []; + axes = map(axes, function(axisOptions) { + axis = new Axis(chart, axisOptions); + chart[axis.isXAxis ? 'xAxis' : 'yAxis'].push(axis); + + return axis; + }); + + adjustTickAmounts(); + } + + + /** + * Get the currently selected points from all series + */ + function getSelectedPoints() { + var points = []; + each(series, function(serie) { + points = points.concat( grep( serie.data, function(point) { + return point.selected; + })); + }); + return points; + } + + /** + * Get the currently selected series + */ + function getSelectedSeries() { + return grep(series, function (serie) { + return serie.selected; + }); + } + + /** + * Zoom out to 1:1 + */ + zoomOut = function () { + fireEvent(chart, 'selection', { resetSelection: true }, zoom); + chart.toolbar.remove('zoom'); + + }; + /** + * Zoom into a given portion of the chart given by axis coordinates + * @param {Object} event + */ + zoom = function (event) { + + // add button to reset selection + var lang = defaultOptions.lang, + animate = chart.pointCount < 100; + chart.toolbar.add('zoom', lang.resetZoom, lang.resetZoomTitle, zoomOut); + + // if zoom is called with no arguments, reset the axes + if (!event || event.resetSelection) { + each(axes, function(axis) { + axis.setExtremes(null, null, false, animate); + }); + } + + // else, zoom in on all axes + else { + each(event.xAxis.concat(event.yAxis), function(axisData) { + var axis = axisData.axis; + + // don't zoom more than maxZoom + if (chart.tracker[axis.isXAxis ? 'zoomX' : 'zoomY']) { + axis.setExtremes(axisData.min, axisData.max, false, animate); + } + }); + } + + // redraw chart + redraw(); + }; + + /** + * Show the title and subtitle of the chart + * + * @param titleOptions {Object} New title options + * @param subtitleOptions {Object} New subtitle options + * + */ + function setTitle (titleOptions, subtitleOptions) { + + chartTitleOptions = merge(options.title, titleOptions); + chartSubtitleOptions = merge(options.subtitle, subtitleOptions); + + // add title and subtitle + each([ + ['title', titleOptions, chartTitleOptions], + ['subtitle', subtitleOptions, chartSubtitleOptions] + ], function(arr) { + var name = arr[0], + title = chart[name], + titleOptions = arr[1], + chartTitleOptions = arr[2]; + + if (title && titleOptions) { + title.destroy(); // remove old + title = null; + } + if (chartTitleOptions && chartTitleOptions.text && !title) { + chart[name] = renderer.text( + chartTitleOptions.text, + 0, + 0 + ) + .attr({ + align: chartTitleOptions.align, + 'class': 'highcharts-'+ name, + zIndex: 1 + }) + .css(chartTitleOptions.style) + .add() + .align(chartTitleOptions, false, spacingBox); + } + }); + + } + + /** + * Get chart width and height according to options and container size + */ + function getChartSize() { + + containerWidth = (renderToClone || renderTo).offsetWidth; + containerHeight = (renderToClone || renderTo).offsetHeight; + chart.chartWidth = chartWidth = optionsChart.width || containerWidth || 600; + chart.chartHeight = chartHeight = optionsChart.height || + // the offsetHeight of an empty container is 0 in standard browsers, but 19 in IE7: + (containerHeight > 19 ? containerHeight : 400); + } + + + /** + * Get the containing element, determine the size and create the inner container + * div to hold the chart + */ + function getContainer() { + renderTo = optionsChart.renderTo; + containerId = PREFIX + idCounter++; + + if (isString(renderTo)) { + renderTo = doc.getElementById(renderTo); + } + + // remove previous chart + renderTo.innerHTML = ''; + + // If the container doesn't have an offsetWidth, it has or is a child of a node + // that has display:none. We need to temporarily move it out to a visible + // state to determine the size, else the legend and tooltips won't render + // properly + if (!renderTo.offsetWidth) { + renderToClone = renderTo.cloneNode(0); + css(renderToClone, { + position: ABSOLUTE, + top: '-9999px', + display: '' + }); + doc.body.appendChild(renderToClone); + } + + // get the width and height + getChartSize(); + + // create the inner container + chart.container = container = createElement(DIV, { + className: 'highcharts-container' + + (optionsChart.className ? ' '+ optionsChart.className : ''), + id: containerId + }, extend({ + position: RELATIVE, + overflow: HIDDEN, // needed for context menu (avoid scrollbars) and + // content overflow in IE + width: chartWidth + PX, + height: chartHeight + PX, + textAlign: 'left' + }, optionsChart.style), + renderToClone || renderTo + ); + + chart.renderer = renderer = + optionsChart.forExport ? // force SVG, used for SVG export + new SVGRenderer(container, chartWidth, chartHeight, true) : + new Renderer(container, chartWidth, chartHeight); + + // Issue 110 workaround: + // In Firefox, if a div is positioned by percentage, its pixel position may land + // between pixels. The container itself doesn't display this, but an SVG element + // inside this container will be drawn at subpixel precision. In order to draw + // sharp lines, this must be compensated for. This doesn't seem to work inside + // iframes though (like in jsFiddle). + var subPixelFix, rect; + if (isFirefox && container.getBoundingClientRect) { + subPixelFix = function() { + css(container, { left: 0, top: 0 }); + rect = container.getBoundingClientRect(); + css(container, { + left: (-rect.left % 1) + PX, + top: (-rect.top % 1) + PX + }); + }; + + // run the fix now + subPixelFix(); + + // run it on resize + addEvent(win, 'resize', subPixelFix); + + // remove it on chart destroy + addEvent(chart, 'destroy', function() { + removeEvent(win, 'resize', subPixelFix); + }); + } + } + + /** + * Calculate margins by rendering axis labels in a preliminary position. Title, + * subtitle and legend have already been rendered at this stage, but will be + * moved into their final positions + */ + getMargins = function() { + var legendOptions = options.legend, + legendMargin = pick(legendOptions.margin, 10), + legendX = legendOptions.x, + legendY = legendOptions.y, + align = legendOptions.align, + verticalAlign = legendOptions.verticalAlign, + titleOffset; + + resetMargins(); + + // adjust for title and subtitle + if ((chart.title || chart.subtitle) && !defined(optionsMarginTop)) { + titleOffset = mathMax( + chart.title && !chartTitleOptions.floating && !chartTitleOptions.verticalAlign && chartTitleOptions.y || 0, + chart.subtitle && !chartSubtitleOptions.floating && !chartSubtitleOptions.verticalAlign && chartSubtitleOptions.y || 0 + ); + if (titleOffset) { + plotTop = mathMax(plotTop, titleOffset + pick(chartTitleOptions.margin, 15) + spacingTop); + } + } + // adjust for legend + if (legendOptions.enabled && !legendOptions.floating) { + if (align == 'right') { // horizontal alignment handled first + if (!defined(optionsMarginRight)) { + marginRight = mathMax( + marginRight, + legendWidth - legendX + legendMargin + spacingRight + ); + } + } else if (align == 'left') { + if (!defined(optionsMarginLeft)) { + plotLeft = mathMax( + plotLeft, + legendWidth + legendX + legendMargin + spacingLeft + ); + } + + } else if (verticalAlign == 'top') { + if (!defined(optionsMarginTop)) { + plotTop = mathMax( + plotTop, + legendHeight + legendY + legendMargin + spacingTop + ); + } + + } else if (verticalAlign == 'bottom') { + if (!defined(optionsMarginBottom)) { + marginBottom = mathMax( + marginBottom, + legendHeight - legendY + legendMargin + spacingBottom + ); + } + } + } + + // pre-render axes to get labels offset width + if (hasCartesianSeries) { + each(axes, function(axis) { + axis.getOffset(); + }); + } + + if (!defined(optionsMarginLeft)) { + plotLeft += axisOffset[3]; + } + if (!defined(optionsMarginTop)) { + plotTop += axisOffset[0]; + } + if (!defined(optionsMarginBottom)) { + marginBottom += axisOffset[2]; + } + if (!defined(optionsMarginRight)) { + marginRight += axisOffset[1]; + } + + setChartSize(); + + }; + + /** + * Add the event handlers necessary for auto resizing + * + */ + function initReflow() { + var reflowTimeout; + function reflow() { + var width = optionsChart.width || renderTo.offsetWidth, + height = optionsChart.height || renderTo.offsetHeight; + + if (width && height) { // means container is display:none + if (width != containerWidth || height != containerHeight) { + clearTimeout(reflowTimeout); + reflowTimeout = setTimeout(function() { + resize(width, height, false); + }, 100); + } + containerWidth = width; + containerHeight = height; + } + } + addEvent(window, 'resize', reflow); + addEvent(chart, 'destroy', function() { + removeEvent(window, 'resize', reflow); + }); + } + + /** + * Resize the chart to a given width and height + * @param {Number} width + * @param {Number} height + * @param {Object|Boolean} animation + */ + resize = function(width, height, animation) { + var chartTitle = chart.title, + chartSubtitle = chart.subtitle; + + isResizing += 1; + + // set the animation for the current process + setAnimation(animation, chart); + + oldChartHeight = chartHeight; + oldChartWidth = chartWidth; + chartWidth = mathRound(width); + chartHeight = mathRound(height); + + css(container, { + width: chartWidth + PX, + height: chartHeight + PX + }); + renderer.setSize(chartWidth, chartHeight, animation); + + // update axis lengths for more correct tick intervals: + plotWidth = chartWidth - plotLeft - marginRight; + plotHeight = chartHeight - plotTop - marginBottom; + + // handle axes + maxTicks = null; + each(axes, function(axis) { + axis.isDirty = true; + axis.setScale(); + }); + + // make sure non-cartesian series are also handled + each(series, function(serie) { + serie.isDirty = true; + }); + + chart.isDirtyLegend = true; // force legend redraw + chart.isDirtyBox = true; // force redraw of plot and chart border + + getMargins(); + + // move titles + if (chartTitle) { + chartTitle.align(null, null, spacingBox); + } + if (chartSubtitle) { + chartSubtitle.align(null, null, spacingBox); + } + + redraw(animation); + + + oldChartHeight = null; + fireEvent(chart, 'resize'); + + // fire endResize and set isResizing back + setTimeout(function() { + fireEvent(chart, 'endResize', null, function() { + isResizing -= 1; + }); + }, globalAnimation && globalAnimation.duration || 500); + }; + + /** + * Set the public chart properties. This is done before and after the pre-render + * to determine margin sizes + */ + setChartSize = function() { + + chart.plotLeft = plotLeft = mathRound(plotLeft); + chart.plotTop = plotTop = mathRound(plotTop); + chart.plotWidth = plotWidth = mathRound(chartWidth - plotLeft - marginRight); + chart.plotHeight = plotHeight = mathRound(chartHeight - plotTop - marginBottom); + + chart.plotSizeX = inverted ? plotHeight : plotWidth; + chart.plotSizeY = inverted ? plotWidth : plotHeight; + + spacingBox = { + x: spacingLeft, + y: spacingTop, + width: chartWidth - spacingLeft - spacingRight, + height: chartHeight - spacingTop - spacingBottom + }; + }; + + /** + * Initial margins before auto size margins are applied + */ + resetMargins = function() { + plotTop = pick(optionsMarginTop, spacingTop); + marginRight = pick(optionsMarginRight, spacingRight); + marginBottom = pick(optionsMarginBottom, spacingBottom); + plotLeft = pick(optionsMarginLeft, spacingLeft); + axisOffset = [0, 0, 0, 0]; // top, right, bottom, left + }; + + /** + * Draw the borders and backgrounds for chart and plot area + */ + drawChartBox = function() { + var chartBorderWidth = optionsChart.borderWidth || 0, + chartBackgroundColor = optionsChart.backgroundColor, + plotBackgroundColor = optionsChart.plotBackgroundColor, + plotBackgroundImage = optionsChart.plotBackgroundImage, + mgn, + plotSize = { + x: plotLeft, + y: plotTop, + width: plotWidth, + height: plotHeight + }; + + // Chart area + mgn = chartBorderWidth + (optionsChart.shadow ? 8 : 0); + + if (chartBorderWidth || chartBackgroundColor) { + if (!chartBackground) { + chartBackground = renderer.rect(mgn / 2, mgn / 2, chartWidth - mgn, chartHeight - mgn, + optionsChart.borderRadius, chartBorderWidth) + .attr({ + stroke: optionsChart.borderColor, + 'stroke-width': chartBorderWidth, + fill: chartBackgroundColor || NONE + }) + .add() + .shadow(optionsChart.shadow); + } else { // resize + chartBackground.animate( + chartBackground.crisp(null, null, null, chartWidth - mgn, chartHeight - mgn) + ); + } + } + + + // Plot background + if (plotBackgroundColor) { + if (!plotBackground) { + plotBackground = renderer.rect(plotLeft, plotTop, plotWidth, plotHeight, 0) + .attr({ + fill: plotBackgroundColor + }) + .add() + .shadow(optionsChart.plotShadow); + } else { + plotBackground.animate(plotSize); + } + } + if (plotBackgroundImage) { + if (!plotBGImage) { + plotBGImage = renderer.image(plotBackgroundImage, plotLeft, plotTop, plotWidth, plotHeight) + .add(); + } else { + plotBGImage.animate(plotSize); + } + } + + // Plot area border + if (optionsChart.plotBorderWidth) { + if (!plotBorder) { + plotBorder = renderer.rect(plotLeft, plotTop, plotWidth, plotHeight, 0, optionsChart.plotBorderWidth) + .attr({ + stroke: optionsChart.plotBorderColor, + 'stroke-width': optionsChart.plotBorderWidth, + zIndex: 4 + }) + .add(); + } else { + plotBorder.animate( + plotBorder.crisp(null, plotLeft, plotTop, plotWidth, plotHeight) + ); + } + } + + // reset + chart.isDirtyBox = false; + }; + + /** + * Render all graphics for the chart + */ + function render () { + var labels = options.labels, + credits = options.credits, + creditsHref; + + // Title + setTitle(); + + + // Legend + legend = chart.legend = new Legend(chart); + + // Get margins by pre-rendering axes + getMargins(); + each(axes, function(axis) { + axis.setTickPositions(true); // update to reflect the new margins + }); + adjustTickAmounts(); + getMargins(); // second pass to check for new labels + + + // Draw the borders and backgrounds + drawChartBox(); + + // Axes + if (hasCartesianSeries) { + each(axes, function(axis) { + axis.render(); + }); + } + + + // The series + if (!chart.seriesGroup) { + chart.seriesGroup = renderer.g('series-group') + .attr({ zIndex: 3 }) + .add(); + } + each(series, function(serie) { + serie.translate(); + serie.setTooltipPoints(); + serie.render(); + }); + + + // Labels + if (labels.items) { + each(labels.items, function() { + var style = extend(labels.style, this.style), + x = pInt(style.left) + plotLeft, + y = pInt(style.top) + plotTop + 12; + + // delete to prevent rewriting in IE + delete style.left; + delete style.top; + + renderer.text( + this.html, + x, + y + ) + .attr({ zIndex: 2 }) + .css(style) + .add(); + + }); + } + + // Toolbar (don't redraw) + if (!chart.toolbar) { + chart.toolbar = Toolbar(chart); + } + + // Credits + if (credits.enabled && !chart.credits) { + creditsHref = credits.href; + renderer.text( + credits.text, + 0, + 0 + ) + .on('click', function() { + if (creditsHref) { + location.href = creditsHref; + } + }) + .attr({ + align: credits.position.align, + zIndex: 8 + }) + .css(credits.style) + .add() + .align(credits.position); + } + + placeTrackerGroup(); + + // Set flag + chart.hasRendered = true; + + // If the chart was rendered outside the top container, put it back in + if (renderToClone) { + renderTo.appendChild(container); + discardElement(renderToClone); + //updatePosition(container); + } + } + + /** + * Clean up memory usage + */ + function destroy() { + var i = series.length, + parentNode = container && container.parentNode; + + // fire the chart.destoy event + fireEvent(chart, 'destroy'); + + // remove events + removeEvent(win, 'unload', destroy); + removeEvent(chart); + + each(axes, function(axis) { + removeEvent(axis); + }); + + // destroy each series + while (i--) { + series[i].destroy(); + } + + // remove container and all SVG + if (container) { // can break in IE when destroyed before finished loading + container.innerHTML = ''; + removeEvent(container); + if (parentNode) { + parentNode.removeChild(container); + } + + // IE6 leak + container = null; + } + + // IE7 leak + if (renderer) { // can break in IE when destroyed before finished loading + renderer.alignedObjects = null; + } + + // memory and CPU leak + clearInterval(tooltipInterval); + + // clean it all up + for (i in chart) { + delete chart[i]; + } + + } + /** + * Prepare for first rendering after all data are loaded + */ + function firstRender() { + + // VML namespaces can't be added until after complete. Listening + // for Perini's doScroll hack is not enough. + var onreadystatechange = 'onreadystatechange'; + if (!hasSVG && win == win.top && doc.readyState != 'complete') { + doc.attachEvent(onreadystatechange, function() { + doc.detachEvent(onreadystatechange, firstRender); + firstRender(); + }); + return; + } + + // create the container + getContainer(); + + resetMargins(); + setChartSize(); + + // Initialize the series + each(options.series || [], function(serieOptions) { + initSeries(serieOptions); + }); + + // Set the common inversion and transformation for inverted series after initSeries + chart.inverted = inverted = pick(inverted, options.chart.inverted); + + + getAxes(); + + + chart.render = render; + + // depends on inverted and on margins being set + chart.tracker = tracker = new MouseTracker(chart, options.tooltip); + + //globalAnimation = false; + render(); + + fireEvent(chart, 'load'); + + //globalAnimation = true; + + // run callbacks + if (callback) { + callback.apply(chart, [chart]); + } + each(chart.callbacks, function(fn) { + fn.apply(chart, [chart]); + }); + } + + // Run chart + + + + // Set to zero for each new chart + colorCounter = 0; + symbolCounter = 0; + + // Destroy the chart and free up memory. + addEvent(win, 'unload', destroy); + + // Set up auto resize + if (optionsChart.reflow !== false) { + addEvent(chart, 'load', initReflow); + } + + // Chart event handlers + if (chartEvents) { + for (eventType in chartEvents) { + addEvent(chart, eventType, chartEvents[eventType]); + } + } + + + chart.options = options; + chart.series = series; + + + + + + + // Expose methods and variables + chart.addSeries = addSeries; + chart.animation = pick(optionsChart.animation, true); + chart.destroy = destroy; + chart.get = get; + chart.getSelectedPoints = getSelectedPoints; + chart.getSelectedSeries = getSelectedSeries; + chart.hideLoading = hideLoading; + chart.isInsidePlot = isInsidePlot; + chart.redraw = redraw; + chart.setSize = resize; + chart.setTitle = setTitle; + chart.showLoading = showLoading; + chart.pointCount = 0; + /* + if ($) $(function() { + $container = $('#container'); + var origChartWidth, + origChartHeight; + if ($container) { + $('') + .insertBefore($container) + .click(function() { + if (origChartWidth === UNDEFINED) { + origChartWidth = chartWidth; + origChartHeight = chartHeight; + } + chart.resize(chartWidth *= 1.1, chartHeight *= 1.1); + }); + $('') + .insertBefore($container) + .click(function() { + if (origChartWidth === UNDEFINED) { + origChartWidth = chartWidth; + origChartHeight = chartHeight; + } + chart.resize(chartWidth *= 0.9, chartHeight *= 0.9); + }); + $('') + .insertBefore($container) + .click(function() { + if (origChartWidth === UNDEFINED) { + origChartWidth = chartWidth; + origChartHeight = chartHeight; + } + chart.resize(origChartWidth, origChartHeight); + }); + } + }) + */ + + + + + firstRender(); + + +} // end Chart + +// Hook for exporting module +Chart.prototype.callbacks = []; + +/** + * The Point object and prototype. Inheritable and used as base for PiePoint + */ +var Point = function() {}; +Point.prototype = { + + /** + * Initialize the point + * @param {Object} series The series object containing this point + * @param {Object} options The data in either number, array or object format + */ + init: function(series, options) { + var point = this, + defaultColors; + point.series = series; + point.applyOptions(options); + point.pointAttr = {}; + + if (series.options.colorByPoint) { + defaultColors = series.chart.options.colors; + if (!point.options) { + point.options = {}; + } + point.color = point.options.color = point.color || defaultColors[colorCounter++]; + + // loop back to zero + if (colorCounter >= defaultColors.length) { + colorCounter = 0; + } + } + + series.chart.pointCount++; + return point; + }, + /** + * Apply the options containing the x and y data and possible some extra properties. + * This is called on point init or from point.update. + * + * @param {Object} options + */ + applyOptions: function(options) { + var point = this, + series = point.series; + + point.config = options; + + // onedimensional array input + if (isNumber(options) || options === null) { + point.y = options; + } + + // object input + else if (isObject(options) && !isNumber(options.length)) { + + // copy options directly to point + extend(point, options); + point.options = options; + } + + // categorized data with name in first position + else if (isString(options[0])) { + point.name = options[0]; + point.y = options[1]; + } + + // two-dimentional array + else if (isNumber(options[0])) { + point.x = options[0]; + point.y = options[1]; + } + + /* + * If no x is set by now, get auto incremented value. All points must have an + * x value, however the y value can be null to create a gap in the series + */ + if (point.x === UNDEFINED) { + point.x = series.autoIncrement(); + } + + }, + + /** + * Destroy a point to clear memory. Its reference still stays in series.data. + */ + destroy: function() { + var point = this, + series = point.series, + prop; + + series.chart.pointCount--; + + if (point == series.chart.hoverPoint) { + point.onMouseOut(); + } + series.chart.hoverPoints = null; // remove reference + + // remove all events + removeEvent(point); + + each(['graphic', 'tracker', 'group', 'dataLabel', 'connector'], function(prop) { + if (point[prop]) { + point[prop].destroy(); + } + }); + + if (point.legendItem) { // pies have legend items + point.series.chart.legend.destroyItem(point); + } + + for (prop in point) { + point[prop] = null; + } + + + }, + + /** + * Toggle the selection status of a point + * @param {Boolean} selected Whether to select or unselect the point. + * @param {Boolean} accumulate Whether to add to the previous selection. By default, + * this happens if the control key (Cmd on Mac) was pressed during clicking. + */ + select: function(selected, accumulate) { + var point = this, + series = point.series, + chart = series.chart; + + point.selected = selected = pick(selected, !point.selected); + + //series.isDirty = true; + point.firePointEvent(selected ? 'select' : 'unselect'); + point.setState(selected && SELECT_STATE); + + // unselect all other points unless Ctrl or Cmd + click + if (!accumulate) { + each(chart.getSelectedPoints(), function (loopPoint) { + if (loopPoint.selected && loopPoint != point) { + loopPoint.selected = false; + loopPoint.setState(NORMAL_STATE); + loopPoint.firePointEvent('unselect'); + } + }); + } + + }, + + onMouseOver: function() { + var point = this, + chart = point.series.chart, + tooltip = chart.tooltip, + hoverPoint = chart.hoverPoint; + + // set normal state to previous series + if (hoverPoint && hoverPoint != point) { + hoverPoint.onMouseOut(); + } + + // trigger the event + point.firePointEvent('mouseOver'); + + // update the tooltip + if (tooltip && !tooltip.shared) { + tooltip.refresh(point); + } + + // hover this + point.setState(HOVER_STATE); + chart.hoverPoint = point; + }, + + onMouseOut: function() { + var point = this; + point.firePointEvent('mouseOut'); + + point.setState(); + point.series.chart.hoverPoint = null; + }, + + /** + * Extendable method for formatting each point's tooltip line + * + * @param {Boolean} useHeader Whether a common header is used for multiple series in the tooltip + * + * @return {String} A string to be concatenated in to the common tooltip text + */ + tooltipFormatter: function(useHeader) { + var point = this, + series = point.series; + + return ['', (point.name || series.name), ': ', + (!useHeader ? ('x = '+ (point.name || point.x) + ', ') : ''), + '', (!useHeader ? 'y = ' : '' ), point.y, '
'].join(''); + + }, + + /** + * Get the formatted text for this point's data label + * + * @return {String} The formatted data label pseudo-HTML + */ + getDataLabelText: function() { + var point = this; + return this.series.options.dataLabels.formatter.call({ + x: point.x, + y: point.y, + series: point.series, + point: point, + percentage: point.percentage, + total: point.total || point.stackTotal + }); + }, + + /** + * Update the point with new options (typically x/y data) and optionally redraw the series. + * + * @param {Object} options Point options as defined in the series.data array + * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call + * @param {Boolean|Object} animation Whether to apply animation, and optionally animation + * configuration + * + */ + update: function(options, redraw, animation) { + var point = this, + series = point.series, + dataLabel = point.dataLabel, + graphic = point.graphic, + chart = series.chart; + + redraw = pick(redraw, true); + + // fire the event with a default handler of doing the update + point.firePointEvent('update', { options: options }, function() { + + point.applyOptions(options); + + if (dataLabel) { + dataLabel.attr({ + text: point.getDataLabelText() + }) + } + + // update visuals + if (isObject(options)) { + series.getAttribs(); + if (graphic) { + graphic.attr(point.pointAttr[series.state]); + } + } + + // redraw + series.isDirty = true; + if (redraw) { + chart.redraw(animation); + } + }); + }, + + /** + * Remove a point and optionally redraw the series and if necessary the axes + * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call + * @param {Boolean|Object} animation Whether to apply animation, and optionally animation + * configuration + */ + remove: function(redraw, animation) { + var point = this, + series = point.series, + chart = series.chart, + data = series.data; + + setAnimation(animation, chart); + redraw = pick(redraw, true); + + // fire the event with a default handler of removing the point + point.firePointEvent('remove', null, function() { + + erase(data, point); + + point.destroy(); + + + // redraw + series.isDirty = true; + if (redraw) { + chart.redraw(); + } + }); + + + }, + + /** + * Fire an event on the Point object. Must not be renamed to fireEvent, as this + * causes a name clash in MooTools + * @param {String} eventType + * @param {Object} eventArgs Additional event arguments + * @param {Function} defaultFunction Default event handler + */ + firePointEvent: function(eventType, eventArgs, defaultFunction) { + var point = this, + series = this.series, + seriesOptions = series.options; + + // load event handlers on demand to save time on mouseover/out + if (seriesOptions.point.events[eventType] || ( + point.options && point.options.events && point.options.events[eventType])) { + this.importEvents(); + } + + // add default handler if in selection mode + if (eventType == 'click' && seriesOptions.allowPointSelect) { + defaultFunction = function (event) { + // Control key is for Windows, meta (= Cmd key) for Mac, Shift for Opera + point.select(null, event.ctrlKey || event.metaKey || event.shiftKey); + }; + } + + fireEvent(this, eventType, eventArgs, defaultFunction); + }, + /** + * Import events from the series' and point's options. Only do it on + * demand, to save processing time on hovering. + */ + importEvents: function() { + if (!this.hasImportedEvents) { + var point = this, + options = merge(point.series.options.point, point.options), + events = options.events, + eventType; + + point.events = events; + + for (eventType in events) { + addEvent(point, eventType, events[eventType]); + } + this.hasImportedEvents = true; + + } + }, + + /** + * Set the point's state + * @param {String} state + */ + setState: function(state) { + var point = this, + series = point.series, + stateOptions = series.options.states, + markerOptions = defaultPlotOptions[series.type].marker && series.options.marker, + normalDisabled = markerOptions && !markerOptions.enabled, + markerStateOptions = markerOptions && markerOptions.states[state], + stateDisabled = markerStateOptions && markerStateOptions.enabled === false, + stateMarkerGraphic = series.stateMarkerGraphic, + chart = series.chart, + pointAttr = point.pointAttr; + + if (!state) { + state = NORMAL_STATE; // empty string + } + + if ( + // already has this state + state == point.state || + // selected points don't respond to hover + (point.selected && state != SELECT_STATE) || + // series' state options is disabled + (stateOptions[state] && stateOptions[state].enabled === false) || + // point marker's state options is disabled + (state && (stateDisabled || normalDisabled && !markerStateOptions.enabled)) + + ) { + return; + } + + // apply hover styles to the existing point + if (point.graphic) { + point.graphic.attr(pointAttr[state]); + } + // if a graphic is not applied to each point in the normal state, create a shared + // graphic for the hover state + else { + if (state) { + if (!stateMarkerGraphic) { + series.stateMarkerGraphic = stateMarkerGraphic = chart.renderer.circle( + 0, 0, pointAttr[state].r + ) + .attr(pointAttr[state]) + .add(series.group); + } + + stateMarkerGraphic.translate( + point.plotX, + point.plotY + ); + } + + if (stateMarkerGraphic) { + stateMarkerGraphic[state ? 'show' : 'hide'](); + } + } + + point.state = state; + } +}; + +/** + * The base function which all other series types inherit from + * @param {Object} chart + * @param {Object} options + */ +var Series = function() {}; + +Series.prototype = { + + isCartesian: true, + type: 'line', + pointClass: Point, + pointAttrToOptions: { // mapping between SVG attributes and the corresponding options + stroke: 'lineColor', + 'stroke-width': 'lineWidth', + fill: 'fillColor', + r: 'radius' + }, + init: function(chart, options) { + var series = this, + eventType, + events, + //pointEvent, + index = chart.series.length; + + series.chart = chart; + options = series.setOptions(options); // merge with plotOptions + + // set some variables + extend(series, { + index: index, + options: options, + name: options.name || 'Series '+ (index + 1), + state: NORMAL_STATE, + pointAttr: {}, + visible: options.visible !== false, // true by default + selected: options.selected === true // false by default + }); + + // register event listeners + events = options.events; + for (eventType in events) { + addEvent(series, eventType, events[eventType]); + } + if ( + (events && events.click) || + (options.point && options.point.events && options.point.events.click) || + options.allowPointSelect + ) { + chart.runTrackerClick = true; + } + + series.getColor(); + series.getSymbol(); + + // set the data + series.setData(options.data, false); + + }, + + + /** + * Return an auto incremented x value based on the pointStart and pointInterval options. + * This is only used if an x value is not given for the point that calls autoIncrement. + */ + autoIncrement: function() { + var series = this, + options = series.options, + xIncrement = series.xIncrement; + + xIncrement = pick(xIncrement, options.pointStart, 0); + + series.pointInterval = pick(series.pointInterval, options.pointInterval, 1); + + series.xIncrement = xIncrement + series.pointInterval; + return xIncrement; + }, + + /** + * Sort the data and remove duplicates + */ + cleanData: function() { + var series = this, + chart = series.chart, + data = series.data, + closestPoints, + smallestInterval, + chartSmallestInterval = chart.smallestInterval, + interval, + i; + + // sort the data points + data.sort(function(a, b){ + return (a.x - b.x); + }); + + // remove points with equal x values + // record the closest distance for calculation of column widths + for (i = data.length - 1; i >= 0; i--) { + if (data[i - 1]) { + if (data[i - 1].x == data[i].x) { + data.splice(i - 1, 1); // remove the duplicate + } + + } + } + + + // find the closes pair of points + for (i = data.length - 1; i >= 0; i--) { + if (data[i - 1]) { + interval = data[i].x - data[i - 1].x; + if (smallestInterval === UNDEFINED || interval < smallestInterval) { + smallestInterval = interval; + closestPoints = i; + } + } + } + + if (chartSmallestInterval === UNDEFINED || smallestInterval < chartSmallestInterval) { + chart.smallestInterval = smallestInterval; + } + series.closestPoints = closestPoints; + }, + + /** + * Divide the series data into segments divided by null values. Also sort + * the data points and delete duplicate values. + */ + getSegments: function() { + var lastNull = -1, + segments = [], + data = this.data; + + // create the segments + each(data, function(point, i) { + if (point.y === null) { + if (i > lastNull + 1) { + segments.push(data.slice(lastNull + 1, i)); + } + lastNull = i; + } else if (i == data.length - 1) { // last value + segments.push(data.slice(lastNull + 1, i + 1)); + } + }); + this.segments = segments; + + + }, + /** + * Set the series options by merging from the options tree + * @param {Object} itemOptions + */ + setOptions: function(itemOptions) { + var plotOptions = this.chart.options.plotOptions, + options = merge( + plotOptions[this.type], + plotOptions.series, + itemOptions + ); + + return options; + + }, + /** + * Get the series' color + */ + getColor: function(){ + var defaultColors = this.chart.options.colors; + this.color = this.options.color || defaultColors[colorCounter++] || '#0000ff'; + if (colorCounter >= defaultColors.length) { + colorCounter = 0; + } + }, + /** + * Get the series' symbol + */ + getSymbol: function(){ + var defaultSymbols = this.chart.options.symbols, + symbol = this.options.marker.symbol || defaultSymbols[symbolCounter++]; + this.symbol = symbol; + if (symbolCounter >= defaultSymbols.length) { + symbolCounter = 0; + } + }, + + /** + * Add a point dynamically after chart load time + * @param {Object} options Point options as given in series.data + * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call + * @param {Boolean} shift If shift is true, a point is shifted off the start + * of the series as one is appended to the end. + * @param {Boolean|Object} animation Whether to apply animation, and optionally animation + * configuration + */ + addPoint: function(options, redraw, shift, animation) { + var series = this, + data = series.data, + graph = series.graph, + area = series.area, + chart = series.chart, + point = (new series.pointClass()).init(series, options); + + setAnimation(animation, chart); + + if (graph && shift) { // make graph animate sideways + graph.shift = shift; + } + if (area) { + area.shift = shift; + area.isArea = true; + } + + redraw = pick(redraw, true); + + data.push(point); + if (shift) { + data[0].remove(false); + } + + + // redraw + series.isDirty = true; + if (redraw) { + chart.redraw(); + } + }, + + /** + * Replace the series data with a new set of data + * @param {Object} data + * @param {Object} redraw + */ + setData: function(data, redraw) { + var series = this, + oldData = series.data, + initialColor = series.initialColor, + chart = series.chart, + i = oldData && oldData.length || 0; + + series.xIncrement = null; // reset for new data + if (defined(initialColor)) { // reset colors for pie + colorCounter = initialColor; + } + + data = map(splat(data || []), function(pointOptions) { + return (new series.pointClass()).init(series, pointOptions); + }); + + // destroy old points + while (i--) { + oldData[i].destroy(); + } + + // set the data + series.data = data; + + series.cleanData(); + series.getSegments(); + + // redraw + series.isDirty = true; + chart.isDirtyBox = true; + if (pick(redraw, true)) { + chart.redraw(false); + } + }, + + /** + * Remove a series and optionally redraw the chart + * + * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call + * @param {Boolean|Object} animation Whether to apply animation, and optionally animation + * configuration + */ + + remove: function(redraw, animation) { + var series = this, + chart = series.chart; + redraw = pick(redraw, true); + + if (!series.isRemoving) { /* prevent triggering native event in jQuery + (calling the remove function from the remove event) */ + series.isRemoving = true; + + // fire the event with a default handler of removing the point + fireEvent(series, 'remove', null, function() { + + + // destroy elements + series.destroy(); + + + // redraw + chart.isDirtyLegend = chart.isDirtyBox = true; + if (redraw) { + chart.redraw(animation); + } + }); + + } + series.isRemoving = false; + }, + + /** + * Translate data points from raw data values to chart specific positioning data + * needed later in drawPoints, drawGraph and drawTracker. + */ + translate: function() { + var series = this, + chart = series.chart, + stacking = series.options.stacking, + categories = series.xAxis.categories, + yAxis = series.yAxis, + data = series.data, + i = data.length; + + // do the translation + while (i--) { + var point = data[i], + xValue = point.x, + yValue = point.y, + yBottom = point.low, + stack = yAxis.stacks[(yValue < 0 ? '-' : '') + series.stackKey], + pointStack, + pointStackTotal; + point.plotX = series.xAxis.translate(xValue); + + // calculate the bottom y value for stacked series + if (stacking && series.visible && stack && stack[xValue]) { + pointStack = stack[xValue]; + pointStackTotal = pointStack.total; + pointStack.cum = yBottom = pointStack.cum - yValue; // start from top + yValue = yBottom + yValue; + + if (stacking == 'percent') { + yBottom = pointStackTotal ? yBottom * 100 / pointStackTotal : 0; + yValue = pointStackTotal ? yValue * 100 / pointStackTotal : 0; + } + + point.percentage = pointStackTotal ? point.y * 100 / pointStackTotal : 0; + point.stackTotal = pointStackTotal; + } + + if (defined(yBottom)) { + point.yBottom = yAxis.translate(yBottom, 0, 1); + } + + // set the y value + if (yValue !== null) { + point.plotY = yAxis.translate(yValue, 0, 1); + } + + // set client related positions for mouse tracking + point.clientX = chart.inverted ? + chart.plotHeight - point.plotX : + point.plotX; // for mouse tracking + + // some API data + point.category = categories && categories[point.x] !== UNDEFINED ? + categories[point.x] : point.x; + + } + }, + /** + * Memoize tooltip texts and positions + */ + setTooltipPoints: function (renew) { + var series = this, + chart = series.chart, + inverted = chart.inverted, + data = [], + plotSize = mathRound((inverted ? chart.plotTop : chart.plotLeft) + chart.plotSizeX), + low, + high, + tooltipPoints = []; // a lookup array for each pixel in the x dimension + + // renew + if (renew) { + series.tooltipPoints = null; + } + + // concat segments to overcome null values + each(series.segments, function(segment){ + data = data.concat(segment); + }); + + // loop the concatenated data and apply each point to all the closest + // pixel positions + if (series.xAxis && series.xAxis.reversed) { + data = data.reverse();//reverseArray(data); + } + + each(data, function(point, i) { + + low = data[i - 1] ? data[i - 1].high + 1 : 0; + high = point.high = data[i + 1] ? ( + mathFloor((point.plotX + (data[i + 1] ? + data[i + 1].plotX : plotSize)) / 2)) : + plotSize; + + while (low <= high) { + tooltipPoints[inverted ? plotSize - low++ : low++] = point; + } + }); + series.tooltipPoints = tooltipPoints; + }, + + + + + /** + * Series mouse over handler + */ + onMouseOver: function() { + var series = this, + chart = series.chart, + hoverSeries = chart.hoverSeries; + + if (!hasTouch && chart.mouseIsDown) { + return; + } + + // set normal state to previous series + if (hoverSeries && hoverSeries != series) { + hoverSeries.onMouseOut(); + } + + // trigger the event, but to save processing time, + // only if defined + if (series.options.events.mouseOver) { + fireEvent(series, 'mouseOver'); + } + + + // bring to front + // Todo: optimize. This is one of two operations slowing down the tooltip in Firefox. + // Can the tracking be done otherwise? + if (series.tracker) { + series.tracker.toFront(); + } + + // hover this + series.setState(HOVER_STATE); + chart.hoverSeries = series; + }, + + /** + * Series mouse out handler + */ + onMouseOut: function() { + // trigger the event only if listeners exist + var series = this, + options = series.options, + chart = series.chart, + tooltip = chart.tooltip, + hoverPoint = chart.hoverPoint; + + // trigger mouse out on the point, which must be in this series + if (hoverPoint) { + hoverPoint.onMouseOut(); + } + + // fire the mouse out event + if (series && options.events.mouseOut) { + fireEvent(series, 'mouseOut'); + } + + + // hide the tooltip + if (tooltip && !options.stickyTracking) { + tooltip.hide(); + } + + // set normal state + series.setState(); + chart.hoverSeries = null; + }, + + /** + * Animate in the series + */ + animate: function(init) { + var series = this, + chart = series.chart, + clipRect = series.clipRect, + animation = series.options.animation; + + if (animation && !isObject(animation)) { + animation = {}; + } + + if (init) { // initialize the animation + if (!clipRect.isAnimating) { // apply it only for one of the series + clipRect.attr( 'width', 0 ); + clipRect.isAnimating = true; + } + + } else { // run the animation + clipRect.animate({ + width: chart.plotSizeX + }, animation); + + // delete this function to allow it only once + this.animate = null; + } + }, + + + /** + * Draw the markers + */ + drawPoints: function(){ + var series = this, + pointAttr, + data = series.data, + chart = series.chart, + plotX, + plotY, + i, + point, + radius, + graphic; + + if (series.options.marker.enabled) { + i = data.length; + while (i--) { + point = data[i]; + plotX = point.plotX; + plotY = point.plotY; + graphic = point.graphic; + + // only draw the point if y is defined + if (plotY !== UNDEFINED && !isNaN(plotY)) { + + /* && removed this code because points stayed after zoom + point.plotX >= 0 && point.plotX <= chart.plotSizeX && + point.plotY >= 0 && point.plotY <= chart.plotSizeY*/ + + // shortcuts + pointAttr = point.pointAttr[point.selected ? SELECT_STATE : NORMAL_STATE]; + radius = pointAttr.r; + + if (graphic) { // update + graphic.animate({ + x: plotX, + y: plotY, + r: radius + }); + } else { + point.graphic = chart.renderer.symbol( + pick(point.marker && point.marker.symbol, series.symbol), + plotX, + plotY, + radius + ) + .attr(pointAttr) + .add(series.group); + } + } + } + } + + }, + + /** + * Convert state properties from API naming conventions to SVG attributes + * + * @param {Object} options API options object + * @param {Object} base1 SVG attribute object to inherit from + * @param {Object} base2 Second level SVG attribute object to inherit from + */ + convertAttribs: function(options, base1, base2, base3) { + var conversion = this.pointAttrToOptions, + attr, + option, + obj = {}; + + options = options || {}; + base1 = base1 || {}; + base2 = base2 || {}; + base3 = base3 || {}; + + for (attr in conversion) { + option = conversion[attr]; + obj[attr] = pick(options[option], base1[attr], base2[attr], base3[attr]); + } + return obj; + }, + + /** + * Get the state attributes. Each series type has its own set of attributes + * that are allowed to change on a point's state change. Series wide attributes are stored for + * all series, and additionally point specific attributes are stored for all + * points with individual marker options. If such options are not defined for the point, + * a reference to the series wide attributes is stored in point.pointAttr. + */ + getAttribs: function() { + var series = this, + normalOptions = defaultPlotOptions[series.type].marker ? series.options.marker : series.options, + stateOptions = normalOptions.states, + stateOptionsHover = stateOptions[HOVER_STATE], + pointStateOptionsHover, + seriesColor = series.color, + normalDefaults = { + stroke: seriesColor, + fill: seriesColor + }, + data = series.data, + i, + point, + seriesPointAttr = [], + pointAttr, + pointAttrToOptions = series.pointAttrToOptions, + hasPointSpecificOptions; + + // series type specific modifications + if (series.options.marker) { // line, spline, area, areaspline, scatter + + // if no hover radius is given, default to normal radius + 2 + stateOptionsHover.radius = stateOptionsHover.radius || normalOptions.radius + 2; + stateOptionsHover.lineWidth = stateOptionsHover.lineWidth || normalOptions.lineWidth + 1; + + } else { // column, bar, pie + + // if no hover color is given, brighten the normal color + stateOptionsHover.color = stateOptionsHover.color || + Color(stateOptionsHover.color || seriesColor) + .brighten(stateOptionsHover.brightness).get(); + } + + // general point attributes for the series normal state + seriesPointAttr[NORMAL_STATE] = series.convertAttribs(normalOptions, normalDefaults); + + // HOVER_STATE and SELECT_STATE states inherit from normal state except the default radius + each([HOVER_STATE, SELECT_STATE], function(state) { + seriesPointAttr[state] = + series.convertAttribs(stateOptions[state], seriesPointAttr[NORMAL_STATE]); + }); + + // set it + series.pointAttr = seriesPointAttr; + + + // Generate the point-specific attribute collections if specific point + // options are given. If not, create a referance to the series wide point + // attributes + i = data.length; + while (i--) { + point = data[i]; + normalOptions = (point.options && point.options.marker) || point.options; + if (normalOptions && normalOptions.enabled === false) { + normalOptions.radius = 0; + } + hasPointSpecificOptions = false; + + // check if the point has specific visual options + if (point.options) { + for (var key in pointAttrToOptions) { + if (defined(normalOptions[pointAttrToOptions[key]])) { + hasPointSpecificOptions = true; + } + } + } + + + + // a specific marker config object is defined for the individual point: + // create it's own attribute collection + if (hasPointSpecificOptions) { + + pointAttr = []; + stateOptions = normalOptions.states || {}; // reassign for individual point + pointStateOptionsHover = stateOptions[HOVER_STATE] = stateOptions[HOVER_STATE] || {}; + + // if no hover color is given, brighten the normal color + if (!series.options.marker) { // column, bar, point + pointStateOptionsHover.color = + Color(pointStateOptionsHover.color || point.options.color) + .brighten(pointStateOptionsHover.brightness || + stateOptionsHover.brightness).get(); + + } + + // normal point state inherits series wide normal state + pointAttr[NORMAL_STATE] = series.convertAttribs(normalOptions, seriesPointAttr[NORMAL_STATE]); + + // inherit from point normal and series hover + pointAttr[HOVER_STATE] = series.convertAttribs( + stateOptions[HOVER_STATE], + seriesPointAttr[HOVER_STATE], + pointAttr[NORMAL_STATE] + ); + // inherit from point normal and series hover + pointAttr[SELECT_STATE] = series.convertAttribs( + stateOptions[SELECT_STATE], + seriesPointAttr[SELECT_STATE], + pointAttr[NORMAL_STATE] + ); + + + + // no marker config object is created: copy a reference to the series-wide + // attribute collection + } else { + pointAttr = seriesPointAttr; + } + + point.pointAttr = pointAttr; + + } + + }, + + + /** + * Clear DOM objects and free up memory + */ + destroy: function() { + var series = this, + chart = series.chart, + //chartSeries = series.chart.series, + clipRect = series.clipRect, + issue134 = /\/5[0-9\.]+ (Safari|Mobile)\//.test(userAgent), // todo: update when Safari bug is fixed + destroy, + prop; + + // remove all events + removeEvent(series); + + // remove legend items + if (series.legendItem) { + series.chart.legend.destroyItem(series); + } + + // destroy all points with their elements + each(series.data, function(point) { + point.destroy(); + }); + // destroy all SVGElements associated to the series + each(['area', 'graph', 'dataLabelsGroup', 'group', 'tracker'], function(prop) { + if (series[prop]) { + + // issue 134 workaround + destroy = issue134 && prop == 'group' ? + 'hide' : + 'destroy'; + + series[prop][destroy](); + } + }); + + // remove from hoverSeries + if (chart.hoverSeries == series) { + chart.hoverSeries = null; + } + erase(chart.series, series); + + // clear all members + for (prop in series) { + delete series[prop]; + } + }, + + /** + * Draw the data labels + */ + drawDataLabels: function() { + if (this.options.dataLabels.enabled) { + var series = this, + x, + y, + data = series.data, + options = series.options.dataLabels, + str, + dataLabelsGroup = series.dataLabelsGroup, + chart = series.chart, + inverted = chart.inverted, + seriesType = series.type, + color; + + // create a separate group for the data labels to avoid rotation + if (!dataLabelsGroup) { + dataLabelsGroup = series.dataLabelsGroup = + chart.renderer.g(PREFIX +'data-labels') + .attr({ + visibility: series.visible ? VISIBLE : HIDDEN, + zIndex: 5 + }) + .translate(chart.plotLeft, chart.plotTop) + .add(); + } + + // determine the color + color = options.color; + if (color == 'auto') { // 1.0 backwards compatibility + color = null; + } + options.style.color = pick(color, series.color); + + // make the labels for each point + each(data, function(point, i){ + var barX = point.barX, + plotX = barX && barX + point.barW / 2 || point.plotX || -999, + plotY = pick(point.plotY, -999), + dataLabel = point.dataLabel, + align = options.align; + + // get the string + str = point.getDataLabelText(); + x = (inverted ? chart.plotWidth - plotY : plotX) + options.x; + y = (inverted ? chart.plotHeight - plotX : plotY) + options.y; + + // in columns, align the string to the column + if (seriesType == 'column') { + x += { left: -1, right: 1 }[align] * point.barW / 2 || 0; + } + + + if (dataLabel) { + dataLabel.animate({ + x: x, + y: y + }); + } else if (defined(str)) { + dataLabel = point.dataLabel = chart.renderer.text( + str, + x, + y + ) + .attr({ + align: align, + rotation: options.rotation, + zIndex: 1 + }) + .css(options.style) + .add(dataLabelsGroup); + } + + // vertically centered + if (inverted && !options.y) { + dataLabel.attr({ + y: y + parseInt(dataLabel.styles.lineHeight) * 0.9 - dataLabel.getBBox().height / 2 + }); + } + + /*if (series.isCartesian) { + dataLabel[chart.isInsidePlot(plotX, plotY) ? 'show' : 'hide'](); + }*/ + + }); + } + }, + + /** + * Draw the actual graph + */ + drawGraph: function(state) { + var series = this, + options = series.options, + chart = series.chart, + graph = series.graph, + graphPath = [], + fillColor, + area = series.area, + group = series.group, + color = options.lineColor || series.color, + lineWidth = options.lineWidth, + dashStyle = options.dashStyle, + segmentPath, + renderer = chart.renderer, + translatedThreshold = series.yAxis.getThreshold(options.threshold || 0), + useArea = /^area/.test(series.type), + singlePoints = [], // used in drawTracker + areaPath = [], + attribs; + + + // divide into segments and build graph and area paths + each(series.segments, function(segment) { + segmentPath = []; + + // build the segment line + each(segment, function(point, i) { + + if (series.getPointSpline) { // generate the spline as defined in the SplineSeries object + segmentPath.push.apply(segmentPath, series.getPointSpline(segment, point, i)); + + } else { + + // moveTo or lineTo + segmentPath.push(i ? L : M); + + // step line? + if (i && options.step) { + var lastPoint = segment[i - 1]; + segmentPath.push( + point.plotX, + lastPoint.plotY + ); + } + + // normal line to next point + segmentPath.push( + point.plotX, + point.plotY + ); + } + }); + + // add the segment to the graph, or a single point for tracking + if (segment.length > 1) { + graphPath = graphPath.concat(segmentPath); + } else { + singlePoints.push(segment[0]); + } + + // build the area + if (useArea) { + var areaSegmentPath = [], + i, + segLength = segmentPath.length; + for (i = 0; i < segLength; i++) { + areaSegmentPath.push(segmentPath[i]); + } + if (segLength == 3) { // for animation from 1 to two points + areaSegmentPath.push(L, segmentPath[1], segmentPath[2]); + } + if (options.stacking && series.type != 'areaspline') { + // follow stack back. Todo: implement areaspline + for (i = segment.length - 1; i >= 0; i--) { + areaSegmentPath.push(segment[i].plotX, segment[i].yBottom); + } + + } else { // follow zero line back + areaSegmentPath.push( + L, + segment[segment.length - 1].plotX, + translatedThreshold, + L, + segment[0].plotX, + translatedThreshold + ); + } + areaPath = areaPath.concat(areaSegmentPath); + } + }); + + // used in drawTracker: + series.graphPath = graphPath; + series.singlePoints = singlePoints; + + // draw the area if area series or areaspline + if (useArea) { + fillColor = pick( + options.fillColor, + Color(series.color).setOpacity(options.fillOpacity || 0.75).get() + ); + if (area) { + area.animate({ d: areaPath }); + + } else { + // draw the area + series.area = series.chart.renderer.path(areaPath) + .attr({ + fill: fillColor + }).add(group); + } + } + + // draw the graph + if (graph) { + //graph.animate({ d: graphPath.join(' ') }); + graph.animate({ d: graphPath }); + + } else { + if (lineWidth) { + attribs = { + 'stroke': color, + 'stroke-width': lineWidth + }; + if (dashStyle) { + attribs.dashstyle = dashStyle; + } + + series.graph = renderer.path(graphPath) + .attr(attribs).add(group).shadow(options.shadow); + } + } + }, + + + /** + * Render the graph and markers + */ + render: function() { + var series = this, + chart = series.chart, + group, + setInvert, + options = series.options, + animation = options.animation, + doAnimation = animation && series.animate, + duration = doAnimation ? animation && animation.duration || 500 : 0, + clipRect = series.clipRect, + renderer = chart.renderer; + + + // Add plot area clipping rectangle. If this is before chart.hasRendered, + // create one shared clipRect. + if (!clipRect) { + clipRect = series.clipRect = !chart.hasRendered && chart.clipRect ? + chart.clipRect : + renderer.clipRect(0, 0, chart.plotSizeX, chart.plotSizeY); + if (!chart.clipRect) { + chart.clipRect = clipRect; + } + } + + + // the group + if (!series.group) { + group = series.group = renderer.g('series'); + + if (chart.inverted) { + setInvert = function() { + group.attr({ + width: chart.plotWidth, + height: chart.plotHeight + }).invert(); + }; + + setInvert(); // do it now + addEvent(chart, 'resize', setInvert); // do it on resize + } + group.clip(series.clipRect) + .attr({ + visibility: series.visible ? VISIBLE : HIDDEN, + zIndex: options.zIndex + }) + .translate(chart.plotLeft, chart.plotTop) + .add(chart.seriesGroup); + } + + series.drawDataLabels(); + + // initiate the animation + if (doAnimation) { + series.animate(true); + } + + // cache attributes for shapes + series.getAttribs(); + + // draw the graph if any + if (series.drawGraph) { + series.drawGraph(); + } + + // draw the points + series.drawPoints(); + + // draw the mouse tracking area + if (series.options.enableMouseTracking !== false) { + series.drawTracker(); + } + + // run the animation + if (doAnimation) { + series.animate(); + } + + // finish the individual clipRect + setTimeout(function() { + clipRect.isAnimating = false; + group = series.group; // can be destroyed during the timeout + if (group && clipRect != chart.clipRect && clipRect.renderer) { + group.clip((series.clipRect = chart.clipRect)); + clipRect.destroy(); + } + }, duration); + + + series.isDirty = false; // means data is in accordance with what you see + + }, + + /** + * Redraw the series after an update in the axes. + */ + redraw: function() { + var series = this, + chart = series.chart, + clipRect = series.clipRect, + group = series.group; + + /*if (clipRect) { + stop(clipRect); + clipRect.animate({ // for chart resize + width: chart.plotSizeX, + height: chart.plotSizeY + }); + }*/ + + // reposition on resize + if (group) { + if (chart.inverted) { + group.attr({ + width: chart.plotWidth, + height: chart.plotHeight + }); + } + + group.animate({ + translateX: chart.plotLeft, + translateY: chart.plotTop + }); + } + + series.translate(); + series.setTooltipPoints(true); + series.render(); + }, + + /** + * Set the state of the graph + */ + setState: function(state) { + var series = this, + options = series.options, + graph = series.graph, + stateOptions = options.states, + lineWidth = options.lineWidth; + + state = state || NORMAL_STATE; + + if (series.state != state) { + series.state = state; + + if (stateOptions[state] && stateOptions[state].enabled === false) { + return; + } + + if (state) { + lineWidth = stateOptions[state].lineWidth || lineWidth + 1; + } + + if (graph && !graph.dashstyle) { // hover is turned off for dashed lines in VML + graph.attr({ // use attr because animate will cause any other animation on the graph to stop + 'stroke-width': lineWidth + }, state ? 0 : 500); + } + } + }, + + /** + * Set the visibility of the graph + * + * @param vis {Boolean} True to show the series, false to hide. If UNDEFINED, + * the visibility is toggled. + */ + setVisible: function(vis, redraw) { + var series = this, + chart = series.chart, + legendItem = series.legendItem, + seriesGroup = series.group, + seriesTracker = series.tracker, + dataLabelsGroup = series.dataLabelsGroup, + showOrHide, + i, + data = series.data, + point, + ignoreHiddenSeries = chart.options.chart.ignoreHiddenSeries, + oldVisibility = series.visible; + + // if called without an argument, toggle visibility + series.visible = vis = vis === UNDEFINED ? !oldVisibility : vis; + showOrHide = vis ? 'show' : 'hide'; + + // show or hide series + if (seriesGroup) { // pies don't have one + seriesGroup[showOrHide](); + } + + // show or hide trackers + if (seriesTracker) { + seriesTracker[showOrHide](); + } else { + i = data.length; + while (i--) { + point = data[i]; + if (point.tracker) { + point.tracker[showOrHide](); + } + } + } + + + if (dataLabelsGroup) { + dataLabelsGroup[showOrHide](); + } + + if (legendItem) { + chart.legend.colorizeItem(series, vis); + } + + + // rescale or adapt to resized chart + series.isDirty = true; + // in a stack, all other series are affected + if (series.options.stacking) { + each(chart.series, function(otherSeries) { + if (otherSeries.options.stacking && otherSeries.visible) { + otherSeries.isDirty = true; + } + }); + } + + if (ignoreHiddenSeries) { + chart.isDirtyBox = true; + } + if (redraw !== false) { + chart.redraw(); + } + + fireEvent(series, showOrHide); + }, + + /** + * Show the graph + */ + show: function() { + this.setVisible(true); + }, + + /** + * Hide the graph + */ + hide: function() { + this.setVisible(false); + }, + + + /** + * Set the selected state of the graph + * + * @param selected {Boolean} True to select the series, false to unselect. If + * UNDEFINED, the selection state is toggled. + */ + select: function(selected) { + var series = this; + // if called without an argument, toggle + series.selected = selected = (selected === UNDEFINED) ? !series.selected : selected; + + if (series.checkbox) { + series.checkbox.checked = selected; + } + + fireEvent(series, selected ? 'select' : 'unselect'); + }, + + + /** + * Draw the tracker object that sits above all data labels and markers to + * track mouse events on the graph or points. For the line type charts + * the tracker uses the same graphPath, but with a greater stroke width + * for better control. + */ + drawTracker: function() { + var series = this, + options = series.options, + trackerPath = [].concat(series.graphPath), + trackerPathLength = trackerPath.length, + chart = series.chart, + snap = chart.options.tooltip.snap, + tracker = series.tracker, + cursor = options.cursor, + css = cursor && { cursor: cursor }, + singlePoints = series.singlePoints, + singlePoint, + i; + + // Extend end points. A better way would be to use round linecaps, + // but those are not clickable in VML. + if (trackerPathLength) { + i = trackerPathLength + 1; + while (i--) { + if (trackerPath[i] == M) { // extend left side + trackerPath.splice(i + 1, 0, trackerPath[i + 1] - snap, trackerPath[i + 2], L); + } + if ((i && trackerPath[i] == M) || i == trackerPathLength) { // extend right side + trackerPath.splice(i, 0, L, trackerPath[i - 2] + snap, trackerPath[i - 1]); + } + } + } + + // handle single points + for (i = 0; i < singlePoints.length; i++) { + singlePoint = singlePoints[i]; + trackerPath.push(M, singlePoint.plotX - snap, singlePoint.plotY, + L, singlePoint.plotX + snap, singlePoint.plotY); + } + + // draw the tracker + if (tracker) { + tracker.attr({ d: trackerPath }); + + } else { // create + series.tracker = chart.renderer.path(trackerPath) + .attr({ + isTracker: true, + stroke: TRACKER_FILL, + fill: NONE, + 'stroke-width' : options.lineWidth + 2 * snap, + visibility: series.visible ? VISIBLE : HIDDEN, + zIndex: 1 + }) + .on(hasTouch ? 'touchstart' : 'mouseover', function() { + if (chart.hoverSeries != series) { + series.onMouseOver(); + } + }) + .on('mouseout', function() { + if (!options.stickyTracking) { + series.onMouseOut(); + } + }) + .css(css) + .add(chart.trackerGroup); + } + + } + +}; // end Series prototype + + +/** + * LineSeries object + */ +var LineSeries = extendClass(Series); +seriesTypes.line = LineSeries; + +/** + * AreaSeries object + */ +var AreaSeries = extendClass(Series, { + type: 'area' +}); +seriesTypes.area = AreaSeries; + + + + +/** + * SplineSeries object + */ +var SplineSeries = extendClass( Series, { + type: 'spline', + + /** + * Draw the actual graph + */ + getPointSpline: function(segment, point, i) { + var smoothing = 1.5, // 1 means control points midway between points, 2 means 1/3 from the point, 3 is 1/4 etc + denom = smoothing + 1, + plotX = point.plotX, + plotY = point.plotY, + lastPoint = segment[i - 1], + nextPoint = segment[i + 1], + leftContX, + leftContY, + rightContX, + rightContY, + ret; + + // find control points + if (i && i < segment.length - 1) { + var lastX = lastPoint.plotX, + lastY = lastPoint.plotY, + nextX = nextPoint.plotX, + nextY = nextPoint.plotY, + correction; + + leftContX = (smoothing * plotX + lastX) / denom; + leftContY = (smoothing * plotY + lastY) / denom; + rightContX = (smoothing * plotX + nextX) / denom; + rightContY = (smoothing * plotY + nextY) / denom; + + // have the two control points make a straight line through main point + correction = ((rightContY - leftContY) * (rightContX - plotX)) / + (rightContX - leftContX) + plotY - rightContY; + + leftContY += correction; + rightContY += correction; + + // to prevent false extremes, check that control points are between + // neighbouring points' y values + if (leftContY > lastY && leftContY > plotY) { + leftContY = mathMax(lastY, plotY); + rightContY = 2 * plotY - leftContY; // mirror of left control point + } else if (leftContY < lastY && leftContY < plotY) { + leftContY = mathMin(lastY, plotY); + rightContY = 2 * plotY - leftContY; + } + if (rightContY > nextY && rightContY > plotY) { + rightContY = mathMax(nextY, plotY); + leftContY = 2 * plotY - rightContY; + } else if (rightContY < nextY && rightContY < plotY) { + rightContY = mathMin(nextY, plotY); + leftContY = 2 * plotY - rightContY; + } + + // record for drawing in next point + point.rightContX = rightContX; + point.rightContY = rightContY; + + } + + // moveTo or lineTo + if (!i) { + ret = [M, plotX, plotY]; + } + + // curve from last point to this + else { + ret = [ + 'C', + lastPoint.rightContX || lastPoint.plotX, + lastPoint.rightContY || lastPoint.plotY, + leftContX || plotX, + leftContY || plotY, + plotX, + plotY + ]; + lastPoint.rightContX = lastPoint.rightContY = null; // reset for updating series later + } + return ret; + } +}); +seriesTypes.spline = SplineSeries; + + + +/** + * AreaSplineSeries object + */ +var AreaSplineSeries = extendClass(SplineSeries, { + type: 'areaspline' +}); +seriesTypes.areaspline = AreaSplineSeries; + +/** + * ColumnSeries object + */ +var ColumnSeries = extendClass(Series, { + type: 'column', + pointAttrToOptions: { // mapping between SVG attributes and the corresponding options + stroke: 'borderColor', + 'stroke-width': 'borderWidth', + fill: 'color', + r: 'borderRadius' + }, + init: function() { + Series.prototype.init.apply(this, arguments); + + var series = this, + chart = series.chart; + + // flag the chart in order to pad the x axis + chart.hasColumn = true; + + // if the series is added dynamically, force redraw of other + // series affected by a new column + if (chart.hasRendered) { + each(chart.series, function(otherSeries) { + if (otherSeries.type == series.type) { + otherSeries.isDirty = true; + } + }); + } + }, + + /** + * Translate each point to the plot area coordinate system and find shape positions + */ + translate: function() { + var series = this, + chart = series.chart, + columnCount = 0, + reversedXAxis = series.xAxis.reversed, + categories = series.xAxis.categories, + stackGroups = {}, + stackKey, + columnIndex; + + Series.prototype.translate.apply(series); + + // Get the total number of column type series. + // This is called on every series. Consider moving this logic to a + // chart.orderStacks() function and call it on init, addSeries and removeSeries + each(chart.series, function(otherSeries) { + if (otherSeries.type == series.type) { + if (otherSeries.options.stacking) { + stackKey = otherSeries.stackKey; + if (stackGroups[stackKey] === UNDEFINED) { + stackGroups[stackKey] = columnCount++; + } + columnIndex = stackGroups[stackKey]; + } else if (otherSeries.visible){ + columnIndex = columnCount++; + } + otherSeries.columnIndex = columnIndex; + } + }); + + // calculate the width and position of each column based on + // the number of column series in the plot, the groupPadding + // and the pointPadding options + var options = series.options, + data = series.data, + closestPoints = series.closestPoints, + categoryWidth = mathAbs( + data[1] ? data[closestPoints].plotX - data[closestPoints - 1].plotX : + chart.plotSizeX / (categories ? categories.length : 1) + ), + groupPadding = categoryWidth * options.groupPadding, + groupWidth = categoryWidth - 2 * groupPadding, + pointOffsetWidth = groupWidth / columnCount, + optionPointWidth = options.pointWidth, + pointPadding = defined(optionPointWidth) ? (pointOffsetWidth - optionPointWidth) / 2 : + pointOffsetWidth * options.pointPadding, + pointWidth = mathMax(pick(optionPointWidth, pointOffsetWidth - 2 * pointPadding), 1), + colIndex = (reversedXAxis ? columnCount - + series.columnIndex : series.columnIndex) || 0, + pointXOffset = pointPadding + (groupPadding + colIndex * + pointOffsetWidth -(categoryWidth / 2)) * + (reversedXAxis ? -1 : 1), + threshold = options.threshold || 0, + translatedThreshold = series.yAxis.getThreshold(threshold), + minPointLength = pick(options.minPointLength, 5); + + // record the new values + each(data, function(point) { + var plotY = point.plotY, + yBottom = point.yBottom || translatedThreshold, + barX = point.plotX + pointXOffset, + barY = mathCeil(mathMin(plotY, yBottom)), + barH = mathCeil(mathMax(plotY, yBottom) - barY), + trackerY; + + // handle options.minPointLength and tracker for small points + if (mathAbs(barH) < minPointLength) { + if (minPointLength) { + barH = minPointLength; + barY = + mathAbs(barY - translatedThreshold) > minPointLength ? // stacked + yBottom - minPointLength : // keep position + translatedThreshold - (plotY <= translatedThreshold ? minPointLength : 0); + } + trackerY = barY - 3; + } + + extend(point, { + barX: barX, + barY: barY, + barW: pointWidth, + barH: barH + }); + point.shapeType = 'rect'; + point.shapeArgs = { + x: barX, + y: barY, + width: pointWidth, + height: barH, + r: options.borderRadius + }; + + // make small columns responsive to mouse + point.trackerArgs = defined(trackerY) && merge(point.shapeArgs, { + height: mathMax(6, barH + 3), + y: trackerY + }); + }); + + }, + + getSymbol: function(){ + }, + + /** + * Columns have no graph + */ + drawGraph: function() {}, + + /** + * Draw the columns. For bars, the series.group is rotated, so the same coordinates + * apply for columns and bars. This method is inherited by scatter series. + * + */ + drawPoints: function() { + var series = this, + options = series.options, + renderer = series.chart.renderer, + graphic, + shapeArgs; + + + // draw the columns + each(series.data, function(point) { + var plotY = point.plotY; + if (plotY !== UNDEFINED && !isNaN(plotY)) { + graphic = point.graphic; + shapeArgs = point.shapeArgs; + if (graphic) { // update + stop(graphic); + graphic.animate(shapeArgs); + + } else { + point.graphic = renderer[point.shapeType](shapeArgs) + .attr(point.pointAttr[point.selected ? SELECT_STATE : NORMAL_STATE]) + .add(series.group) + .shadow(options.shadow); + } + + } + }); + }, + /** + * Draw the individual tracker elements. + * This method is inherited by scatter and pie charts too. + */ + drawTracker: function() { + var series = this, + chart = series.chart, + renderer = chart.renderer, + shapeArgs, + tracker, + trackerLabel = +new Date(), + cursor = series.options.cursor, + css = cursor && { cursor: cursor }, + rel; + + each(series.data, function(point) { + tracker = point.tracker; + shapeArgs = point.trackerArgs || point.shapeArgs; + if (point.y !== null) { + if (tracker) {// update + tracker.attr(shapeArgs); + + } else { + point.tracker = + renderer[point.shapeType](shapeArgs) + .attr({ + isTracker: trackerLabel, + fill: TRACKER_FILL, + visibility: series.visible ? VISIBLE : HIDDEN, + zIndex: 1 + }) + .on(hasTouch ? 'touchstart' : 'mouseover', function(event) { + rel = event.relatedTarget || event.fromElement; + if (chart.hoverSeries != series && attr(rel, 'isTracker') != trackerLabel) { + series.onMouseOver(); + } + point.onMouseOver(); + + }) + .on('mouseout', function(event) { + if (!series.options.stickyTracking) { + rel = event.relatedTarget || event.toElement; + if (attr(rel, 'isTracker') != trackerLabel) { + series.onMouseOut(); + } + } + }) + .css(css) + .add(chart.trackerGroup); + } + } + }); + }, + + + /** + * Animate the column heights one by one from zero + * @param {Boolean} init Whether to initialize the animation or run it + */ + animate: function(init) { + var series = this, + data = series.data; + + if (!init) { // run the animation + /* + * Note: Ideally the animation should be initialized by calling + * series.group.hide(), and then calling series.group.show() + * after the animation was started. But this rendered the shadows + * invisible in IE8 standards mode. If the columns flicker on large + * datasets, this is the cause. + */ + + each(data, function(point) { + var graphic = point.graphic; + + if (graphic) { + // start values + graphic.attr({ + height: 0, + y: series.yAxis.translate(0, 0, 1) + }); + + // animate + graphic.animate({ + height: point.barH, + y: point.barY + }, series.options.animation); + } + }); + + + // delete this function to allow it only once + series.animate = null; + } + + }, + /** + * Remove this series from the chart + */ + remove: function() { + var series = this, + chart = series.chart; + + // column and bar series affects other series of the same type + // as they are either stacked or grouped + if (chart.hasRendered) { + each(chart.series, function(otherSeries) { + if (otherSeries.type == series.type) { + otherSeries.isDirty = true; + } + }); + } + + Series.prototype.remove.apply(series, arguments); + } +}); +seriesTypes.column = ColumnSeries; + +var BarSeries = extendClass(ColumnSeries, { + type: 'bar', + init: function(chart) { + chart.inverted = this.inverted = true; + ColumnSeries.prototype.init.apply(this, arguments); + } +}); +seriesTypes.bar = BarSeries; + +/** + * The scatter series class + */ +var ScatterSeries = extendClass(Series, { + type: 'scatter', + + /** + * Extend the base Series' translate method by adding shape type and + * arguments for the point trackers + */ + translate: function() { + var series = this; + + Series.prototype.translate.apply(series); + + each(series.data, function(point) { + point.shapeType = 'circle'; + point.shapeArgs = { + x: point.plotX, + y: point.plotY, + r: series.chart.options.tooltip.snap + }; + }); + }, + + + /** + * Create individual tracker elements for each point + */ + //drawTracker: ColumnSeries.prototype.drawTracker, + drawTracker: function() { + var series = this, + cursor = series.options.cursor, + css = cursor && { cursor: cursor }, + graphic; + + each(series.data, function(point) { + graphic = point.graphic; + if (graphic) { // doesn't exist for null points + graphic + .attr({ isTracker: true }) + .on('mouseover', function(event) { + series.onMouseOver(); + point.onMouseOver(); + }) + .on('mouseout', function(event) { + if (!series.options.stickyTracking) { + series.onMouseOut(); + } + }) + .css(css); + } + }); + + }, + + /** + * Cleaning the data is not necessary in a scatter plot + */ + cleanData: function() {} +}); +seriesTypes.scatter = ScatterSeries; + +/** + * Extended point object for pies + */ +var PiePoint = extendClass(Point, { + /** + * Initiate the pie slice + */ + init: function () { + + Point.prototype.init.apply(this, arguments); + + var point = this, + toggleSlice; + + //visible: options.visible !== false, + extend(point, { + visible: point.visible !== false, + name: pick(point.name, 'Slice') + }); + + // add event listener for select + toggleSlice = function() { + point.slice(); + }; + addEvent(point, 'select', toggleSlice); + addEvent(point, 'unselect', toggleSlice); + + return point; + }, + + /** + * Toggle the visibility of the pie slice + * @param {Boolean} vis Whether to show the slice or not. If undefined, the + * visibility is toggled + */ + setVisible: function(vis) { + var point = this, + chart = point.series.chart, + tracker = point.tracker, + dataLabel = point.dataLabel, + connector = point.connector, + method; + + // if called without an argument, toggle visibility + point.visible = vis = vis === UNDEFINED ? !point.visible : vis; + + method = vis ? 'show' : 'hide'; + + point.group[method](); + if (tracker) { + tracker[method](); + } + if (dataLabel) { + dataLabel[method](); + } + if (connector) { + connector[method](); + } + if (point.legendItem) { + chart.legend.colorizeItem(point, vis); + } + }, + + /** + * Set or toggle whether the slice is cut out from the pie + * @param {Boolean} sliced When undefined, the slice state is toggled + * @param {Boolean} redraw Whether to redraw the chart. True by default. + */ + slice: function(sliced, redraw, animation) { + var point = this, + series = point.series, + chart = series.chart, + slicedTranslation = point.slicedTranslation; + + setAnimation(animation, chart); + + // redraw is true by default + redraw = pick(redraw, true); + + // if called without an argument, toggle + sliced = point.sliced = defined(sliced) ? sliced : !point.sliced; + + point.group.animate({ + translateX: (sliced ? slicedTranslation[0] : chart.plotLeft), + translateY: (sliced ? slicedTranslation[1] : chart.plotTop) + }); + + } +}); + +/** + * The Pie series class + */ +var PieSeries = extendClass(Series, { + type: 'pie', + isCartesian: false, + pointClass: PiePoint, + pointAttrToOptions: { // mapping between SVG attributes and the corresponding options + stroke: 'borderColor', + 'stroke-width': 'borderWidth', + fill: 'color' + }, + + /** + * Pies have one color each point + */ + getColor: function() { + // record first color for use in setData + this.initialColor = colorCounter; + }, + + /** + * Animate the column heights one by one from zero + * @param {Boolean} init Whether to initialize the animation or run it + */ + animate: function(init) { + var series = this, + data = series.data; + + each(data, function(point) { + var graphic = point.graphic, + args = point.shapeArgs, + up = -mathPI / 2; + + if (graphic) { + // start values + graphic.attr({ + r: 0, + start: up, + end: up + }); + + // animate + graphic.animate({ + r: args.r, + start: args.start, + end: args.end + }, series.options.animation); + } + }); + + // delete this function to allow it only once + series.animate = null; + + }, + /** + * Do translation for pie slices + */ + translate: function() { + var total = 0, + series = this, + cumulative = -0.25, // start at top + precision = 1000, // issue #172 + options = series.options, + slicedOffset = options.slicedOffset, + connectorOffset = slicedOffset + options.borderWidth, + positions = options.center, + chart = series.chart, + plotWidth = chart.plotWidth, + plotHeight = chart.plotHeight, + start, + end, + angle, + data = series.data, + circ = 2 * mathPI, + fraction, + smallestSize = mathMin(plotWidth, plotHeight), + isPercent, + radiusX, // the x component of the radius vector for a given point + radiusY, + labelDistance = options.dataLabels.distance; + + // get positions - either an integer or a percentage string must be given + positions.push(options.size, options.innerSize || 0); + positions = map(positions, function(length, i) { + + isPercent = /%$/.test(length); + return isPercent ? + // i == 0: centerX, relative to width + // i == 1: centerY, relative to height + // i == 2: size, relative to smallestSize + [plotWidth, plotHeight, smallestSize, smallestSize][i] * + pInt(length) / 100: + length; + }); + + // utility for getting the x value from a given y, used for anticollision logic in data labels + series.getX = function(y, left) { + + angle = math.asin((y - positions[1]) / (positions[2] / 2 + labelDistance)); + + return positions[0] + + (left ? -1 : 1) * + (mathCos(angle) * (positions[2] / 2 + labelDistance)); + }; + + // set center for later use + series.center = positions; + + // get the total sum + each(data, function(point) { + total += point.y; + }); + + each(data, function(point) { + // set start and end angle + fraction = total ? point.y / total : 0; + start = mathRound(cumulative * circ * precision) / precision; + cumulative += fraction; + end = mathRound(cumulative * circ * precision) / precision; + + // set the shape + point.shapeType = 'arc'; + point.shapeArgs = { + x: positions[0], + y: positions[1], + r: positions[2] / 2, + innerR: positions[3] / 2, + start: start, + end: end + }; + + // center for the sliced out slice + angle = (end + start) / 2; + point.slicedTranslation = map([ + mathCos(angle) * slicedOffset + chart.plotLeft, + mathSin(angle) * slicedOffset + chart.plotTop + ], mathRound); + + // set the anchor point for tooltips + radiusX = mathCos(angle) * positions[2] / 2; + radiusY = mathSin(angle) * positions[2] / 2; + point.tooltipPos = [ + positions[0] + radiusX * 0.7, + positions[1] + radiusY * 0.7 + ]; + + // set the anchor point for data labels + point.labelPos = [ + positions[0] + radiusX + mathCos(angle) * labelDistance, // first break of connector + positions[1] + radiusY + mathSin(angle) * labelDistance, // a/a + positions[0] + radiusX + mathCos(angle) * connectorOffset, // second break, right outside pie + positions[1] + radiusY + mathSin(angle) * connectorOffset, // a/a + positions[0] + radiusX, // landing point for connector + positions[1] + radiusY, // a/a + labelDistance < 0 ? // alignment + 'center' : + angle < circ / 4 ? 'left' : 'right', // alignment + angle // center angle + ]; + + + // API properties + point.percentage = fraction * 100; + point.total = total; + + }); + + this.setTooltipPoints(); + }, + + /** + * Render the slices + */ + render: function() { + var series = this; + + // cache attributes for shapes + series.getAttribs(); + + this.drawPoints(); + + // draw the mouse tracking area + if (series.options.enableMouseTracking !== false) { + series.drawTracker(); + } + + this.drawDataLabels(); + + if (series.options.animation && series.animate) { + series.animate(); + } + + series.isDirty = false; // means data is in accordance with what you see + }, + + /** + * Draw the data points + */ + drawPoints: function() { + var series = this, + chart = series.chart, + renderer = chart.renderer, + groupTranslation, + //center, + graphic, + group, + shapeArgs; + + // draw the slices + each(series.data, function(point) { + graphic = point.graphic; + shapeArgs = point.shapeArgs; + group = point.group; + + // create the group the first time + if (!group) { + group = point.group = renderer.g('point') + .attr({ zIndex: 5 }) + .add(); + } + + // if the point is sliced, use special translation, else use plot area traslation + groupTranslation = point.sliced ? point.slicedTranslation : [chart.plotLeft, chart.plotTop]; + group.translate(groupTranslation[0], groupTranslation[1]) + + + // draw the slice + if (graphic) { + graphic.animate(shapeArgs); + } else { + point.graphic = + renderer.arc(shapeArgs) + .attr(extend( + point.pointAttr[NORMAL_STATE], + { 'stroke-linejoin': 'round' } + )) + .add(point.group); + } + + // detect point specific visibility + if (point.visible === false) { + point.setVisible(false); + } + + }); + + }, + + /** + * Override the base drawDataLabels method by pie specific functionality + */ + drawDataLabels: function() { + var series = this, + data = series.data, + point, + chart = series.chart, + options = series.options.dataLabels, + connectorPadding = pick(options.connectorPadding, 10), + connectorWidth = pick(options.connectorWidth, 1), + connector, + connectorPath, + outside = options.distance > 0, + dataLabel, + labelPos, + labelHeight, + lastY, + centerY = series.center[1], + quarters = [// divide the points into quarters for anti collision + [], // top right + [], // bottom right + [], // bottom left + [] // top left + ], + x, + y, + visibility, + overlapping, + rankArr, + secondPass, + sign, + lowerHalf, + sort, + i = 4, + j; + + // run parent method + Series.prototype.drawDataLabels.apply(series); + + // arrange points for detection collision + each(data, function(point) { + var angle = point.labelPos[7], + quarter; + if (angle < 0) { + quarter = 0; + } else if (angle < mathPI / 2) { + quarter = 1; + } else if (angle < mathPI) { + quarter = 2; + } else { + quarter = 3; + } + quarters[quarter].push(point); + }); + quarters[1].reverse(); + quarters[3].reverse(); + + // define the sorting algorithm + sort = function(a,b) { + return a.y > b.y; + }; + /* Loop over the points in each quartile, starting from the top and bottom + * of the pie to detect overlapping labels. + */ + while (i--) { + overlapping = 0; + + // create an array for sorting and ranking the points within each quarter + rankArr = [].concat(quarters[i]); + rankArr.sort(sort); + j = rankArr.length; + while (j--) { + rankArr[j].rank = j; + } + + /* In the first pass, count the number of overlapping labels. In the second + * pass, remove the labels with lowest rank/values. + */ + for (secondPass = 0; secondPass < 2; secondPass++) { + lowerHalf = i % 3; + lastY = lowerHalf ? 9999 : -9999; + sign = lowerHalf ? -1 : 1; + + for (j = 0; j < quarters[i].length; j++) { + point = quarters[i][j]; + + if ((dataLabel = point.dataLabel)) { + labelPos = point.labelPos; + visibility = VISIBLE; + x = labelPos[0]; + y = labelPos[1]; + + + // assume all labels have equal height + if (!labelHeight) { + labelHeight = dataLabel && dataLabel.getBBox().height; + } + + // anticollision + if (outside) { + if (secondPass && point.rank < overlapping) { + visibility = HIDDEN; + } else if ((!lowerHalf && y < lastY + labelHeight) || + (lowerHalf && y > lastY - labelHeight)) { + y = lastY + sign * labelHeight; + x = series.getX(y, i > 1); + if ((!lowerHalf && y + labelHeight > centerY) || + (lowerHalf && y -labelHeight < centerY)) { + if (secondPass) { + visibility = HIDDEN; + } else { + overlapping++; + } + } + } + } + + if (point.visible === false) { + visibility = HIDDEN; + } + + if (visibility == VISIBLE) { + lastY = y; + } + + if (secondPass) { + + // move or place the data label + dataLabel + .attr({ + visibility: visibility, + align: labelPos[6] + }) + [dataLabel.moved ? 'animate' : 'attr']({ + x: x + options.x + + ({ left: connectorPadding, right: -connectorPadding }[labelPos[6]] || 0), + y: y + options.y + }); + dataLabel.moved = true; + + // draw the connector + if (outside && connectorWidth) { + connector = point.connector; + + connectorPath = [ + M, + x + (labelPos[6] == 'left' ? 5 : -5), y, // end of the string at the label + L, + x, y, // first break, next to the label + L, + labelPos[2], labelPos[3], // second break + L, + labelPos[4], labelPos[5] // base + ]; + + if (connector) { + connector.animate({ d: connectorPath }); + connector.attr('visibility', visibility); + + } else { + point.connector = connector = series.chart.renderer.path(connectorPath).attr({ + 'stroke-width': connectorWidth, + stroke: options.connectorColor || '#606060', + visibility: visibility, + zIndex: 3 + }) + .translate(chart.plotLeft, chart.plotTop) + .add(); + } + } + } + } + } + } + } + }, + + /** + * Draw point specific tracker objects. Inherit directly from column series. + */ + drawTracker: ColumnSeries.prototype.drawTracker, + + /** + * Pies don't have point marker symbols + */ + getSymbol: function() {} + +}); +seriesTypes.pie = PieSeries; + + +// global variables +win.Highcharts = { + Chart: Chart, + dateFormat: dateFormat, + pathAnim: pathAnim, + getOptions: getOptions, + numberFormat: numberFormat, + Point: Point, + Color: Color, + Renderer: Renderer, + seriesTypes: seriesTypes, + setOptions: setOptions, + Series: Series, + + // Expose utility funcitons for modules + addEvent: addEvent, + createElement: createElement, + discardElement: discardElement, + css: css, + each: each, + extend: extend, + map: map, + merge: merge, + pick: pick, + extendClass: extendClass, + version: '2.1.4' +}; +})(); - License: www.highcharts.com/license -*/ -(function(){function qa(a,b){a||(a={});for(var c in b)a[c]=b[c];return a}function oa(a,b){return parseInt(a,b||10)}function Kb(a){return typeof a=="string"}function Eb(a){return typeof a=="object"}function ac(a){return typeof a=="number"}function mc(a,b){for(var c=a.length;c--;)if(a[c]==b){a.splice(c,1);break}}function J(a){return a!==Ra&&a!==null}function za(a,b,c){var d,e;if(Kb(b))if(J(c))a.setAttribute(b,c);else{if(a&&a.getAttribute)e=a.getAttribute(b)}else if(J(b)&&Eb(b))for(d in b)a.setAttribute(d, -b[d]);return e}function nc(a){if(!a||a.constructor!=Array)a=[a];return a}function y(){var a=arguments,b,c,d=a.length;for(b=0;b3?g%3:0;return e+(g?c.substr(0,g)+d:"")+c.substr(g).replace(/(\d{3})(?=\d)/g,"$1"+d)+(f?b+cb(a-c).toFixed(f).slice(2):"")}function Hc(){}function Hd(a,b){function c(m,h){function x(l, -p){this.pos=l;this.minor=p;this.isNew=true;p||this.addLabel()}function w(l){if(l){this.options=l;this.id=l.id}return this}function O(){var l=[],p=[],r;Ta=u=null;Z=[];t(Ba,function(o){r=false;t(["xAxis","yAxis"],function(la){if(o.isCartesian&&(la=="xAxis"&&ma||la=="yAxis"&&!ma)&&(o.options[la]==h.index||o.options[la]===Ra&&h.index===0)){o[la]=s;Z.push(o);r=true}});if(!o.visible&&v.ignoreHiddenSeries)r=false;if(r){var T,Y,G,B,ia;if(!ma){T=o.options.stacking;Ic=T=="percent";if(T){B=o.type+y(o.options.stack, -"");ia="-"+B;o.stackKey=B;Y=l[B]||[];l[B]=Y;G=p[ia]||[];p[ia]=G}if(Ic){Ta=0;u=99}}if(o.isCartesian){t(o.data,function(la){var C=la.x,na=la.y,S=na<0,$=S?G:Y;S=S?ia:B;if(Ta===null)Ta=u=la[H];if(ma)if(C>u)u=C;else{if(Cu)u=na;else if(la=0){Ta=0;Id=true}else if(u<0){u=0;Jd=true}}}})}function ja(l,p){var r; -Fb=p?1:Ua.pow(10,ob(Ua.log(l)/Ua.LN10));r=l/Fb;if(!p){p=[1,2,2.5,5,10];if(h.allowDecimals===false)if(Fb==1)p=[1,2,5,10];else if(Fb<=0.1)p=[1/Fb]}for(var o=0;o0||!Jd))P+=l*Kd}Wa=K==P?1:Mb&&!T&&Y==r.options.tickPixelInterval?r.tickInterval:y(T,Va?1:(P-K)*Y/A);if(!N&&!J(h.tickInterval))Wa=ja(Wa);s.tickInterval=Wa;Jc=h.minorTickInterval==="auto"&&Wa?Wa/5:h.minorTickInterval;if(N){ra=[];T=Sa.global.useUTC; -var G=1E3/qb,B=6E4/qb,ia=36E5/qb;Y=864E5/qb;l=6048E5/qb;o=2592E6/qb;var la=31556952E3/qb,C=[["second",G,[1,2,5,10,15,30]],["minute",B,[1,2,5,10,15,30]],["hour",ia,[1,2,3,4,6,8,12]],["day",Y,[1,2]],["week",l,[1,2]],["month",o,[1,2,3,4,6]],["year",la,null]],na=C[6],S=na[1],$=na[2];for(r=0;r=G)$.setSeconds(S>=B?0:C*ob($.getSeconds()/ -C));if(S>=B)$[Cd](S>=ia?0:C*ob($[bd]()/C));if(S>=ia)$[Dd](S>=Y?0:C*ob($[cd]()/C));if(S>=Y)$[ed](S>=o?1:C*ob($[oc]()/C));if(S>=o){$[Ed](S>=la?0:C*ob($[Dc]()/C));p=$[Ec]()}if(S>=la){p-=p%C;$[Fd](p)}S==l&&$[ed]($[oc]()-$[dd]()+h.startOfWeek);r=1;p=$[Ec]();G=$.getTime()/qb;B=$[Dc]();for(ia=$[oc]();Gp&&ra.shift();if(h.endOnTick)P=r;else PGb[H])Gb[H]=ra.length}}function Ea(){var l,p;gb=K;cc=P;O();ga();ha=D;D=A/(P-K||1);if(!ma)for(l in ea)for(p in ea[l])ea[l][p].cum=ea[l][p].total;if(!s.isDirty)s.isDirty=K!=gb||P!=cc}function ua(l){l= -(new w(l)).render();Nb.push(l);return l}function bb(){var l=h.title,p=h.alternateGridColor,r=h.lineWidth,o,T,Y=m.hasRendered,G=Y&&J(gb)&&!isNaN(gb);o=Z.length&&J(K)&&J(P);A=M?wa:sa;D=A/(P-K||1);xa=M?V:rb;if(o||Mb){if(Jc&&!Va)for(o=K+(ra[0]-K)%Jc;o<=P;o+=Jc){Wb[o]||(Wb[o]=new x(o,true));G&&Wb[o].isNew&&Wb[o].render(null,true);Wb[o].isActive=true;Wb[o].render()}t(ra,function(B,ia){if(!Mb||B>=K&&B<=P){G&&sb[B].isNew&&sb[B].render(ia,true);sb[B].isActive=true;sb[B].render(ia)}});p&&t(ra,function(B,ia){if(ia% -2===0&&B=1E3?Gd(l,0):l},Nc=M&&h.labels.staggerLines,Xb=h.reversed,Yb=Va&&h.tickmarkPlacement=="between"?0.5:0;x.prototype={addLabel:function(){var l=this.pos,p=h.labels,r=!(l== -K&&!y(h.showFirstLabel,1)||l==P&&!y(h.showLastLabel,0)),o=Va&&M&&Va.length&&!p.step&&!p.staggerLines&&!p.rotation&&wa/Va.length||!M&&wa/2,T=this.label;l=$d.call({isFirst:l==ra[0],isLast:l==ra[ra.length-1],dateTimeLabelFormat:Kc,value:Va&&Va[l]?Va[l]:l});o=o&&{width:o-2*(p.padding||10)+$a};o=qa(o,p.style);if(T===Ra)this.label=J(l)&&r&&p.enabled?aa.text(l,0,0).attr({align:p.align,rotation:p.rotation}).css(o).add(tb):null;else T&&T.attr({text:l}).css(o)},getLabelSize:function(){var l=this.label;return l? -(this.labelBBox=l.getBBox())[M?"height":"width"]:0},render:function(l,p){var r=!this.minor,o=this.label,T=this.pos,Y=h.labels,G=this.gridLine,B=r?h.gridLineWidth:h.minorGridLineWidth,ia=r?h.gridLineColor:h.minorGridLineColor,la=r?h.gridLineDashStyle:h.minorGridLineDashStyle,C=this.mark,na=r?h.tickLength:h.minorTickLength,S=r?h.tickWidth:h.minorTickWidth||0,$=r?h.tickColor:h.minorTickColor,pc=r?h.tickPosition:h.minorTickPosition;r=Y.step;var hb=p&&Oc||Pa,Ob;Ob=M?va(T+Yb,null,null,p)+xa:V+Q+(Oa?(p&& -jd||Xa)-Ab-V:0);hb=M?hb-rb+Q-(Oa?sa:0):hb-va(T+Yb,null,null,p)-xa;if(B){T=Ka(T+Yb,B,p);if(G===Ra){G={stroke:ia,"stroke-width":B};if(la)G.dashstyle=la;this.gridLine=G=B?aa.path(T).attr(G).add(Hb):null}G&&T&&G.animate({d:T})}if(S){if(pc=="inside")na=-na;if(Oa)na=-na;B=aa.crispLine([Za,Ob,hb,Da,Ob+(M?0:-na),hb+(M?na:0)],S);if(C)C.animate({d:B});else this.mark=aa.path(B).attr({stroke:$,"stroke-width":S}).add(tb)}if(o){Ob=Ob+Y.x-(Yb&&M?Yb*D*(Xb?-1:1):0);hb=hb+Y.y-(Yb&&!M?Yb*D*(Xb?1:-1):0);J(Y.y)||(hb+= -parseInt(o.styles.lineHeight)*0.9-o.getBBox().height/2);if(Nc)hb+=l%Nc*16;if(r)o[l%r?"hide":"show"]();o[this.isNew?"attr":"animate"]({x:Ob,y:hb})}this.isNew=false},destroy:function(){for(var l in this)this[l]&&this[l].destroy&&this[l].destroy()}};w.prototype={render:function(){var l=this,p=l.options,r=p.label,o=l.label,T=p.width,Y=p.to,G,B=p.from,ia=p.dashStyle,la=l.svgElem,C=[],na,S,$=p.color;S=p.zIndex;var pc=p.events;if(T){C=Ka(p.value,T);p={stroke:$,"stroke-width":T};if(ia)p.dashstyle=ia}else if(J(B)&& -J(Y)){B=Ca(B,K);Y=pb(Y,P);G=Ka(Y);if((C=Ka(B))&&G)C.push(G[4],G[5],G[1],G[2]);else C=null;p={fill:$}}else return;if(J(S))p.zIndex=S;if(la)if(C)la.animate({d:C},null,la.onGetPath);else{la.hide();la.onGetPath=function(){la.show()}}else if(C&&C.length){l.svgElem=la=aa.path(C).attr(p).add();if(pc){ia=function(hb){la.on(hb,function(Ob){pc[hb].apply(l,[Ob])})};for(na in pc)ia(na)}}if(r&&J(r.text)&&C&&C.length&&wa>0&&sa>0){r=ya({align:M&&G&&"center",x:M?!G&&4:10,verticalAlign:!M&&G&&"middle",y:M?G?16:10: -G?6:-4,rotation:M&&!G&&90},r);if(!o)l.label=o=aa.text(r.text,0,0).attr({align:r.textAlign||r.align,rotation:r.rotation,zIndex:S}).css(r.style).add();G=[C[1],C[4],C[6]||C[1]];C=[C[2],C[5],C[7]||C[2]];na=pb.apply(Ua,G);S=pb.apply(Ua,C);o.align(r,false,{x:na,y:S,width:Ca.apply(Ua,G)-na,height:Ca.apply(Ua,C)-S});o.show()}else o&&o.hide();return l},destroy:function(){for(var l in this){this[l]&&this[l].destroy&&this[l].destroy();delete this[l]}mc(Nb,this)}};va=function(l,p,r,o){var T=1,Y=0,G=o?ha:D;o= -o?gb:K;G||(G=D);if(r){T*=-1;Y=A}if(Xb){T*=-1;Y-=T*A}if(p){if(Xb)l=A-l;l=l/G+o}else l=T*(l-o)*G+Y;return l};Ka=function(l,p,r){var o,T,Y;l=va(l,null,null,r);var G=r&&Oc||Pa,B=r&&jd||Xa,ia;r=T=fa(l+xa);o=Y=fa(G-l-xa);if(isNaN(l))ia=true;else if(M){o=ba;Y=G-rb;if(rV+wa)ia=true}else{r=V;T=B-Ab;if(oba+sa)ia=true}return ia?null:aa.crispLine([Za,r,o,Da,T,Y],p||0)};if(Ga&&ma&&Xb===Ra)Xb=true;qa(s,{addPlotBand:ua,addPlotLine:ua,adjustTickAmount:function(){if(Gb&&!N&&!Va&&!Mb){var l=ec,p=ra.length; -ec=Gb[H];if(pl)l=K;else if(P', -A?Mc("%A, %b %e, %Y",D):D,"
"]:[];t(H,function(va){xa.push(va.point.tooltipFormatter(ha))});return xa.join("")}function x(H,A){E=ma?H:(2*E+H)/3;ea=ma?A:(ea+A)/2;s.translate(E,ea);kd=cb(H-E)>1||cb(A-ea)>1?function(){x(H,A)}:null}function w(){if(!ma){var H=q.hoverPoints;s.hide();t(ga,function(A){A&&A.hide()});H&&t(H,function(A){A.setState()});q.hoverPoints=null;ma=true}}var O,ja=m.borderWidth,L=m.crosshairs,ga=[],Ea=m.style,ua=m.shared,bb=oa(Ea.padding),Ja=ja+bb,ma=true,Oa,M,E=0,ea=0;Ea.padding= -0;var s=aa.g("tooltip").attr({zIndex:8}).add(),N=aa.rect(Ja,Ja,0,0,m.borderRadius,ja).attr({fill:m.backgroundColor,"stroke-width":ja}).add(s).shadow(m.shadow),Q=aa.text("",bb+Ja,oa(Ea.fontSize)+bb+Ja).attr({zIndex:1}).css(Ea).add(s);s.hide();return{shared:ua,refresh:function(H){var A,D,ha,xa=0,va={},Ka=[];ha=H.tooltipPos;A=m.formatter||h;va=q.hoverPoints;var tb=function(Fa){return{series:Fa.series,point:Fa,x:Fa.category,y:Fa.y,percentage:Fa.percentage,total:Fa.total||Fa.stackTotal}};if(ua){va&&t(va, -function(Fa){Fa.setState()});q.hoverPoints=H;t(H,function(Fa){Fa.setState(yb);xa+=Fa.plotY;Ka.push(tb(Fa))});D=H[0].plotX;xa=fa(xa)/H.length;va={x:H[0].category};va.points=Ka;H=H[0]}else va=tb(H);va=A.call(va);O=H.series;D=ua?D:H.plotX;xa=ua?xa:H.plotY;A=fa(ha?ha[0]:Ga?wa-xa:D);D=fa(ha?ha[1]:Ga?sa-D:xa);ha=ua||!H.series.isCartesian||hc(A,D);if(va===false||!ha)w();else{if(ma){s.show();ma=false}Q.attr({text:va});ha=Q.getBBox();Oa=ha.width+2*bb;M=ha.height+2*bb;N.attr({width:Oa,height:M,stroke:m.borderColor|| -H.color||O.color||"#606060"});A=A-Oa+V-25;D=D-M+ba+10;if(A<7){A=7;D-=30}if(D<5)D=5;else if(D+M>Pa)D=Pa-M-5;x(fa(A-Ja),fa(D-Ja))}if(L){L=nc(L);D=L.length;for(var Hb;D--;)if(L[D]&&(Hb=H.series[D?"yAxis":"xAxis"])){A=Hb.getPlotLinePath(H[D?"y":"x"],1);if(ga[D])ga[D].attr({d:A,visibility:Bb});else{ha={"stroke-width":L[D].width||1,stroke:L[D].color||"#C0C0C0",zIndex:2};if(L[D].dashStyle)ha.dashstyle=L[D].dashStyle;ga[D]=aa.path(A).attr(ha).add()}}}},hide:w}}function f(m,h){function x(E){var ea;E=E||ib.event; -if(!E.target)E.target=E.srcElement;ea=E.touches?E.touches.item(0):E;if(E.type!="mousemove"||ib.opera){for(var s=ta,N={left:s.offsetLeft,top:s.offsetTop};s=s.offsetParent;){N.left+=s.offsetLeft;N.top+=s.offsetTop;if(s!=Aa.body&&s!=Aa.documentElement){N.left-=s.scrollLeft;N.top-=s.scrollTop}}qc=N}if(Ac){E.chartX=E.x;E.chartY=E.y}else if(ea.layerX===Ra){E.chartX=ea.pageX-qc.left;E.chartY=ea.pageY-qc.top}else{E.chartX=E.layerX;E.chartY=E.layerY}return E}function w(E){var ea={xAxis:[],yAxis:[]};t(ab,function(s){var N= -s.translate,Q=s.isXAxis;ea[Q?"xAxis":"yAxis"].push({axis:s,value:N((Ga?!Q:Q)?E.chartX-V:sa-E.chartY+ba,true)})});return ea}function O(){var E=m.hoverSeries,ea=m.hoverPoint;ea&&ea.onMouseOut();E&&E.onMouseOut();rc&&rc.hide();ld=null}function ja(){if(ua){var E={xAxis:[],yAxis:[]},ea=ua.getBBox(),s=ea.x-V,N=ea.y-ba;if(Ea){t(ab,function(Q){var H=Q.translate,A=Q.isXAxis,D=Ga?!A:A,ha=H(D?s:sa-N-ea.height,true);H=H(D?s+ea.width:sa-N,true);E[A?"xAxis":"yAxis"].push({axis:Q,min:pb(ha,H),max:Ca(ha,H)})});La(m, -"selection",E,md)}ua=ua.destroy()}m.mouseIsDown=nd=Ea=false;Cb(Aa,Ib?"touchend":"mouseup",ja)}var L,ga,Ea,ua,bb=v.zoomType,Ja=/x/.test(bb),ma=/y/.test(bb),Oa=Ja&&!Ga||ma&&Ga,M=ma&&!Ga||Ja&&Ga;Pc=function(){if(Qc){Qc.translate(V,ba);Ga&&Qc.attr({width:m.plotWidth,height:m.plotHeight}).invert()}else m.trackerGroup=Qc=aa.g("tracker").attr({zIndex:9}).add()};Pc();if(h.enabled)m.tooltip=rc=e(h);(function(){var E=true;ta.onmousedown=function(s){s=x(s);m.mouseIsDown=nd=true;L=s.chartX;ga=s.chartY;Qa(Aa, -Ib?"touchend":"mouseup",ja)};var ea=function(s){if(!(s&&s.touches&&s.touches.length>1)){s=x(s);if(!Ib)s.returnValue=false;var N=s.chartX,Q=s.chartY,H=!hc(N-V,Q-ba);if(Ib&&s.type=="touchstart")if(za(s.target,"isTracker"))m.runTrackerClick||s.preventDefault();else!ae&&!H&&s.preventDefault();if(H){E||O();if(NV+wa)N=V+wa;if(Qba+sa)Q=ba+sa}if(nd&&s.type!="touchstart"){if(Ea=Math.sqrt(Math.pow(L-N,2)+Math.pow(ga-Q,2))>10){if(ic&&(Ja||ma)&&hc(L-V,ga-ba))ua||(ua=aa.rect(V, -ba,Oa?1:wa,M?1:sa,0).attr({fill:"rgba(69,114,167,0.25)",zIndex:7}).add());if(ua&&Oa){N=N-L;ua.attr({width:cb(N),x:(N>0?0:N)+L})}if(ua&&M){Q=Q-ga;ua.attr({height:cb(Q),y:(Q>0?0:Q)+ga})}}}else if(!H){var A;Q=m.hoverPoint;N=m.hoverSeries;var D,ha,xa=Xa,va=Ga?s.chartY:s.chartX-V;if(rc&&h.shared){A=[];D=Ba.length;for(ha=0;haxa&&A.splice(D, -1);if(A.length&&A[0].plotX!=ld){rc.refresh(A);ld=A[0].plotX}}if(N&&N.tracker)(s=N.tooltipPoints[va])&&s!=Q&&s.onMouseOver()}return(E=H)||!ic}};ta.onmousemove=ea;Qa(ta,"mouseleave",O);ta.ontouchstart=function(s){if(Ja||ma)ta.onmousedown(s);ea(s)};ta.ontouchmove=ea;ta.ontouchend=function(){Ea&&O()};ta.onclick=function(s){var N=m.hoverPoint;s=x(s);s.cancelBubble=true;if(!Ea)if(N&&za(s.target,"isTracker")){var Q=N.plotX,H=N.plotY;qa(N,{pageX:qc.left+V+(Ga?wa-H:Q),pageY:qc.top+ba+(Ga?sa-Q:H)});La(N.series, -"click",qa(s,{point:N}));N.firePointEvent("click",s)}else{qa(s,w(s));hc(s.chartX-V,s.chartY-ba)&&La(m,"click",s)}Ea=false}})();Nd=setInterval(function(){kd&&kd()},32);qa(this,{zoomX:Ja,zoomY:ma,resetTracker:O})}function g(m){var h=m.type||v.type||v.defaultSeriesType,x=ub[h],w=q.hasRendered;if(w)if(Ga&&h=="column")x=ub.bar;else if(!Ga&&h=="bar")x=ub.column;h=new x;h.init(q,m);if(!w&&h.inverted)Ga=true;if(h.isCartesian)ic=h.isCartesian;Ba.push(h);return h}function i(){v.alignTicks!==false&&t(ab,function(m){m.adjustTickAmount()}); -Gb=null}function k(m){var h=q.isDirtyLegend,x,w=q.isDirtyBox,O=Ba.length,ja=O,L=q.clipRect;for(bc(m,q);ja--;){m=Ba[ja];if(m.isDirty&&m.options.stacking){x=true;break}}if(x)for(ja=O;ja--;){m=Ba[ja];if(m.options.stacking)m.isDirty=true}t(Ba,function(ga){if(ga.isDirty){ga.cleanData();ga.getSegments();if(ga.options.legendType=="point")h=true}});if(h&&od.renderLegend){od.renderLegend();q.isDirtyLegend=false}if(ic){if(!Rc){Gb=null;t(ab,function(ga){ga.setScale()})}i();sc();t(ab,function(ga){if(ga.isDirty|| -w){ga.redraw();w=true}})}if(w){pd();Pc();if(L){Sc(L);L.animate({width:q.plotSizeX,height:q.plotSizeY})}}t(Ba,function(ga){if(ga.isDirty&&ga.visible&&(!ga.isCartesian||ga.xAxis))ga.redraw()});gc&&gc.resetTracker&&gc.resetTracker();La(q,"redraw")}function j(){var m=a.xAxis||{},h=a.yAxis||{},x;m=nc(m);t(m,function(w,O){w.index=O;w.isX=true});h=nc(h);t(h,function(w,O){w.index=O});ab=m.concat(h);q.xAxis=[];q.yAxis=[];ab=jc(ab,function(w){x=new c(q,w);q[x.isXAxis?"xAxis":"yAxis"].push(x);return x});i()} -function n(m,h){kc=ya(a.title,m);tc=ya(a.subtitle,h);t([["title",m,kc],["subtitle",h,tc]],function(x){var w=x[0],O=q[w],ja=x[1];x=x[2];if(O&&ja){O.destroy();O=null}if(x&&x.text&&!O)q[w]=aa.text(x.text,0,0).attr({align:x.align,"class":"highcharts-"+w,zIndex:1}).css(x.style).add().align(x,false,uc)})}function z(){jb=v.renderTo;Od=Zb+qd++;if(Kb(jb))jb=Aa.getElementById(jb);jb.innerHTML="";if(!jb.offsetWidth){Qb=jb.cloneNode(0);Ia(Qb,{position:lc,top:"-9999px",display:""});Aa.body.appendChild(Qb)}Tc= -(Qb||jb).offsetWidth;vc=(Qb||jb).offsetHeight;q.chartWidth=Xa=v.width||Tc||600;q.chartHeight=Pa=v.height||(vc>19?vc:400);q.container=ta=fb(Lb,{className:"highcharts-container"+(v.className?" "+v.className:""),id:Od},qa({position:Pd,overflow:vb,width:Xa+$a,height:Pa+$a,textAlign:"left"},v.style),Qb||jb);q.renderer=aa=v.forExport?new Uc(ta,Xa,Pa,true):new Qd(ta,Xa,Pa);var m,h;if(Rd&&ta.getBoundingClientRect){m=function(){Ia(ta,{left:0,top:0});h=ta.getBoundingClientRect();Ia(ta,{left:-h.left%1+$a,top:-h.top% -1+$a})};m();Qa(ib,"resize",m);Qa(q,"destroy",function(){Cb(ib,"resize",m)})}}function F(){function m(){var x=v.width||jb.offsetWidth,w=v.height||jb.offsetHeight;if(x&&w){if(x!=Tc||w!=vc){clearTimeout(h);h=setTimeout(function(){rd(x,w,false)},100)}Tc=x;vc=w}}var h;Qa(window,"resize",m);Qa(q,"destroy",function(){Cb(window,"resize",m)})}function W(){var m=a.labels,h=a.credits,x;n();od=q.legend=new be(q);sc();t(ab,function(w){w.setTickPositions(true)});i();sc();pd();ic&&t(ab,function(w){w.render()}); -if(!q.seriesGroup)q.seriesGroup=aa.g("series-group").attr({zIndex:3}).add();t(Ba,function(w){w.translate();w.setTooltipPoints();w.render()});m.items&&t(m.items,function(){var w=qa(m.style,this.style),O=oa(w.left)+V,ja=oa(w.top)+ba+12;delete w.left;delete w.top;aa.text(this.html,O,ja).attr({zIndex:2}).css(w).add()});if(!q.toolbar)q.toolbar=d(q);if(h.enabled&&!q.credits){x=h.href;aa.text(h.text,0,0).on("click",function(){if(x)location.href=x}).attr({align:h.position.align,zIndex:8}).css(h.style).add().align(h.position)}Pc(); -q.hasRendered=true;if(Qb){jb.appendChild(ta);Fc(Qb)}}function ca(){var m=Ba.length,h=ta&&ta.parentNode;La(q,"destroy");Cb(ib,"unload",ca);Cb(q);for(t(ab,function(x){Cb(x)});m--;)Ba[m].destroy();if(ta){ta.innerHTML="";Cb(ta);h&&h.removeChild(ta);ta=null}if(aa)aa.alignedObjects=null;clearInterval(Nd);for(m in q)delete q[m]}function ka(){if(!wc&&ib==ib.top&&Aa.readyState!="complete")Aa.attachEvent("onreadystatechange",function(){Aa.detachEvent("onreadystatechange",ka);ka()});else{z();sd();td();t(a.series|| -[],function(m){g(m)});q.inverted=Ga=y(Ga,a.chart.inverted);j();q.render=W;q.tracker=gc=new f(q,a.tooltip);W();La(q,"load");b&&b.apply(q,[q]);t(q.callbacks,function(m){m.apply(q,[q])})}}Lc=ya(Lc,Sa.xAxis);hd=ya(hd,Sa.yAxis);Sa.xAxis=Sa.yAxis=null;a=ya(Sa,a);var v=a.chart,I=v.margin;I=Eb(I)?I:[I,I,I,I];var da=y(v.marginTop,I[0]),X=y(v.marginRight,I[1]),U=y(v.marginBottom,I[2]),R=y(v.marginLeft,I[3]),Ha=v.spacingTop,Ya=v.spacingRight,ud=v.spacingBottom,Vc=v.spacingLeft,uc,kc,tc,ba,Ab,rb,V,Pb,jb,Qb,ta, -Od,Tc,vc,Xa,Pa,jd,Oc,Wc,vd,wd,Xc,q=this,ae=(I=v.events)&&!!I.click,xd,hc,rc,nd,$b,Sd,yd,sa,wa,gc,Qc,Pc,od,Rb,Sb,qc,ic=v.showAxes,Rc=0,ab=[],Gb,Ba=[],Ga,aa,kd,Nd,ld,pd,sc,sd,td,rd,md,Td,be=function(m){function h(u,Z){var pa=u.legendItem,Na=u.legendLine,P=u.legendSymbol,K=M.color,gb=Z?L.itemStyle.color:K;K=Z?u.color:K;pa&&pa.css({fill:gb});Na&&Na.attr({stroke:K});P&&P.attr({stroke:K,fill:K})}function x(u,Z,pa){var Na=u.legendItem,P=u.legendLine,K=u.legendSymbol;u=u.checkbox;Na&&Na.attr({x:Z,y:pa}); -P&&P.translate(Z,pa-4);K&&K.attr({x:Z+K.xOff,y:pa+K.yOff});if(u){u.x=Z;u.y=pa}}function w(){t(bb,function(u){var Z=u.checkbox;Z&&Ia(Z,{left:Ka.attr("translateX")+u.legendItemWidth+Z.x-40+$a,top:Ka.attr("translateY")+Z.y-11+$a})})}function O(u){var Z,pa,Na,P,K,gb=u.legendItem;P=u.series||u;if(!gb){K=/^(bar|pie|area|column)$/.test(P.type);u.legendItem=gb=aa.text(L.labelFormatter.call(u),0,0).css(u.visible?ma:M).on("mouseover",function(){u.setState(yb);gb.css(Oa)}).on("mouseout",function(){gb.css(u.visible? -ma:M);u.setState()}).on("click",function(){var Vb=function(){u.setVisible()};u.firePointEvent?u.firePointEvent("legendItemClick",null,Vb):La(u,"legendItemClick",null,Vb)}).attr({zIndex:2}).add(Ka);if(!K&&u.options&&u.options.lineWidth){var cc=u.options;P={"stroke-width":cc.lineWidth,zIndex:2};if(cc.dashStyle)P.dashstyle=cc.dashStyle;u.legendLine=aa.path([Za,-Ea-ua,0,Da,-ua,0]).attr(P).add(Ka)}if(K)Z=aa.rect(pa=-Ea-ua,Na=-11,Ea,12,2).attr({"stroke-width":0,zIndex:3}).add(Ka);else if(u.options&&u.options.marker&& -u.options.marker.enabled)Z=aa.symbol(u.symbol,pa=-Ea/2-ua,Na=-4,u.options.marker.radius).attr(u.pointAttr[db]).attr({zIndex:3}).add(Ka);if(Z){Z.xOff=pa;Z.yOff=Na}u.legendSymbol=Z;h(u,u.visible);if(u.options&&u.options.showCheckbox){u.checkbox=fb("input",{type:"checkbox",checked:u.selected,defaultChecked:u.selected},L.itemCheckboxStyle,ta);Qa(u.checkbox,"click",function(Vb){La(u,"checkboxClick",{checked:Vb.target.checked},function(){u.select()})})}}Z=gb.getBBox();pa=u.legendItemWidth=L.itemWidth|| -Ea+ua+Z.width+ea;D=Z.height;if(ga&&Q-N+pa>(Hb||Xa-2*E-N)){Q=N;H+=D}A=H;x(u,Q,H);if(ga)Q+=pa;else H+=D;tb=Hb||Ca(ga?Q-N:pa,tb);bb.push(u)}function ja(){Q=N;H=s;A=tb=0;bb=[];Ka||(Ka=aa.g("legend").attr({zIndex:7}).add());Ta&&Fa.reverse();t(Fa,function(Na){if(Na.options.showInLegend)t(Na.options.legendType=="point"?Na.data:[Na],O)});Ta&&Fa.reverse();Rb=Hb||tb;Sb=A-s+D;if(xa||va){Rb+=2*E;Sb+=2*E;if(ha)Rb>0&&Sb>0&&ha.animate(ha.crisp(null,null,null,Rb,Sb));else ha=aa.rect(0,0,Rb,Sb,L.borderRadius,xa|| -0).attr({stroke:L.borderColor,"stroke-width":xa||0,fill:va||nb}).add(Ka).shadow(L.shadow);ha[bb.length?"show":"hide"]()}for(var u=["left","right","top","bottom"],Z,pa=4;pa--;){Z=u[pa];if(Ja[Z]&&Ja[Z]!="auto"){L[pa<2?"align":"verticalAlign"]=Z;L[pa<2?"x":"y"]=oa(Ja[Z])*(pa%2?-1:1)}}Ka.align(qa(L,{width:Rb,height:Sb}),true,uc);Rc||w()}var L=m.options.legend;if(L.enabled){var ga=L.layout=="horizontal",Ea=L.symbolWidth,ua=L.symbolPadding,bb,Ja=L.style,ma=L.itemStyle,Oa=L.itemHoverStyle,M=L.itemHiddenStyle, -E=oa(Ja.padding),ea=20,s=18,N=4+E+Ea+ua,Q,H,A,D=0,ha,xa=L.borderWidth,va=L.backgroundColor,Ka,tb,Hb=L.width,Fa=m.series,Ta=L.reversed;ja();Qa(m,"endResize",w);return{colorizeItem:h,destroyItem:function(u){var Z=u.checkbox;t(["legendItem","legendLine","legendSymbol"],function(pa){u[pa]&&u[pa].destroy()});Z&&Fc(u.checkbox)},renderLegend:ja}}};hc=function(m,h){return m>=0&&m<=wa&&h>=0&&h<=sa};Td=function(){La(q,"selection",{resetSelection:true},md);q.toolbar.remove("zoom")};md=function(m){var h=Sa.lang, -x=q.pointCount<100;q.toolbar.add("zoom",h.resetZoom,h.resetZoomTitle,Td);!m||m.resetSelection?t(ab,function(w){w.setExtremes(null,null,false,x)}):t(m.xAxis.concat(m.yAxis),function(w){var O=w.axis;if(q.tracker[O.isXAxis?"zoomX":"zoomY"])O.setExtremes(w.min,w.max,false,x)});k()};sc=function(){var m=a.legend,h=y(m.margin,10),x=m.x,w=m.y,O=m.align,ja=m.verticalAlign,L;sd();if((q.title||q.subtitle)&&!J(da))if(L=Ca(q.title&&!kc.floating&&!kc.verticalAlign&&kc.y||0,q.subtitle&&!tc.floating&&!tc.verticalAlign&& -tc.y||0))ba=Ca(ba,L+y(kc.margin,15)+Ha);if(m.enabled&&!m.floating)if(O=="right")J(X)||(Ab=Ca(Ab,Rb-x+h+Ya));else if(O=="left")J(R)||(V=Ca(V,Rb+x+h+Vc));else if(ja=="top")J(da)||(ba=Ca(ba,Sb+w+h+Ha));else if(ja=="bottom")J(U)||(rb=Ca(rb,Sb-w+h+ud));ic&&t(ab,function(ga){ga.getOffset()});J(R)||(V+=Pb[3]);J(da)||(ba+=Pb[0]);J(U)||(rb+=Pb[2]);J(X)||(Ab+=Pb[1]);td()};rd=function(m,h,x){var w=q.title,O=q.subtitle;Rc+=1;bc(x,q);Oc=Pa;jd=Xa;Xa=fa(m);Pa=fa(h);Ia(ta,{width:Xa+$a,height:Pa+$a});aa.setSize(Xa, -Pa,x);wa=Xa-V-Ab;sa=Pa-ba-rb;Gb=null;t(ab,function(ja){ja.isDirty=true;ja.setScale()});t(Ba,function(ja){ja.isDirty=true});q.isDirtyLegend=true;q.isDirtyBox=true;sc();w&&w.align(null,null,uc);O&&O.align(null,null,uc);k(x);Oc=null;La(q,"resize");setTimeout(function(){La(q,"endResize",null,function(){Rc-=1})},Bc&&Bc.duration||500)};td=function(){q.plotLeft=V=fa(V);q.plotTop=ba=fa(ba);q.plotWidth=wa=fa(Xa-V-Ab);q.plotHeight=sa=fa(Pa-ba-rb);q.plotSizeX=Ga?sa:wa;q.plotSizeY=Ga?wa:sa;uc={x:Vc,y:Ha,width:Xa- -Vc-Ya,height:Pa-Ha-ud}};sd=function(){ba=y(da,Ha);Ab=y(X,Ya);rb=y(U,ud);V=y(R,Vc);Pb=[0,0,0,0]};pd=function(){var m=v.borderWidth||0,h=v.backgroundColor,x=v.plotBackgroundColor,w=v.plotBackgroundImage,O,ja={x:V,y:ba,width:wa,height:sa};O=m+(v.shadow?8:0);if(m||h)if(Wc)Wc.animate(Wc.crisp(null,null,null,Xa-O,Pa-O));else Wc=aa.rect(O/2,O/2,Xa-O,Pa-O,v.borderRadius,m).attr({stroke:v.borderColor,"stroke-width":m,fill:h||nb}).add().shadow(v.shadow);if(x)if(vd)vd.animate(ja);else vd=aa.rect(V,ba,wa,sa, -0).attr({fill:x}).add().shadow(v.plotShadow);if(w)if(wd)wd.animate(ja);else wd=aa.image(w,V,ba,wa,sa).add();if(v.plotBorderWidth)if(Xc)Xc.animate(Xc.crisp(null,V,ba,wa,sa));else Xc=aa.rect(V,ba,wa,sa,0,v.plotBorderWidth).attr({stroke:v.plotBorderColor,"stroke-width":v.plotBorderWidth,zIndex:4}).add();q.isDirtyBox=false};Yc=Jb=0;Qa(ib,"unload",ca);v.reflow!==false&&Qa(q,"load",F);if(I)for(xd in I)Qa(q,xd,I[xd]);q.options=a;q.series=Ba;q.addSeries=function(m,h,x){var w;if(m){bc(x,q);h=y(h,true);La(q, -"addSeries",{options:m},function(){w=g(m);w.isDirty=true;q.isDirtyLegend=true;h&&q.redraw()})}return w};q.animation=y(v.animation,true);q.destroy=ca;q.get=function(m){var h,x,w;for(h=0;h-1,f=e?7:3,g;b=b.split(" ");c=[].concat(c);var i,k,j=function(n){for(g=n.length;g--;)n[g]==Za&&n.splice(g+1,0,n[g+1],n[g+2],n[g+1],n[g+2])};if(e){j(b);j(c)}if(a.isArea){i= -b.splice(b.length-6,6);k=c.splice(c.length-6,6)}if(d){c=[].concat(c).splice(0,f).concat(c);a.shift=false}if(b.length)for(a=c.length;b.length255)b[e]=255}}return this},setOpacity:function(d){b[3]=d;return this}}};Mc=function(a,b,c){function d(F){return F.toString().replace(/^([0-9])$/,"0$1")}if(!J(b)||isNaN(b))return"Invalid date";a=y(a,"%Y-%m-%d %H:%M:%S");b=new Date(b* -qb);var e=b[cd](),f=b[dd](),g=b[oc](),i=b[Dc](),k=b[Ec](),j=Sa.lang,n=j.weekdays;j=j.months;b={a:n[f].substr(0,3),A:n[f],d:d(g),e:g,b:j[i].substr(0,3),B:j[i],m:d(i+1),y:k.toString().substr(2,2),Y:k,H:d(e),I:d(e%12||12),l:e%12||12,M:d(b[bd]()),p:e<12?"AM":"PM",P:e<12?"am":"pm",S:d(b.getSeconds())};for(var z in b)a=a.replace("%"+z,b[z]);return c?a.substr(0,1).toUpperCase()+a.substr(1):a};Hc.prototype={init:function(a,b){this.element=Aa.createElementNS("http://www.w3.org/2000/svg",b);this.renderer=a}, -animate:function(a,b,c){if(b=y(b,Bc,true)){b=ya(b);if(c)b.complete=c;Zc(this,a,b)}else{this.attr(a);c&&c()}},attr:function(a,b){var c,d,e,f,g=this.element,i=g.nodeName,k=this.renderer,j,n=this.shadows,z,F=this;if(Kb(a)&&J(b)){c=a;a={};a[c]=b}if(Kb(a)){c=a;if(i=="circle")c={x:"cx",y:"cy"}[c]||c;else if(c=="strokeWidth")c="stroke-width";F=za(g,c)||this[c]||0;if(c!="d"&&c!="visibility")F=parseFloat(F)}else for(c in a){j=false;d=a[c];if(c=="d"){if(d&&d.join)d=d.join(" ");if(/(NaN| {2}|^$)/.test(d))d= -"M 0 0";this.d=d}else if(c=="x"&&i=="text"){for(e=0;eg||!J(g)&& -J(b))){d.insertBefore(f,a);return this}}d.appendChild(f);this.added=true;return this},destroy:function(){var a=this.element||{},b=this.shadows,c=a.parentNode,d;a.onclick=a.onmouseout=a.onmouseover=a.onmousemove=null;Sc(this);c&&c.removeChild(a);b&&t(b,function(e){(c=e.parentNode)&&c.removeChild(e)});mc(this.renderer.alignedObjects,this);for(d in this)delete this[d];return null},empty:function(){for(var a=this.element,b=a.childNodes,c=b.length;c--;)a.removeChild(b[c])},shadow:function(a){var b=[], -c,d=this.element,e=this.parentInverted?"(-1,-1)":"(1,1)";if(a){for(a=1;a<=3;a++){c=d.cloneNode(0);za(c,{isShadow:"true",stroke:"rgb(0, 0, 0)","stroke-opacity":0.05*a,"stroke-width":7-2*a,transform:"translate"+e,fill:nb});d.parentNode.insertBefore(c,d);b.push(c)}this.shadows=b}return this}};var Uc=function(){this.init.apply(this,arguments)};Uc.prototype={init:function(a,b,c,d){var e=location,f;this.Element=Hc;f=this.createElement("svg").attr({xmlns:"http://www.w3.org/2000/svg",version:"1.1"});a.appendChild(f.element); -this.box=f.element;this.boxWrapper=f;this.alignedObjects=[];this.url=Ac?"":e.href.replace(/#.*?$/,"");this.defs=this.createElement("defs").add();this.forExport=d;this.setSize(b,c,false)},createElement:function(a){var b=new this.Element;b.init(this,a);return b},buildText:function(a){for(var b=a.element,c=y(a.textStr,"").toString().replace(/<(b|strong)>/g,'').replace(/<(i|em)>/g,'').replace(//g, -"").split(/]?>/g),d=b.childNodes,e=/style="([^"]+)"/,f=/href="([^"]+)"/,g=za(b,"x"),i=a.styles,k=Rd&&i&&i.HcDirection=="rtl"&&!this.forExport,j,n=i&&oa(i.width),z=i&&i.lineHeight,F,W=d.length;W--;)b.removeChild(d[W]);n&&!a.added&&this.box.appendChild(b);t(c,function(ca,ka){var v,I=0,da;ca=ca.replace(//g,"|||");v=ca.split("|||");t(v,function(X){if(X!==""||v.length==1){var U={},R=Aa.createElementNS("http://www.w3.org/2000/svg","tspan");e.test(X)&& -za(R,"style",X.match(e)[1].replace(/(;| |^)color([ :])/,"$1fill$2"));if(f.test(X)){za(R,"onclick",'location.href="'+X.match(f)[1]+'"');Ia(R,{cursor:"pointer"})}X=X.replace(/<(.|\n)*?>/g,"")||" ";if(k){j=[];for(W=X.length;W--;)j.push(X.charAt(W));X=j.join("")}R.appendChild(Aa.createTextNode(X));if(I)U.dx=3;else U.x=g;if(!I){if(ka){da=oa(window.getComputedStyle(F,null).getPropertyValue("line-height"));if(isNaN(da))da=z||F.offsetHeight||18;za(R,"dy",da)}F=R}za(R,U);b.appendChild(R);I++;if(n){X=X.replace(/-/g, -"- ").split(" ");for(var Ha,Ya=[];X.length||Ya.length;){Ha=b.getBBox().width;U=Ha>n;if(!U||X.length==1){X=Ya;Ya=[];if(X.length){R=Aa.createElementNS("http://www.w3.org/2000/svg","tspan");za(R,{x:g,dy:z||16});b.appendChild(R);if(Ha>n)n=Ha}}else{R.removeChild(R.firstChild);Ya.unshift(X.pop())}R.appendChild(Aa.createTextNode(X.join(" ").replace(/- /g,"-")))}}}})})},crispLine:function(a,b){if(a[1]==a[4])a[1]=a[4]=fa(a[1])+b%2/2;if(a[2]==a[5])a[2]=a[5]=fa(a[2])+b%2/2;return a},path:function(a){return this.createElement("path").attr({d:a, -fill:nb})},circle:function(a,b,c){a=Eb(a)?a:{x:a,y:b,r:c};return this.createElement("circle").attr(a)},arc:function(a,b,c,d,e,f){if(Eb(a)){b=a.y;c=a.r;d=a.innerR;e=a.start;f=a.end;a=a.x}return this.symbol("arc",a||0,b||0,c||0,{innerR:d||0,start:e||0,end:f||0})},rect:function(a,b,c,d,e,f){if(Eb(a)){b=a.y;c=a.width;d=a.height;e=a.r;a=a.x}e=this.createElement("rect").attr({rx:e,ry:e,fill:nb});return e.attr(e.crisp(f,a,b,Ca(c,0),Ca(d,0)))},setSize:function(a,b,c){var d=this.alignedObjects,e=d.length; -this.width=a;this.height=b;for(this.boxWrapper[y(c,true)?"animate":"attr"]({width:a,height:b});e--;)d[e].align()},g:function(a){return this.createElement("g").attr(J(a)&&{"class":Zb+a})},image:function(a,b,c,d,e){var f={preserveAspectRatio:nb};arguments.length>1&&qa(f,{x:b,y:c,width:d,height:e});f=this.createElement("image").attr(f);f.element.setAttributeNS("http://www.w3.org/1999/xlink","href",a);return f},symbol:function(a,b,c,d,e){var f,g=this.symbols[a];g=g&&g(b,c,d,e);var i=/^url\((.*?)\)$/; -if(g){f=this.path(g);qa(f,{symbolName:a,x:b,y:c,r:d});e&&qa(f,e)}else if(i.test(a)){a=a.match(i)[1];f=this.image(a).attr({x:b,y:c});fb("img",{onload:function(){var k=de[this.src]||[this.width,this.height];f.attr({width:k[0],height:k[1]}).translate(-fa(k[0]/2),-fa(k[1]/2))},src:a})}else f=this.circle(b,c,d);return f},symbols:{square:function(a,b,c){c=0.707*c;return[Za,a-c,b-c,Da,a+c,b-c,a+c,b+c,a-c,b+c,"Z"]},triangle:function(a,b,c){return[Za,a,b-1.33*c,Da,a+c,b+0.67*c,a-c,b+0.67*c,"Z"]},"triangle-down":function(a, -b,c){return[Za,a,b+1.33*c,Da,a-c,b-0.67*c,a+c,b-0.67*c,"Z"]},diamond:function(a,b,c){return[Za,a,b-c,Da,a+c,b,a,b+c,a-c,b,"Z"]},arc:function(a,b,c,d){var e=d.start,f=d.end-1.0E-6,g=d.innerR,i=kb(e),k=zb(e),j=kb(f);f=zb(f);d=d.end-e');if(b){c=b==Lb||b=="span"||b=="img"?c.join(""): -a.prepVML(c);this.element=fb(c)}this.renderer=a},add:function(a){var b=this.renderer,c=this.element,d=b.box;d=a?a.element||a:d;a&&a.inverted&&b.invertChild(c,d);yc&&d.gVis==vb&&Ia(c,{visibility:vb});d.appendChild(c);this.added=true;this.alignOnAdd&&this.updateTransform();return this},attr:function(a,b){var c,d,e,f=this.element||{},g=f.style,i=f.nodeName,k=this.renderer,j=this.symbolName,n,z,F=this.shadows,W=this;if(Kb(a)&&J(b)){c=a;a={};a[c]=b}if(Kb(a)){c=a;W=c=="strokeWidth"||c=="stroke-width"?this.strokeweight: -this[c]}else for(c in a){d=a[c];n=false;if(j&&/^(x|y|r|start|end|width|height|innerR)/.test(c)){if(!z){this.symbolAttr(a);z=true}n=true}else if(c=="d"){d=d||[];this.d=d.join(" ");e=d.length;for(n=[];e--;)n[e]=ac(d[e])?fa(d[e]*10)-5:d[e]=="Z"?"x":d[e];d=n.join(" ")||"x";f.path=d;if(F)for(e=F.length;e--;)F[e].path=d;n=true}else if(c=="zIndex"||c=="visibility"){if(yc&&c=="visibility"&&i=="DIV"){f.gVis=d;n=f.childNodes;for(e=n.length;e--;)Ia(n[e],{visibility:d});if(d==Bb)d=null}if(d)g[c]=d;n=true}else if(/^(width|height)$/.test(c)){if(this.updateClipping){this[c]= -d;this.updateClipping()}else g[c]=d;n=true}else if(/^(x|y)$/.test(c)){this[c]=d;if(f.tagName=="SPAN")this.updateTransform();else g[{x:"left",y:"top"}[c]]=d}else if(c=="class")f.className=d;else if(c=="stroke"){d=k.color(d,f,c);c="strokecolor"}else if(c=="stroke-width"||c=="strokeWidth"){f.stroked=d?true:false;c="strokeweight";this[c]=d;if(ac(d))d+=$a}else if(c=="dashstyle"){(f.getElementsByTagName("stroke")[0]||fb(k.prepVML([""]),null,null,f))[c]=d||"solid";this.dashstyle=d;n=true}else if(c== -"fill")if(i=="SPAN")g.color=d;else{f.filled=d!=nb?true:false;d=k.color(d,f,c);c="fillcolor"}else if(c=="translateX"||c=="translateY"||c=="rotation"||c=="align"){if(c=="align")c="textAlign";this[c]=d;this.updateTransform();n=true}else if(c=="text"){f.innerHTML=d;n=true}if(F&&c=="visibility")for(e=F.length;e--;)F[e].style[c]=d;if(!n)if(yc)f[c]=d;else za(f,c,d)}return W},clip:function(a){var b=this,c=a.members;c.push(b);b.destroyClip=function(){mc(c,b)};return b.css(a.getCSS(b.inverted))},css:function(a){var b= -this.element;if(b=a&&b.tagName=="SPAN"&&a.width){delete a.width;this.textWidth=b;this.updateTransform()}this.styles=qa(this.styles,a);Ia(this.element,a);return this},destroy:function(){this.destroyClip&&this.destroyClip();Hc.prototype.destroy.apply(this)},empty:function(){for(var a=this.element.childNodes,b=a.length,c;b--;){c=a[b];c.parentNode.removeChild(c)}},getBBox:function(){var a=this.element;if(a.nodeName=="text")a.style.position=lc;return{x:a.offsetLeft,y:a.offsetTop,width:a.offsetWidth,height:a.offsetHeight}}, -on:function(a,b){this.element["on"+a]=function(){var c=ib.event;c.target=c.srcElement;b(c)};return this},updateTransform:function(){if(this.added){var a=this,b=a.element,c=a.translateX||0,d=a.translateY||0,e=a.x||0,f=a.y||0,g=a.textAlign||"left",i={left:0,center:0.5,right:1}[g],k=g&&g!="left";if(c||d)a.css({marginLeft:c,marginTop:d});a.inverted&&t(b.childNodes,function(I){a.renderer.invertChild(I,b)});if(b.tagName=="SPAN"){var j,n;c=a.rotation;var z;j=0;d=1;var F=0,W;z=oa(a.textWidth);var ca=a.xCorr|| -0,ka=a.yCorr||0,v=[c,g,b.innerHTML,a.textWidth].join(",");if(v!=a.cTT){if(J(c)){j=c*Ud;d=kb(j);F=zb(j);Ia(b,{filter:c?["progid:DXImageTransform.Microsoft.Matrix(M11=",d,", M12=",-F,", M21=",F,", M22=",d,", sizingMethod='auto expand')"].join(""):nb})}j=b.offsetWidth;n=b.offsetHeight;if(j>z){Ia(b,{width:z+$a,display:"block",whiteSpace:"normal"});j=z}z=fa(oa(b.style.fontSize||12)*1.2);ca=d<0&&-j;ka=F<0&&-n;W=d*F<0;ca+=F*z*(W?1-i:i);ka-=d*z*(c?W?i:1-i:1);if(k){ca-=j*i*(d<0?-1:1);if(c)ka-=n*i*(F<0?-1: -1);Ia(b,{textAlign:g})}a.xCorr=ca;a.yCorr=ka}Ia(b,{left:e+ca,top:f+ka});a.cTT=v}}else this.alignOnAdd=true},shadow:function(a){var b=[],c=this.element,d=this.renderer,e,f=c.style,g,i=c.path;if(""+c.path==="")i="x";if(a){for(a=1;a<=3;a++){g=[''];e=fb(d.prepVML(g),null,{left:oa(f.left)+1,top:oa(f.top)+1});g=[''];fb(d.prepVML(g),null, -null,e);c.parentNode.insertBefore(e,c);b.push(e)}this.shadows=b}return this}});Ma=function(){this.init.apply(this,arguments)};Ma.prototype=ya(Uc.prototype,{isIE8:xc.indexOf("MSIE 8.0")>-1,init:function(a,b,c){var d;this.Element=ge;this.alignedObjects=[];d=this.createElement(Lb);a.appendChild(d.element);this.box=d.element;this.boxWrapper=d;this.setSize(b,c,false);if(!Aa.namespaces.hcv){Aa.namespaces.add("hcv","urn:schemas-microsoft-com:vml");Aa.createStyleSheet().cssText="hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke{ behavior:url(#default#VML); display: inline-block; } "}}, -clipRect:function(a,b,c,d){var e=this.createElement();return qa(e,{members:[],left:a,top:b,width:c,height:d,getCSS:function(f){var g=this.top,i=this.left,k=i+this.width,j=g+this.height;g={clip:"rect("+fa(f?i:g)+"px,"+fa(f?j:k)+"px,"+fa(f?k:j)+"px,"+fa(f?g:i)+"px)"};!f&&yc&&qa(g,{width:k+$a,height:j+$a});return g},updateClipping:function(){t(e.members,function(f){f.css(e.getCSS(f.inverted))})}})},color:function(a,b,c){var d,e=/^rgba/;if(a&&a.linearGradient){var f,g,i=a.linearGradient,k,j,n,z;t(a.stops, -function(F,W){if(e.test(F[1])){d=Ub(F[1]);f=d.get("rgb");g=d.get("a")}else{f=F[1];g=1}if(W){n=f;z=g}else{k=f;j=g}});a=90-Ua.atan((i[3]-i[1])/(i[2]-i[0]))*180/Tb;c=["<",c,' colors="0% ',k,",100% ",n,'" angle="',a,'" opacity="',z,'" o:opacity2="',j,'" type="gradient" focus="100%" />'];fb(this.prepVML(c),null,null,b)}else if(e.test(a)&&b.tagName!="IMG"){d=Ub(a);c=["<",c,' opacity="',d.get("a"),'"/>'];fb(this.prepVML(c),null,null,b);return d.get("rgb")}else return a},prepVML:function(a){var b=this.isIE8; -a=a.join("");if(b){a=a.replace("/>",' xmlns="urn:schemas-microsoft-com:vml" />');a=a.indexOf('style="')==-1?a.replace("/>",' style="display:inline-block;behavior:url(#default#VML);" />'):a.replace('style="','style="display:inline-block;behavior:url(#default#VML);')}else a=a.replace("<","1&&f.css({left:b,top:c,width:d,height:e});return f},rect:function(a,b,c,d,e,f){if(Eb(a)){b=a.y;c=a.width;d=a.height;e=a.r;a=a.x}var g=this.symbol("rect");g.r=e;return g.attr(g.crisp(f,a,b,Ca(c,0),Ca(d,0)))},invertChild:function(a,b){var c=b.style; -Ia(a,{flip:"x",left:oa(c.width)-10,top:oa(c.height)-10,rotation:-90})},symbols:{arc:function(a,b,c,d){var e=d.start,f=d.end,g=kb(e),i=zb(e),k=kb(f),j=zb(f);d=d.innerR;var n=0.07/c,z=d&&0.1/d||0;if(f-e===0)return["x"];else if(2*Tb-f+e=c.length)Jb=0}a.chart.pointCount++;return this},applyOptions:function(a){var b=this.series;this.config=a;if(ac(a)||a===null)this.y=a;else if(Eb(a)&&!ac(a.length)){qa(this,a);this.options=a}else if(Kb(a[0])){this.name=a[0];this.y=a[1]}else if(ac(a[0])){this.x=a[0];this.y=a[1]}if(this.x===Ra)this.x=b.autoIncrement()},destroy:function(){var a=this,b=a.series,c;b.chart.pointCount--;a==b.chart.hoverPoint&&a.onMouseOut();b.chart.hoverPoints=null;Cb(a);t(["graphic","tracker","group","dataLabel", -"connector"],function(d){a[d]&&a[d].destroy()});a.legendItem&&a.series.chart.legend.destroyItem(a);for(c in a)a[c]=null},select:function(a,b){var c=this,d=c.series.chart;c.selected=a=y(a,!c.selected);c.firePointEvent(a?"select":"unselect");c.setState(a&&"select");b||t(d.getSelectedPoints(),function(e){if(e.selected&&e!=c){e.selected=false;e.setState(db);e.firePointEvent("unselect")}})},onMouseOver:function(){var a=this.series.chart,b=a.tooltip,c=a.hoverPoint;c&&c!=this&&c.onMouseOut();this.firePointEvent("mouseOver"); -b&&!b.shared&&b.refresh(this);this.setState(yb);a.hoverPoint=this},onMouseOut:function(){this.firePointEvent("mouseOut");this.setState();this.series.chart.hoverPoint=null},tooltipFormatter:function(a){var b=this.series;return['',this.name||b.name,": ",!a?"x = "+(this.name||this.x)+", ":"","",!a?"y = ":"",this.y,"
"].join("")},getDataLabelText:function(){return this.series.options.dataLabels.formatter.call({x:this.x,y:this.y,series:this.series, -point:this,percentage:this.percentage,total:this.total||this.stackTotal})},update:function(a,b,c){var d=this,e=d.series,f=d.dataLabel,g=d.graphic,i=e.chart;b=y(b,true);d.firePointEvent("update",{options:a},function(){d.applyOptions(a);f&&f.attr({text:d.getDataLabelText()});if(Eb(a)){e.getAttribs();g&&g.attr(d.pointAttr[e.state])}e.isDirty=true;b&&i.redraw(c)})},remove:function(a,b){var c=this,d=c.series,e=d.chart,f=d.data;bc(b,e);a=y(a,true);c.firePointEvent("remove",null,function(){mc(f,c);c.destroy(); -d.isDirty=true;a&&e.redraw()})},firePointEvent:function(a,b,c){var d=this,e=this.series.options;if(e.point.events[a]||d.options&&d.options.events&&d.options.events[a])this.importEvents();if(a=="click"&&e.allowPointSelect)c=function(f){d.select(null,f.ctrlKey||f.metaKey||f.shiftKey)};La(this,a,b,c)},importEvents:function(){if(!this.hasImportedEvents){var a=ya(this.series.options.point,this.options).events,b;this.events=a;for(b in a)Qa(this,b,a[b]);this.hasImportedEvents=true}},setState:function(a){var b= -this.series,c=b.options.states,d=wb[b.type].marker&&b.options.marker,e=d&&!d.enabled,f=(d=d&&d.states[a])&&d.enabled===false,g=b.stateMarkerGraphic,i=b.chart,k=this.pointAttr;a||(a=db);if(!(a==this.state||this.selected&&a!="select"||c[a]&&c[a].enabled===false||a&&(f||e&&!d.enabled))){if(this.graphic)this.graphic.attr(k[a]);else{if(a){if(!g)b.stateMarkerGraphic=g=i.renderer.circle(0,0,k[a].r).attr(k[a]).add(b.group);g.translate(this.plotX,this.plotY)}if(g)g[a?"show":"hide"]()}this.state=a}}};var mb= -function(){};mb.prototype={isCartesian:true,type:"line",pointClass:zc,pointAttrToOptions:{stroke:"lineColor","stroke-width":"lineWidth",fill:"fillColor",r:"radius"},init:function(a,b){var c,d;d=a.series.length;this.chart=a;b=this.setOptions(b);qa(this,{index:d,options:b,name:b.name||"Series "+(d+1),state:db,pointAttr:{},visible:b.visible!==false,selected:b.selected===true});d=b.events;for(c in d)Qa(this,c,d[c]);if(d&&d.click||b.point&&b.point.events&&b.point.events.click||b.allowPointSelect)a.runTrackerClick= -true;this.getColor();this.getSymbol();this.setData(b.data,false)},autoIncrement:function(){var a=this.options,b=this.xIncrement;b=y(b,a.pointStart,0);this.pointInterval=y(this.pointInterval,a.pointInterval,1);this.xIncrement=b+this.pointInterval;return b},cleanData:function(){var a=this.chart,b=this.data,c,d,e=a.smallestInterval,f,g;b.sort(function(i,k){return i.x-k.x});for(g=b.length-1;g>=0;g--)b[g-1]&&b[g-1].x==b[g].x&&b.splice(g-1,1);for(g=b.length-1;g>=0;g--)if(b[g-1]){f=b[g].x-b[g-1].x;if(d=== -Ra||fa+1&&b.push(c.slice(a+1,e));a=e}else e==c.length-1&&b.push(c.slice(a+1,e+1))});this.segments=b},setOptions:function(a){var b=this.chart.options.plotOptions;return ya(b[this.type],b.series,a)},getColor:function(){var a=this.chart.options.colors;this.color=this.options.color||a[Jb++]||"#0000ff";if(Jb>=a.length)Jb=0},getSymbol:function(){var a= -this.chart.options.symbols;this.symbol=this.options.marker.symbol||a[Yc++];if(Yc>=a.length)Yc=0},addPoint:function(a,b,c,d){var e=this.data,f=this.graph,g=this.area,i=this.chart;a=(new this.pointClass).init(this,a);bc(d,i);if(f&&c)f.shift=c;if(g){g.shift=c;g.isArea=true}b=y(b,true);e.push(a);c&&e[0].remove(false);this.isDirty=true;b&&i.redraw()},setData:function(a,b){var c=this,d=c.data,e=c.initialColor,f=c.chart,g=d&&d.length||0;c.xIncrement=null;if(J(e))Jb=e;for(a=jc(nc(a||[]),function(i){return(new c.pointClass).init(c, -i)});g--;)d[g].destroy();c.data=a;c.cleanData();c.getSegments();c.isDirty=true;f.isDirtyBox=true;y(b,true)&&f.redraw(false)},remove:function(a,b){var c=this,d=c.chart;a=y(a,true);if(!c.isRemoving){c.isRemoving=true;La(c,"remove",null,function(){c.destroy();d.isDirtyLegend=d.isDirtyBox=true;a&&d.redraw(b)})}c.isRemoving=false},translate:function(){for(var a=this.chart,b=this.options.stacking,c=this.xAxis.categories,d=this.yAxis,e=this.data,f=e.length;f--;){var g=e[f],i=g.x,k=g.y,j=g.low,n=d.stacks[(k< -0?"-":"")+this.stackKey];g.plotX=this.xAxis.translate(i);if(b&&this.visible&&n&&n[i]){j=n[i];i=j.total;j.cum=j=j.cum-k;k=j+k;if(b=="percent"){j=i?j*100/i:0;k=i?k*100/i:0}g.percentage=i?g.y*100/i:0;g.stackTotal=i}if(J(j))g.yBottom=d.translate(j,0,1);if(k!==null)g.plotY=d.translate(k,0,1);g.clientX=a.inverted?a.plotHeight-g.plotX:g.plotX;g.category=c&&c[g.x]!==Ra?c[g.x]:g.x}},setTooltipPoints:function(a){var b=this.chart,c=b.inverted,d=[],e=fa((c?b.plotTop:b.plotLeft)+b.plotSizeX),f,g,i=[];if(a)this.tooltipPoints= -null;t(this.segments,function(k){d=d.concat(k)});if(this.xAxis&&this.xAxis.reversed)d=d.reverse();t(d,function(k,j){f=d[j-1]?d[j-1].high+1:0;for(g=k.high=d[j+1]?ob((k.plotX+(d[j+1]?d[j+1].plotX:e))/2):e;f<=g;)i[c?e-f++:f++]=k});this.tooltipPoints=i},onMouseOver:function(){var a=this.chart,b=a.hoverSeries;if(!(!Ib&&a.mouseIsDown)){b&&b!=this&&b.onMouseOut();this.options.events.mouseOver&&La(this,"mouseOver");this.tracker&&this.tracker.toFront();this.setState(yb);a.hoverSeries=this}},onMouseOut:function(){var a= -this.options,b=this.chart,c=b.tooltip,d=b.hoverPoint;d&&d.onMouseOut();this&&a.events.mouseOut&&La(this,"mouseOut");c&&!a.stickyTracking&&c.hide();this.setState();b.hoverSeries=null},animate:function(a){var b=this.chart,c=this.clipRect,d=this.options.animation;if(d&&!Eb(d))d={};if(a){if(!c.isAnimating){c.attr("width",0);c.isAnimating=true}}else{c.animate({width:b.plotSizeX},d);this.animate=null}},drawPoints:function(){var a,b=this.data,c=this.chart,d,e,f,g,i,k;if(this.options.marker.enabled)for(f= -b.length;f--;){g=b[f];d=g.plotX;e=g.plotY;k=g.graphic;if(e!==Ra&&!isNaN(e)){a=g.pointAttr[g.selected?"select":db];i=a.r;if(k)k.animate({x:d,y:e,r:i});else g.graphic=c.renderer.symbol(y(g.marker&&g.marker.symbol,this.symbol),d,e,i).attr(a).add(this.group)}}},convertAttribs:function(a,b,c,d){var e=this.pointAttrToOptions,f,g,i={};a=a||{};b=b||{};c=c||{};d=d||{};for(f in e){g=e[f];i[f]=y(a[g],b[f],c[f],d[f])}return i},getAttribs:function(){var a=this,b=wb[a.type].marker?a.options.marker:a.options,c= -b.states,d=c[yb],e,f=a.color,g={stroke:f,fill:f},i=a.data,k=[],j,n=a.pointAttrToOptions;if(a.options.marker){d.radius=d.radius||b.radius+2;d.lineWidth=d.lineWidth||b.lineWidth+1}else d.color=d.color||Ub(d.color||f).brighten(d.brightness).get();k[db]=a.convertAttribs(b,g);t([yb,"select"],function(F){k[F]=a.convertAttribs(c[F],k[db])});a.pointAttr=k;for(f=i.length;f--;){g=i[f];if((b=g.options&&g.options.marker||g.options)&&b.enabled===false)b.radius=0;e=false;if(g.options)for(var z in n)if(J(b[n[z]]))e= -true;if(e){j=[];c=b.states||{};e=c[yb]=c[yb]||{};if(!a.options.marker)e.color=Ub(e.color||g.options.color).brighten(e.brightness||d.brightness).get();j[db]=a.convertAttribs(b,k[db]);j[yb]=a.convertAttribs(c[yb],k[yb],j[db]);j.select=a.convertAttribs(c.select,k.select,j[db])}else j=k;g.pointAttr=j}},destroy:function(){var a=this,b=a.chart,c=/\/5[0-9\.]+ (Safari|Mobile)\//.test(xc),d,e;Cb(a);a.legendItem&&a.chart.legend.destroyItem(a);t(a.data,function(f){f.destroy()});t(["area","graph","dataLabelsGroup", -"group","tracker"],function(f){if(a[f]){d=c&&f=="group"?"hide":"destroy";a[f][d]()}});if(b.hoverSeries==a)b.hoverSeries=null;mc(b.series,a);for(e in a)delete a[e]},drawDataLabels:function(){if(this.options.dataLabels.enabled){var a,b,c=this.data,d=this.options.dataLabels,e,f=this.dataLabelsGroup,g=this.chart,i=g.inverted,k=this.type,j;if(!f)f=this.dataLabelsGroup=g.renderer.g(Zb+"data-labels").attr({visibility:this.visible?Bb:vb,zIndex:5}).translate(g.plotLeft,g.plotTop).add();j=d.color;if(j=="auto")j= -null;d.style.color=y(j,this.color);t(c,function(n){var z=n.barX;z=z&&z+n.barW/2||n.plotX||-999;var F=y(n.plotY,-999),W=n.dataLabel,ca=d.align;e=n.getDataLabelText();a=(i?g.plotWidth-F:z)+d.x;b=(i?g.plotHeight-z:F)+d.y;if(k=="column")a+={left:-1,right:1}[ca]*n.barW/2||0;if(W)W.animate({x:a,y:b});else if(J(e))W=n.dataLabel=g.renderer.text(e,a,b).attr({align:ca,rotation:d.rotation,zIndex:1}).css(d.style).add(f);i&&!d.y&&W.attr({y:b+parseInt(W.styles.lineHeight)*0.9-W.getBBox().height/2})})}},drawGraph:function(){var a= -this,b=a.options,c=a.graph,d=[],e,f=a.area,g=a.group,i=b.lineColor||a.color,k=b.lineWidth,j=b.dashStyle,n,z=a.chart.renderer,F=a.yAxis.getThreshold(b.threshold||0),W=/^area/.test(a.type),ca=[],ka=[];t(a.segments,function(v){n=[];t(v,function(U,R){if(a.getPointSpline)n.push.apply(n,a.getPointSpline(v,U,R));else{n.push(R?Da:Za);R&&b.step&&n.push(U.plotX,v[R-1].plotY);n.push(U.plotX,U.plotY)}});if(v.length>1)d=d.concat(n);else ca.push(v[0]);if(W){var I=[],da,X=n.length;for(da=0;da=0;da--)I.push(v[da].plotX,v[da].yBottom);else I.push(Da,v[v.length-1].plotX,F,Da,v[0].plotX,F);ka=ka.concat(I)}});a.graphPath=d;a.singlePoints=ca;if(W){e=y(b.fillColor,Ub(a.color).setOpacity(b.fillOpacity||0.75).get());if(f)f.animate({d:ka});else a.area=a.chart.renderer.path(ka).attr({fill:e}).add(g)}if(c)c.animate({d:d});else if(k){c={stroke:i,"stroke-width":k};if(j)c.dashstyle=j;a.graph=z.path(d).attr(c).add(g).shadow(b.shadow)}}, -render:function(){var a=this,b=a.chart,c,d,e=a.options,f=e.animation,g=f&&a.animate;f=g?f&&f.duration||500:0;var i=a.clipRect;d=b.renderer;if(!i){i=a.clipRect=!b.hasRendered&&b.clipRect?b.clipRect:d.clipRect(0,0,b.plotSizeX,b.plotSizeY);if(!b.clipRect)b.clipRect=i}if(!a.group){c=a.group=d.g("series");if(b.inverted){d=function(){c.attr({width:b.plotWidth,height:b.plotHeight}).invert()};d();Qa(b,"resize",d)}c.clip(a.clipRect).attr({visibility:a.visible?Bb:vb,zIndex:e.zIndex}).translate(b.plotLeft,b.plotTop).add(b.seriesGroup)}a.drawDataLabels(); -g&&a.animate(true);a.getAttribs();a.drawGraph&&a.drawGraph();a.drawPoints();a.options.enableMouseTracking!==false&&a.drawTracker();g&&a.animate();setTimeout(function(){i.isAnimating=false;if((c=a.group)&&i!=b.clipRect&&i.renderer){c.clip(a.clipRect=b.clipRect);i.destroy()}},f);a.isDirty=false},redraw:function(){var a=this.chart,b=this.group;if(b){a.inverted&&b.attr({width:a.plotWidth,height:a.plotHeight});b.animate({translateX:a.plotLeft,translateY:a.plotTop})}this.translate();this.setTooltipPoints(true); -this.render()},setState:function(a){var b=this.options,c=this.graph,d=b.states;b=b.lineWidth;a=a||db;if(this.state!=a){this.state=a;if(!(d[a]&&d[a].enabled===false)){if(a)b=d[a].lineWidth||b+1;if(c&&!c.dashstyle)c.attr({"stroke-width":b},a?0:500)}}},setVisible:function(a,b){var c=this.chart,d=this.legendItem,e=this.group,f=this.tracker,g=this.dataLabelsGroup,i,k=this.data,j=c.options.chart.ignoreHiddenSeries;i=this.visible;i=(this.visible=a=a===Ra?!i:a)?"show":"hide";e&&e[i]();if(f)f[i]();else for(e= -k.length;e--;){f=k[e];f.tracker&&f.tracker[i]()}g&&g[i]();d&&c.legend.colorizeItem(this,a);this.isDirty=true;this.options.stacking&&t(c.series,function(n){if(n.options.stacking&&n.visible)n.isDirty=true});if(j)c.isDirtyBox=true;b!==false&&c.redraw();La(this,i)},show:function(){this.setVisible(true)},hide:function(){this.setVisible(false)},select:function(a){this.selected=a=a===Ra?!this.selected:a;if(this.checkbox)this.checkbox.checked=a;La(this,a?"select":"unselect")},drawTracker:function(){var a= -this,b=a.options,c=[].concat(a.graphPath),d=c.length,e=a.chart,f=e.options.tooltip.snap,g=a.tracker,i=b.cursor;i=i&&{cursor:i};var k=a.singlePoints,j;if(d)for(j=d+1;j--;){c[j]==Za&&c.splice(j+1,0,c[j+1]-f,c[j+2],Da);if(j&&c[j]==Za||j==d)c.splice(j,0,Da,c[j-2]+f,c[j-1])}for(j=0;j -a&&k>e){k=Ca(a,e);n=2*e-k}else if(kg&&n>e){n=Ca(g,e);k=2*e-n}else if(nv?X-v:ka-(da<=ka?v:0)}Ya=R-3}qa(I,{barX:U,barY:R,barW:W,barH:Ha});I.shapeType="rect";I.shapeArgs={x:U,y:R,width:W,height:Ha,r:k.borderRadius}; -I.trackerArgs=J(Ya)&&ya(I.shapeArgs,{height:Ca(6,Ha+3),y:Ya})})},getSymbol:function(){},drawGraph:function(){},drawPoints:function(){var a=this,b=a.options,c=a.chart.renderer,d,e;t(a.data,function(f){var g=f.plotY;if(g!==Ra&&!isNaN(g)){d=f.graphic;e=f.shapeArgs;if(d){Sc(d);d.animate(e)}else f.graphic=c[f.shapeType](e).attr(f.pointAttr[f.selected?"select":db]).add(a.group).shadow(b.shadow)}})},drawTracker:function(){var a=this,b=a.chart,c=b.renderer,d,e,f=+new Date,g=a.options.cursor,i=g&&{cursor:g}, -k;t(a.data,function(j){e=j.tracker;d=j.trackerArgs||j.shapeArgs;if(j.y!==null)if(e)e.attr(d);else j.tracker=c[j.shapeType](d).attr({isTracker:f,fill:Vd,visibility:a.visible?Bb:vb,zIndex:1}).on(Ib?"touchstart":"mouseover",function(n){k=n.relatedTarget||n.fromElement;b.hoverSeries!=a&&za(k,"isTracker")!=f&&a.onMouseOver();j.onMouseOver()}).on("mouseout",function(n){if(!a.options.stickyTracking){k=n.relatedTarget||n.toElement;za(k,"isTracker")!=f&&a.onMouseOut()}}).css(i).add(b.trackerGroup)})},animate:function(a){var b= -this,c=b.data;if(!a){t(c,function(d){var e=d.graphic;if(e){e.attr({height:0,y:b.yAxis.translate(0,0,1)});e.animate({height:d.barH,y:d.barY},b.options.animation)}});b.animate=null}},remove:function(){var a=this,b=a.chart;b.hasRendered&&t(b.series,function(c){if(c.type==a.type)c.isDirty=true});mb.prototype.remove.apply(a,arguments)}});ub.column=ad;Ma=xb(ad,{type:"bar",init:function(a){a.inverted=this.inverted=true;ad.prototype.init.apply(this,arguments)}});ub.bar=Ma;Ma=xb(mb,{type:"scatter",translate:function(){var a= -this;mb.prototype.translate.apply(a);t(a.data,function(b){b.shapeType="circle";b.shapeArgs={x:b.plotX,y:b.plotY,r:a.chart.options.tooltip.snap}})},drawTracker:function(){var a=this,b=a.options.cursor,c=b&&{cursor:b},d;t(a.data,function(e){(d=e.graphic)&&d.attr({isTracker:true}).on("mouseover",function(){a.onMouseOver();e.onMouseOver()}).on("mouseout",function(){a.options.stickyTracking||a.onMouseOut()}).css(c)})},cleanData:function(){}});ub.scatter=Ma;Ma=xb(zc,{init:function(){zc.prototype.init.apply(this, -arguments);var a=this,b;qa(a,{visible:a.visible!==false,name:y(a.name,"Slice")});b=function(){a.slice()};Qa(a,"select",b);Qa(a,"unselect",b);return a},setVisible:function(a){var b=this.series.chart,c=this.tracker,d=this.dataLabel,e=this.connector,f;f=(this.visible=a=a===Ra?!this.visible:a)?"show":"hide";this.group[f]();c&&c[f]();d&&d[f]();e&&e[f]();this.legendItem&&b.legend.colorizeItem(this,a)},slice:function(a,b,c){var d=this.series.chart,e=this.slicedTranslation;bc(c,d);y(b,true);a=this.sliced= -J(a)?a:!this.sliced;this.group.animate({translateX:a?e[0]:d.plotLeft,translateY:a?e[1]:d.plotTop})}});Ma=xb(mb,{type:"pie",isCartesian:false,pointClass:Ma,pointAttrToOptions:{stroke:"borderColor","stroke-width":"borderWidth",fill:"color"},getColor:function(){this.initialColor=Jb},animate:function(){var a=this;t(a.data,function(b){var c=b.graphic;b=b.shapeArgs;var d=-Tb/2;if(c){c.attr({r:0,start:d,end:d});c.animate({r:b.r,start:b.start,end:b.end},a.options.animation)}});a.animate=null},translate:function(){var a= -0,b=-0.25,c=this.options,d=c.slicedOffset,e=d+c.borderWidth,f=c.center,g=this.chart,i=g.plotWidth,k=g.plotHeight,j,n,z,F=this.data,W=2*Tb,ca,ka=pb(i,k),v,I,da,X=c.dataLabels.distance;f.push(c.size,c.innerSize||0);f=jc(f,function(U,R){return(v=/%$/.test(U))?[i,k,ka,ka][R]*oa(U)/100:U});this.getX=function(U,R){z=Ua.asin((U-f[1])/(f[2]/2+X));return f[0]+(R?-1:1)*kb(z)*(f[2]/2+X)};this.center=f;t(F,function(U){a+=U.y});t(F,function(U){ca=a?U.y/a:0;j=fa(b*W*1E3)/1E3;b+=ca;n=fa(b*W*1E3)/1E3;U.shapeType= -"arc";U.shapeArgs={x:f[0],y:f[1],r:f[2]/2,innerR:f[3]/2,start:j,end:n};z=(n+j)/2;U.slicedTranslation=jc([kb(z)*d+g.plotLeft,zb(z)*d+g.plotTop],fa);I=kb(z)*f[2]/2;da=zb(z)*f[2]/2;U.tooltipPos=[f[0]+I*0.7,f[1]+da*0.7];U.labelPos=[f[0]+I+kb(z)*X,f[1]+da+zb(z)*X,f[0]+I+kb(z)*e,f[1]+da+zb(z)*e,f[0]+I,f[1]+da,X<0?"center":z0,j,n,z=this.center[1],F=[[],[],[],[]],W,ca,ka,v,I,da,X,U=4,R;mb.prototype.drawDataLabels.apply(this);t(a,function(Ha){var Ya=Ha.labelPos[7];F[Ya<0?0:YaYa.y};U--;){a=0;b=[].concat(F[U]);b.sort(X);for(R=b.length;R--;)b[R].rank=R;for(v=0;v<2;v++){n=(da=U%3)?9999:-9999;I=da?-1:1;for(R=0;Rn-j){ca=n+I*j;W=this.getX(ca,U>1);if(!da&&ca+j>z||da&&ca-j/g, '') - .split(/]?>/g), - childNodes = textNode.childNodes, - styleRegex = /style="([^"]+)"/, - hrefRegex = /href="([^"]+)"/, - parentX = attr(textNode, 'x'), - textStyles = wrapper.styles, - reverse = isFirefox && textStyles && textStyles.HcDirection == 'rtl' && !this.forExport, // issue #38 - arr, - width = textStyles && pInt(textStyles.width), - textLineHeight = textStyles && textStyles.lineHeight, - lastLine, - i = childNodes.length; - - // remove old text - while (i--) { - textNode.removeChild(childNodes[i]); - } - - if (width && !wrapper.added) { - this.box.appendChild(textNode); // attach it to the DOM to read offset width - } - - each(lines, function(line, lineNo) { - var spans, spanNo = 0, lineHeight; - - line = line.replace(//g, '|||'); - spans = line.split('|||'); - - each(spans, function (span) { - if (span !== '' || spans.length == 1) { - var attributes = {}, - tspan = doc.createElementNS(SVG_NS, 'tspan'); - if (styleRegex.test(span)) { - attr( - tspan, - 'style', - span.match(styleRegex)[1].replace(/(;| |^)color([ :])/, '$1fill$2') - ); - } - if (hrefRegex.test(span)) { - attr(tspan, 'onclick', 'location.href=\"'+ span.match(hrefRegex)[1] +'\"'); - css(tspan, { cursor: 'pointer' }); - } - - span = span.replace(/<(.|\n)*?>/g, '') || ' '; - - // issue #38 workaround. - if (reverse) { - arr = []; - i = span.length; - while (i--) { - arr.push(span.charAt(i)) - } - span = arr.join(''); - } - - // add the text node - tspan.appendChild(doc.createTextNode(span)); - - if (!spanNo) { // first span in a line, align it to the left - attributes.x = parentX; - } else { - // Firefox ignores spaces at the front or end of the tspan - attributes.dx = 3; // space - } - - // first span on subsequent line, add the line height - if (!spanNo) { - if (lineNo) { - // Webkit and opera sometimes return 'normal' as the line height. In that - // case, webkit uses offsetHeight, while Opera falls back to 18 - lineHeight = pInt(window.getComputedStyle(lastLine, null).getPropertyValue('line-height')); - if (isNaN(lineHeight)) { - lineHeight = textLineHeight || lastLine.offsetHeight || 18; - } - attr(tspan, 'dy', lineHeight); - } - lastLine = tspan; // record for use in next line - } - - // add attributes - attr(tspan, attributes); - - // append it - textNode.appendChild(tspan); - - spanNo++; - - // check width and apply soft breaks - if (width) { - var words = span.replace(/-/g, '- ').split(' '), - tooLong, - actualWidth, - rest = []; - - while (words.length || rest.length) { - actualWidth = textNode.getBBox().width; - tooLong = actualWidth > width; - if (!tooLong || words.length == 1) { // new line needed - words = rest; - rest = []; - if (words.length) { - tspan = doc.createElementNS(SVG_NS, 'tspan'); - attr(tspan, { - x: parentX, - dy: textLineHeight || 16 - }); - textNode.appendChild(tspan); - - if (actualWidth > width) { // a single word is pressing it out - width = actualWidth; - } - } - } else { // append to existing line tspan - tspan.removeChild(tspan.firstChild); - rest.unshift(words.pop()); - } - - tspan.appendChild(doc.createTextNode(words.join(' ').replace(/- /g, '-'))); - } - - } - } - }); - }); - - - }, - - /** - * Make a straight line crisper by not spilling out to neighbour pixels - * @param {Array} points - * @param {Number} width - */ - crispLine: function(points, width) { - // points format: [M, 0, 0, L, 100, 0] - // normalize to a crisp line - if (points[1] == points[4]) { - points[1] = points[4] = mathRound(points[1]) + (width % 2 / 2); - } - if (points[2] == points[5]) { - points[2] = points[5] = mathRound(points[2]) + (width % 2 / 2); - } - return points; - }, - - - /** - * Draw a path - * @param {Array} path An SVG path in array form - */ - path: function (path) { - return this.createElement('path').attr({ - d: path, - fill: NONE - }); - }, - - /** - * Draw and return an SVG circle - * @param {Number} x The x position - * @param {Number} y The y position - * @param {Number} r The radius - */ - circle: function (x, y, r) { - var attr = isObject(x) ? - x : - { - x: x, - y: y, - r: r - }; - - return this.createElement('circle').attr(attr); - }, - - /** - * Draw and return an arc - * @param {Number} x X position - * @param {Number} y Y position - * @param {Number} r Radius - * @param {Number} innerR Inner radius like used in donut charts - * @param {Number} start Starting angle - * @param {Number} end Ending angle - */ - arc: function (x, y, r, innerR, start, end) { - // arcs are defined as symbols for the ability to set - // attributes in attr and animate - - if (isObject(x)) { - y = x.y; - r = x.r; - innerR = x.innerR; - start = x.start; - end = x.end; - x = x.x; - } - - return this.symbol('arc', x || 0, y || 0, r || 0, { - innerR: innerR || 0, - start: start || 0, - end: end || 0 - }); - }, - - /** - * Draw and return a rectangle - * @param {Number} x Left position - * @param {Number} y Top position - * @param {Number} width - * @param {Number} height - * @param {Number} r Border corner radius - * @param {Number} strokeWidth A stroke width can be supplied to allow crisp drawing - */ - rect: function (x, y, width, height, r, strokeWidth) { - if (isObject(x)) { - y = x.y; - width = x.width; - height = x.height; - r = x.r; - x = x.x; - } - var wrapper = this.createElement('rect').attr({ - rx: r, - ry: r, - fill: NONE - }); - - return wrapper.attr(wrapper.crisp(strokeWidth, x, y, mathMax(width, 0), mathMax(height, 0))); - }, - - /** - * Resize the box and re-align all aligned elements - * @param {Object} width - * @param {Object} height - * @param {Boolean} animate - * - */ - setSize: function(width, height, animate) { - var renderer = this, - alignedObjects = renderer.alignedObjects, - i = alignedObjects.length; - - renderer.width = width; - renderer.height = height; - - renderer.boxWrapper[pick(animate, true) ? 'animate' : 'attr']({ - width: width, - height: height - }); - - while (i--) { - alignedObjects[i].align(); - } - }, - - /** - * Create a group - * @param {String} name The group will be given a class name of 'highcharts-{name}'. - * This can be used for styling and scripting. - */ - g: function(name) { - return this.createElement('g').attr( - defined(name) && { 'class': PREFIX + name } - ); - }, - - /** - * Display an image - * @param {String} src - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height - */ - image: function(src, x, y, width, height) { - var attribs = { - preserveAspectRatio: NONE - }, - elemWrapper; - - // optional properties - if (arguments.length > 1) { - extend(attribs, { - x: x, - y: y, - width: width, - height: height - }); - } - - elemWrapper = this.createElement('image').attr(attribs); - - // set the href in the xlink namespace - elemWrapper.element.setAttributeNS('http://www.w3.org/1999/xlink', - 'href', src); - - return elemWrapper; - }, - - /** - * Draw a symbol out of pre-defined shape paths from the namespace 'symbol' object. - * - * @param {Object} symbol - * @param {Object} x - * @param {Object} y - * @param {Object} radius - * @param {Object} options - */ - symbol: function(symbol, x, y, radius, options) { - - var obj, - - // get the symbol definition function - symbolFn = this.symbols[symbol], - - // check if there's a path defined for this symbol - path = symbolFn && symbolFn( - x, - y, - radius, - options - ), - - imageRegex = /^url\((.*?)\)$/, - imageSrc; - - if (path) { - - obj = this.path(path); - // expando properties for use in animate and attr - extend(obj, { - symbolName: symbol, - x: x, - y: y, - r: radius - }); - if (options) { - extend(obj, options); - } - - - // image symbols - } else if (imageRegex.test(symbol)) { - - imageSrc = symbol.match(imageRegex)[1]; - - // create the image synchronously, add attribs async - obj = this.image(imageSrc) - .attr({ - x: x, - y: y - }); - - // create a dummy JavaScript image to get the width and height - createElement('img', { - onload: function() { - var img = this, - size = symbolSizes[img.src] || [img.width, img.height]; - obj.attr({ - width: size[0], - height: size[1] - }).translate( - -mathRound(size[0] / 2), - -mathRound(size[1] / 2) - ); - }, - src: imageSrc - }); - - // default circles - } else { - obj = this.circle(x, y, radius); - } - - return obj; - }, - - /** - * An extendable collection of functions for defining symbol paths. - */ - symbols: { - 'square': function (x, y, radius) { - var len = 0.707 * radius; - return [ - M, x-len, y-len, - L, x+len, y-len, - x+len, y+len, - x-len, y+len, - 'Z' - ]; - }, - - 'triangle': function (x, y, radius) { - return [ - M, x, y-1.33 * radius, - L, x+radius, y + 0.67 * radius, - x-radius, y + 0.67 * radius, - 'Z' - ]; - }, - - 'triangle-down': function (x, y, radius) { - return [ - M, x, y + 1.33 * radius, - L, x-radius, y-0.67 * radius, - x+radius, y-0.67 * radius, - 'Z' - ]; - }, - 'diamond': function (x, y, radius) { - return [ - M, x, y-radius, - L, x+radius, y, - x, y+radius, - x-radius, y, - 'Z' - ]; - }, - 'arc': function (x, y, radius, options) { - var start = options.start, - end = options.end - 0.000001, // to prevent cos and sin of start and end from becoming equal on 360 arcs - innerRadius = options.innerR, - cosStart = mathCos(start), - sinStart = mathSin(start), - cosEnd = mathCos(end), - sinEnd = mathSin(end), - longArc = options.end - start < mathPI ? 0 : 1; - - return [ - M, - x + radius * cosStart, - y + radius * sinStart, - 'A', // arcTo - radius, // x radius - radius, // y radius - 0, // slanting - longArc, // long or short arc - 1, // clockwise - x + radius * cosEnd, - y + radius * sinEnd, - L, - x + innerRadius * cosEnd, - y + innerRadius * sinEnd, - 'A', // arcTo - innerRadius, // x radius - innerRadius, // y radius - 0, // slanting - longArc, // long or short arc - 0, // clockwise - x + innerRadius * cosStart, - y + innerRadius * sinStart, - - 'Z' // close - ]; - } - }, - - /** - * Define a clipping rectangle - * @param {String} id - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height - */ - clipRect: function (x, y, width, height) { - var wrapper, - id = PREFIX + idCounter++, - - clipPath = this.createElement('clipPath').attr({ - id: id - }).add(this.defs); - - wrapper = this.rect(x, y, width, height, 0).add(clipPath); - wrapper.id = id; - - return wrapper; - }, - - - /** - * Take a color and return it if it's a string, make it a gradient if it's a - * gradient configuration object - * - * @param {Object} color The color or config object - */ - color: function(color, elem, prop) { - var colorObject, - regexRgba = /^rgba/; - if (color && color.linearGradient) { - var renderer = this, - strLinearGradient = 'linearGradient', - linearGradient = color[strLinearGradient], - id = PREFIX + idCounter++, - gradientObject, - stopColor, - stopOpacity; - gradientObject = renderer.createElement(strLinearGradient).attr({ - id: id, - gradientUnits: 'userSpaceOnUse', - x1: linearGradient[0], - y1: linearGradient[1], - x2: linearGradient[2], - y2: linearGradient[3] - }).add(renderer.defs); - - each(color.stops, function(stop) { - if (regexRgba.test(stop[1])) { - colorObject = Color(stop[1]); - stopColor = colorObject.get('rgb'); - stopOpacity = colorObject.get('a'); - } else { - stopColor = stop[1]; - stopOpacity = 1; - } - renderer.createElement('stop').attr({ - offset: stop[0], - 'stop-color': stopColor, - 'stop-opacity': stopOpacity - }).add(gradientObject); - }); - - return 'url('+ this.url +'#'+ id +')'; - - // Webkit and Batik can't show rgba. - } else if (regexRgba.test(color)) { - colorObject = Color(color); - attr(elem, prop +'-opacity', colorObject.get('a')); - - return colorObject.get('rgb'); - - - } else { - return color; - } - - }, - - - /** - * Add text to the SVG object - * @param {String} str - * @param {Number} x Left position - * @param {Number} y Top position - */ - text: function(str, x, y) { - - // declare variables - var defaultChartStyle = defaultOptions.chart.style, - wrapper; - - x = mathRound(pick(x, 0)); - y = mathRound(pick(y, 0)); - - wrapper = this.createElement('text') - .attr({ - x: x, - y: y, - text: str - }) - .css({ - 'font-family': defaultChartStyle.fontFamily, - 'font-size': defaultChartStyle.fontSize - }); - - wrapper.x = x; - wrapper.y = y; - return wrapper; - } -}; // end SVGRenderer - - - - -/* **************************************************************************** - * * - * START OF INTERNET EXPLORER <= 8 SPECIFIC CODE * - * * - * For applications and websites that don't need IE support, like platform * - * targeted mobile apps and web apps, this code can be removed. * - * * - *****************************************************************************/ -var VMLRenderer; -if (!hasSVG) { - -/** - * The VML element wrapper. - */ -var VMLElement = extendClass( SVGElement, { - - /** - * Initialize a new VML element wrapper. It builds the markup as a string - * to minimize DOM traffic. - * @param {Object} renderer - * @param {Object} nodeName - */ - init: function(renderer, nodeName) { - var markup = ['<', nodeName, ' filled="f" stroked="f"'], - style = ['position: ', ABSOLUTE, ';']; - - // divs and shapes need size - if (nodeName == 'shape' || nodeName == DIV) { - style.push('left:0;top:0;width:10px;height:10px;'); - } - if (docMode8) { - style.push('visibility: ', nodeName == DIV ? HIDDEN : VISIBLE); - } - - markup.push(' style="', style.join(''), '"/>'); - - // create element with default attributes and style - if (nodeName) { - markup = nodeName == DIV || nodeName == 'span' || nodeName == 'img' ? - markup.join('') - : renderer.prepVML(markup); - this.element = createElement(markup); - } - - this.renderer = renderer; - }, - - /** - * Add the node to the given parent - * @param {Object} parent - */ - add: function(parent) { - var wrapper = this, - renderer = wrapper.renderer, - element = wrapper.element, - box = renderer.box, - inverted = parent && parent.inverted, - - // get the parent node - parentNode = parent ? - parent.element || parent : - box; - - - // if the parent group is inverted, apply inversion on all children - if (inverted) { // only on groups - renderer.invertChild(element, parentNode); - } - - // issue #140 workaround - related to #61 and #74 - if (docMode8 && parentNode.gVis == HIDDEN) { - css(element, { visibility: HIDDEN }); - } - - // append it - parentNode.appendChild(element); - - // align text after adding to be able to read offset - wrapper.added = true; - if (wrapper.alignOnAdd) { - wrapper.updateTransform(); - } - - return wrapper; - }, - - /** - * Get or set attributes - */ - attr: function(hash, val) { - var key, - value, - i, - element = this.element || {}, - elemStyle = element.style, - nodeName = element.nodeName, - renderer = this.renderer, - symbolName = this.symbolName, - childNodes, - hasSetSymbolSize, - shadows = this.shadows, - skipAttr, - ret = this; - - // single key-value pair - if (isString(hash) && defined(val)) { - key = hash; - hash = {}; - hash[key] = val; - } - - // used as a getter, val is undefined - if (isString(hash)) { - key = hash; - if (key == 'strokeWidth' || key == 'stroke-width') { - ret = this.strokeweight; - } else { - ret = this[key]; - } - - // setter - } else { - for (key in hash) { - value = hash[key]; - skipAttr = false; - - // prepare paths - // symbols - if (symbolName && /^(x|y|r|start|end|width|height|innerR)/.test(key)) { - // if one of the symbol size affecting parameters are changed, - // check all the others only once for each call to an element's - // .attr() method - if (!hasSetSymbolSize) { - - this.symbolAttr(hash); - - hasSetSymbolSize = true; - } - - skipAttr = true; - - } else if (key == 'd') { - value = value || []; - this.d = value.join(' '); // used in getter for animation - - // convert paths - i = value.length; - var convertedPath = []; - while (i--) { - - // Multiply by 10 to allow subpixel precision. - // Substracting half a pixel seems to make the coordinates - // align with SVG, but this hasn't been tested thoroughly - if (isNumber(value[i])) { - convertedPath[i] = mathRound(value[i] * 10) - 5; - } - // close the path - else if (value[i] == 'Z') { - convertedPath[i] = 'x'; - } - else { - convertedPath[i] = value[i]; - } - - } - value = convertedPath.join(' ') || 'x'; - element.path = value; - - // update shadows - if (shadows) { - i = shadows.length; - while (i--) { - shadows[i].path = value; - } - } - skipAttr = true; - - // directly mapped to css - } else if (key == 'zIndex' || key == 'visibility') { - - // issue 61 workaround - if (docMode8 && key == 'visibility' && nodeName == 'DIV') { - element.gVis = value; - childNodes = element.childNodes; - i = childNodes.length; - while (i--) { - css(childNodes[i], { visibility: value }); - } - if (value == VISIBLE) { // issue 74 - value = null; - } - } - - if (value) { - elemStyle[key] = value; - } - - - - skipAttr = true; - - // width and height - } else if (/^(width|height)$/.test(key)) { - - - // clipping rectangle special - if (this.updateClipping) { - this[key] = value; - this.updateClipping(); - - } else { - // normal - elemStyle[key] = value; - } - - skipAttr = true; - - // x and y - } else if (/^(x|y)$/.test(key)) { - - this[key] = value; // used in getter - - if (element.tagName == 'SPAN') { - this.updateTransform(); - - } else { - elemStyle[{ x: 'left', y: 'top' }[key]] = value; - } - - // class name - } else if (key == 'class') { - // IE8 Standards mode has problems retrieving the className - element.className = value; - - // stroke - } else if (key == 'stroke') { - - value = renderer.color(value, element, key); - - key = 'strokecolor'; - - // stroke width - } else if (key == 'stroke-width' || key == 'strokeWidth') { - element.stroked = value ? true : false; - key = 'strokeweight'; - this[key] = value; // used in getter, issue #113 - if (isNumber(value)) { - value += PX; - } - - // dashStyle - } else if (key == 'dashstyle') { - var strokeElem = element.getElementsByTagName('stroke')[0] || - createElement(renderer.prepVML(['']), null, null, element); - strokeElem[key] = value || 'solid'; - this.dashstyle = value; /* because changing stroke-width will change the dash length - and cause an epileptic effect */ - skipAttr = true; - - // fill - } else if (key == 'fill') { - - if (nodeName == 'SPAN') { // text color - elemStyle.color = value; - } else { - element.filled = value != NONE ? true : false; - - value = renderer.color(value, element, key); - - key = 'fillcolor'; - } - - // translation for animation - } else if (key == 'translateX' || key == 'translateY' || key == 'rotation' || key == 'align') { - if (key == 'align') { - key = 'textAlign'; - } - this[key] = value; - this.updateTransform(); - - skipAttr = true; - } - - // text for rotated and non-rotated elements - else if (key == 'text') { - element.innerHTML = value; - skipAttr = true; - } - - - // let the shadow follow the main element - if (shadows && key == 'visibility') { - i = shadows.length; - while (i--) { - shadows[i].style[key] = value; - } - } - - - - if (!skipAttr) { - if (docMode8) { // IE8 setAttribute bug - element[key] = value; - } else { - attr(element, key, value); - } - } - } - } - return ret; - }, - - /** - * Set the element's clipping to a predefined rectangle - * - * @param {String} id The id of the clip rectangle - */ - clip: function(clipRect) { - var wrapper = this, - clipMembers = clipRect.members; - - clipMembers.push(wrapper); - wrapper.destroyClip = function() { - erase(clipMembers, wrapper); - }; - return wrapper.css(clipRect.getCSS(wrapper.inverted)); - }, - - /** - * Set styles for the element - * @param {Object} styles - */ - css: function(styles) { - var wrapper = this, - element = wrapper.element, - textWidth = styles && element.tagName == 'SPAN' && styles.width; - - /*if (textWidth) { - extend(styles, { - display: 'block', - whiteSpace: 'normal' - }); - }*/ - if (textWidth) { - delete styles.width; - wrapper.textWidth = textWidth; - wrapper.updateTransform(); - } - - wrapper.styles = extend(wrapper.styles, styles); - css(wrapper.element, styles); - - - - return wrapper; - }, - - /** - * Extend element.destroy by removing it from the clip members array - */ - destroy: function() { - var wrapper = this; - - if (wrapper.destroyClip) { - wrapper.destroyClip(); - } - - SVGElement.prototype.destroy.apply(wrapper); - }, - - /** - * Remove all child nodes of a group, except the v:group element - */ - empty: function() { - var element = this.element, - childNodes = element.childNodes, - i = childNodes.length, - node; - - while (i--) { - node = childNodes[i]; - node.parentNode.removeChild(node); - } - }, - - /** - * VML override for calculating the bounding box based on offsets - * - * @return {Object} A hash containing values for x, y, width and height - */ - - getBBox: function() { - var element = this.element; - - // faking getBBox in exported SVG in legacy IE - if (element.nodeName == 'text') { - element.style.position = ABSOLUTE; - } - - return { - x: element.offsetLeft, - y: element.offsetTop, - width: element.offsetWidth, - height: element.offsetHeight - }; - - }, - - /** - * Add an event listener. VML override for normalizing event parameters. - * @param {String} eventType - * @param {Function} handler - */ - on: function(eventType, handler) { - // simplest possible event model for internal use - this.element['on'+ eventType] = function() { - var evt = win.event; - evt.target = evt.srcElement; - handler(evt); - }; - return this; - }, - - - /** - * VML override private method to update elements based on internal - * properties based on SVG transform - */ - updateTransform: function(hash) { - // aligning non added elements is expensive - if (!this.added) { - this.alignOnAdd = true; - return; - } - - var wrapper = this, - elem = wrapper.element, - translateX = wrapper.translateX || 0, - translateY = wrapper.translateY || 0, - x = wrapper.x || 0, - y = wrapper.y || 0, - align = wrapper.textAlign || 'left', - alignCorrection = { left: 0, center: 0.5, right: 1 }[align], - nonLeft = align && align != 'left'; - - // apply translate - if (translateX || translateY) { - wrapper.css({ - marginLeft: translateX, - marginTop: translateY - }); - } - - // apply inversion - if (wrapper.inverted) { // wrapper is a group - each(elem.childNodes, function(child) { - wrapper.renderer.invertChild(child, elem); - }); - } - - if (elem.tagName == 'SPAN') { - - var width, height, - rotation = wrapper.rotation, - lineHeight, - radians = 0, - costheta = 1, - sintheta = 0, - quad, - textWidth = pInt(wrapper.textWidth), - xCorr = wrapper.xCorr || 0, - yCorr = wrapper.yCorr || 0, - currentTextTransform = [rotation, align, elem.innerHTML, wrapper.textWidth].join(','); - - if (currentTextTransform != wrapper.cTT) { // do the calculations and DOM access only if properties changed - - if (defined(rotation)) { - radians = rotation * deg2rad; // deg to rad - costheta = mathCos(radians); - sintheta = mathSin(radians); - - // Adjust for alignment and rotation. - // Test case: http://highcharts.com/tests/?file=text-rotation - css(elem, { - filter: rotation ? ['progid:DXImageTransform.Microsoft.Matrix(M11=', costheta, - ', M12=', -sintheta, ', M21=', sintheta, ', M22=', costheta, - ', sizingMethod=\'auto expand\')'].join('') : NONE - }); - } - - width = elem.offsetWidth; - height = elem.offsetHeight; - - // update textWidth - if (width > textWidth) { - css(elem, { - width: textWidth +PX, - display: 'block', - whiteSpace: 'normal' - }); - width = textWidth; - } - - // correct x and y - lineHeight = mathRound(pInt(elem.style.fontSize || 12) * 1.2); - xCorr = costheta < 0 && -width; - yCorr = sintheta < 0 && -height; - - // correct for lineHeight and corners spilling out after rotation - quad = costheta * sintheta < 0; - xCorr += sintheta * lineHeight * (quad ? 1 - alignCorrection : alignCorrection); - yCorr -= costheta * lineHeight * (rotation ? (quad ? alignCorrection : 1 - alignCorrection) : 1); - - // correct for the length/height of the text - if (nonLeft) { - xCorr -= width * alignCorrection * (costheta < 0 ? -1 : 1); - if (rotation) { - yCorr -= height * alignCorrection * (sintheta < 0 ? -1 : 1); - } - css(elem, { - textAlign: align - }); - } - - // record correction - wrapper.xCorr = xCorr; - wrapper.yCorr = yCorr; - } - - // apply position with correction - css(elem, { - left: x + xCorr, - top: y + yCorr - }); - - // record current text transform - wrapper.cTT = currentTextTransform; - } - }, - - /** - * Apply a drop shadow by copying elements and giving them different strokes - * @param {Boolean} apply - */ - shadow: function(apply) { - var shadows = [], - i, - element = this.element, - renderer = this.renderer, - shadow, - elemStyle = element.style, - markup, - path = element.path; - - // the path is some mysterious string-like object that can be cast to a string - if (''+ element.path === '') { - path = 'x'; - } - - if (apply) { - for (i = 1; i <= 3; i++) { - markup = ['']; - shadow = createElement(renderer.prepVML(markup), - null, { - left: pInt(elemStyle.left) + 1, - top: pInt(elemStyle.top) + 1 - } - ); - - // apply the opacity - markup = ['']; - createElement(renderer.prepVML(markup), null, null, shadow); - - - // insert it - element.parentNode.insertBefore(shadow, element); - - // record it - shadows.push(shadow); - - } - - this.shadows = shadows; - } - return this; - - } -}); - -/** - * The VML renderer - */ -VMLRenderer = function() { - this.init.apply(this, arguments); -}; -VMLRenderer.prototype = merge( SVGRenderer.prototype, { // inherit SVGRenderer - - isIE8: userAgent.indexOf('MSIE 8.0') > -1, - - - /** - * Initialize the VMLRenderer - * @param {Object} container - * @param {Number} width - * @param {Number} height - */ - init: function(container, width, height) { - var renderer = this, - boxWrapper; - - renderer.Element = VMLElement; - renderer.alignedObjects = []; - - boxWrapper = renderer.createElement(DIV); - container.appendChild(boxWrapper.element); - - - // generate the containing box - renderer.box = boxWrapper.element; - renderer.boxWrapper = boxWrapper; - - - renderer.setSize(width, height, false); - - // The only way to make IE6 and IE7 print is to use a global namespace. However, - // with IE8 the only way to make the dynamic shapes visible in screen and print mode - // seems to be to add the xmlns attribute and the behaviour style inline. - if (!doc.namespaces.hcv) { - - doc.namespaces.add('hcv', 'urn:schemas-microsoft-com:vml'); - - // setup default css - doc.createStyleSheet().cssText = - 'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke'+ - '{ behavior:url(#default#VML); display: inline-block; } '; - - } - }, - - /** - * Define a clipping rectangle. In VML it is accomplished by storing the values - * for setting the CSS style to all associated members. - * - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height - */ - clipRect: function (x, y, width, height) { - - // create a dummy element - var clipRect = this.createElement(); - - // mimic a rectangle with its style object for automatic updating in attr - return extend(clipRect, { - members: [], - left: x, - top: y, - width: width, - height: height, - getCSS: function(inverted) { - var rect = this,//clipRect.element.style, - top = rect.top, - left = rect.left, - right = left + rect.width, - bottom = top + rect.height, - ret = { - clip: 'rect('+ - mathRound(inverted ? left : top) + 'px,'+ - mathRound(inverted ? bottom : right) + 'px,'+ - mathRound(inverted ? right : bottom) + 'px,'+ - mathRound(inverted ? top : left) +'px)' - }; - - // issue 74 workaround - if (!inverted && docMode8) { - extend(ret, { - width: right +PX, - height: bottom +PX - }); - } - return ret; - }, - - // used in attr and animation to update the clipping of all members - updateClipping: function() { - each(clipRect.members, function(member) { - member.css(clipRect.getCSS(member.inverted)); - }); - } - }); - - }, - - - /** - * Take a color and return it if it's a string, make it a gradient if it's a - * gradient configuration object, and apply opacity. - * - * @param {Object} color The color or config object - */ - color: function(color, elem, prop) { - var colorObject, - regexRgba = /^rgba/, - markup; - - if (color && color.linearGradient) { - - var stopColor, - stopOpacity, - linearGradient = color.linearGradient, - angle, - color1, - opacity1, - color2, - opacity2; - - each(color.stops, function(stop, i) { - if (regexRgba.test(stop[1])) { - colorObject = Color(stop[1]); - stopColor = colorObject.get('rgb'); - stopOpacity = colorObject.get('a'); - } else { - stopColor = stop[1]; - stopOpacity = 1; - } - - if (!i) { // first - color1 = stopColor; - opacity1 = stopOpacity; - } else { - color2 = stopColor; - opacity2 = stopOpacity; - } - }); - - - - // calculate the angle based on the linear vector - angle = 90 - math.atan( - (linearGradient[3] - linearGradient[1]) / // y vector - (linearGradient[2] - linearGradient[0]) // x vector - ) * 180 / mathPI; - - // when colors attribute is used, the meanings of opacity and o:opacity2 - // are reversed. - markup = ['<', prop, ' colors="0% ', color1, ',100% ', color2, '" angle="', angle, - '" opacity="', opacity2, '" o:opacity2="', opacity1, - '" type="gradient" focus="100%" />']; - createElement(this.prepVML(markup), null, null, elem); - - - - // if the color is an rgba color, split it and add a fill node - // to hold the opacity component - } else if (regexRgba.test(color) && elem.tagName != 'IMG') { - - colorObject = Color(color); - - markup = ['<', prop, ' opacity="', colorObject.get('a'), '"/>']; - createElement(this.prepVML(markup), null, null, elem); - - return colorObject.get('rgb'); - - - } else { - return color; - } - - }, - - /** - * Take a VML string and prepare it for either IE8 or IE6/IE7. - * @param {Array} markup A string array of the VML markup to prepare - */ - prepVML: function(markup) { - var vmlStyle = 'display:inline-block;behavior:url(#default#VML);', - isIE8 = this.isIE8; - - markup = markup.join(''); - - if (isIE8) { // add xmlns and style inline - markup = markup.replace('/>', ' xmlns="urn:schemas-microsoft-com:vml" />'); - if (markup.indexOf('style="') == -1) { - markup = markup.replace('/>', ' style="'+ vmlStyle +'" />'); - } else { - markup = markup.replace('style="', 'style="'+ vmlStyle); - } - - } else { // add namespace - markup = markup.replace('<', ' 1) { - obj.css({ - left: x, - top: y, - width: width, - height: height - }); - } - return obj; - }, - - /** - * VML uses a shape for rect to overcome bugs and rotation problems - */ - rect: function(x, y, width, height, r, strokeWidth) { - - if (isObject(x)) { - y = x.y; - width = x.width; - height = x.height; - r = x.r; - x = x.x; - } - var wrapper = this.symbol('rect'); - wrapper.r = r; - - return wrapper.attr(wrapper.crisp(strokeWidth, x, y, mathMax(width, 0), mathMax(height, 0))); - }, - - /** - * In the VML renderer, each child of an inverted div (group) is inverted - * @param {Object} element - * @param {Object} parentNode - */ - invertChild: function(element, parentNode) { - var parentStyle = parentNode.style; - - css(element, { - flip: 'x', - left: pInt(parentStyle.width) - 10, - top: pInt(parentStyle.height) - 10, - rotation: -90 - }); - }, - - /** - * Symbol definitions that override the parent SVG renderer's symbols - * - */ - symbols: { - // VML specific arc function - arc: function (x, y, radius, options) { - var start = options.start, - end = options.end, - cosStart = mathCos(start), - sinStart = mathSin(start), - cosEnd = mathCos(end), - sinEnd = mathSin(end), - innerRadius = options.innerR, - circleCorrection = 0.07 / radius, - innerCorrection = innerRadius && 0.1 / innerRadius || 0; - - if (end - start === 0) { // no angle, don't show it. - return ['x']; - - //} else if (end - start == 2 * mathPI) { // full circle - } else if (2 * mathPI - end + start < circleCorrection) { // full circle - // empirical correction found by trying out the limits for different radii - cosEnd = - circleCorrection; - } else if (end - start < innerCorrection) { // issue #186, another mysterious VML arc problem - cosEnd = mathCos(start + innerCorrection); - } - - return [ - 'wa', // clockwise arc to - x - radius, // left - y - radius, // top - x + radius, // right - y + radius, // bottom - x + radius * cosStart, // start x - y + radius * sinStart, // start y - x + radius * cosEnd, // end x - y + radius * sinEnd, // end y - - - 'at', // anti clockwise arc to - x - innerRadius, // left - y - innerRadius, // top - x + innerRadius, // right - y + innerRadius, // bottom - x + innerRadius * cosEnd, // start x - y + innerRadius * sinEnd, // start y - x + innerRadius * cosStart, // end x - y + innerRadius * sinStart, // end y - - 'x', // finish path - 'e' // close - ]; - - }, - // Add circle symbol path. This performs significantly faster than v:oval. - circle: function (x, y, r) { - return [ - 'wa', // clockwisearcto - x - r, // left - y - r, // top - x + r, // right - y + r, // bottom - x + r, // start x - y, // start y - x + r, // end x - y, // end y - //'x', // finish path - 'e' // close - ]; - }, - /** - * Add rectangle symbol path which eases rotation and omits arcsize problems - * compared to the built-in VML roundrect shape - * - * @param {Number} left Left position - * @param {Number} top Top position - * @param {Number} r Border radius - * @param {Object} options Width and height - */ - - rect: function (left, top, r, options) { - if (!defined(options)) { - return []; - } - var width = options.width, - height = options.height, - right = left + width, - bottom = top + height; - - r = mathMin(r, width, height); - - return [ - M, - left + r, top, - - L, - right - r, top, - 'wa', - right - 2 * r, top, - right, top + 2 * r, - right - r, top, - right, top + r, - - L, - right, bottom - r, - 'wa', - right - 2 * r, bottom - 2 * r, - right, bottom, - right, bottom - r, - right - r, bottom, - - L, - left + r, bottom, - 'wa', - left, bottom - 2 * r, - left + 2 * r, bottom, - left + r, bottom, - left, bottom - r, - - L, - left, top + r, - 'wa', - left, top, - left + 2 * r, top + 2 * r, - left, top + r, - left + r, top, - - - 'x', - 'e' - ]; - - } - } -}); -} -/* **************************************************************************** - * * - * END OF INTERNET EXPLORER <= 8 SPECIFIC CODE * - * * - *****************************************************************************/ - -/** - * General renderer - */ -var Renderer = hasSVG ? SVGRenderer : VMLRenderer; - - -/** - * The chart class - * @param {Object} options - * @param {Function} callback Function to run when the chart has loaded - */ -function Chart (options, callback) { - - defaultXAxisOptions = merge(defaultXAxisOptions, defaultOptions.xAxis); - defaultYAxisOptions = merge(defaultYAxisOptions, defaultOptions.yAxis); - defaultOptions.xAxis = defaultOptions.yAxis = null; - - // Handle regular options - options = merge(defaultOptions, options); - - // Define chart variables - var optionsChart = options.chart, - optionsMargin = optionsChart.margin, - margin = isObject(optionsMargin) ? - optionsMargin : - [optionsMargin, optionsMargin, optionsMargin, optionsMargin], - optionsMarginTop = pick(optionsChart.marginTop, margin[0]), - optionsMarginRight = pick(optionsChart.marginRight, margin[1]), - optionsMarginBottom = pick(optionsChart.marginBottom, margin[2]), - optionsMarginLeft = pick(optionsChart.marginLeft, margin[3]), - spacingTop = optionsChart.spacingTop, - spacingRight = optionsChart.spacingRight, - spacingBottom = optionsChart.spacingBottom, - spacingLeft = optionsChart.spacingLeft, - spacingBox, - chartTitleOptions, - chartSubtitleOptions, - plotTop, - marginRight, - marginBottom, - plotLeft, - axisOffset, - renderTo, - renderToClone, - container, - containerId, - containerWidth, - containerHeight, - chartWidth, - chartHeight, - oldChartWidth, - oldChartHeight, - chartBackground, - plotBackground, - plotBGImage, - plotBorder, - chart = this, - chartEvents = optionsChart.events, - runChartClick = chartEvents && !!chartEvents.click, - eventType, - isInsidePlot, // function - tooltip, - mouseIsDown, - loadingDiv, - loadingSpan, - loadingShown, - plotHeight, - plotWidth, - tracker, - trackerGroup, - placeTrackerGroup, - legend, - legendWidth, - legendHeight, - chartPosition,// = getPosition(container), - hasCartesianSeries = optionsChart.showAxes, - isResizing = 0, - axes = [], - maxTicks, // handle the greatest amount of ticks on grouped axes - series = [], - inverted, - renderer, - tooltipTick, - tooltipInterval, - hoverX, - drawChartBox, // function - getMargins, // function - resetMargins, // function - setChartSize, // function - resize, - zoom, // function - zoomOut; // function - - - /** - * Create a new axis object - * @param {Object} chart - * @param {Object} options - */ - function Axis (chart, options) { - - // Define variables - var isXAxis = options.isX, - opposite = options.opposite, // needed in setOptions - horiz = inverted ? !isXAxis : isXAxis, - side = horiz ? - (opposite ? 0 /* top */ : 2 /* bottom */) : - (opposite ? 1 /* right*/ : 3 /* left */ ), - stacks = {}; - - - options = merge( - isXAxis ? defaultXAxisOptions : defaultYAxisOptions, - [defaultTopAxisOptions, defaultRightAxisOptions, - defaultBottomAxisOptions, defaultLeftAxisOptions][side], - options - ); - - var axis = this, - isDatetimeAxis = options.type == 'datetime', - offset = options.offset || 0, - xOrY = isXAxis ? 'x' : 'y', - axisLength, - transA, // translation factor - oldTransA, // used for prerendering - transB = horiz ? plotLeft : marginBottom, // translation addend - translate, // fn - getPlotLinePath, // fn - axisGroup, - gridGroup, - axisLine, - dataMin, - dataMax, - associatedSeries, - userSetMin, - userSetMax, - max = null, - min = null, - oldMin, - oldMax, - minPadding = options.minPadding, - maxPadding = options.maxPadding, - isLinked = defined(options.linkedTo), - ignoreMinPadding, // can be set to true by a column or bar series - ignoreMaxPadding, - usePercentage, - events = options.events, - eventType, - plotLinesAndBands = [], - tickInterval, - minorTickInterval, - magnitude, - tickPositions, // array containing predefined positions - ticks = {}, - minorTicks = {}, - alternateBands = {}, - tickAmount, - labelOffset, - axisTitleMargin,// = options.title.margin, - dateTimeLabelFormat, - categories = options.categories, - labelFormatter = options.labels.formatter || // can be overwritten by dynamic format - function() { - var value = this.value, - ret; - - if (dateTimeLabelFormat) { // datetime axis - ret = dateFormat(dateTimeLabelFormat, value); - - } else if (tickInterval % 1000000 === 0) { // use M abbreviation - ret = (value / 1000000) +'M'; - - } else if (tickInterval % 1000 === 0) { // use k abbreviation - ret = (value / 1000) +'k'; - - } else if (!categories && value >= 1000) { // add thousands separators - ret = numberFormat(value, 0); - - } else { // strings (categories) and small numbers - ret = value; - } - return ret; - }, - - staggerLines = horiz && options.labels.staggerLines, - reversed = options.reversed, - tickmarkOffset = (categories && options.tickmarkPlacement == 'between') ? 0.5 : 0; - - /** - * The Tick class - */ - function Tick(pos, minor) { - var tick = this; - tick.pos = pos; - tick.minor = minor; - tick.isNew = true; - - if (!minor) { - tick.addLabel(); - } - } - Tick.prototype = { - /** - * Write the tick label - */ - addLabel: function() { - var pos = this.pos, - labelOptions = options.labels, - str, - withLabel = !((pos == min && !pick(options.showFirstLabel, 1)) || - (pos == max && !pick(options.showLastLabel, 0))), - width = categories && horiz && categories.length && - !labelOptions.step && !labelOptions.staggerLines && - !labelOptions.rotation && - plotWidth / categories.length || - !horiz && plotWidth / 2, - css, - label = this.label; - - - // get the string - str = labelFormatter.call({ - isFirst: pos == tickPositions[0], - isLast: pos == tickPositions[tickPositions.length - 1], - dateTimeLabelFormat: dateTimeLabelFormat, - value: (categories && categories[pos] ? categories[pos] : pos) - }); - - // prepare CSS - css = width && { width: (width - 2 * (labelOptions.padding || 10)) +PX }; - css = extend(css, labelOptions.style); - - // first call - if (label === UNDEFINED) { - this.label = - defined(str) && withLabel && labelOptions.enabled ? - renderer.text( - str, - 0, - 0 - ) - .attr({ - align: labelOptions.align, - rotation: labelOptions.rotation - }) - // without position absolute, IE export sometimes is wrong - .css(css) - .add(axisGroup): - null; - - // update - } else if (label) { - label.attr({ text: str }) - .css(css); - } - }, - /** - * Get the offset height or width of the label - */ - getLabelSize: function() { - var label = this.label; - return label ? - ((this.labelBBox = label.getBBox()))[horiz ? 'height' : 'width'] : - 0; - }, - /** - * Put everything in place - * - * @param index {Number} - * @param old {Boolean} Use old coordinates to prepare an animation into new position - */ - render: function(index, old) { - var tick = this, - major = !tick.minor, - label = tick.label, - pos = tick.pos, - labelOptions = options.labels, - gridLine = tick.gridLine, - gridLineWidth = major ? options.gridLineWidth : options.minorGridLineWidth, - gridLineColor = major ? options.gridLineColor : options.minorGridLineColor, - dashStyle = major ? - options.gridLineDashStyle : - options.minorGridLineDashStyle, - gridLinePath, - mark = tick.mark, - markPath, - tickLength = major ? options.tickLength : options.minorTickLength, - tickWidth = major ? options.tickWidth : (options.minorTickWidth || 0), - tickColor = major ? options.tickColor : options.minorTickColor, - tickPosition = major ? options.tickPosition : options.minorTickPosition, - step = labelOptions.step, - cHeight = old && oldChartHeight || chartHeight, - attribs, - x, - y; - - // get x and y position for ticks and labels - x = horiz ? - translate(pos + tickmarkOffset, null, null, old) + transB : - plotLeft + offset + (opposite ? (old && oldChartWidth || chartWidth) - marginRight - plotLeft : 0); - - y = horiz ? - cHeight - marginBottom + offset - (opposite ? plotHeight : 0) : - cHeight - translate(pos + tickmarkOffset, null, null, old) - transB; - - // create the grid line - if (gridLineWidth) { - gridLinePath = getPlotLinePath(pos + tickmarkOffset, gridLineWidth, old); - - if (gridLine === UNDEFINED) { - attribs = { - stroke: gridLineColor, - 'stroke-width': gridLineWidth - }; - if (dashStyle) { - attribs.dashstyle = dashStyle; - } - tick.gridLine = gridLine = - gridLineWidth ? - renderer.path(gridLinePath) - .attr(attribs).add(gridGroup) : - null; - } - if (gridLine && gridLinePath) { - gridLine.animate({ - d: gridLinePath - }); - } - } - - // create the tick mark - if (tickWidth) { - - // negate the length - if (tickPosition == 'inside') { - tickLength = -tickLength; - } - if (opposite) { - tickLength = -tickLength; - } - - markPath = renderer.crispLine([ - M, - x, - y, - L, - x + (horiz ? 0 : -tickLength), - y + (horiz ? tickLength : 0) - ], tickWidth); - - if (mark) { // updating - mark.animate({ - d: markPath - }); - } else { // first time - tick.mark = renderer.path( - markPath - ).attr({ - stroke: tickColor, - 'stroke-width': tickWidth - }).add(axisGroup); - } - } - - // the label is created on init - now move it into place - if (label) { - x = x + labelOptions.x - (tickmarkOffset && horiz ? - tickmarkOffset * transA * (reversed ? -1 : 1) : 0); - y = y + labelOptions.y - (tickmarkOffset && !horiz ? - tickmarkOffset * transA * (reversed ? 1 : -1) : 0); - - // vertically centered - if (!defined(labelOptions.y)) { - y += parseInt(label.styles.lineHeight) * 0.9 - label.getBBox().height / 2; - } - - - // correct for staggered labels - if (staggerLines) { - y += (index % staggerLines) * 16; - } - // apply step - if (step) { - // show those indices dividable by step - label[index % step ? 'hide' : 'show'](); - } - - label[tick.isNew ? 'attr' : 'animate']({ - x: x, - y: y - }); - - } - - tick.isNew = false; - }, - /** - * Destructor for the tick prototype - */ - destroy: function() { - var tick = this, - n; - for (n in tick) { - if (tick[n] && tick[n].destroy) { - tick[n].destroy(); - } - } - } - }; - - /** - * The object wrapper for plot lines and plot bands - * @param {Object} options - */ - function PlotLineOrBand(options) { - var plotLine = this; - if (options) { - plotLine.options = options; - plotLine.id = options.id; - } - - //plotLine.render() - return plotLine; - } - - PlotLineOrBand.prototype = { - - /** - * Render the plot line or plot band. If it is already existing, - * move it. - */ - render: function () { - var plotLine = this, - options = plotLine.options, - optionsLabel = options.label, - label = plotLine.label, - width = options.width, - to = options.to, - toPath, // bands only - from = options.from, - dashStyle = options.dashStyle, - svgElem = plotLine.svgElem, - path = [], - addEvent, - eventType, - xs, - ys, - x, - y, - color = options.color, - zIndex = options.zIndex, - events = options.events, - attribs; - - // plot line - if (width) { - path = getPlotLinePath(options.value, width); - attribs = { - stroke: color, - 'stroke-width': width - }; - if (dashStyle) { - attribs.dashstyle = dashStyle; - } - } - - // plot band - else if (defined(from) && defined(to)) { - // keep within plot area - from = mathMax(from, min); - to = mathMin(to, max); - - toPath = getPlotLinePath(to); - path = getPlotLinePath(from); - if (path && toPath) { - path.push( - toPath[4], - toPath[5], - toPath[1], - toPath[2] - ); - } else { // outside the axis area - path = null; - } - attribs = { - fill: color - }; - } else { - return; - } - // zIndex - if (defined(zIndex)) { - attribs.zIndex = zIndex; - } - - // common for lines and bands - if (svgElem) { - if (path) { - svgElem.animate({ - d: path - }, null, svgElem.onGetPath); - } else { - svgElem.hide(); - svgElem.onGetPath = function() { - svgElem.show(); - } - } - } else if (path && path.length) { - plotLine.svgElem = svgElem = renderer.path(path) - .attr(attribs).add(); - - // events - if (events) { - addEvent = function(eventType) { - svgElem.on(eventType, function(e) { - events[eventType].apply(plotLine, [e]); - }); - }; - for (eventType in events) { - addEvent(eventType); - } - } - } - - // the plot band/line label - if (optionsLabel && defined(optionsLabel.text) && path && path.length && plotWidth > 0 && plotHeight > 0) { - // apply defaults - optionsLabel = merge({ - align: horiz && toPath && 'center', - x: horiz ? !toPath && 4 : 10, - verticalAlign : !horiz && toPath && 'middle', - y: horiz ? toPath ? 16 : 10 : toPath ? 6 : -4, - rotation: horiz && !toPath && 90 - }, optionsLabel); - - // add the SVG element - if (!label) { - plotLine.label = label = renderer.text( - optionsLabel.text, - 0, - 0 - ) - .attr({ - align: optionsLabel.textAlign || optionsLabel.align, - rotation: optionsLabel.rotation, - zIndex: zIndex - }) - .css(optionsLabel.style) - .add(); - } - - // get the bounding box and align the label - xs = [path[1], path[4], path[6] || path[1]]; - ys = [path[2], path[5], path[7] || path[2]]; - x = mathMin.apply(math, xs); - y = mathMin.apply(math, ys); - - label.align(optionsLabel, false, { - x: x, - y: y, - width: mathMax.apply(math, xs) - x, - height: mathMax.apply(math, ys) - y - }); - label.show(); - - } else if (label) { // move out of sight - label.hide(); - } - - // chainable - return plotLine; - }, - - /** - * Remove the plot line or band - */ - destroy: function() { - var obj = this, - n; - - for (n in obj) { - if (obj[n] && obj[n].destroy) { - obj[n].destroy(); // destroy SVG wrappers - } - delete obj[n]; - } - // remove it from the lookup - erase(plotLinesAndBands, obj); - } - }; - - - /** - * Get the minimum and maximum for the series of each axis - */ - function getSeriesExtremes() { - var posStack = [], - negStack = [], - run; - - // reset dataMin and dataMax in case we're redrawing - dataMin = dataMax = null; - - // get an overview of what series are associated with this axis - associatedSeries = []; - - each(series, function(serie) { - run = false; - - - // match this axis against the series' given or implicated axis - each(['xAxis', 'yAxis'], function(strAxis) { - if ( - // the series is a cartesian type, and... - serie.isCartesian && - // we're in the right x or y dimension, and... - (strAxis == 'xAxis' && isXAxis || strAxis == 'yAxis' && !isXAxis) && ( - // the axis number is given in the options and matches this axis index, or - (serie.options[strAxis] == options.index) || - // the axis index is not given - (serie.options[strAxis] === UNDEFINED && options.index === 0) - ) - ) { - serie[strAxis] = axis; - associatedSeries.push(serie); - - // the series is visible, run the min/max detection - run = true; - } - }); - // ignore hidden series if opted - if (!serie.visible && optionsChart.ignoreHiddenSeries) { - run = false; - } - - if (run) { - - var stacking, - posPointStack, - negPointStack, - stackKey, - negKey; - - if (!isXAxis) { - stacking = serie.options.stacking; - usePercentage = stacking == 'percent'; - - // create a stack for this particular series type - if (stacking) { - stackKey = serie.type + pick(serie.options.stack, ''); - negKey = '-'+ stackKey; - serie.stackKey = stackKey; // used in translate - - posPointStack = posStack[stackKey] || []; // contains the total values for each x - posStack[stackKey] = posPointStack; - - negPointStack = negStack[negKey] || []; - negStack[negKey] = negPointStack; - } - if (usePercentage) { - dataMin = 0; - dataMax = 99; - } - } - if (serie.isCartesian) { // line, column etc. need axes, pie doesn't - each(serie.data, function(point, i) { - var pointX = point.x, - pointY = point.y, - isNegative = pointY < 0, - pointStack = isNegative ? negPointStack : posPointStack, - key = isNegative ? negKey : stackKey, - totalPos, - pointLow; - - // initial values - if (dataMin === null) { - - // start out with the first point - dataMin = dataMax = point[xOrY]; - } - - // x axis - if (isXAxis) { - if (pointX > dataMax) { - dataMax = pointX; - } else if (pointX < dataMin) { - dataMin = pointX; - } - } - - // y axis - else if (defined(pointY)) { - if (stacking) { - pointStack[pointX] = - defined(pointStack[pointX]) ? - pointStack[pointX] + pointY : pointY; - } - totalPos = pointStack ? pointStack[pointX] : pointY; - pointLow = pick(point.low, totalPos); - if (!usePercentage) { - if (totalPos > dataMax) { - dataMax = totalPos; - } else if (pointLow < dataMin) { - dataMin = pointLow; - } - } - if (stacking) { - // add the series - if (!stacks[key]) { - stacks[key] = {}; - } - stacks[key][pointX] = { - total: totalPos, - cum: totalPos - }; - } - } - }); - - - // For column, areas and bars, set the minimum automatically to zero - // and prevent that minPadding is added in setScale - if (/(area|column|bar)/.test(serie.type) && !isXAxis) { - if (dataMin >= 0) { - dataMin = 0; - ignoreMinPadding = true; - } else if (dataMax < 0) { - dataMax = 0; - ignoreMaxPadding = true; - } - } - } - } - }); - - } - - /** - * Translate from axis value to pixel position on the chart, or back - * - */ - translate = function(val, backwards, cvsCoord, old) { - var sign = 1, - cvsOffset = 0, - localA = old ? oldTransA : transA, - localMin = old ? oldMin : min, - returnValue; - - if (!localA) { - localA = transA; - } - - if (cvsCoord) { - sign *= -1; // canvas coordinates inverts the value - cvsOffset = axisLength; - } - if (reversed) { // reversed axis - sign *= -1; - cvsOffset -= sign * axisLength; - } - - if (backwards) { // reverse translation - if (reversed) { - val = axisLength - val; - } - returnValue = val / localA + localMin; // from chart pixel to value - - } else { // normal translation - returnValue = sign * (val - localMin) * localA + cvsOffset; // from value to chart pixel - } - - return returnValue; - }; - - /** - * Create the path for a plot line that goes from the given value on - * this axis, across the plot to the opposite side - * @param {Number} value - * @param {Number} lineWidth Used for calculation crisp line - * @param {Number] old Use old coordinates (for resizing and rescaling) - */ - getPlotLinePath = function(value, lineWidth, old) { - var x1, - y1, - x2, - y2, - translatedValue = translate(value, null, null, old), - cHeight = old && oldChartHeight || chartHeight, - cWidth = old && oldChartWidth || chartWidth, - skip; - - x1 = x2 = mathRound(translatedValue + transB); - y1 = y2 = mathRound(cHeight - translatedValue - transB); - - if (isNaN(translatedValue)) { // no min or max - skip = true; - - } else if (horiz) { - y1 = plotTop; - y2 = cHeight - marginBottom; - if (x1 < plotLeft || x1 > plotLeft + plotWidth) { - skip = true; - } - } else { - x1 = plotLeft; - x2 = cWidth - marginRight; - if (y1 < plotTop || y1 > plotTop + plotHeight) { - skip = true; - } - } - return skip ? - null : - renderer.crispLine([M, x1, y1, L, x2, y2], lineWidth || 0); - }; - - /** - * Take an interval and normalize it to multiples of 1, 2, 2.5 and 5 - * @param {Number} interval - */ - function normalizeTickInterval(interval, multiples) { - var normalized; - - // round to a tenfold of 1, 2, 2.5 or 5 - magnitude = multiples ? 1 : math.pow(10, mathFloor(math.log(interval) / math.LN10)); - normalized = interval / magnitude; - - // multiples for a linear scale - if (!multiples) { - multiples = [1, 2, 2.5, 5, 10]; - //multiples = [1, 2, 2.5, 4, 5, 7.5, 10]; - - // the allowDecimals option - if (options.allowDecimals === false) { - if (magnitude == 1) { - multiples = [1, 2, 5, 10]; - } else if (magnitude <= 0.1) { - multiples = [1 / magnitude]; - } - } - } - - // normalize the interval to the nearest multiple - for (var i = 0; i < multiples.length; i++) { - interval = multiples[i]; - if (normalized <= (multiples[i] + (multiples[i+1] || multiples[i])) / 2) { - break; - } - } - - // multiply back to the correct magnitude - interval *= magnitude; - - return interval; - } - - /** - * Set the tick positions to a time unit that makes sense, for example - * on the first of each month or on every Monday. - */ - function setDateTimeTickPositions() { - tickPositions = []; - var i, - useUTC = defaultOptions.global.useUTC, - oneSecond = 1000 / timeFactor, - oneMinute = 60000 / timeFactor, - oneHour = 3600000 / timeFactor, - oneDay = 24 * 3600000 / timeFactor, - oneWeek = 7 * 24 * 3600000 / timeFactor, - oneMonth = 30 * 24 * 3600000 / timeFactor, - oneYear = 31556952000 / timeFactor, - - units = [[ - 'second', // unit name - oneSecond, // fixed incremental unit - [1, 2, 5, 10, 15, 30] // allowed multiples - ], [ - 'minute', // unit name - oneMinute, // fixed incremental unit - [1, 2, 5, 10, 15, 30] // allowed multiples - ], [ - 'hour', // unit name - oneHour, // fixed incremental unit - [1, 2, 3, 4, 6, 8, 12] // allowed multiples - ], [ - 'day', // unit name - oneDay, // fixed incremental unit - [1, 2] // allowed multiples - ], [ - 'week', // unit name - oneWeek, // fixed incremental unit - [1, 2] // allowed multiples - ], [ - 'month', - oneMonth, - [1, 2, 3, 4, 6] - ], [ - 'year', - oneYear, - null - ]], - - unit = units[6], // default unit is years - interval = unit[1], - multiples = unit[2]; - - // loop through the units to find the one that best fits the tickInterval - for (i = 0; i < units.length; i++) { - unit = units[i]; - interval = unit[1]; - multiples = unit[2]; - - - if (units[i+1]) { - // lessThan is in the middle between the highest multiple and the next unit. - var lessThan = (interval * multiples[multiples.length - 1] + - units[i + 1][1]) / 2; - - // break and keep the current unit - if (tickInterval <= lessThan) { - break; - } - } - } - - // prevent 2.5 years intervals, though 25, 250 etc. are allowed - if (interval == oneYear && tickInterval < 5 * interval) { - multiples = [1, 2, 5]; - } - - // get the minimum value by flooring the date - var multitude = normalizeTickInterval(tickInterval / interval, multiples), - minYear, // used in months and years as a basis for Date.UTC() - minDate = new Date(min * timeFactor); - - minDate.setMilliseconds(0); - - if (interval >= oneSecond) { // second - minDate.setSeconds(interval >= oneMinute ? 0 : - multitude * mathFloor(minDate.getSeconds() / multitude)); - } - - if (interval >= oneMinute) { // minute - minDate[setMinutes](interval >= oneHour ? 0 : - multitude * mathFloor(minDate[getMinutes]() / multitude)); - } - - if (interval >= oneHour) { // hour - minDate[setHours](interval >= oneDay ? 0 : - multitude * mathFloor(minDate[getHours]() / multitude)); - } - - if (interval >= oneDay) { // day - minDate[setDate](interval >= oneMonth ? 1 : - multitude * mathFloor(minDate[getDate]() / multitude)); - } - - if (interval >= oneMonth) { // month - minDate[setMonth](interval >= oneYear ? 0 : - multitude * mathFloor(minDate[getMonth]() / multitude)); - minYear = minDate[getFullYear](); - } - - if (interval >= oneYear) { // year - minYear -= minYear % multitude; - minDate[setFullYear](minYear); - } - - // week is a special case that runs outside the hierarchy - if (interval == oneWeek) { - // get start of current week, independent of multitude - minDate[setDate](minDate[getDate]() - minDate[getDay]() + - options.startOfWeek); - } - - - // get tick positions - i = 1; // prevent crash just in case - minYear = minDate[getFullYear](); - var time = minDate.getTime() / timeFactor, - minMonth = minDate[getMonth](), - minDateDate = minDate[getDate](); - - // iterate and add tick positions at appropriate values - while (time < max && i < plotWidth) { - tickPositions.push(time); - - // if the interval is years, use Date.UTC to increase years - if (interval == oneYear) { - time = makeTime(minYear + i * multitude, 0) / timeFactor; - - // if the interval is months, use Date.UTC to increase months - } else if (interval == oneMonth) { - time = makeTime(minYear, minMonth + i * multitude) / timeFactor; - - // if we're using global time, the interval is not fixed as it jumps - // one hour at the DST crossover - } else if (!useUTC && (interval == oneDay || interval == oneWeek)) { - time = makeTime(minYear, minMonth, minDateDate + - i * multitude * (interval == oneDay ? 1 : 7)); - - // else, the interval is fixed and we use simple addition - } else { - time += interval * multitude; - } - - i++; - } - // push the last time - tickPositions.push(time); - - - // dynamic label formatter - dateTimeLabelFormat = options.dateTimeLabelFormats[unit[0]]; - } - - /** - * Fix JS round off float errors - * @param {Number} num - */ - function correctFloat(num) { - var invMag, ret = num; - if (defined(magnitude)) { - invMag = (magnitude < 1 ? mathRound(1 / magnitude) : 1) * 10; - ret = mathRound(num * invMag) / invMag; - } - return ret; - } - - /** - * Set the tick positions of a linear axis to round values like whole tens or every five. - */ - function setLinearTickPositions() { - - var i, - roundedMin = mathFloor(min / tickInterval) * tickInterval, - roundedMax = mathCeil(max / tickInterval) * tickInterval; - - tickPositions = []; - - // populate the intermediate values - i = correctFloat(roundedMin); - while (i <= roundedMax) { - tickPositions.push(i); - i = correctFloat(i + tickInterval); - } - - } - - /** - * Set the tick positions to round values and optionally extend the extremes - * to the nearest tick - */ - function setTickPositions(secondPass) { - var length, - catPad, - linkedParent, - linkedParentExtremes, - tickIntervalOption = options.tickInterval, - tickPixelIntervalOption = options.tickPixelInterval, - maxZoom = options.maxZoom || ( - isXAxis ? - mathMin(chart.smallestInterval * 5, dataMax - dataMin) : - null - ), - zoomOffset; - - - axisLength = horiz ? plotWidth : plotHeight; - - // linked axis gets the extremes from the parent axis - if (isLinked) { - linkedParent = chart[isXAxis ? 'xAxis' : 'yAxis'][options.linkedTo]; - linkedParentExtremes = linkedParent.getExtremes(); - min = pick(linkedParentExtremes.min, linkedParentExtremes.dataMin); - max = pick(linkedParentExtremes.max, linkedParentExtremes.dataMax); - } - - // initial min and max from the extreme data values - else { - min = pick(userSetMin, options.min, dataMin); - max = pick(userSetMax, options.max, dataMax); - } - - // maxZoom exceeded, just center the selection - if (max - min < maxZoom) { - zoomOffset = (maxZoom - max + min) / 2; - // if min and max options have been set, don't go beyond it - min = mathMax(min - zoomOffset, pick(options.min, min - zoomOffset), dataMin); - max = mathMin(min + maxZoom, pick(options.max, min + maxZoom), dataMax); - } - - // pad the values to get clear of the chart's edges - if (!categories && !usePercentage && !isLinked && defined(min) && defined(max)) { - length = (max - min) || 1; - if (!defined(options.min) && !defined(userSetMin) && minPadding && (dataMin < 0 || !ignoreMinPadding)) { - min -= length * minPadding; - } - if (!defined(options.max) && !defined(userSetMax) && maxPadding && (dataMax > 0 || !ignoreMaxPadding)) { - max += length * maxPadding; - } - } - - // get tickInterval - if (min == max) { - tickInterval = 1; - } else if (isLinked && !tickIntervalOption && - tickPixelIntervalOption == linkedParent.options.tickPixelInterval) { - tickInterval = linkedParent.tickInterval; - } else { - tickInterval = pick( - tickIntervalOption, - categories ? // for categoried axis, 1 is default, for linear axis use tickPix - 1 : - (max - min) * tickPixelIntervalOption / axisLength - ); - } - - if (!isDatetimeAxis && !defined(options.tickInterval)) { // linear - tickInterval = normalizeTickInterval(tickInterval); - } - axis.tickInterval = tickInterval; // record for linked axis - - // get minorTickInterval - minorTickInterval = options.minorTickInterval === 'auto' && tickInterval ? - tickInterval / 5 : options.minorTickInterval; - - // find the tick positions - if (isDatetimeAxis) { - setDateTimeTickPositions(); - } else { - setLinearTickPositions(); - } - - if (!isLinked) { - // pad categorised axis to nearest half unit - if (categories || (isXAxis && chart.hasColumn)) { - catPad = (categories ? 1 : tickInterval) * 0.5; - if (categories || !defined(pick(options.min, userSetMin))) { - min -= catPad; - } - if (categories || !defined(pick(options.max, userSetMax))) { - max += catPad; - } - } - - // reset min/max or remove extremes based on start/end on tick - var roundedMin = tickPositions[0], - roundedMax = tickPositions[tickPositions.length - 1]; - - if (options.startOnTick) { - min = roundedMin; - } else if (min > roundedMin) { - tickPositions.shift(); - } - - if (options.endOnTick) { - max = roundedMax; - } else if (max < roundedMax) { - tickPositions.pop(); - } - - // record the greatest number of ticks for multi axis - if (!maxTicks) { // first call, or maxTicks have been reset after a zoom operation - maxTicks = { - x: 0, - y: 0 - }; - } - - if (!isDatetimeAxis && tickPositions.length > maxTicks[xOrY]) { - maxTicks[xOrY] = tickPositions.length; - } - } - - - } - - /** - * When using multiple axes, adjust the number of ticks to match the highest - * number of ticks in that group - */ - function adjustTickAmount() { - - if (maxTicks && !isDatetimeAxis && !categories && !isLinked) { // only apply to linear scale - var oldTickAmount = tickAmount, - calculatedTickAmount = tickPositions.length; - - // set the axis-level tickAmount to use below - tickAmount = maxTicks[xOrY]; - - if (calculatedTickAmount < tickAmount) { - while (tickPositions.length < tickAmount) { - tickPositions.push( correctFloat( - tickPositions[tickPositions.length - 1] + tickInterval - )); - } - transA *= (calculatedTickAmount - 1) / (tickAmount - 1); - max = tickPositions[tickPositions.length - 1]; - - } - if (defined(oldTickAmount) && tickAmount != oldTickAmount) { - axis.isDirty = true; - } - } - - } - - /** - * Set the scale based on data min and max, user set min and max or options - * - */ - function setScale() { - var type, - i; - - oldMin = min; - oldMax = max; - - // get data extremes if needed - getSeriesExtremes(); - - // get fixed positions based on tickInterval - setTickPositions(); - - // the translation factor used in translate function - oldTransA = transA; - transA = axisLength / ((max - min) || 1); - - // reset stacks - if (!isXAxis) { - for (type in stacks) { - for (i in stacks[type]) { - stacks[type][i].cum = stacks[type][i].total; - } - } - } - - // mark as dirty if it is not already set to dirty and extremes have changed - if (!axis.isDirty) { - axis.isDirty = (min != oldMin || max != oldMax); - } - - } - - /** - * Set the extremes and optionally redraw - * @param {Number} newMin - * @param {Number} newMax - * @param {Boolean} redraw - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - * - */ - function setExtremes(newMin, newMax, redraw, animation) { - - redraw = pick(redraw, true); // defaults to true - - fireEvent(axis, 'setExtremes', { // fire an event to enable syncing of multiple charts - min: newMin, - max: newMax - }, function() { // the default event handler - - userSetMin = newMin; - userSetMax = newMax; - - - // redraw - if (redraw) { - chart.redraw(animation); - } - }); - - } - - /** - * Get the actual axis extremes - */ - function getExtremes() { - return { - min: min, - max: max, - dataMin: dataMin, - dataMax: dataMax - }; - } - - /** - * Get the zero plane either based on zero or on the min or max value. - * Used in bar and area plots - */ - function getThreshold(threshold) { - if (min > threshold) { - threshold = min; - } else if (max < threshold) { - threshold = max; - } - - return translate(threshold, 0, 1); - } - - /** - * Add a plot band or plot line after render time - * - * @param options {Object} The plotBand or plotLine configuration object - */ - function addPlotBandOrLine(options) { - var obj = new PlotLineOrBand(options).render(); - plotLinesAndBands.push(obj); - return obj; - } - - /** - * Render the tick labels to a preliminary position to get their sizes - */ - function getOffset() { - - var hasData = associatedSeries.length && defined(min) && defined(max), - titleOffset = 0, - titleMargin = 0, - axisTitleOptions = options.title, - labelOptions = options.labels, - directionFactor = [-1, 1, 1, -1][side]; - - if (!axisGroup) { - axisGroup = renderer.g('axis') - .attr({ zIndex: 7 }) - .add(); - gridGroup = renderer.g('grid') - .attr({ zIndex: 1 }) - .add(); - } - - labelOffset = 0; // reset - - if (hasData || isLinked) { - each(tickPositions, function(pos) { - if (!ticks[pos]) { - ticks[pos] = new Tick(pos); - } else { - ticks[pos].addLabel(); // update labels depending on tick interval - } - - // left side must be align: right and right side must have align: left for labels - if (side === 0 || side == 2 || { 1: 'left', 3: 'right' }[side] == labelOptions.align) { - - // get the highest offset - labelOffset = mathMax( - ticks[pos].getLabelSize(), - labelOffset - ); - } - - }); - - if (staggerLines) { - labelOffset += (staggerLines - 1) * 16; - } - - } else { // doesn't have data - for (var n in ticks) { - ticks[n].destroy(); - delete ticks[n]; - } - } - - if (axisTitleOptions && axisTitleOptions.text) { - if (!axis.axisTitle) { - axis.axisTitle = renderer.text( - axisTitleOptions.text, - 0, - 0 - ) - .attr({ - zIndex: 7, - rotation: axisTitleOptions.rotation || 0, - align: - axisTitleOptions.textAlign || - { low: 'left', middle: 'center', high: 'right' }[axisTitleOptions.align] - }) - .css(axisTitleOptions.style) - .add(); - } - - titleOffset = axis.axisTitle.getBBox()[horiz ? 'height' : 'width']; - titleMargin = pick(axisTitleOptions.margin, horiz ? 5 : 10); - - } - - // handle automatic or user set offset - offset = directionFactor * (options.offset || axisOffset[side]); - - axisTitleMargin = - labelOffset + - (side != 2 && labelOffset && directionFactor * options.labels[horiz ? 'y' : 'x']) + - titleMargin; - - axisOffset[side] = mathMax( - axisOffset[side], - axisTitleMargin + titleOffset + directionFactor * offset - ); - - } - - /** - * Render the axis - */ - function render() { - var axisTitleOptions = options.title, - alternateGridColor = options.alternateGridColor, - lineWidth = options.lineWidth, - lineLeft, - lineTop, - linePath, - hasRendered = chart.hasRendered, - slideInTicks = hasRendered && defined(oldMin) && !isNaN(oldMin), - hasData = associatedSeries.length && defined(min) && defined(max); - - // update metrics - axisLength = horiz ? plotWidth : plotHeight; - transA = axisLength / ((max - min) || 1); - transB = horiz ? plotLeft : marginBottom; // translation addend - - // If the series has data draw the ticks. Else only the line and title - if (hasData || isLinked) { - - // minor ticks - if (minorTickInterval && !categories) { - var pos = min + (tickPositions[0] - min) % minorTickInterval; - for (pos; pos <= max; pos += minorTickInterval) { - if (!minorTicks[pos]) { - minorTicks[pos] = new Tick(pos, true); - } - - // render new ticks in old position - if (slideInTicks && minorTicks[pos].isNew) { - minorTicks[pos].render(null, true); - } - - - minorTicks[pos].isActive = true; - minorTicks[pos].render(); - } - } - - // major ticks - each(tickPositions, function(pos, i) { - // linked axes need an extra check to find out if - if (!isLinked || (pos >= min && pos <= max)) { - - // render new ticks in old position - if (slideInTicks && ticks[pos].isNew) { - ticks[pos].render(i, true); - } - - ticks[pos].isActive = true; - ticks[pos].render(i); - } - }); - - // alternate grid color - if (alternateGridColor) { - each(tickPositions, function(pos, i) { - if (i % 2 === 0 && pos < max) { - /*plotLinesAndBands.push(new PlotLineOrBand({ - from: pos, - to: tickPositions[i + 1] !== UNDEFINED ? tickPositions[i + 1] : max, - color: alternateGridColor - }));*/ - - if (!alternateBands[pos]) { - alternateBands[pos] = new PlotLineOrBand(); - } - alternateBands[pos].options = { - from: pos, - to: tickPositions[i + 1] !== UNDEFINED ? tickPositions[i + 1] : max, - color: alternateGridColor - }; - alternateBands[pos].render(); - alternateBands[pos].isActive = true; - } - }); - } - - // custom plot bands (behind grid lines) - /*if (!hasRendered) { // only first time - each(options.plotBands || [], function(plotBandOptions) { - plotLinesAndBands.push(new PlotLineOrBand( - extend({ zIndex: 1 }, plotBandOptions) - ).render()); - }); - }*/ - - - - - // custom plot lines and bands - if (!hasRendered) { // only first time - each((options.plotLines || []).concat(options.plotBands || []), function(plotLineOptions) { - plotLinesAndBands.push(new PlotLineOrBand(plotLineOptions).render()); - }); - } - - - - } // end if hasData - - // remove inactive ticks - each([ticks, minorTicks, alternateBands], function(coll) { - for (var pos in coll) { - if (!coll[pos].isActive) { - coll[pos].destroy(); - delete coll[pos]; - } else { - coll[pos].isActive = false; // reset - } - } - }); - - - - - // Static items. As the axis group is cleared on subsequent calls - // to render, these items are added outside the group. - // axis line - if (lineWidth) { - lineLeft = plotLeft + (opposite ? plotWidth : 0) + offset; - lineTop = chartHeight - marginBottom - (opposite ? plotHeight : 0) + offset; - - linePath = renderer.crispLine([ - M, - horiz ? - plotLeft: - lineLeft, - horiz ? - lineTop: - plotTop, - L, - horiz ? - chartWidth - marginRight : - lineLeft, - horiz ? - lineTop: - chartHeight - marginBottom - ], lineWidth); - if (!axisLine) { - axisLine = renderer.path(linePath) - .attr({ - stroke: options.lineColor, - 'stroke-width': lineWidth, - zIndex: 7 - }) - .add(); - } else { - axisLine.animate({ d: linePath }); - } - - } - - if (axis.axisTitle) { - // compute anchor points for each of the title align options - var margin = horiz ? plotLeft : plotTop, - fontSize = pInt(axisTitleOptions.style.fontSize || 12), - // the position in the length direction of the axis - alongAxis = { - low: margin + (horiz ? 0 : axisLength), - middle: margin + axisLength / 2, - high: margin + (horiz ? axisLength : 0) - }[axisTitleOptions.align], - - // the position in the perpendicular direction of the axis - offAxis = (horiz ? plotTop + plotHeight : plotLeft) + - (horiz ? 1 : -1) * // horizontal axis reverses the margin - (opposite ? -1 : 1) * // so does opposite axes - axisTitleMargin + - //(isIE ? fontSize / 3 : 0)+ // preliminary fix for vml's centerline - (side == 2 ? fontSize : 0); - - axis.axisTitle[hasRendered ? 'animate' : 'attr']({ - x: horiz ? - alongAxis: - offAxis + (opposite ? plotWidth : 0) + offset + - (axisTitleOptions.x || 0), // x - y: horiz ? - offAxis - (opposite ? plotHeight : 0) + offset: - alongAxis + (axisTitleOptions.y || 0) // y - }); - - } - - axis.isDirty = false; - } - - /** - * Remove a plot band or plot line from the chart by id - * @param {Object} id - */ - function removePlotBandOrLine(id) { - var i = plotLinesAndBands.length; - while (i--) { - if (plotLinesAndBands[i].id == id) { - plotLinesAndBands[i].destroy(); - } - } - } - - /** - * Redraw the axis to reflect changes in the data or axis extremes - */ - function redraw() { - - // hide tooltip and hover states - if (tracker.resetTracker) { - tracker.resetTracker(); - } - - // render the axis - render(); - - // move plot lines and bands - each(plotLinesAndBands, function(plotLine) { - plotLine.render(); - }); - - // mark associated series as dirty and ready for redraw - each(associatedSeries, function(series) { - series.isDirty = true; - }); - - } - - /** - * Set new axis categories and optionally redraw - * @param {Array} newCategories - * @param {Boolean} doRedraw - */ - function setCategories(newCategories, doRedraw) { - // set the categories - axis.categories = categories = newCategories; - - // force reindexing tooltips - each(associatedSeries, function(series) { - series.translate(); - series.setTooltipPoints(true); - }); - - - // optionally redraw - axis.isDirty = true; - - if (pick(doRedraw, true)) { - chart.redraw(); - } - } - - - - // Run Axis - - // inverted charts have reversed xAxes as default - if (inverted && isXAxis && reversed === UNDEFINED) { - reversed = true; - } - - - // expose some variables - extend(axis, { - addPlotBand: addPlotBandOrLine, - addPlotLine: addPlotBandOrLine, - adjustTickAmount: adjustTickAmount, - categories: categories, - getExtremes: getExtremes, - getPlotLinePath: getPlotLinePath, - getThreshold: getThreshold, - isXAxis: isXAxis, - options: options, - plotLinesAndBands: plotLinesAndBands, - getOffset: getOffset, - render: render, - setCategories: setCategories, - setExtremes: setExtremes, - setScale: setScale, - setTickPositions: setTickPositions, - translate: translate, - redraw: redraw, - removePlotBand: removePlotBandOrLine, - removePlotLine: removePlotBandOrLine, - reversed: reversed, - stacks: stacks - }); - - // register event listeners - for (eventType in events) { - addEvent(axis, eventType, events[eventType]); - } - - // set min and max - setScale(); - - } // end Axis - - - /** - * The toolbar object - * - * @param {Object} chart - */ - function Toolbar(chart) { - var buttons = {}; - - function add(id, text, title, fn) { - if (!buttons[id]) { - var button = renderer.text( - text, - 0, - 0 - ) - .css(options.toolbar.itemStyle) - .align({ - align: 'right', - x: - marginRight - 20, - y: plotTop + 30 - }) - .on('click', fn) - /*.on('touchstart', function(e) { - e.stopPropagation(); // don't fire the container event - fn(); - })*/ - .attr({ - align: 'right', - zIndex: 20 - }) - .add(); - buttons[id] = button; - } - } - function remove(id) { - discardElement(buttons[id].element); - buttons[id] = null; - } - - // public - return { - add: add, - remove: remove - }; - } - - /** - * The tooltip object - * @param {Object} options Tooltip options - */ - function Tooltip (options) { - var currentSeries, - borderWidth = options.borderWidth, - crosshairsOptions = options.crosshairs, - crosshairs = [], - style = options.style, - shared = options.shared, - padding = pInt(style.padding), - boxOffLeft = borderWidth + padding, // off left/top position as IE can't - //properly handle negative positioned shapes - tooltipIsHidden = true, - boxWidth, - boxHeight, - currentX = 0, - currentY = 0; - - // remove padding CSS and apply padding on box instead - style.padding = 0; - - // create the elements - var group = renderer.g('tooltip') - .attr({ zIndex: 8 }) - .add(), - - box = renderer.rect(boxOffLeft, boxOffLeft, 0, 0, options.borderRadius, borderWidth) - .attr({ - fill: options.backgroundColor, - 'stroke-width': borderWidth - }) - .add(group) - .shadow(options.shadow), - label = renderer.text('', padding + boxOffLeft, pInt(style.fontSize) + padding + boxOffLeft) - .attr({ zIndex: 1 }) - .css(style) - .add(group); - - group.hide(); - - /** - * In case no user defined formatter is given, this will be used - */ - function defaultFormatter() { - var pThis = this, - items = pThis.points || splat(pThis), - xAxis = items[0].series.xAxis, - x = pThis.x, - isDateTime = xAxis && xAxis.options.type == 'datetime', - useHeader = isString(x) || isDateTime, - series, - s; - - // build the header - s = useHeader ? - ['', - (isDateTime ? dateFormat('%A, %b %e, %Y', x) : x), - '
'] : []; - - // build the values - each(items, function(item) { - s.push(item.point.tooltipFormatter(useHeader)); - }); - return s.join(''); - } - - /** - * Provide a soft movement for the tooltip - * - * @param {Number} finalX - * @param {Number} finalY - */ - function move(finalX, finalY) { - - currentX = tooltipIsHidden ? finalX : (2 * currentX + finalX) / 3; - currentY = tooltipIsHidden ? finalY : (currentY + finalY) / 2; - - group.translate(currentX, currentY); - - - // run on next tick of the mouse tracker - if (mathAbs(finalX - currentX) > 1 || mathAbs(finalY - currentY) > 1) { - tooltipTick = function() { - move(finalX, finalY); - }; - } else { - tooltipTick = null; - } - } - - /** - * Hide the tooltip - */ - function hide() { - if (!tooltipIsHidden) { - var hoverPoints = chart.hoverPoints; - - group.hide(); - - each(crosshairs, function(crosshair) { - if (crosshair) { - crosshair.hide(); - } - }); - - // hide previous hoverPoints and set new - if (hoverPoints) { - each (hoverPoints, function(point) { - point.setState(); - }); - } - chart.hoverPoints = null; - - - tooltipIsHidden = true; - } - - } - - /** - * Refresh the tooltip's text and position. - * @param {Object} point - * - */ - function refresh(point) { - var x, - y, - boxX, - boxY, - show, - bBox, - plotX, - plotY = 0, - textConfig = {}, - text, - pointConfig = [], - tooltipPos = point.tooltipPos, - formatter = options.formatter || defaultFormatter, - hoverPoints = chart.hoverPoints, - getConfig = function(point) { - return { - series: point.series, - point: point, - x: point.category, - y: point.y, - percentage: point.percentage, - total: point.total || point.stackTotal - }; - }; - - // shared tooltip, array is sent over - if (shared) { - - // hide previous hoverPoints and set new - if (hoverPoints) { - each (hoverPoints, function(point) { - point.setState(); - }); - } - chart.hoverPoints = point; - - each(point, function(item, i) { - /*var series = item.series, - hoverPoint = series.hoverPoint; - if (hoverPoint) { - hoverPoint.setState(); - } - series.hoverPoint = item;*/ - item.setState(HOVER_STATE); - plotY += item.plotY; // for average - - pointConfig.push(getConfig(item)); - }); - - plotX = point[0].plotX; - plotY = mathRound(plotY) / point.length; // mathRound because Opera 10 has problems here - - textConfig = { - x: point[0].category - }; - textConfig.points = pointConfig; - point = point[0]; - - // single point tooltip - } else { - textConfig = getConfig(point); - } - text = formatter.call(textConfig); - - // register the current series - currentSeries = point.series; - - // get the reference point coordinates (pie charts use tooltipPos) - plotX = shared ? plotX : point.plotX; - plotY = shared ? plotY : point.plotY; - x = mathRound(tooltipPos ? tooltipPos[0] : (inverted ? plotWidth - plotY : plotX)); - y = mathRound(tooltipPos ? tooltipPos[1] : (inverted ? plotHeight - plotX : plotY)); - - - // hide tooltip if the point falls outside the plot - show = shared || !point.series.isCartesian || isInsidePlot(x, y); - - // update the inner HTML - if (text === false || !show) { - hide(); - } else { - - // show it - if (tooltipIsHidden) { - group.show(); - tooltipIsHidden = false; - } - - // update text - label.attr({ - text: text - }); - - // get the bounding box - bBox = label.getBBox(); - boxWidth = bBox.width + 2 * padding; - boxHeight = bBox.height + 2 * padding; - - // set the size of the box - box.attr({ - width: boxWidth, - height: boxHeight, - stroke: options.borderColor || point.color || currentSeries.color || '#606060' - }); - - // keep the box within the chart area - boxX = x - boxWidth + plotLeft - 25; - boxY = y - boxHeight + plotTop + 10; - - // it is too far to the left, adjust it - if (boxX < 7) { - boxX = 7; - boxY -= 30; - } - - - if (boxY < 5) { - boxY = 5; // above - } else if (boxY + boxHeight > chartHeight) { - boxY = chartHeight - boxHeight - 5; // below - } - - // do the move - move(mathRound(boxX - boxOffLeft), mathRound(boxY - boxOffLeft)); - - - } - - - // crosshairs - if (crosshairsOptions) { - crosshairsOptions = splat(crosshairsOptions); // [x, y] - - var path, - i = crosshairsOptions.length, - attribs, - axis; - - while (i--) { - if (crosshairsOptions[i] && (axis = point.series[i ? 'yAxis' : 'xAxis'])) { - path = axis - .getPlotLinePath(point[i ? 'y' : 'x'], 1); - if (crosshairs[i]) { - crosshairs[i].attr({ d: path, visibility: VISIBLE }); - - } else { - attribs = { - 'stroke-width': crosshairsOptions[i].width || 1, - stroke: crosshairsOptions[i].color || '#C0C0C0', - zIndex: 2 - }; - if (crosshairsOptions[i].dashStyle) { - attribs.dashstyle = crosshairsOptions[i].dashStyle; - } - crosshairs[i] = renderer.path(path) - .attr(attribs) - .add(); - } - } - } - } - } - - - - // public members - return { - shared: shared, - refresh: refresh, - hide: hide - }; - } - - /** - * The mouse tracker object - * @param {Object} chart - * @param {Object} options - */ - function MouseTracker (chart, options) { - - - var mouseDownX, - mouseDownY, - hasDragged, - selectionMarker, - zoomType = optionsChart.zoomType, - zoomX = /x/.test(zoomType), - zoomY = /y/.test(zoomType), - zoomHor = zoomX && !inverted || zoomY && inverted, - zoomVert = zoomY && !inverted || zoomX && inverted; - - /** - * Add crossbrowser support for chartX and chartY - * @param {Object} e The event object in standard browsers - */ - function normalizeMouseEvent(e) { - var ePos; - - // common IE normalizing - e = e || win.event; - if (!e.target) { - e.target = e.srcElement; - } - - // iOS - ePos = e.touches ? e.touches.item(0) : e; - - // in certain cases, get mouse position - if (e.type != 'mousemove' || win.opera) { // only Opera needs position on mouse move, see below - chartPosition = getPosition(container); - } - - // chartX and chartY - if (isIE) { // IE including IE9 that has chartX but in a different meaning - e.chartX = e.x; - e.chartY = e.y; - } else { - if (ePos.layerX === UNDEFINED) { // Opera and iOS - e.chartX = ePos.pageX - chartPosition.left; - e.chartY = ePos.pageY - chartPosition.top; - } else { - e.chartX = e.layerX; - e.chartY = e.layerY; - } - } - - return e; - } - - /** - * Get the click position in terms of axis values. - * - * @param {Object} e A mouse event - */ - function getMouseCoordinates(e) { - var coordinates = { - xAxis: [], - yAxis: [] - }; - each(axes, function(axis, i) { - var translate = axis.translate, - isXAxis = axis.isXAxis, - isHorizontal = inverted ? !isXAxis : isXAxis; - - coordinates[isXAxis ? 'xAxis' : 'yAxis'].push({ - axis: axis, - value: translate( - isHorizontal ? - e.chartX - plotLeft : - plotHeight - e.chartY + plotTop, - true - ) - }); - }); - return coordinates; - } - - /** - * With line type charts with a single tracker, get the point closest to the mouse - */ - function onmousemove (e) { - var point, - points, - hoverPoint = chart.hoverPoint, - hoverSeries = chart.hoverSeries, - i, - j, - distance = chartWidth, - index = inverted ? e.chartY : e.chartX - plotLeft; // wtf? - - // shared tooltip - if (tooltip && options.shared) { - points = []; - - // loop over all series and find the ones with points closest to the mouse - i = series.length; - for (j = 0; j < i; j++) { - if (series[j].visible && series[j].tooltipPoints.length) { - point = series[j].tooltipPoints[index]; - point._dist = mathAbs(index - point.plotX); - distance = mathMin(distance, point._dist); - points.push(point); - } - } - // remove furthest points - i = points.length; - while (i--) { - if (points[i]._dist > distance) { - points.splice(i, 1); - } - } - // refresh the tooltip if necessary - if (points.length && (points[0].plotX != hoverX)) { - tooltip.refresh(points); - hoverX = points[0].plotX; - } - } - - // separate tooltip and general mouse events - if (hoverSeries && hoverSeries.tracker) { // only use for line-type series with common tracker - - // get the point - point = hoverSeries.tooltipPoints[index]; - - // a new point is hovered, refresh the tooltip - if (point && point != hoverPoint) { - - // trigger the events - point.onMouseOver(); - - } - } - } - - - - /** - * Reset the tracking by hiding the tooltip, the hover series state and the hover point - */ - function resetTracker() { - var hoverSeries = chart.hoverSeries, - hoverPoint = chart.hoverPoint; - - if (hoverPoint) { - hoverPoint.onMouseOut(); - } - - if (hoverSeries) { - hoverSeries.onMouseOut(); - } - - if (tooltip) { - tooltip.hide(); - } - - hoverX = null; - } - - /** - * Mouse up or outside the plot area - */ - function drop() { - if (selectionMarker) { - var selectionData = { - xAxis: [], - yAxis: [] - }, - selectionBox = selectionMarker.getBBox(), - selectionLeft = selectionBox.x - plotLeft, - selectionTop = selectionBox.y - plotTop; - - - // a selection has been made - if (hasDragged) { - - // record each axis' min and max - each(axes, function(axis, i) { - var translate = axis.translate, - isXAxis = axis.isXAxis, - isHorizontal = inverted ? !isXAxis : isXAxis, - selectionMin = translate( - isHorizontal ? - selectionLeft : - plotHeight - selectionTop - selectionBox.height, - true - ), - selectionMax = translate( - isHorizontal ? - selectionLeft + selectionBox.width : - plotHeight - selectionTop, - true - ); - - selectionData[isXAxis ? 'xAxis' : 'yAxis'].push({ - axis: axis, - min: mathMin(selectionMin, selectionMax), // for reversed axes - max: mathMax(selectionMin, selectionMax) - }); - - }); - fireEvent(chart, 'selection', selectionData, zoom); - - } - selectionMarker = selectionMarker.destroy(); - } - - chart.mouseIsDown = mouseIsDown = hasDragged = false; - removeEvent(doc, hasTouch ? 'touchend' : 'mouseup', drop); - - } - - /** - * Set the JS events on the container element - */ - function setDOMEvents () { - var lastWasOutsidePlot = true; - - /* - * Record the starting position of a dragoperation - */ - container.onmousedown = function(e) { - e = normalizeMouseEvent(e); - - // record the start position - //e.preventDefault && e.preventDefault(); - - chart.mouseIsDown = mouseIsDown = true; - mouseDownX = e.chartX; - mouseDownY = e.chartY; - - addEvent(doc, hasTouch ? 'touchend' : 'mouseup', drop); - }; - - // The mousemove, touchmove and touchstart event handler - var mouseMove = function(e) { - - // let the system handle multitouch operations like two finger scroll - // and pinching - if (e && e.touches && e.touches.length > 1) { - return; - } - - // normalize - e = normalizeMouseEvent(e); - if (!hasTouch) { // not for touch devices - e.returnValue = false; - } - - var chartX = e.chartX, - chartY = e.chartY, - isOutsidePlot = !isInsidePlot(chartX - plotLeft, chartY - plotTop); - - // on touch devices, only trigger click if a handler is defined - if (hasTouch && e.type == 'touchstart') { - if (attr(e.target, 'isTracker')) { - if (!chart.runTrackerClick) { - e.preventDefault(); - } - } else if (!runChartClick && !isOutsidePlot) { - e.preventDefault(); - } - } - - // cancel on mouse outside - if (isOutsidePlot) { - - if (!lastWasOutsidePlot) { - // reset the tracker - resetTracker(); - } - - // drop the selection if any and reset mouseIsDown and hasDragged - //drop(); - if (chartX < plotLeft) { - chartX = plotLeft; - } else if (chartX > plotLeft + plotWidth) { - chartX = plotLeft + plotWidth; - } - - if (chartY < plotTop) { - chartY = plotTop; - } else if (chartY > plotTop + plotHeight) { - chartY = plotTop + plotHeight; - } - - } - - if (mouseIsDown && e.type != 'touchstart') { // make selection - - // determine if the mouse has moved more than 10px - if ((hasDragged = Math.sqrt( - Math.pow(mouseDownX - chartX, 2) + - Math.pow(mouseDownY - chartY, 2) - ) > 10)) { - - // make a selection - if (hasCartesianSeries && (zoomX || zoomY) && - isInsidePlot(mouseDownX - plotLeft, mouseDownY - plotTop)) { - if (!selectionMarker) { - selectionMarker = renderer.rect( - plotLeft, - plotTop, - zoomHor ? 1 : plotWidth, - zoomVert ? 1 : plotHeight, - 0 - ) - .attr({ - fill: 'rgba(69,114,167,0.25)', - zIndex: 7 - }) - .add(); - } - } - - // adjust the width of the selection marker - if (selectionMarker && zoomHor) { - var xSize = chartX - mouseDownX; - selectionMarker.attr({ - width: mathAbs(xSize), - x: (xSize > 0 ? 0 : xSize) + mouseDownX - }); - } - // adjust the height of the selection marker - if (selectionMarker && zoomVert) { - var ySize = chartY - mouseDownY; - selectionMarker.attr({ - height: mathAbs(ySize), - y: (ySize > 0 ? 0 : ySize) + mouseDownY - }); - } - } - - } else if (!isOutsidePlot) { - // show the tooltip - onmousemove(e); - } - - lastWasOutsidePlot = isOutsidePlot; - - // when outside plot, allow touch-drag by returning true - return isOutsidePlot || !hasCartesianSeries; - }; - - /* - * When the mouse enters the container, run mouseMove - */ - container.onmousemove = mouseMove; - - /* - * When the mouse leaves the container, hide the tracking (tooltip). - */ - addEvent(container, 'mouseleave', resetTracker); - - - container.ontouchstart = function(e) { - // For touch devices, use touchmove to zoom - if (zoomX || zoomY) { - container.onmousedown(e); - } - // Show tooltip and prevent the lower mouse pseudo event - mouseMove(e); - }; - - /* - * Allow dragging the finger over the chart to read the values on touch - * devices - */ - container.ontouchmove = mouseMove; - - /* - * Allow dragging the finger over the chart to read the values on touch - * devices - */ - container.ontouchend = function() { - if (hasDragged) { - resetTracker(); - } - }; - - - // MooTools 1.2.3 doesn't fire this in IE when using addEvent - container.onclick = function(e) { - var hoverPoint = chart.hoverPoint; - e = normalizeMouseEvent(e); - - e.cancelBubble = true; // IE specific - - - if (!hasDragged) { - if (hoverPoint && attr(e.target, 'isTracker')) { - var plotX = hoverPoint.plotX, - plotY = hoverPoint.plotY; - - // add page position info - extend(hoverPoint, { - pageX: chartPosition.left + plotLeft + - (inverted ? plotWidth - plotY : plotX), - pageY: chartPosition.top + plotTop + - (inverted ? plotHeight - plotX : plotY) - }); - - // the series click event - fireEvent(hoverPoint.series, 'click', extend(e, { - point: hoverPoint - })); - - // the point click event - hoverPoint.firePointEvent('click', e); - - } else { - extend(e, getMouseCoordinates(e)); - - // fire a click event in the chart - if (isInsidePlot(e.chartX - plotLeft, e.chartY - plotTop)) { - fireEvent(chart, 'click', e); - } - } - - - } - // reset mouseIsDown and hasDragged - hasDragged = false; - }; - - } - - /** - * Create the image map that listens for mouseovers - */ - placeTrackerGroup = function() { - - // first create - plot positions is not final at this stage - if (!trackerGroup) { - chart.trackerGroup = trackerGroup = renderer.g('tracker') - .attr({ zIndex: 9 }) - .add(); - - // then position - this happens on load and after resizing and changing - // axis or box positions - } else { - trackerGroup.translate(plotLeft, plotTop); - if (inverted) { - trackerGroup.attr({ - width: chart.plotWidth, - height: chart.plotHeight - }).invert(); - } - } - }; - - - // Run MouseTracker - placeTrackerGroup(); - if (options.enabled) { - chart.tooltip = tooltip = Tooltip(options); - } - - setDOMEvents(); - - // set the fixed interval ticking for the smooth tooltip - tooltipInterval = setInterval(function() { - if (tooltipTick) { - tooltipTick(); - } - }, 32); - - // expose properties - extend(this, { - zoomX: zoomX, - zoomY: zoomY, - resetTracker: resetTracker - }); - } - - - - /** - * The overview of the chart's series - * @param {Object} chart - */ - var Legend = function(chart) { - - var options = chart.options.legend; - - if (!options.enabled) { - return; - } - - var horizontal = options.layout == 'horizontal', - symbolWidth = options.symbolWidth, - symbolPadding = options.symbolPadding, - allItems, - style = options.style, - itemStyle = options.itemStyle, - itemHoverStyle = options.itemHoverStyle, - itemHiddenStyle = options.itemHiddenStyle, - padding = pInt(style.padding), - rightPadding = 20, - //lineHeight = options.lineHeight || 16, - y = 18, - initialItemX = 4 + padding + symbolWidth + symbolPadding, - itemX, - itemY, - lastItemY, - itemHeight = 0, - box, - legendBorderWidth = options.borderWidth, - legendBackgroundColor = options.backgroundColor, - legendGroup, - offsetWidth, - widthOption = options.width, - series = chart.series, - reversedLegend = options.reversed; - - - - /** - * Set the colors for the legend item - * @param {Object} item A Series or Point instance - * @param {Object} visible Dimmed or colored - */ - function colorizeItem(item, visible) { - var legendItem = item.legendItem, - legendLine = item.legendLine, - legendSymbol = item.legendSymbol, - hiddenColor = itemHiddenStyle.color, - textColor = visible ? options.itemStyle.color : hiddenColor, - symbolColor = visible ? item.color : hiddenColor; - if (legendItem) { - legendItem.css({ fill: textColor }); - } - if (legendLine) { - legendLine.attr({ stroke: symbolColor }); - } - if (legendSymbol) { - legendSymbol.attr({ - stroke: symbolColor, - fill: symbolColor - }); - } - } - - /** - * Position the legend item - * @param {Object} item A Series or Point instance - * @param {Object} visible Dimmed or colored - */ - function positionItem(item, itemX, itemY) { - var legendItem = item.legendItem, - legendLine = item.legendLine, - legendSymbol = item.legendSymbol, - checkbox = item.checkbox; - if (legendItem) { - legendItem.attr({ - x: itemX, - y: itemY - }); - } - if (legendLine) { - legendLine.translate(itemX, itemY - 4); - } - if (legendSymbol) { - legendSymbol.attr({ - x: itemX + legendSymbol.xOff, - y: itemY + legendSymbol.yOff - }); - } - if (checkbox) { - checkbox.x = itemX; - checkbox.y = itemY; - } - } - - /** - * Destroy a single legend item - * @param {Object} item The series or point - */ - function destroyItem(item) { - var checkbox = item.checkbox; - - // pull out from the array - //erase(allItems, item); - - // destroy SVG elements - each(['legendItem', 'legendLine', 'legendSymbol'], function(key) { - if (item[key]) { - item[key].destroy(); - } - }); - - if (checkbox) { - discardElement(item.checkbox); - } - - - } - - - /** - * Position the checkboxes after the width is determined - */ - function positionCheckboxes() { - each(allItems, function(item) { - var checkbox = item.checkbox; - if (checkbox) { - css(checkbox, { - left: (legendGroup.attr('translateX') + item.legendItemWidth + checkbox.x - 40) +PX, - top: (legendGroup.attr('translateY') + checkbox.y - 11) + PX - }); - } - }); - } - - /** - * Render a single specific legend item - * @param {Object} item A series or point - */ - function renderItem(item) { - var bBox, - itemWidth, - legendSymbol, - symbolX, - symbolY, - attribs, - simpleSymbol, - li = item.legendItem, - series = item.series || item, - i = allItems.length; - - - if (!li) { // generate it once, later move it - - // let these series types use a simple symbol - simpleSymbol = /^(bar|pie|area|column)$/.test(series.type); - - // generate the list item text - item.legendItem = li = renderer.text( - options.labelFormatter.call(item), - 0, - 0 - ) - .css(item.visible ? itemStyle : itemHiddenStyle) - .on('mouseover', function() { - item.setState(HOVER_STATE); - li.css(itemHoverStyle); - }) - .on('mouseout', function() { - li.css(item.visible ? itemStyle : itemHiddenStyle); - item.setState(); - }) - .on('click', function(event) { - var strLegendItemClick = 'legendItemClick', - fnLegendItemClick = function() { - item.setVisible(); - }; - - // click the name or symbol - if (item.firePointEvent) { // point - item.firePointEvent(strLegendItemClick, null, fnLegendItemClick); - } else { - fireEvent(item, strLegendItemClick, null, fnLegendItemClick); - } - }) - .attr({ zIndex: 2 }) - .add(legendGroup); - - // draw the line - if (!simpleSymbol && item.options && item.options.lineWidth) { - var itemOptions = item.options; - attribs = { - 'stroke-width': itemOptions.lineWidth, - zIndex: 2 - }; - if (itemOptions.dashStyle) { - attribs.dashstyle = itemOptions.dashStyle; - } - item.legendLine = renderer.path([ - M, - -symbolWidth - symbolPadding, - 0, - L, - -symbolPadding, - 0 - ]) - .attr(attribs) - .add(legendGroup); - } - - // draw a simple symbol - if (simpleSymbol) { // bar|pie|area|column - //legendLayer.drawRect( - legendSymbol = renderer.rect( - (symbolX = -symbolWidth - symbolPadding), - (symbolY = -11), - symbolWidth, - 12, - 2 - ).attr({ - 'stroke-width': 0, - zIndex: 3 - }).add(legendGroup); - } - - // draw the marker - else if (item.options && item.options.marker && item.options.marker.enabled) { - legendSymbol = renderer.symbol( - item.symbol, - (symbolX = -symbolWidth / 2 - symbolPadding), - (symbolY = -4), - item.options.marker.radius - ) - .attr(item.pointAttr[NORMAL_STATE]) - .attr({ zIndex: 3 }) - .add(legendGroup); - - - } - if (legendSymbol) { - legendSymbol.xOff = symbolX; - legendSymbol.yOff = symbolY; - } - - item.legendSymbol = legendSymbol; - - // colorize the items - colorizeItem(item, item.visible); - - - // add the HTML checkbox on top - if (item.options && item.options.showCheckbox) { - item.checkbox = createElement('input', { - type: 'checkbox', - checked: item.selected, - defaultChecked: item.selected // required by IE7 - }, options.itemCheckboxStyle, container); - - addEvent(item.checkbox, 'click', function(event) { - var target = event.target; - fireEvent(item, 'checkboxClick', { - checked: target.checked - }, - function() { - item.select(); - } - ); - }); - } - } - - - // calculate the positions for the next line - bBox = li.getBBox(); - - itemWidth = item.legendItemWidth = - options.itemWidth || symbolWidth + symbolPadding + bBox.width + rightPadding; - itemHeight = bBox.height; - - // if the item exceeds the width, start a new line - if (horizontal && itemX - initialItemX + itemWidth > - (widthOption || (chartWidth - 2 * padding - initialItemX))) { - itemX = initialItemX; - itemY += itemHeight; - } - lastItemY = itemY; - - // position the newly generated or reordered items - positionItem(item, itemX, itemY); - - // advance - if (horizontal) { - itemX += itemWidth; - } else { - itemY += itemHeight; - } - - // the width of the widest item - offsetWidth = widthOption || mathMax( - horizontal ? itemX - initialItemX : itemWidth, - offsetWidth - ); - - - - // add it all to an array to use below - allItems.push(item); - } - - /** - * Render the legend. This method can be called both before and after - * chart.render. If called after, it will only rearrange items instead - * of creating new ones. - */ - function renderLegend() { - itemX = initialItemX; - itemY = y; - offsetWidth = 0; - lastItemY = 0; - - allItems = []; - - if (!legendGroup) { - legendGroup = renderer.g('legend') - .attr({ zIndex: 7 }) - .add(); - } - - - // add HTML for each series - if (reversedLegend) { - series.reverse(); - } - each(series, function(serie) { - if (!serie.options.showInLegend) { - return; - } - - // use points or series for the legend item depending on legendType - var items = (serie.options.legendType == 'point') ? - serie.data : [serie]; - - // render all items - each(items, renderItem); - }); - if (reversedLegend) { // restore - series.reverse(); - } - - - - // Draw the border - legendWidth = widthOption || offsetWidth; - legendHeight = lastItemY - y + itemHeight; - - if (legendBorderWidth || legendBackgroundColor) { - legendWidth += 2 * padding; - legendHeight += 2 * padding; - - if (!box) { - box = renderer.rect( - 0, - 0, - legendWidth, - legendHeight, - options.borderRadius, - legendBorderWidth || 0 - ).attr({ - stroke: options.borderColor, - 'stroke-width': legendBorderWidth || 0, - fill: legendBackgroundColor || NONE - }) - .add(legendGroup) - .shadow(options.shadow); - - } else if (legendWidth > 0 && legendHeight > 0) { - box.animate( - box.crisp(null, null, null, legendWidth, legendHeight) - ); - } - - // hide the border if no items - box[allItems.length ? 'show' : 'hide'](); - } - - // 1.x compatibility: positioning based on style - var props = ['left', 'right', 'top', 'bottom'], - prop, - i = 4; - while(i--) { - prop = props[i]; - if (style[prop] && style[prop] != 'auto') { - options[i < 2 ? 'align' : 'verticalAlign'] = prop; - options[i < 2 ? 'x' : 'y'] = pInt(style[prop]) * (i % 2 ? -1 : 1); - } - } - - legendGroup.align(extend(options, { - width: legendWidth, - height: legendHeight - }), true, spacingBox); - - if (!isResizing) { - positionCheckboxes(); - } - } - - - // run legend - renderLegend(); - - // move checkboxes - addEvent(chart, 'endResize', positionCheckboxes); - - // expose - return { - colorizeItem: colorizeItem, - destroyItem: destroyItem, - renderLegend: renderLegend - }; - }; - - - - - - - /** - * Initialize an individual series, called internally before render time - */ - function initSeries(options) { - var type = options.type || optionsChart.type || optionsChart.defaultSeriesType, - typeClass = seriesTypes[type], - serie, - hasRendered = chart.hasRendered; - - // an inverted chart can't take a column series and vice versa - if (hasRendered) { - if (inverted && type == 'column') { - typeClass = seriesTypes.bar; - } else if (!inverted && type == 'bar') { - typeClass = seriesTypes.column; - } - } - - serie = new typeClass(); - - serie.init(chart, options); - - // set internal chart properties - if (!hasRendered && serie.inverted) { - inverted = true; - } - if (serie.isCartesian) { - hasCartesianSeries = serie.isCartesian; - } - - series.push(serie); - - return serie; - } - - /** - * Add a series dynamically after time - * - * @param {Object} options The config options - * @param {Boolean} redraw Whether to redraw the chart after adding. Defaults to true. - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - * - * @return {Object} series The newly created series object - */ - function addSeries(options, redraw, animation) { - var series; - - if (options) { - setAnimation(animation, chart); - redraw = pick(redraw, true); // defaults to true - - fireEvent(chart, 'addSeries', { options: options }, function() { - series = initSeries(options); - series.isDirty = true; - - chart.isDirtyLegend = true; // the series array is out of sync with the display - if (redraw) { - chart.redraw(); - } - }); - } - - return series; - } - - /** - * Check whether a given point is within the plot area - * - * @param {Number} x Pixel x relative to the coordinateSystem - * @param {Number} y Pixel y relative to the coordinateSystem - */ - isInsidePlot = function(x, y) { - return x >= 0 && - x <= plotWidth && - y >= 0 && - y <= plotHeight; - }; - - /** - * Adjust all axes tick amounts - */ - function adjustTickAmounts() { - if (optionsChart.alignTicks !== false) { - each(axes, function(axis) { - axis.adjustTickAmount(); - }); - } - maxTicks = null; - } - - /** - * Redraw legend, axes or series based on updated data - * - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - */ - function redraw(animation) { - var redrawLegend = chart.isDirtyLegend, - hasStackedSeries, - isDirtyBox = chart.isDirtyBox, // todo: check if it has actually changed? - seriesLength = series.length, - i = seriesLength, - clipRect = chart.clipRect, - serie; - - setAnimation(animation, chart); - - // link stacked series - while (i--) { - serie = series[i]; - if (serie.isDirty && serie.options.stacking) { - hasStackedSeries = true; - break; - } - } - if (hasStackedSeries) { // mark others as dirty - i = seriesLength; - while (i--) { - serie = series[i]; - if (serie.options.stacking) { - serie.isDirty = true; - } - } - } - - // handle updated data in the series - each(series, function(serie) { - if (serie.isDirty) { // prepare the data so axis can read it - serie.cleanData(); - serie.getSegments(); - - if (serie.options.legendType == 'point') { - redrawLegend = true; - } - } - }); - - // handle added or removed series - if (redrawLegend && legend.renderLegend) { // series or pie points are added or removed - // draw legend graphics - legend.renderLegend(); - - chart.isDirtyLegend = false; - } - - if (hasCartesianSeries) { - if (!isResizing) { - - // reset maxTicks - maxTicks = null; - - // set axes scales - each(axes, function(axis) { - axis.setScale(); - }); - } - adjustTickAmounts(); - getMargins(); - - // redraw axes - each(axes, function(axis) { - if (axis.isDirty || isDirtyBox) { - axis.redraw(); - isDirtyBox = true; // always redraw box to reflect changes in the axis labels - } - }); - - - } - - // the plot areas size has changed - if (isDirtyBox) { - drawChartBox(); - placeTrackerGroup(); - - // move clip rect - if (clipRect) { - stop(clipRect); - clipRect.animate({ // for chart resize - width: chart.plotSizeX, - height: chart.plotSizeY - }); - } - - } - - - // redraw affected series - each(series, function(serie) { - if (serie.isDirty && serie.visible && - (!serie.isCartesian || serie.xAxis)) { // issue #153 - serie.redraw(); - } - }); - - - // hide tooltip and hover states - if (tracker && tracker.resetTracker) { - tracker.resetTracker(); - } - - // fire the event - fireEvent(chart, 'redraw'); - } - - - - /** - * Dim the chart and show a loading text or symbol - * @param {String} str An optional text to show in the loading label instead of the default one - */ - function showLoading(str) { - var loadingOptions = options.loading; - - // create the layer at the first call - if (!loadingDiv) { - loadingDiv = createElement(DIV, { - className: 'highcharts-loading' - }, extend(loadingOptions.style, { - left: plotLeft + PX, - top: plotTop + PX, - width: plotWidth + PX, - height: plotHeight + PX, - zIndex: 10, - display: NONE - }), container); - - loadingSpan = createElement( - 'span', - null, - loadingOptions.labelStyle, - loadingDiv - ); - - } - - // update text - loadingSpan.innerHTML = str || options.lang.loading; - - // show it - if (!loadingShown) { - css(loadingDiv, { opacity: 0, display: '' }); - animate(loadingDiv, { - opacity: loadingOptions.style.opacity - }, { - duration: loadingOptions.showDuration - }); - loadingShown = true; - } - } - /** - * Hide the loading layer - */ - function hideLoading() { - animate(loadingDiv, { - opacity: 0 - }, { - duration: options.loading.hideDuration, - complete: function() { - css(loadingDiv, { display: NONE }); - } - }); - loadingShown = false; - } - - /** - * Get an axis, series or point object by id. - * @param id {String} The id as given in the configuration options - */ - function get(id) { - var i, - j, - data; - - // search axes - for (i = 0; i < axes.length; i++) { - if (axes[i].options.id == id) { - return axes[i]; - } - } - - // search series - for (i = 0; i < series.length; i++) { - if (series[i].options.id == id) { - return series[i]; - } - } - - // search points - for (i = 0; i < series.length; i++) { - data = series[i].data; - for (j = 0; j < data.length; j++) { - if (data[j].id == id) { - return data[j]; - } - } - } - return null; - } - - /** - * Create the Axis instances based on the config options - */ - function getAxes() { - var xAxisOptions = options.xAxis || {}, - yAxisOptions = options.yAxis || {}, - axis; - - // make sure the options are arrays and add some members - xAxisOptions = splat(xAxisOptions); - each(xAxisOptions, function(axis, i) { - axis.index = i; - axis.isX = true; - }); - - yAxisOptions = splat(yAxisOptions); - each(yAxisOptions, function(axis, i) { - axis.index = i; - }); - - // concatenate all axis options into one array - axes = xAxisOptions.concat(yAxisOptions); - - // loop the options and construct axis objects - chart.xAxis = []; - chart.yAxis = []; - axes = map(axes, function(axisOptions) { - axis = new Axis(chart, axisOptions); - chart[axis.isXAxis ? 'xAxis' : 'yAxis'].push(axis); - - return axis; - }); - - adjustTickAmounts(); - } - - - /** - * Get the currently selected points from all series - */ - function getSelectedPoints() { - var points = []; - each(series, function(serie) { - points = points.concat( grep( serie.data, function(point) { - return point.selected; - })); - }); - return points; - } - - /** - * Get the currently selected series - */ - function getSelectedSeries() { - return grep(series, function (serie) { - return serie.selected; - }); - } - - /** - * Zoom out to 1:1 - */ - zoomOut = function () { - fireEvent(chart, 'selection', { resetSelection: true }, zoom); - chart.toolbar.remove('zoom'); - - }; - /** - * Zoom into a given portion of the chart given by axis coordinates - * @param {Object} event - */ - zoom = function (event) { - - // add button to reset selection - var lang = defaultOptions.lang, - animate = chart.pointCount < 100; - chart.toolbar.add('zoom', lang.resetZoom, lang.resetZoomTitle, zoomOut); - - // if zoom is called with no arguments, reset the axes - if (!event || event.resetSelection) { - each(axes, function(axis) { - axis.setExtremes(null, null, false, animate); - }); - } - - // else, zoom in on all axes - else { - each(event.xAxis.concat(event.yAxis), function(axisData) { - var axis = axisData.axis; - - // don't zoom more than maxZoom - if (chart.tracker[axis.isXAxis ? 'zoomX' : 'zoomY']) { - axis.setExtremes(axisData.min, axisData.max, false, animate); - } - }); - } - - // redraw chart - redraw(); - }; - - /** - * Show the title and subtitle of the chart - * - * @param titleOptions {Object} New title options - * @param subtitleOptions {Object} New subtitle options - * - */ - function setTitle (titleOptions, subtitleOptions) { - - chartTitleOptions = merge(options.title, titleOptions); - chartSubtitleOptions = merge(options.subtitle, subtitleOptions); - - // add title and subtitle - each([ - ['title', titleOptions, chartTitleOptions], - ['subtitle', subtitleOptions, chartSubtitleOptions] - ], function(arr) { - var name = arr[0], - title = chart[name], - titleOptions = arr[1], - chartTitleOptions = arr[2]; - - if (title && titleOptions) { - title.destroy(); // remove old - title = null; - } - if (chartTitleOptions && chartTitleOptions.text && !title) { - chart[name] = renderer.text( - chartTitleOptions.text, - 0, - 0 - ) - .attr({ - align: chartTitleOptions.align, - 'class': 'highcharts-'+ name, - zIndex: 1 - }) - .css(chartTitleOptions.style) - .add() - .align(chartTitleOptions, false, spacingBox); - } - }); - - } - - /** - * Get chart width and height according to options and container size - */ - function getChartSize() { - - containerWidth = (renderToClone || renderTo).offsetWidth; - containerHeight = (renderToClone || renderTo).offsetHeight; - chart.chartWidth = chartWidth = optionsChart.width || containerWidth || 600; - chart.chartHeight = chartHeight = optionsChart.height || - // the offsetHeight of an empty container is 0 in standard browsers, but 19 in IE7: - (containerHeight > 19 ? containerHeight : 400); - } - - - /** - * Get the containing element, determine the size and create the inner container - * div to hold the chart - */ - function getContainer() { - renderTo = optionsChart.renderTo; - containerId = PREFIX + idCounter++; - - if (isString(renderTo)) { - renderTo = doc.getElementById(renderTo); - } - - // remove previous chart - renderTo.innerHTML = ''; - - // If the container doesn't have an offsetWidth, it has or is a child of a node - // that has display:none. We need to temporarily move it out to a visible - // state to determine the size, else the legend and tooltips won't render - // properly - if (!renderTo.offsetWidth) { - renderToClone = renderTo.cloneNode(0); - css(renderToClone, { - position: ABSOLUTE, - top: '-9999px', - display: '' - }); - doc.body.appendChild(renderToClone); - } - - // get the width and height - getChartSize(); - - // create the inner container - chart.container = container = createElement(DIV, { - className: 'highcharts-container' + - (optionsChart.className ? ' '+ optionsChart.className : ''), - id: containerId - }, extend({ - position: RELATIVE, - overflow: HIDDEN, // needed for context menu (avoid scrollbars) and - // content overflow in IE - width: chartWidth + PX, - height: chartHeight + PX, - textAlign: 'left' - }, optionsChart.style), - renderToClone || renderTo - ); - - chart.renderer = renderer = - optionsChart.forExport ? // force SVG, used for SVG export - new SVGRenderer(container, chartWidth, chartHeight, true) : - new Renderer(container, chartWidth, chartHeight); - - // Issue 110 workaround: - // In Firefox, if a div is positioned by percentage, its pixel position may land - // between pixels. The container itself doesn't display this, but an SVG element - // inside this container will be drawn at subpixel precision. In order to draw - // sharp lines, this must be compensated for. This doesn't seem to work inside - // iframes though (like in jsFiddle). - var subPixelFix, rect; - if (isFirefox && container.getBoundingClientRect) { - subPixelFix = function() { - css(container, { left: 0, top: 0 }); - rect = container.getBoundingClientRect(); - css(container, { - left: (-rect.left % 1) + PX, - top: (-rect.top % 1) + PX - }); - }; - - // run the fix now - subPixelFix(); - - // run it on resize - addEvent(win, 'resize', subPixelFix); - - // remove it on chart destroy - addEvent(chart, 'destroy', function() { - removeEvent(win, 'resize', subPixelFix); - }); - } - } - - /** - * Calculate margins by rendering axis labels in a preliminary position. Title, - * subtitle and legend have already been rendered at this stage, but will be - * moved into their final positions - */ - getMargins = function() { - var legendOptions = options.legend, - legendMargin = pick(legendOptions.margin, 10), - legendX = legendOptions.x, - legendY = legendOptions.y, - align = legendOptions.align, - verticalAlign = legendOptions.verticalAlign, - titleOffset; - - resetMargins(); - - // adjust for title and subtitle - if ((chart.title || chart.subtitle) && !defined(optionsMarginTop)) { - titleOffset = mathMax( - chart.title && !chartTitleOptions.floating && !chartTitleOptions.verticalAlign && chartTitleOptions.y || 0, - chart.subtitle && !chartSubtitleOptions.floating && !chartSubtitleOptions.verticalAlign && chartSubtitleOptions.y || 0 - ); - if (titleOffset) { - plotTop = mathMax(plotTop, titleOffset + pick(chartTitleOptions.margin, 15) + spacingTop); - } - } - // adjust for legend - if (legendOptions.enabled && !legendOptions.floating) { - if (align == 'right') { // horizontal alignment handled first - if (!defined(optionsMarginRight)) { - marginRight = mathMax( - marginRight, - legendWidth - legendX + legendMargin + spacingRight - ); - } - } else if (align == 'left') { - if (!defined(optionsMarginLeft)) { - plotLeft = mathMax( - plotLeft, - legendWidth + legendX + legendMargin + spacingLeft - ); - } - - } else if (verticalAlign == 'top') { - if (!defined(optionsMarginTop)) { - plotTop = mathMax( - plotTop, - legendHeight + legendY + legendMargin + spacingTop - ); - } - - } else if (verticalAlign == 'bottom') { - if (!defined(optionsMarginBottom)) { - marginBottom = mathMax( - marginBottom, - legendHeight - legendY + legendMargin + spacingBottom - ); - } - } - } - - // pre-render axes to get labels offset width - if (hasCartesianSeries) { - each(axes, function(axis) { - axis.getOffset(); - }); - } - - if (!defined(optionsMarginLeft)) { - plotLeft += axisOffset[3]; - } - if (!defined(optionsMarginTop)) { - plotTop += axisOffset[0]; - } - if (!defined(optionsMarginBottom)) { - marginBottom += axisOffset[2]; - } - if (!defined(optionsMarginRight)) { - marginRight += axisOffset[1]; - } - - setChartSize(); - - }; - - /** - * Add the event handlers necessary for auto resizing - * - */ - function initReflow() { - var reflowTimeout; - function reflow() { - var width = optionsChart.width || renderTo.offsetWidth, - height = optionsChart.height || renderTo.offsetHeight; - - if (width && height) { // means container is display:none - if (width != containerWidth || height != containerHeight) { - clearTimeout(reflowTimeout); - reflowTimeout = setTimeout(function() { - resize(width, height, false); - }, 100); - } - containerWidth = width; - containerHeight = height; - } - } - addEvent(window, 'resize', reflow); - addEvent(chart, 'destroy', function() { - removeEvent(window, 'resize', reflow); - }); - } - - /** - * Resize the chart to a given width and height - * @param {Number} width - * @param {Number} height - * @param {Object|Boolean} animation - */ - resize = function(width, height, animation) { - var chartTitle = chart.title, - chartSubtitle = chart.subtitle; - - isResizing += 1; - - // set the animation for the current process - setAnimation(animation, chart); - - oldChartHeight = chartHeight; - oldChartWidth = chartWidth; - chartWidth = mathRound(width); - chartHeight = mathRound(height); - - css(container, { - width: chartWidth + PX, - height: chartHeight + PX - }); - renderer.setSize(chartWidth, chartHeight, animation); - - // update axis lengths for more correct tick intervals: - plotWidth = chartWidth - plotLeft - marginRight; - plotHeight = chartHeight - plotTop - marginBottom; - - // handle axes - maxTicks = null; - each(axes, function(axis) { - axis.isDirty = true; - axis.setScale(); - }); - - // make sure non-cartesian series are also handled - each(series, function(serie) { - serie.isDirty = true; - }); - - chart.isDirtyLegend = true; // force legend redraw - chart.isDirtyBox = true; // force redraw of plot and chart border - - getMargins(); - - // move titles - if (chartTitle) { - chartTitle.align(null, null, spacingBox); - } - if (chartSubtitle) { - chartSubtitle.align(null, null, spacingBox); - } - - redraw(animation); - - - oldChartHeight = null; - fireEvent(chart, 'resize'); - - // fire endResize and set isResizing back - setTimeout(function() { - fireEvent(chart, 'endResize', null, function() { - isResizing -= 1; - }); - }, globalAnimation && globalAnimation.duration || 500); - }; - - /** - * Set the public chart properties. This is done before and after the pre-render - * to determine margin sizes - */ - setChartSize = function() { - - chart.plotLeft = plotLeft = mathRound(plotLeft); - chart.plotTop = plotTop = mathRound(plotTop); - chart.plotWidth = plotWidth = mathRound(chartWidth - plotLeft - marginRight); - chart.plotHeight = plotHeight = mathRound(chartHeight - plotTop - marginBottom); - - chart.plotSizeX = inverted ? plotHeight : plotWidth; - chart.plotSizeY = inverted ? plotWidth : plotHeight; - - spacingBox = { - x: spacingLeft, - y: spacingTop, - width: chartWidth - spacingLeft - spacingRight, - height: chartHeight - spacingTop - spacingBottom - }; - }; - - /** - * Initial margins before auto size margins are applied - */ - resetMargins = function() { - plotTop = pick(optionsMarginTop, spacingTop); - marginRight = pick(optionsMarginRight, spacingRight); - marginBottom = pick(optionsMarginBottom, spacingBottom); - plotLeft = pick(optionsMarginLeft, spacingLeft); - axisOffset = [0, 0, 0, 0]; // top, right, bottom, left - }; - - /** - * Draw the borders and backgrounds for chart and plot area - */ - drawChartBox = function() { - var chartBorderWidth = optionsChart.borderWidth || 0, - chartBackgroundColor = optionsChart.backgroundColor, - plotBackgroundColor = optionsChart.plotBackgroundColor, - plotBackgroundImage = optionsChart.plotBackgroundImage, - mgn, - plotSize = { - x: plotLeft, - y: plotTop, - width: plotWidth, - height: plotHeight - }; - - // Chart area - mgn = chartBorderWidth + (optionsChart.shadow ? 8 : 0); - - if (chartBorderWidth || chartBackgroundColor) { - if (!chartBackground) { - chartBackground = renderer.rect(mgn / 2, mgn / 2, chartWidth - mgn, chartHeight - mgn, - optionsChart.borderRadius, chartBorderWidth) - .attr({ - stroke: optionsChart.borderColor, - 'stroke-width': chartBorderWidth, - fill: chartBackgroundColor || NONE - }) - .add() - .shadow(optionsChart.shadow); - } else { // resize - chartBackground.animate( - chartBackground.crisp(null, null, null, chartWidth - mgn, chartHeight - mgn) - ); - } - } - - - // Plot background - if (plotBackgroundColor) { - if (!plotBackground) { - plotBackground = renderer.rect(plotLeft, plotTop, plotWidth, plotHeight, 0) - .attr({ - fill: plotBackgroundColor - }) - .add() - .shadow(optionsChart.plotShadow); - } else { - plotBackground.animate(plotSize); - } - } - if (plotBackgroundImage) { - if (!plotBGImage) { - plotBGImage = renderer.image(plotBackgroundImage, plotLeft, plotTop, plotWidth, plotHeight) - .add(); - } else { - plotBGImage.animate(plotSize); - } - } - - // Plot area border - if (optionsChart.plotBorderWidth) { - if (!plotBorder) { - plotBorder = renderer.rect(plotLeft, plotTop, plotWidth, plotHeight, 0, optionsChart.plotBorderWidth) - .attr({ - stroke: optionsChart.plotBorderColor, - 'stroke-width': optionsChart.plotBorderWidth, - zIndex: 4 - }) - .add(); - } else { - plotBorder.animate( - plotBorder.crisp(null, plotLeft, plotTop, plotWidth, plotHeight) - ); - } - } - - // reset - chart.isDirtyBox = false; - }; - - /** - * Render all graphics for the chart - */ - function render () { - var labels = options.labels, - credits = options.credits, - creditsHref; - - // Title - setTitle(); - - - // Legend - legend = chart.legend = new Legend(chart); - - // Get margins by pre-rendering axes - getMargins(); - each(axes, function(axis) { - axis.setTickPositions(true); // update to reflect the new margins - }); - adjustTickAmounts(); - getMargins(); // second pass to check for new labels - - - // Draw the borders and backgrounds - drawChartBox(); - - // Axes - if (hasCartesianSeries) { - each(axes, function(axis) { - axis.render(); - }); - } - - - // The series - if (!chart.seriesGroup) { - chart.seriesGroup = renderer.g('series-group') - .attr({ zIndex: 3 }) - .add(); - } - each(series, function(serie) { - serie.translate(); - serie.setTooltipPoints(); - serie.render(); - }); - - - // Labels - if (labels.items) { - each(labels.items, function() { - var style = extend(labels.style, this.style), - x = pInt(style.left) + plotLeft, - y = pInt(style.top) + plotTop + 12; - - // delete to prevent rewriting in IE - delete style.left; - delete style.top; - - renderer.text( - this.html, - x, - y - ) - .attr({ zIndex: 2 }) - .css(style) - .add(); - - }); - } - - // Toolbar (don't redraw) - if (!chart.toolbar) { - chart.toolbar = Toolbar(chart); - } - - // Credits - if (credits.enabled && !chart.credits) { - creditsHref = credits.href; - renderer.text( - credits.text, - 0, - 0 - ) - .on('click', function() { - if (creditsHref) { - location.href = creditsHref; - } - }) - .attr({ - align: credits.position.align, - zIndex: 8 - }) - .css(credits.style) - .add() - .align(credits.position); - } - - placeTrackerGroup(); - - // Set flag - chart.hasRendered = true; - - // If the chart was rendered outside the top container, put it back in - if (renderToClone) { - renderTo.appendChild(container); - discardElement(renderToClone); - //updatePosition(container); - } - } - - /** - * Clean up memory usage - */ - function destroy() { - var i = series.length, - parentNode = container && container.parentNode; - - // fire the chart.destoy event - fireEvent(chart, 'destroy'); - - // remove events - removeEvent(win, 'unload', destroy); - removeEvent(chart); - - each(axes, function(axis) { - removeEvent(axis); - }); - - // destroy each series - while (i--) { - series[i].destroy(); - } - - // remove container and all SVG - if (container) { // can break in IE when destroyed before finished loading - container.innerHTML = ''; - removeEvent(container); - if (parentNode) { - parentNode.removeChild(container); - } - - // IE6 leak - container = null; - } - - // IE7 leak - if (renderer) { // can break in IE when destroyed before finished loading - renderer.alignedObjects = null; - } - - // memory and CPU leak - clearInterval(tooltipInterval); - - // clean it all up - for (i in chart) { - delete chart[i]; - } - - } - /** - * Prepare for first rendering after all data are loaded - */ - function firstRender() { - - // VML namespaces can't be added until after complete. Listening - // for Perini's doScroll hack is not enough. - var onreadystatechange = 'onreadystatechange'; - if (!hasSVG && win == win.top && doc.readyState != 'complete') { - doc.attachEvent(onreadystatechange, function() { - doc.detachEvent(onreadystatechange, firstRender); - firstRender(); - }); - return; - } - - // create the container - getContainer(); - - resetMargins(); - setChartSize(); - - // Initialize the series - each(options.series || [], function(serieOptions) { - initSeries(serieOptions); - }); - - // Set the common inversion and transformation for inverted series after initSeries - chart.inverted = inverted = pick(inverted, options.chart.inverted); - - - getAxes(); - - - chart.render = render; - - // depends on inverted and on margins being set - chart.tracker = tracker = new MouseTracker(chart, options.tooltip); - - //globalAnimation = false; - render(); - - fireEvent(chart, 'load'); - - //globalAnimation = true; - - // run callbacks - if (callback) { - callback.apply(chart, [chart]); - } - each(chart.callbacks, function(fn) { - fn.apply(chart, [chart]); - }); - } - - // Run chart - - - - // Set to zero for each new chart - colorCounter = 0; - symbolCounter = 0; - - // Destroy the chart and free up memory. - addEvent(win, 'unload', destroy); - - // Set up auto resize - if (optionsChart.reflow !== false) { - addEvent(chart, 'load', initReflow); - } - - // Chart event handlers - if (chartEvents) { - for (eventType in chartEvents) { - addEvent(chart, eventType, chartEvents[eventType]); - } - } - - - chart.options = options; - chart.series = series; - - - - - - - // Expose methods and variables - chart.addSeries = addSeries; - chart.animation = pick(optionsChart.animation, true); - chart.destroy = destroy; - chart.get = get; - chart.getSelectedPoints = getSelectedPoints; - chart.getSelectedSeries = getSelectedSeries; - chart.hideLoading = hideLoading; - chart.isInsidePlot = isInsidePlot; - chart.redraw = redraw; - chart.setSize = resize; - chart.setTitle = setTitle; - chart.showLoading = showLoading; - chart.pointCount = 0; - /* - if ($) $(function() { - $container = $('#container'); - var origChartWidth, - origChartHeight; - if ($container) { - $('') - .insertBefore($container) - .click(function() { - if (origChartWidth === UNDEFINED) { - origChartWidth = chartWidth; - origChartHeight = chartHeight; - } - chart.resize(chartWidth *= 1.1, chartHeight *= 1.1); - }); - $('') - .insertBefore($container) - .click(function() { - if (origChartWidth === UNDEFINED) { - origChartWidth = chartWidth; - origChartHeight = chartHeight; - } - chart.resize(chartWidth *= 0.9, chartHeight *= 0.9); - }); - $('') - .insertBefore($container) - .click(function() { - if (origChartWidth === UNDEFINED) { - origChartWidth = chartWidth; - origChartHeight = chartHeight; - } - chart.resize(origChartWidth, origChartHeight); - }); - } - }) - */ - - - - - firstRender(); - - -} // end Chart - -// Hook for exporting module -Chart.prototype.callbacks = []; - -/** - * The Point object and prototype. Inheritable and used as base for PiePoint - */ -var Point = function() {}; -Point.prototype = { - - /** - * Initialize the point - * @param {Object} series The series object containing this point - * @param {Object} options The data in either number, array or object format - */ - init: function(series, options) { - var point = this, - defaultColors; - point.series = series; - point.applyOptions(options); - point.pointAttr = {}; - - if (series.options.colorByPoint) { - defaultColors = series.chart.options.colors; - if (!point.options) { - point.options = {}; - } - point.color = point.options.color = point.color || defaultColors[colorCounter++]; - - // loop back to zero - if (colorCounter >= defaultColors.length) { - colorCounter = 0; - } - } - - series.chart.pointCount++; - return point; - }, - /** - * Apply the options containing the x and y data and possible some extra properties. - * This is called on point init or from point.update. - * - * @param {Object} options - */ - applyOptions: function(options) { - var point = this, - series = point.series; - - point.config = options; - - // onedimensional array input - if (isNumber(options) || options === null) { - point.y = options; - } - - // object input - else if (isObject(options) && !isNumber(options.length)) { - - // copy options directly to point - extend(point, options); - point.options = options; - } - - // categorized data with name in first position - else if (isString(options[0])) { - point.name = options[0]; - point.y = options[1]; - } - - // two-dimentional array - else if (isNumber(options[0])) { - point.x = options[0]; - point.y = options[1]; - } - - /* - * If no x is set by now, get auto incremented value. All points must have an - * x value, however the y value can be null to create a gap in the series - */ - if (point.x === UNDEFINED) { - point.x = series.autoIncrement(); - } - - }, - - /** - * Destroy a point to clear memory. Its reference still stays in series.data. - */ - destroy: function() { - var point = this, - series = point.series, - prop; - - series.chart.pointCount--; - - if (point == series.chart.hoverPoint) { - point.onMouseOut(); - } - series.chart.hoverPoints = null; // remove reference - - // remove all events - removeEvent(point); - - each(['graphic', 'tracker', 'group', 'dataLabel', 'connector'], function(prop) { - if (point[prop]) { - point[prop].destroy(); - } - }); - - if (point.legendItem) { // pies have legend items - point.series.chart.legend.destroyItem(point); - } - - for (prop in point) { - point[prop] = null; - } - - - }, - - /** - * Toggle the selection status of a point - * @param {Boolean} selected Whether to select or unselect the point. - * @param {Boolean} accumulate Whether to add to the previous selection. By default, - * this happens if the control key (Cmd on Mac) was pressed during clicking. - */ - select: function(selected, accumulate) { - var point = this, - series = point.series, - chart = series.chart; - - point.selected = selected = pick(selected, !point.selected); - - //series.isDirty = true; - point.firePointEvent(selected ? 'select' : 'unselect'); - point.setState(selected && SELECT_STATE); - - // unselect all other points unless Ctrl or Cmd + click - if (!accumulate) { - each(chart.getSelectedPoints(), function (loopPoint) { - if (loopPoint.selected && loopPoint != point) { - loopPoint.selected = false; - loopPoint.setState(NORMAL_STATE); - loopPoint.firePointEvent('unselect'); - } - }); - } - - }, - - onMouseOver: function() { - var point = this, - chart = point.series.chart, - tooltip = chart.tooltip, - hoverPoint = chart.hoverPoint; - - // set normal state to previous series - if (hoverPoint && hoverPoint != point) { - hoverPoint.onMouseOut(); - } - - // trigger the event - point.firePointEvent('mouseOver'); - - // update the tooltip - if (tooltip && !tooltip.shared) { - tooltip.refresh(point); - } - - // hover this - point.setState(HOVER_STATE); - chart.hoverPoint = point; - }, - - onMouseOut: function() { - var point = this; - point.firePointEvent('mouseOut'); - - point.setState(); - point.series.chart.hoverPoint = null; - }, - - /** - * Extendable method for formatting each point's tooltip line - * - * @param {Boolean} useHeader Whether a common header is used for multiple series in the tooltip - * - * @return {String} A string to be concatenated in to the common tooltip text - */ - tooltipFormatter: function(useHeader) { - var point = this, - series = point.series; - - return ['', (point.name || series.name), ': ', - (!useHeader ? ('x = '+ (point.name || point.x) + ', ') : ''), - '', (!useHeader ? 'y = ' : '' ), point.y, '
'].join(''); - - }, - - /** - * Get the formatted text for this point's data label - * - * @return {String} The formatted data label pseudo-HTML - */ - getDataLabelText: function() { - var point = this; - return this.series.options.dataLabels.formatter.call({ - x: point.x, - y: point.y, - series: point.series, - point: point, - percentage: point.percentage, - total: point.total || point.stackTotal - }); - }, - - /** - * Update the point with new options (typically x/y data) and optionally redraw the series. - * - * @param {Object} options Point options as defined in the series.data array - * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - * - */ - update: function(options, redraw, animation) { - var point = this, - series = point.series, - dataLabel = point.dataLabel, - graphic = point.graphic, - chart = series.chart; - - redraw = pick(redraw, true); - - // fire the event with a default handler of doing the update - point.firePointEvent('update', { options: options }, function() { - - point.applyOptions(options); - - if (dataLabel) { - dataLabel.attr({ - text: point.getDataLabelText() - }) - } - - // update visuals - if (isObject(options)) { - series.getAttribs(); - if (graphic) { - graphic.attr(point.pointAttr[series.state]); - } - } - - // redraw - series.isDirty = true; - if (redraw) { - chart.redraw(animation); - } - }); - }, - - /** - * Remove a point and optionally redraw the series and if necessary the axes - * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - */ - remove: function(redraw, animation) { - var point = this, - series = point.series, - chart = series.chart, - data = series.data; - - setAnimation(animation, chart); - redraw = pick(redraw, true); - - // fire the event with a default handler of removing the point - point.firePointEvent('remove', null, function() { - - erase(data, point); - - point.destroy(); - - - // redraw - series.isDirty = true; - if (redraw) { - chart.redraw(); - } - }); - - - }, - - /** - * Fire an event on the Point object. Must not be renamed to fireEvent, as this - * causes a name clash in MooTools - * @param {String} eventType - * @param {Object} eventArgs Additional event arguments - * @param {Function} defaultFunction Default event handler - */ - firePointEvent: function(eventType, eventArgs, defaultFunction) { - var point = this, - series = this.series, - seriesOptions = series.options; - - // load event handlers on demand to save time on mouseover/out - if (seriesOptions.point.events[eventType] || ( - point.options && point.options.events && point.options.events[eventType])) { - this.importEvents(); - } - - // add default handler if in selection mode - if (eventType == 'click' && seriesOptions.allowPointSelect) { - defaultFunction = function (event) { - // Control key is for Windows, meta (= Cmd key) for Mac, Shift for Opera - point.select(null, event.ctrlKey || event.metaKey || event.shiftKey); - }; - } - - fireEvent(this, eventType, eventArgs, defaultFunction); - }, - /** - * Import events from the series' and point's options. Only do it on - * demand, to save processing time on hovering. - */ - importEvents: function() { - if (!this.hasImportedEvents) { - var point = this, - options = merge(point.series.options.point, point.options), - events = options.events, - eventType; - - point.events = events; - - for (eventType in events) { - addEvent(point, eventType, events[eventType]); - } - this.hasImportedEvents = true; - - } - }, - - /** - * Set the point's state - * @param {String} state - */ - setState: function(state) { - var point = this, - series = point.series, - stateOptions = series.options.states, - markerOptions = defaultPlotOptions[series.type].marker && series.options.marker, - normalDisabled = markerOptions && !markerOptions.enabled, - markerStateOptions = markerOptions && markerOptions.states[state], - stateDisabled = markerStateOptions && markerStateOptions.enabled === false, - stateMarkerGraphic = series.stateMarkerGraphic, - chart = series.chart, - pointAttr = point.pointAttr; - - if (!state) { - state = NORMAL_STATE; // empty string - } - - if ( - // already has this state - state == point.state || - // selected points don't respond to hover - (point.selected && state != SELECT_STATE) || - // series' state options is disabled - (stateOptions[state] && stateOptions[state].enabled === false) || - // point marker's state options is disabled - (state && (stateDisabled || normalDisabled && !markerStateOptions.enabled)) - - ) { - return; - } - - // apply hover styles to the existing point - if (point.graphic) { - point.graphic.attr(pointAttr[state]); - } - // if a graphic is not applied to each point in the normal state, create a shared - // graphic for the hover state - else { - if (state) { - if (!stateMarkerGraphic) { - series.stateMarkerGraphic = stateMarkerGraphic = chart.renderer.circle( - 0, 0, pointAttr[state].r - ) - .attr(pointAttr[state]) - .add(series.group); - } - - stateMarkerGraphic.translate( - point.plotX, - point.plotY - ); - } - - if (stateMarkerGraphic) { - stateMarkerGraphic[state ? 'show' : 'hide'](); - } - } - - point.state = state; - } -}; - -/** - * The base function which all other series types inherit from - * @param {Object} chart - * @param {Object} options - */ -var Series = function() {}; - -Series.prototype = { - - isCartesian: true, - type: 'line', - pointClass: Point, - pointAttrToOptions: { // mapping between SVG attributes and the corresponding options - stroke: 'lineColor', - 'stroke-width': 'lineWidth', - fill: 'fillColor', - r: 'radius' - }, - init: function(chart, options) { - var series = this, - eventType, - events, - //pointEvent, - index = chart.series.length; - - series.chart = chart; - options = series.setOptions(options); // merge with plotOptions - - // set some variables - extend(series, { - index: index, - options: options, - name: options.name || 'Series '+ (index + 1), - state: NORMAL_STATE, - pointAttr: {}, - visible: options.visible !== false, // true by default - selected: options.selected === true // false by default - }); - - // register event listeners - events = options.events; - for (eventType in events) { - addEvent(series, eventType, events[eventType]); - } - if ( - (events && events.click) || - (options.point && options.point.events && options.point.events.click) || - options.allowPointSelect - ) { - chart.runTrackerClick = true; - } - - series.getColor(); - series.getSymbol(); - - // set the data - series.setData(options.data, false); - - }, - - - /** - * Return an auto incremented x value based on the pointStart and pointInterval options. - * This is only used if an x value is not given for the point that calls autoIncrement. - */ - autoIncrement: function() { - var series = this, - options = series.options, - xIncrement = series.xIncrement; - - xIncrement = pick(xIncrement, options.pointStart, 0); - - series.pointInterval = pick(series.pointInterval, options.pointInterval, 1); - - series.xIncrement = xIncrement + series.pointInterval; - return xIncrement; - }, - - /** - * Sort the data and remove duplicates - */ - cleanData: function() { - var series = this, - chart = series.chart, - data = series.data, - closestPoints, - smallestInterval, - chartSmallestInterval = chart.smallestInterval, - interval, - i; - - // sort the data points - data.sort(function(a, b){ - return (a.x - b.x); - }); - - // remove points with equal x values - // record the closest distance for calculation of column widths - for (i = data.length - 1; i >= 0; i--) { - if (data[i - 1]) { - if (data[i - 1].x == data[i].x) { - data.splice(i - 1, 1); // remove the duplicate - } - - } - } - - - // find the closes pair of points - for (i = data.length - 1; i >= 0; i--) { - if (data[i - 1]) { - interval = data[i].x - data[i - 1].x; - if (smallestInterval === UNDEFINED || interval < smallestInterval) { - smallestInterval = interval; - closestPoints = i; - } - } - } - - if (chartSmallestInterval === UNDEFINED || smallestInterval < chartSmallestInterval) { - chart.smallestInterval = smallestInterval; - } - series.closestPoints = closestPoints; - }, - - /** - * Divide the series data into segments divided by null values. Also sort - * the data points and delete duplicate values. - */ - getSegments: function() { - var lastNull = -1, - segments = [], - data = this.data; - - // create the segments - each(data, function(point, i) { - if (point.y === null) { - if (i > lastNull + 1) { - segments.push(data.slice(lastNull + 1, i)); - } - lastNull = i; - } else if (i == data.length - 1) { // last value - segments.push(data.slice(lastNull + 1, i + 1)); - } - }); - this.segments = segments; - - - }, - /** - * Set the series options by merging from the options tree - * @param {Object} itemOptions - */ - setOptions: function(itemOptions) { - var plotOptions = this.chart.options.plotOptions, - options = merge( - plotOptions[this.type], - plotOptions.series, - itemOptions - ); - - return options; - - }, - /** - * Get the series' color - */ - getColor: function(){ - var defaultColors = this.chart.options.colors; - this.color = this.options.color || defaultColors[colorCounter++] || '#0000ff'; - if (colorCounter >= defaultColors.length) { - colorCounter = 0; - } - }, - /** - * Get the series' symbol - */ - getSymbol: function(){ - var defaultSymbols = this.chart.options.symbols, - symbol = this.options.marker.symbol || defaultSymbols[symbolCounter++]; - this.symbol = symbol; - if (symbolCounter >= defaultSymbols.length) { - symbolCounter = 0; - } - }, - - /** - * Add a point dynamically after chart load time - * @param {Object} options Point options as given in series.data - * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call - * @param {Boolean} shift If shift is true, a point is shifted off the start - * of the series as one is appended to the end. - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - */ - addPoint: function(options, redraw, shift, animation) { - var series = this, - data = series.data, - graph = series.graph, - area = series.area, - chart = series.chart, - point = (new series.pointClass()).init(series, options); - - setAnimation(animation, chart); - - if (graph && shift) { // make graph animate sideways - graph.shift = shift; - } - if (area) { - area.shift = shift; - area.isArea = true; - } - - redraw = pick(redraw, true); - - data.push(point); - if (shift) { - data[0].remove(false); - } - - - // redraw - series.isDirty = true; - if (redraw) { - chart.redraw(); - } - }, - - /** - * Replace the series data with a new set of data - * @param {Object} data - * @param {Object} redraw - */ - setData: function(data, redraw) { - var series = this, - oldData = series.data, - initialColor = series.initialColor, - chart = series.chart, - i = oldData && oldData.length || 0; - - series.xIncrement = null; // reset for new data - if (defined(initialColor)) { // reset colors for pie - colorCounter = initialColor; - } - - data = map(splat(data || []), function(pointOptions) { - return (new series.pointClass()).init(series, pointOptions); - }); - - // destroy old points - while (i--) { - oldData[i].destroy(); - } - - // set the data - series.data = data; - - series.cleanData(); - series.getSegments(); - - // redraw - series.isDirty = true; - chart.isDirtyBox = true; - if (pick(redraw, true)) { - chart.redraw(false); - } - }, - - /** - * Remove a series and optionally redraw the chart - * - * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - */ - - remove: function(redraw, animation) { - var series = this, - chart = series.chart; - redraw = pick(redraw, true); - - if (!series.isRemoving) { /* prevent triggering native event in jQuery - (calling the remove function from the remove event) */ - series.isRemoving = true; - - // fire the event with a default handler of removing the point - fireEvent(series, 'remove', null, function() { - - - // destroy elements - series.destroy(); - - - // redraw - chart.isDirtyLegend = chart.isDirtyBox = true; - if (redraw) { - chart.redraw(animation); - } - }); - - } - series.isRemoving = false; - }, - - /** - * Translate data points from raw data values to chart specific positioning data - * needed later in drawPoints, drawGraph and drawTracker. - */ - translate: function() { - var series = this, - chart = series.chart, - stacking = series.options.stacking, - categories = series.xAxis.categories, - yAxis = series.yAxis, - data = series.data, - i = data.length; - - // do the translation - while (i--) { - var point = data[i], - xValue = point.x, - yValue = point.y, - yBottom = point.low, - stack = yAxis.stacks[(yValue < 0 ? '-' : '') + series.stackKey], - pointStack, - pointStackTotal; - point.plotX = series.xAxis.translate(xValue); - - // calculate the bottom y value for stacked series - if (stacking && series.visible && stack && stack[xValue]) { - pointStack = stack[xValue]; - pointStackTotal = pointStack.total; - pointStack.cum = yBottom = pointStack.cum - yValue; // start from top - yValue = yBottom + yValue; - - if (stacking == 'percent') { - yBottom = pointStackTotal ? yBottom * 100 / pointStackTotal : 0; - yValue = pointStackTotal ? yValue * 100 / pointStackTotal : 0; - } - - point.percentage = pointStackTotal ? point.y * 100 / pointStackTotal : 0; - point.stackTotal = pointStackTotal; - } - - if (defined(yBottom)) { - point.yBottom = yAxis.translate(yBottom, 0, 1); - } - - // set the y value - if (yValue !== null) { - point.plotY = yAxis.translate(yValue, 0, 1); - } - - // set client related positions for mouse tracking - point.clientX = chart.inverted ? - chart.plotHeight - point.plotX : - point.plotX; // for mouse tracking - - // some API data - point.category = categories && categories[point.x] !== UNDEFINED ? - categories[point.x] : point.x; - - } - }, - /** - * Memoize tooltip texts and positions - */ - setTooltipPoints: function (renew) { - var series = this, - chart = series.chart, - inverted = chart.inverted, - data = [], - plotSize = mathRound((inverted ? chart.plotTop : chart.plotLeft) + chart.plotSizeX), - low, - high, - tooltipPoints = []; // a lookup array for each pixel in the x dimension - - // renew - if (renew) { - series.tooltipPoints = null; - } - - // concat segments to overcome null values - each(series.segments, function(segment){ - data = data.concat(segment); - }); - - // loop the concatenated data and apply each point to all the closest - // pixel positions - if (series.xAxis && series.xAxis.reversed) { - data = data.reverse();//reverseArray(data); - } - - each(data, function(point, i) { - - low = data[i - 1] ? data[i - 1].high + 1 : 0; - high = point.high = data[i + 1] ? ( - mathFloor((point.plotX + (data[i + 1] ? - data[i + 1].plotX : plotSize)) / 2)) : - plotSize; - - while (low <= high) { - tooltipPoints[inverted ? plotSize - low++ : low++] = point; - } - }); - series.tooltipPoints = tooltipPoints; - }, - - - - - /** - * Series mouse over handler - */ - onMouseOver: function() { - var series = this, - chart = series.chart, - hoverSeries = chart.hoverSeries; - - if (!hasTouch && chart.mouseIsDown) { - return; - } - - // set normal state to previous series - if (hoverSeries && hoverSeries != series) { - hoverSeries.onMouseOut(); - } - - // trigger the event, but to save processing time, - // only if defined - if (series.options.events.mouseOver) { - fireEvent(series, 'mouseOver'); - } - - - // bring to front - // Todo: optimize. This is one of two operations slowing down the tooltip in Firefox. - // Can the tracking be done otherwise? - if (series.tracker) { - series.tracker.toFront(); - } - - // hover this - series.setState(HOVER_STATE); - chart.hoverSeries = series; - }, - - /** - * Series mouse out handler - */ - onMouseOut: function() { - // trigger the event only if listeners exist - var series = this, - options = series.options, - chart = series.chart, - tooltip = chart.tooltip, - hoverPoint = chart.hoverPoint; - - // trigger mouse out on the point, which must be in this series - if (hoverPoint) { - hoverPoint.onMouseOut(); - } - - // fire the mouse out event - if (series && options.events.mouseOut) { - fireEvent(series, 'mouseOut'); - } - - - // hide the tooltip - if (tooltip && !options.stickyTracking) { - tooltip.hide(); - } - - // set normal state - series.setState(); - chart.hoverSeries = null; - }, - - /** - * Animate in the series - */ - animate: function(init) { - var series = this, - chart = series.chart, - clipRect = series.clipRect, - animation = series.options.animation; - - if (animation && !isObject(animation)) { - animation = {}; - } - - if (init) { // initialize the animation - if (!clipRect.isAnimating) { // apply it only for one of the series - clipRect.attr( 'width', 0 ); - clipRect.isAnimating = true; - } - - } else { // run the animation - clipRect.animate({ - width: chart.plotSizeX - }, animation); - - // delete this function to allow it only once - this.animate = null; - } - }, - - - /** - * Draw the markers - */ - drawPoints: function(){ - var series = this, - pointAttr, - data = series.data, - chart = series.chart, - plotX, - plotY, - i, - point, - radius, - graphic; - - if (series.options.marker.enabled) { - i = data.length; - while (i--) { - point = data[i]; - plotX = point.plotX; - plotY = point.plotY; - graphic = point.graphic; - - // only draw the point if y is defined - if (plotY !== UNDEFINED && !isNaN(plotY)) { - - /* && removed this code because points stayed after zoom - point.plotX >= 0 && point.plotX <= chart.plotSizeX && - point.plotY >= 0 && point.plotY <= chart.plotSizeY*/ - - // shortcuts - pointAttr = point.pointAttr[point.selected ? SELECT_STATE : NORMAL_STATE]; - radius = pointAttr.r; - - if (graphic) { // update - graphic.animate({ - x: plotX, - y: plotY, - r: radius - }); - } else { - point.graphic = chart.renderer.symbol( - pick(point.marker && point.marker.symbol, series.symbol), - plotX, - plotY, - radius - ) - .attr(pointAttr) - .add(series.group); - } - } - } - } - - }, - - /** - * Convert state properties from API naming conventions to SVG attributes - * - * @param {Object} options API options object - * @param {Object} base1 SVG attribute object to inherit from - * @param {Object} base2 Second level SVG attribute object to inherit from - */ - convertAttribs: function(options, base1, base2, base3) { - var conversion = this.pointAttrToOptions, - attr, - option, - obj = {}; - - options = options || {}; - base1 = base1 || {}; - base2 = base2 || {}; - base3 = base3 || {}; - - for (attr in conversion) { - option = conversion[attr]; - obj[attr] = pick(options[option], base1[attr], base2[attr], base3[attr]); - } - return obj; - }, - - /** - * Get the state attributes. Each series type has its own set of attributes - * that are allowed to change on a point's state change. Series wide attributes are stored for - * all series, and additionally point specific attributes are stored for all - * points with individual marker options. If such options are not defined for the point, - * a reference to the series wide attributes is stored in point.pointAttr. - */ - getAttribs: function() { - var series = this, - normalOptions = defaultPlotOptions[series.type].marker ? series.options.marker : series.options, - stateOptions = normalOptions.states, - stateOptionsHover = stateOptions[HOVER_STATE], - pointStateOptionsHover, - seriesColor = series.color, - normalDefaults = { - stroke: seriesColor, - fill: seriesColor - }, - data = series.data, - i, - point, - seriesPointAttr = [], - pointAttr, - pointAttrToOptions = series.pointAttrToOptions, - hasPointSpecificOptions; - - // series type specific modifications - if (series.options.marker) { // line, spline, area, areaspline, scatter - - // if no hover radius is given, default to normal radius + 2 - stateOptionsHover.radius = stateOptionsHover.radius || normalOptions.radius + 2; - stateOptionsHover.lineWidth = stateOptionsHover.lineWidth || normalOptions.lineWidth + 1; - - } else { // column, bar, pie - - // if no hover color is given, brighten the normal color - stateOptionsHover.color = stateOptionsHover.color || - Color(stateOptionsHover.color || seriesColor) - .brighten(stateOptionsHover.brightness).get(); - } - - // general point attributes for the series normal state - seriesPointAttr[NORMAL_STATE] = series.convertAttribs(normalOptions, normalDefaults); - - // HOVER_STATE and SELECT_STATE states inherit from normal state except the default radius - each([HOVER_STATE, SELECT_STATE], function(state) { - seriesPointAttr[state] = - series.convertAttribs(stateOptions[state], seriesPointAttr[NORMAL_STATE]); - }); - - // set it - series.pointAttr = seriesPointAttr; - - - // Generate the point-specific attribute collections if specific point - // options are given. If not, create a referance to the series wide point - // attributes - i = data.length; - while (i--) { - point = data[i]; - normalOptions = (point.options && point.options.marker) || point.options; - if (normalOptions && normalOptions.enabled === false) { - normalOptions.radius = 0; - } - hasPointSpecificOptions = false; - - // check if the point has specific visual options - if (point.options) { - for (var key in pointAttrToOptions) { - if (defined(normalOptions[pointAttrToOptions[key]])) { - hasPointSpecificOptions = true; - } - } - } - - - - // a specific marker config object is defined for the individual point: - // create it's own attribute collection - if (hasPointSpecificOptions) { - - pointAttr = []; - stateOptions = normalOptions.states || {}; // reassign for individual point - pointStateOptionsHover = stateOptions[HOVER_STATE] = stateOptions[HOVER_STATE] || {}; - - // if no hover color is given, brighten the normal color - if (!series.options.marker) { // column, bar, point - pointStateOptionsHover.color = - Color(pointStateOptionsHover.color || point.options.color) - .brighten(pointStateOptionsHover.brightness || - stateOptionsHover.brightness).get(); - - } - - // normal point state inherits series wide normal state - pointAttr[NORMAL_STATE] = series.convertAttribs(normalOptions, seriesPointAttr[NORMAL_STATE]); - - // inherit from point normal and series hover - pointAttr[HOVER_STATE] = series.convertAttribs( - stateOptions[HOVER_STATE], - seriesPointAttr[HOVER_STATE], - pointAttr[NORMAL_STATE] - ); - // inherit from point normal and series hover - pointAttr[SELECT_STATE] = series.convertAttribs( - stateOptions[SELECT_STATE], - seriesPointAttr[SELECT_STATE], - pointAttr[NORMAL_STATE] - ); - - - - // no marker config object is created: copy a reference to the series-wide - // attribute collection - } else { - pointAttr = seriesPointAttr; - } - - point.pointAttr = pointAttr; - - } - - }, - - - /** - * Clear DOM objects and free up memory - */ - destroy: function() { - var series = this, - chart = series.chart, - //chartSeries = series.chart.series, - clipRect = series.clipRect, - issue134 = /\/5[0-9\.]+ (Safari|Mobile)\//.test(userAgent), // todo: update when Safari bug is fixed - destroy, - prop; - - // remove all events - removeEvent(series); - - // remove legend items - if (series.legendItem) { - series.chart.legend.destroyItem(series); - } - - // destroy all points with their elements - each(series.data, function(point) { - point.destroy(); - }); - // destroy all SVGElements associated to the series - each(['area', 'graph', 'dataLabelsGroup', 'group', 'tracker'], function(prop) { - if (series[prop]) { - - // issue 134 workaround - destroy = issue134 && prop == 'group' ? - 'hide' : - 'destroy'; - - series[prop][destroy](); - } - }); - - // remove from hoverSeries - if (chart.hoverSeries == series) { - chart.hoverSeries = null; - } - erase(chart.series, series); - - // clear all members - for (prop in series) { - delete series[prop]; - } - }, - - /** - * Draw the data labels - */ - drawDataLabels: function() { - if (this.options.dataLabels.enabled) { - var series = this, - x, - y, - data = series.data, - options = series.options.dataLabels, - str, - dataLabelsGroup = series.dataLabelsGroup, - chart = series.chart, - inverted = chart.inverted, - seriesType = series.type, - color; - - // create a separate group for the data labels to avoid rotation - if (!dataLabelsGroup) { - dataLabelsGroup = series.dataLabelsGroup = - chart.renderer.g(PREFIX +'data-labels') - .attr({ - visibility: series.visible ? VISIBLE : HIDDEN, - zIndex: 5 - }) - .translate(chart.plotLeft, chart.plotTop) - .add(); - } - - // determine the color - color = options.color; - if (color == 'auto') { // 1.0 backwards compatibility - color = null; - } - options.style.color = pick(color, series.color); - - // make the labels for each point - each(data, function(point, i){ - var barX = point.barX, - plotX = barX && barX + point.barW / 2 || point.plotX || -999, - plotY = pick(point.plotY, -999), - dataLabel = point.dataLabel, - align = options.align; - - // get the string - str = point.getDataLabelText(); - x = (inverted ? chart.plotWidth - plotY : plotX) + options.x; - y = (inverted ? chart.plotHeight - plotX : plotY) + options.y; - - // in columns, align the string to the column - if (seriesType == 'column') { - x += { left: -1, right: 1 }[align] * point.barW / 2 || 0; - } - - - if (dataLabel) { - dataLabel.animate({ - x: x, - y: y - }); - } else if (defined(str)) { - dataLabel = point.dataLabel = chart.renderer.text( - str, - x, - y - ) - .attr({ - align: align, - rotation: options.rotation, - zIndex: 1 - }) - .css(options.style) - .add(dataLabelsGroup); - } - - // vertically centered - if (inverted && !options.y) { - dataLabel.attr({ - y: y + parseInt(dataLabel.styles.lineHeight) * 0.9 - dataLabel.getBBox().height / 2 - }); - } - - /*if (series.isCartesian) { - dataLabel[chart.isInsidePlot(plotX, plotY) ? 'show' : 'hide'](); - }*/ - - }); - } - }, - - /** - * Draw the actual graph - */ - drawGraph: function(state) { - var series = this, - options = series.options, - chart = series.chart, - graph = series.graph, - graphPath = [], - fillColor, - area = series.area, - group = series.group, - color = options.lineColor || series.color, - lineWidth = options.lineWidth, - dashStyle = options.dashStyle, - segmentPath, - renderer = chart.renderer, - translatedThreshold = series.yAxis.getThreshold(options.threshold || 0), - useArea = /^area/.test(series.type), - singlePoints = [], // used in drawTracker - areaPath = [], - attribs; - - - // divide into segments and build graph and area paths - each(series.segments, function(segment) { - segmentPath = []; - - // build the segment line - each(segment, function(point, i) { - - if (series.getPointSpline) { // generate the spline as defined in the SplineSeries object - segmentPath.push.apply(segmentPath, series.getPointSpline(segment, point, i)); - - } else { - - // moveTo or lineTo - segmentPath.push(i ? L : M); - - // step line? - if (i && options.step) { - var lastPoint = segment[i - 1]; - segmentPath.push( - point.plotX, - lastPoint.plotY - ); - } - - // normal line to next point - segmentPath.push( - point.plotX, - point.plotY - ); - } - }); - - // add the segment to the graph, or a single point for tracking - if (segment.length > 1) { - graphPath = graphPath.concat(segmentPath); - } else { - singlePoints.push(segment[0]); - } - - // build the area - if (useArea) { - var areaSegmentPath = [], - i, - segLength = segmentPath.length; - for (i = 0; i < segLength; i++) { - areaSegmentPath.push(segmentPath[i]); - } - if (segLength == 3) { // for animation from 1 to two points - areaSegmentPath.push(L, segmentPath[1], segmentPath[2]); - } - if (options.stacking && series.type != 'areaspline') { - // follow stack back. Todo: implement areaspline - for (i = segment.length - 1; i >= 0; i--) { - areaSegmentPath.push(segment[i].plotX, segment[i].yBottom); - } - - } else { // follow zero line back - areaSegmentPath.push( - L, - segment[segment.length - 1].plotX, - translatedThreshold, - L, - segment[0].plotX, - translatedThreshold - ); - } - areaPath = areaPath.concat(areaSegmentPath); - } - }); - - // used in drawTracker: - series.graphPath = graphPath; - series.singlePoints = singlePoints; - - // draw the area if area series or areaspline - if (useArea) { - fillColor = pick( - options.fillColor, - Color(series.color).setOpacity(options.fillOpacity || 0.75).get() - ); - if (area) { - area.animate({ d: areaPath }); - - } else { - // draw the area - series.area = series.chart.renderer.path(areaPath) - .attr({ - fill: fillColor - }).add(group); - } - } - - // draw the graph - if (graph) { - //graph.animate({ d: graphPath.join(' ') }); - graph.animate({ d: graphPath }); - - } else { - if (lineWidth) { - attribs = { - 'stroke': color, - 'stroke-width': lineWidth - }; - if (dashStyle) { - attribs.dashstyle = dashStyle; - } - - series.graph = renderer.path(graphPath) - .attr(attribs).add(group).shadow(options.shadow); - } - } - }, - - - /** - * Render the graph and markers - */ - render: function() { - var series = this, - chart = series.chart, - group, - setInvert, - options = series.options, - animation = options.animation, - doAnimation = animation && series.animate, - duration = doAnimation ? animation && animation.duration || 500 : 0, - clipRect = series.clipRect, - renderer = chart.renderer; - - - // Add plot area clipping rectangle. If this is before chart.hasRendered, - // create one shared clipRect. - if (!clipRect) { - clipRect = series.clipRect = !chart.hasRendered && chart.clipRect ? - chart.clipRect : - renderer.clipRect(0, 0, chart.plotSizeX, chart.plotSizeY); - if (!chart.clipRect) { - chart.clipRect = clipRect; - } - } - - - // the group - if (!series.group) { - group = series.group = renderer.g('series'); - - if (chart.inverted) { - setInvert = function() { - group.attr({ - width: chart.plotWidth, - height: chart.plotHeight - }).invert(); - }; - - setInvert(); // do it now - addEvent(chart, 'resize', setInvert); // do it on resize - } - group.clip(series.clipRect) - .attr({ - visibility: series.visible ? VISIBLE : HIDDEN, - zIndex: options.zIndex - }) - .translate(chart.plotLeft, chart.plotTop) - .add(chart.seriesGroup); - } - - series.drawDataLabels(); - - // initiate the animation - if (doAnimation) { - series.animate(true); - } - - // cache attributes for shapes - series.getAttribs(); - - // draw the graph if any - if (series.drawGraph) { - series.drawGraph(); - } - - // draw the points - series.drawPoints(); - - // draw the mouse tracking area - if (series.options.enableMouseTracking !== false) { - series.drawTracker(); - } - - // run the animation - if (doAnimation) { - series.animate(); - } - - // finish the individual clipRect - setTimeout(function() { - clipRect.isAnimating = false; - group = series.group; // can be destroyed during the timeout - if (group && clipRect != chart.clipRect && clipRect.renderer) { - group.clip((series.clipRect = chart.clipRect)); - clipRect.destroy(); - } - }, duration); - - - series.isDirty = false; // means data is in accordance with what you see - - }, - - /** - * Redraw the series after an update in the axes. - */ - redraw: function() { - var series = this, - chart = series.chart, - clipRect = series.clipRect, - group = series.group; - - /*if (clipRect) { - stop(clipRect); - clipRect.animate({ // for chart resize - width: chart.plotSizeX, - height: chart.plotSizeY - }); - }*/ - - // reposition on resize - if (group) { - if (chart.inverted) { - group.attr({ - width: chart.plotWidth, - height: chart.plotHeight - }); - } - - group.animate({ - translateX: chart.plotLeft, - translateY: chart.plotTop - }); - } - - series.translate(); - series.setTooltipPoints(true); - series.render(); - }, - - /** - * Set the state of the graph - */ - setState: function(state) { - var series = this, - options = series.options, - graph = series.graph, - stateOptions = options.states, - lineWidth = options.lineWidth; - - state = state || NORMAL_STATE; - - if (series.state != state) { - series.state = state; - - if (stateOptions[state] && stateOptions[state].enabled === false) { - return; - } - - if (state) { - lineWidth = stateOptions[state].lineWidth || lineWidth + 1; - } - - if (graph && !graph.dashstyle) { // hover is turned off for dashed lines in VML - graph.attr({ // use attr because animate will cause any other animation on the graph to stop - 'stroke-width': lineWidth - }, state ? 0 : 500); - } - } - }, - - /** - * Set the visibility of the graph - * - * @param vis {Boolean} True to show the series, false to hide. If UNDEFINED, - * the visibility is toggled. - */ - setVisible: function(vis, redraw) { - var series = this, - chart = series.chart, - legendItem = series.legendItem, - seriesGroup = series.group, - seriesTracker = series.tracker, - dataLabelsGroup = series.dataLabelsGroup, - showOrHide, - i, - data = series.data, - point, - ignoreHiddenSeries = chart.options.chart.ignoreHiddenSeries, - oldVisibility = series.visible; - - // if called without an argument, toggle visibility - series.visible = vis = vis === UNDEFINED ? !oldVisibility : vis; - showOrHide = vis ? 'show' : 'hide'; - - // show or hide series - if (seriesGroup) { // pies don't have one - seriesGroup[showOrHide](); - } - - // show or hide trackers - if (seriesTracker) { - seriesTracker[showOrHide](); - } else { - i = data.length; - while (i--) { - point = data[i]; - if (point.tracker) { - point.tracker[showOrHide](); - } - } - } - - - if (dataLabelsGroup) { - dataLabelsGroup[showOrHide](); - } - - if (legendItem) { - chart.legend.colorizeItem(series, vis); - } - - - // rescale or adapt to resized chart - series.isDirty = true; - // in a stack, all other series are affected - if (series.options.stacking) { - each(chart.series, function(otherSeries) { - if (otherSeries.options.stacking && otherSeries.visible) { - otherSeries.isDirty = true; - } - }); - } - - if (ignoreHiddenSeries) { - chart.isDirtyBox = true; - } - if (redraw !== false) { - chart.redraw(); - } - - fireEvent(series, showOrHide); - }, - - /** - * Show the graph - */ - show: function() { - this.setVisible(true); - }, - - /** - * Hide the graph - */ - hide: function() { - this.setVisible(false); - }, - - - /** - * Set the selected state of the graph - * - * @param selected {Boolean} True to select the series, false to unselect. If - * UNDEFINED, the selection state is toggled. - */ - select: function(selected) { - var series = this; - // if called without an argument, toggle - series.selected = selected = (selected === UNDEFINED) ? !series.selected : selected; - - if (series.checkbox) { - series.checkbox.checked = selected; - } - - fireEvent(series, selected ? 'select' : 'unselect'); - }, - - - /** - * Draw the tracker object that sits above all data labels and markers to - * track mouse events on the graph or points. For the line type charts - * the tracker uses the same graphPath, but with a greater stroke width - * for better control. - */ - drawTracker: function() { - var series = this, - options = series.options, - trackerPath = [].concat(series.graphPath), - trackerPathLength = trackerPath.length, - chart = series.chart, - snap = chart.options.tooltip.snap, - tracker = series.tracker, - cursor = options.cursor, - css = cursor && { cursor: cursor }, - singlePoints = series.singlePoints, - singlePoint, - i; - - // Extend end points. A better way would be to use round linecaps, - // but those are not clickable in VML. - if (trackerPathLength) { - i = trackerPathLength + 1; - while (i--) { - if (trackerPath[i] == M) { // extend left side - trackerPath.splice(i + 1, 0, trackerPath[i + 1] - snap, trackerPath[i + 2], L); - } - if ((i && trackerPath[i] == M) || i == trackerPathLength) { // extend right side - trackerPath.splice(i, 0, L, trackerPath[i - 2] + snap, trackerPath[i - 1]); - } - } - } - - // handle single points - for (i = 0; i < singlePoints.length; i++) { - singlePoint = singlePoints[i]; - trackerPath.push(M, singlePoint.plotX - snap, singlePoint.plotY, - L, singlePoint.plotX + snap, singlePoint.plotY); - } - - // draw the tracker - if (tracker) { - tracker.attr({ d: trackerPath }); - - } else { // create - series.tracker = chart.renderer.path(trackerPath) - .attr({ - isTracker: true, - stroke: TRACKER_FILL, - fill: NONE, - 'stroke-width' : options.lineWidth + 2 * snap, - visibility: series.visible ? VISIBLE : HIDDEN, - zIndex: 1 - }) - .on(hasTouch ? 'touchstart' : 'mouseover', function() { - if (chart.hoverSeries != series) { - series.onMouseOver(); - } - }) - .on('mouseout', function() { - if (!options.stickyTracking) { - series.onMouseOut(); - } - }) - .css(css) - .add(chart.trackerGroup); - } - - } - -}; // end Series prototype - - -/** - * LineSeries object - */ -var LineSeries = extendClass(Series); -seriesTypes.line = LineSeries; - -/** - * AreaSeries object - */ -var AreaSeries = extendClass(Series, { - type: 'area' -}); -seriesTypes.area = AreaSeries; - - - - -/** - * SplineSeries object - */ -var SplineSeries = extendClass( Series, { - type: 'spline', - - /** - * Draw the actual graph - */ - getPointSpline: function(segment, point, i) { - var smoothing = 1.5, // 1 means control points midway between points, 2 means 1/3 from the point, 3 is 1/4 etc - denom = smoothing + 1, - plotX = point.plotX, - plotY = point.plotY, - lastPoint = segment[i - 1], - nextPoint = segment[i + 1], - leftContX, - leftContY, - rightContX, - rightContY, - ret; - - // find control points - if (i && i < segment.length - 1) { - var lastX = lastPoint.plotX, - lastY = lastPoint.plotY, - nextX = nextPoint.plotX, - nextY = nextPoint.plotY, - correction; - - leftContX = (smoothing * plotX + lastX) / denom; - leftContY = (smoothing * plotY + lastY) / denom; - rightContX = (smoothing * plotX + nextX) / denom; - rightContY = (smoothing * plotY + nextY) / denom; - - // have the two control points make a straight line through main point - correction = ((rightContY - leftContY) * (rightContX - plotX)) / - (rightContX - leftContX) + plotY - rightContY; - - leftContY += correction; - rightContY += correction; - - // to prevent false extremes, check that control points are between - // neighbouring points' y values - if (leftContY > lastY && leftContY > plotY) { - leftContY = mathMax(lastY, plotY); - rightContY = 2 * plotY - leftContY; // mirror of left control point - } else if (leftContY < lastY && leftContY < plotY) { - leftContY = mathMin(lastY, plotY); - rightContY = 2 * plotY - leftContY; - } - if (rightContY > nextY && rightContY > plotY) { - rightContY = mathMax(nextY, plotY); - leftContY = 2 * plotY - rightContY; - } else if (rightContY < nextY && rightContY < plotY) { - rightContY = mathMin(nextY, plotY); - leftContY = 2 * plotY - rightContY; - } - - // record for drawing in next point - point.rightContX = rightContX; - point.rightContY = rightContY; - - } - - // moveTo or lineTo - if (!i) { - ret = [M, plotX, plotY]; - } - - // curve from last point to this - else { - ret = [ - 'C', - lastPoint.rightContX || lastPoint.plotX, - lastPoint.rightContY || lastPoint.plotY, - leftContX || plotX, - leftContY || plotY, - plotX, - plotY - ]; - lastPoint.rightContX = lastPoint.rightContY = null; // reset for updating series later - } - return ret; - } -}); -seriesTypes.spline = SplineSeries; - - - -/** - * AreaSplineSeries object - */ -var AreaSplineSeries = extendClass(SplineSeries, { - type: 'areaspline' -}); -seriesTypes.areaspline = AreaSplineSeries; - -/** - * ColumnSeries object - */ -var ColumnSeries = extendClass(Series, { - type: 'column', - pointAttrToOptions: { // mapping between SVG attributes and the corresponding options - stroke: 'borderColor', - 'stroke-width': 'borderWidth', - fill: 'color', - r: 'borderRadius' - }, - init: function() { - Series.prototype.init.apply(this, arguments); - - var series = this, - chart = series.chart; - - // flag the chart in order to pad the x axis - chart.hasColumn = true; - - // if the series is added dynamically, force redraw of other - // series affected by a new column - if (chart.hasRendered) { - each(chart.series, function(otherSeries) { - if (otherSeries.type == series.type) { - otherSeries.isDirty = true; - } - }); - } - }, - - /** - * Translate each point to the plot area coordinate system and find shape positions - */ - translate: function() { - var series = this, - chart = series.chart, - columnCount = 0, - reversedXAxis = series.xAxis.reversed, - categories = series.xAxis.categories, - stackGroups = {}, - stackKey, - columnIndex; - - Series.prototype.translate.apply(series); - - // Get the total number of column type series. - // This is called on every series. Consider moving this logic to a - // chart.orderStacks() function and call it on init, addSeries and removeSeries - each(chart.series, function(otherSeries) { - if (otherSeries.type == series.type) { - if (otherSeries.options.stacking) { - stackKey = otherSeries.stackKey; - if (stackGroups[stackKey] === UNDEFINED) { - stackGroups[stackKey] = columnCount++; - } - columnIndex = stackGroups[stackKey]; - } else if (otherSeries.visible){ - columnIndex = columnCount++; - } - otherSeries.columnIndex = columnIndex; - } - }); - - // calculate the width and position of each column based on - // the number of column series in the plot, the groupPadding - // and the pointPadding options - var options = series.options, - data = series.data, - closestPoints = series.closestPoints, - categoryWidth = mathAbs( - data[1] ? data[closestPoints].plotX - data[closestPoints - 1].plotX : - chart.plotSizeX / (categories ? categories.length : 1) - ), - groupPadding = categoryWidth * options.groupPadding, - groupWidth = categoryWidth - 2 * groupPadding, - pointOffsetWidth = groupWidth / columnCount, - optionPointWidth = options.pointWidth, - pointPadding = defined(optionPointWidth) ? (pointOffsetWidth - optionPointWidth) / 2 : - pointOffsetWidth * options.pointPadding, - pointWidth = mathMax(pick(optionPointWidth, pointOffsetWidth - 2 * pointPadding), 1), - colIndex = (reversedXAxis ? columnCount - - series.columnIndex : series.columnIndex) || 0, - pointXOffset = pointPadding + (groupPadding + colIndex * - pointOffsetWidth -(categoryWidth / 2)) * - (reversedXAxis ? -1 : 1), - threshold = options.threshold || 0, - translatedThreshold = series.yAxis.getThreshold(threshold), - minPointLength = pick(options.minPointLength, 5); - - // record the new values - each(data, function(point) { - var plotY = point.plotY, - yBottom = point.yBottom || translatedThreshold, - barX = point.plotX + pointXOffset, - barY = mathCeil(mathMin(plotY, yBottom)), - barH = mathCeil(mathMax(plotY, yBottom) - barY), - trackerY; - - // handle options.minPointLength and tracker for small points - if (mathAbs(barH) < minPointLength) { - if (minPointLength) { - barH = minPointLength; - barY = - mathAbs(barY - translatedThreshold) > minPointLength ? // stacked - yBottom - minPointLength : // keep position - translatedThreshold - (plotY <= translatedThreshold ? minPointLength : 0); - } - trackerY = barY - 3; - } - - extend(point, { - barX: barX, - barY: barY, - barW: pointWidth, - barH: barH - }); - point.shapeType = 'rect'; - point.shapeArgs = { - x: barX, - y: barY, - width: pointWidth, - height: barH, - r: options.borderRadius - }; - - // make small columns responsive to mouse - point.trackerArgs = defined(trackerY) && merge(point.shapeArgs, { - height: mathMax(6, barH + 3), - y: trackerY - }); - }); - - }, - - getSymbol: function(){ - }, - - /** - * Columns have no graph - */ - drawGraph: function() {}, - - /** - * Draw the columns. For bars, the series.group is rotated, so the same coordinates - * apply for columns and bars. This method is inherited by scatter series. - * - */ - drawPoints: function() { - var series = this, - options = series.options, - renderer = series.chart.renderer, - graphic, - shapeArgs; - - - // draw the columns - each(series.data, function(point) { - var plotY = point.plotY; - if (plotY !== UNDEFINED && !isNaN(plotY)) { - graphic = point.graphic; - shapeArgs = point.shapeArgs; - if (graphic) { // update - stop(graphic); - graphic.animate(shapeArgs); - - } else { - point.graphic = renderer[point.shapeType](shapeArgs) - .attr(point.pointAttr[point.selected ? SELECT_STATE : NORMAL_STATE]) - .add(series.group) - .shadow(options.shadow); - } - - } - }); - }, - /** - * Draw the individual tracker elements. - * This method is inherited by scatter and pie charts too. - */ - drawTracker: function() { - var series = this, - chart = series.chart, - renderer = chart.renderer, - shapeArgs, - tracker, - trackerLabel = +new Date(), - cursor = series.options.cursor, - css = cursor && { cursor: cursor }, - rel; - - each(series.data, function(point) { - tracker = point.tracker; - shapeArgs = point.trackerArgs || point.shapeArgs; - if (point.y !== null) { - if (tracker) {// update - tracker.attr(shapeArgs); - - } else { - point.tracker = - renderer[point.shapeType](shapeArgs) - .attr({ - isTracker: trackerLabel, - fill: TRACKER_FILL, - visibility: series.visible ? VISIBLE : HIDDEN, - zIndex: 1 - }) - .on(hasTouch ? 'touchstart' : 'mouseover', function(event) { - rel = event.relatedTarget || event.fromElement; - if (chart.hoverSeries != series && attr(rel, 'isTracker') != trackerLabel) { - series.onMouseOver(); - } - point.onMouseOver(); - - }) - .on('mouseout', function(event) { - if (!series.options.stickyTracking) { - rel = event.relatedTarget || event.toElement; - if (attr(rel, 'isTracker') != trackerLabel) { - series.onMouseOut(); - } - } - }) - .css(css) - .add(chart.trackerGroup); - } - } - }); - }, - - - /** - * Animate the column heights one by one from zero - * @param {Boolean} init Whether to initialize the animation or run it - */ - animate: function(init) { - var series = this, - data = series.data; - - if (!init) { // run the animation - /* - * Note: Ideally the animation should be initialized by calling - * series.group.hide(), and then calling series.group.show() - * after the animation was started. But this rendered the shadows - * invisible in IE8 standards mode. If the columns flicker on large - * datasets, this is the cause. - */ - - each(data, function(point) { - var graphic = point.graphic; - - if (graphic) { - // start values - graphic.attr({ - height: 0, - y: series.yAxis.translate(0, 0, 1) - }); - - // animate - graphic.animate({ - height: point.barH, - y: point.barY - }, series.options.animation); - } - }); - - - // delete this function to allow it only once - series.animate = null; - } - - }, - /** - * Remove this series from the chart - */ - remove: function() { - var series = this, - chart = series.chart; - - // column and bar series affects other series of the same type - // as they are either stacked or grouped - if (chart.hasRendered) { - each(chart.series, function(otherSeries) { - if (otherSeries.type == series.type) { - otherSeries.isDirty = true; - } - }); - } - - Series.prototype.remove.apply(series, arguments); - } -}); -seriesTypes.column = ColumnSeries; - -var BarSeries = extendClass(ColumnSeries, { - type: 'bar', - init: function(chart) { - chart.inverted = this.inverted = true; - ColumnSeries.prototype.init.apply(this, arguments); - } -}); -seriesTypes.bar = BarSeries; - -/** - * The scatter series class - */ -var ScatterSeries = extendClass(Series, { - type: 'scatter', - - /** - * Extend the base Series' translate method by adding shape type and - * arguments for the point trackers - */ - translate: function() { - var series = this; - - Series.prototype.translate.apply(series); - - each(series.data, function(point) { - point.shapeType = 'circle'; - point.shapeArgs = { - x: point.plotX, - y: point.plotY, - r: series.chart.options.tooltip.snap - }; - }); - }, - - - /** - * Create individual tracker elements for each point - */ - //drawTracker: ColumnSeries.prototype.drawTracker, - drawTracker: function() { - var series = this, - cursor = series.options.cursor, - css = cursor && { cursor: cursor }, - graphic; - - each(series.data, function(point) { - graphic = point.graphic; - if (graphic) { // doesn't exist for null points - graphic - .attr({ isTracker: true }) - .on('mouseover', function(event) { - series.onMouseOver(); - point.onMouseOver(); - }) - .on('mouseout', function(event) { - if (!series.options.stickyTracking) { - series.onMouseOut(); - } - }) - .css(css); - } - }); - - }, - - /** - * Cleaning the data is not necessary in a scatter plot - */ - cleanData: function() {} -}); -seriesTypes.scatter = ScatterSeries; - -/** - * Extended point object for pies - */ -var PiePoint = extendClass(Point, { - /** - * Initiate the pie slice - */ - init: function () { - - Point.prototype.init.apply(this, arguments); - - var point = this, - toggleSlice; - - //visible: options.visible !== false, - extend(point, { - visible: point.visible !== false, - name: pick(point.name, 'Slice') - }); - - // add event listener for select - toggleSlice = function() { - point.slice(); - }; - addEvent(point, 'select', toggleSlice); - addEvent(point, 'unselect', toggleSlice); - - return point; - }, - - /** - * Toggle the visibility of the pie slice - * @param {Boolean} vis Whether to show the slice or not. If undefined, the - * visibility is toggled - */ - setVisible: function(vis) { - var point = this, - chart = point.series.chart, - tracker = point.tracker, - dataLabel = point.dataLabel, - connector = point.connector, - method; - - // if called without an argument, toggle visibility - point.visible = vis = vis === UNDEFINED ? !point.visible : vis; - - method = vis ? 'show' : 'hide'; - - point.group[method](); - if (tracker) { - tracker[method](); - } - if (dataLabel) { - dataLabel[method](); - } - if (connector) { - connector[method](); - } - if (point.legendItem) { - chart.legend.colorizeItem(point, vis); - } - }, - - /** - * Set or toggle whether the slice is cut out from the pie - * @param {Boolean} sliced When undefined, the slice state is toggled - * @param {Boolean} redraw Whether to redraw the chart. True by default. - */ - slice: function(sliced, redraw, animation) { - var point = this, - series = point.series, - chart = series.chart, - slicedTranslation = point.slicedTranslation; - - setAnimation(animation, chart); - - // redraw is true by default - redraw = pick(redraw, true); - - // if called without an argument, toggle - sliced = point.sliced = defined(sliced) ? sliced : !point.sliced; - - point.group.animate({ - translateX: (sliced ? slicedTranslation[0] : chart.plotLeft), - translateY: (sliced ? slicedTranslation[1] : chart.plotTop) - }); - - } -}); - -/** - * The Pie series class - */ -var PieSeries = extendClass(Series, { - type: 'pie', - isCartesian: false, - pointClass: PiePoint, - pointAttrToOptions: { // mapping between SVG attributes and the corresponding options - stroke: 'borderColor', - 'stroke-width': 'borderWidth', - fill: 'color' - }, - - /** - * Pies have one color each point - */ - getColor: function() { - // record first color for use in setData - this.initialColor = colorCounter; - }, - - /** - * Animate the column heights one by one from zero - * @param {Boolean} init Whether to initialize the animation or run it - */ - animate: function(init) { - var series = this, - data = series.data; - - each(data, function(point) { - var graphic = point.graphic, - args = point.shapeArgs, - up = -mathPI / 2; - - if (graphic) { - // start values - graphic.attr({ - r: 0, - start: up, - end: up - }); - - // animate - graphic.animate({ - r: args.r, - start: args.start, - end: args.end - }, series.options.animation); - } - }); - - // delete this function to allow it only once - series.animate = null; - - }, - /** - * Do translation for pie slices - */ - translate: function() { - var total = 0, - series = this, - cumulative = -0.25, // start at top - precision = 1000, // issue #172 - options = series.options, - slicedOffset = options.slicedOffset, - connectorOffset = slicedOffset + options.borderWidth, - positions = options.center, - chart = series.chart, - plotWidth = chart.plotWidth, - plotHeight = chart.plotHeight, - start, - end, - angle, - data = series.data, - circ = 2 * mathPI, - fraction, - smallestSize = mathMin(plotWidth, plotHeight), - isPercent, - radiusX, // the x component of the radius vector for a given point - radiusY, - labelDistance = options.dataLabels.distance; - - // get positions - either an integer or a percentage string must be given - positions.push(options.size, options.innerSize || 0); - positions = map(positions, function(length, i) { - - isPercent = /%$/.test(length); - return isPercent ? - // i == 0: centerX, relative to width - // i == 1: centerY, relative to height - // i == 2: size, relative to smallestSize - [plotWidth, plotHeight, smallestSize, smallestSize][i] * - pInt(length) / 100: - length; - }); - - // utility for getting the x value from a given y, used for anticollision logic in data labels - series.getX = function(y, left) { - - angle = math.asin((y - positions[1]) / (positions[2] / 2 + labelDistance)); - - return positions[0] + - (left ? -1 : 1) * - (mathCos(angle) * (positions[2] / 2 + labelDistance)); - }; - - // set center for later use - series.center = positions; - - // get the total sum - each(data, function(point) { - total += point.y; - }); - - each(data, function(point) { - // set start and end angle - fraction = total ? point.y / total : 0; - start = mathRound(cumulative * circ * precision) / precision; - cumulative += fraction; - end = mathRound(cumulative * circ * precision) / precision; - - // set the shape - point.shapeType = 'arc'; - point.shapeArgs = { - x: positions[0], - y: positions[1], - r: positions[2] / 2, - innerR: positions[3] / 2, - start: start, - end: end - }; - - // center for the sliced out slice - angle = (end + start) / 2; - point.slicedTranslation = map([ - mathCos(angle) * slicedOffset + chart.plotLeft, - mathSin(angle) * slicedOffset + chart.plotTop - ], mathRound); - - // set the anchor point for tooltips - radiusX = mathCos(angle) * positions[2] / 2; - radiusY = mathSin(angle) * positions[2] / 2; - point.tooltipPos = [ - positions[0] + radiusX * 0.7, - positions[1] + radiusY * 0.7 - ]; - - // set the anchor point for data labels - point.labelPos = [ - positions[0] + radiusX + mathCos(angle) * labelDistance, // first break of connector - positions[1] + radiusY + mathSin(angle) * labelDistance, // a/a - positions[0] + radiusX + mathCos(angle) * connectorOffset, // second break, right outside pie - positions[1] + radiusY + mathSin(angle) * connectorOffset, // a/a - positions[0] + radiusX, // landing point for connector - positions[1] + radiusY, // a/a - labelDistance < 0 ? // alignment - 'center' : - angle < circ / 4 ? 'left' : 'right', // alignment - angle // center angle - ]; - - - // API properties - point.percentage = fraction * 100; - point.total = total; - - }); - - this.setTooltipPoints(); - }, - - /** - * Render the slices - */ - render: function() { - var series = this; - - // cache attributes for shapes - series.getAttribs(); - - this.drawPoints(); - - // draw the mouse tracking area - if (series.options.enableMouseTracking !== false) { - series.drawTracker(); - } - - this.drawDataLabels(); - - if (series.options.animation && series.animate) { - series.animate(); - } - - series.isDirty = false; // means data is in accordance with what you see - }, - - /** - * Draw the data points - */ - drawPoints: function() { - var series = this, - chart = series.chart, - renderer = chart.renderer, - groupTranslation, - //center, - graphic, - group, - shapeArgs; - - // draw the slices - each(series.data, function(point) { - graphic = point.graphic; - shapeArgs = point.shapeArgs; - group = point.group; - - // create the group the first time - if (!group) { - group = point.group = renderer.g('point') - .attr({ zIndex: 5 }) - .add(); - } - - // if the point is sliced, use special translation, else use plot area traslation - groupTranslation = point.sliced ? point.slicedTranslation : [chart.plotLeft, chart.plotTop]; - group.translate(groupTranslation[0], groupTranslation[1]) - - - // draw the slice - if (graphic) { - graphic.animate(shapeArgs); - } else { - point.graphic = - renderer.arc(shapeArgs) - .attr(extend( - point.pointAttr[NORMAL_STATE], - { 'stroke-linejoin': 'round' } - )) - .add(point.group); - } - - // detect point specific visibility - if (point.visible === false) { - point.setVisible(false); - } - - }); - - }, - - /** - * Override the base drawDataLabels method by pie specific functionality - */ - drawDataLabels: function() { - var series = this, - data = series.data, - point, - chart = series.chart, - options = series.options.dataLabels, - connectorPadding = pick(options.connectorPadding, 10), - connectorWidth = pick(options.connectorWidth, 1), - connector, - connectorPath, - outside = options.distance > 0, - dataLabel, - labelPos, - labelHeight, - lastY, - centerY = series.center[1], - quarters = [// divide the points into quarters for anti collision - [], // top right - [], // bottom right - [], // bottom left - [] // top left - ], - x, - y, - visibility, - overlapping, - rankArr, - secondPass, - sign, - lowerHalf, - sort, - i = 4, - j; - - // run parent method - Series.prototype.drawDataLabels.apply(series); - - // arrange points for detection collision - each(data, function(point) { - var angle = point.labelPos[7], - quarter; - if (angle < 0) { - quarter = 0; - } else if (angle < mathPI / 2) { - quarter = 1; - } else if (angle < mathPI) { - quarter = 2; - } else { - quarter = 3; - } - quarters[quarter].push(point); - }); - quarters[1].reverse(); - quarters[3].reverse(); - - // define the sorting algorithm - sort = function(a,b) { - return a.y > b.y; - }; - /* Loop over the points in each quartile, starting from the top and bottom - * of the pie to detect overlapping labels. - */ - while (i--) { - overlapping = 0; - - // create an array for sorting and ranking the points within each quarter - rankArr = [].concat(quarters[i]); - rankArr.sort(sort); - j = rankArr.length; - while (j--) { - rankArr[j].rank = j; - } - - /* In the first pass, count the number of overlapping labels. In the second - * pass, remove the labels with lowest rank/values. - */ - for (secondPass = 0; secondPass < 2; secondPass++) { - lowerHalf = i % 3; - lastY = lowerHalf ? 9999 : -9999; - sign = lowerHalf ? -1 : 1; - - for (j = 0; j < quarters[i].length; j++) { - point = quarters[i][j]; - - if ((dataLabel = point.dataLabel)) { - labelPos = point.labelPos; - visibility = VISIBLE; - x = labelPos[0]; - y = labelPos[1]; - - - // assume all labels have equal height - if (!labelHeight) { - labelHeight = dataLabel && dataLabel.getBBox().height; - } - - // anticollision - if (outside) { - if (secondPass && point.rank < overlapping) { - visibility = HIDDEN; - } else if ((!lowerHalf && y < lastY + labelHeight) || - (lowerHalf && y > lastY - labelHeight)) { - y = lastY + sign * labelHeight; - x = series.getX(y, i > 1); - if ((!lowerHalf && y + labelHeight > centerY) || - (lowerHalf && y -labelHeight < centerY)) { - if (secondPass) { - visibility = HIDDEN; - } else { - overlapping++; - } - } - } - } - - if (point.visible === false) { - visibility = HIDDEN; - } - - if (visibility == VISIBLE) { - lastY = y; - } - - if (secondPass) { - - // move or place the data label - dataLabel - .attr({ - visibility: visibility, - align: labelPos[6] - }) - [dataLabel.moved ? 'animate' : 'attr']({ - x: x + options.x + - ({ left: connectorPadding, right: -connectorPadding }[labelPos[6]] || 0), - y: y + options.y - }); - dataLabel.moved = true; - - // draw the connector - if (outside && connectorWidth) { - connector = point.connector; - - connectorPath = [ - M, - x + (labelPos[6] == 'left' ? 5 : -5), y, // end of the string at the label - L, - x, y, // first break, next to the label - L, - labelPos[2], labelPos[3], // second break - L, - labelPos[4], labelPos[5] // base - ]; - - if (connector) { - connector.animate({ d: connectorPath }); - connector.attr('visibility', visibility); - - } else { - point.connector = connector = series.chart.renderer.path(connectorPath).attr({ - 'stroke-width': connectorWidth, - stroke: options.connectorColor || '#606060', - visibility: visibility, - zIndex: 3 - }) - .translate(chart.plotLeft, chart.plotTop) - .add(); - } - } - } - } - } - } - } - }, - - /** - * Draw point specific tracker objects. Inherit directly from column series. - */ - drawTracker: ColumnSeries.prototype.drawTracker, - - /** - * Pies don't have point marker symbols - */ - getSymbol: function() {} - -}); -seriesTypes.pie = PieSeries; - - -// global variables -win.Highcharts = { - Chart: Chart, - dateFormat: dateFormat, - pathAnim: pathAnim, - getOptions: getOptions, - numberFormat: numberFormat, - Point: Point, - Color: Color, - Renderer: Renderer, - seriesTypes: seriesTypes, - setOptions: setOptions, - Series: Series, - - // Expose utility funcitons for modules - addEvent: addEvent, - createElement: createElement, - discardElement: discardElement, - css: css, - each: each, - extend: extend, - map: map, - merge: merge, - pick: pick, - extendClass: extendClass, - version: '2.1.4' -}; -})(); -