From 4104d7fa4f1a93dfb7e3c53b25327dc271e7c1d4 Mon Sep 17 00:00:00 2001 From: Abhas Date: Thu, 20 Apr 2017 17:34:03 +0530 Subject: [PATCH] Add fc files and change to export mode --- fusioncharts.charts.js | 11129 ++++ fusioncharts.gantt.js | 5472 ++ fusioncharts.jqueryplugin.js | 1486 + fusioncharts.js | 89297 +++++++++++++++++++++++++++ fusioncharts.maps.js | 8990 +++ fusioncharts.msstackedcombidy2d.js | 916 + fusioncharts.powercharts.js | 31291 ++++++++++ fusioncharts.ssgrid.js | 822 + fusioncharts.treemap.js | 5315 ++ fusioncharts.widgets.js | 20537 ++++++ fusioncharts.zoomscatter.js | 4154 ++ index.html | 4 +- 12 files changed, 179412 insertions(+), 1 deletion(-) create mode 100644 fusioncharts.charts.js create mode 100644 fusioncharts.gantt.js create mode 100644 fusioncharts.jqueryplugin.js create mode 100644 fusioncharts.js create mode 100644 fusioncharts.maps.js create mode 100644 fusioncharts.msstackedcombidy2d.js create mode 100644 fusioncharts.powercharts.js create mode 100644 fusioncharts.ssgrid.js create mode 100644 fusioncharts.treemap.js create mode 100644 fusioncharts.widgets.js create mode 100644 fusioncharts.zoomscatter.js diff --git a/fusioncharts.charts.js b/fusioncharts.charts.js new file mode 100644 index 0000000..e5916ba --- /dev/null +++ b/fusioncharts.charts.js @@ -0,0 +1,11129 @@ + +(function (factory) { + if (typeof module === 'object' && typeof module.exports !== "undefined") { + module.exports = factory; + } else { + factory(FusionCharts); + } +}(function (FusionCharts) { + +/**! + * @license FusionCharts JavaScript Library + * Copyright FusionCharts Technologies LLP + * License Information at + */ +/** + * @private + * @module fusioncharts.renderer.javascript.charts.common + */ +/* jshint ignore: start */ +FusionCharts.register ('module', ['private', 'modules.renderer.js-charts', function () { +FusionCharts.register ('module', ['private', 'modules.renderer.js-column2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('column2d', { + standaloneInit: true, + friendlyName: 'Column Chart', + creditLabel: creditLabel, + defaultDatasetType : 'column', + applicableDSList: { 'column': true }, + singleseries: true + },chartAPI.sscartesian, { + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-column3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('column3d', { + friendlyName: '3D Column Chart', + defaultDatasetType: 'column3d', + applicableDSList: { 'column3d': true }, + defaultPlotShadow: 1, + creditLabel: creditLabel, + is3D: true, + standaloneInit: true, + hasLegend: false, + singleseries: true, + fireGroupEvent: true, + defaultZeroPlaneHighlighted: false + }, chartAPI.sscartesian3d, { + showplotborder: 0, + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-bar2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('bar2d', { + friendlyName: 'Bar Chart', + isBar: true, + standaloneInit: true, + defaultDatasetType: 'bar2d', + creditLabel: creditLabel, + applicableDSList: { 'bar2d': true }, + singleseries: true, + spaceManager: chartAPI.barbase + }, chartAPI.ssbarcartesian, { + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-bar3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('bar3d', { + friendlyName: '3D Bar Chart', + defaultDatasetType: 'bar3d', + applicableDSList: { 'bar3d': true }, + defaultPlotShadow: 1, + fireGroupEvent: true, + standaloneInit: true, + creditLabel: creditLabel, + is3D: true, + isBar: true, + singleseries: true, + defaultZeroPlaneHighlighted: false + }, chartAPI.ssbarcartesian3d, { + showplotborder: 0, + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-area2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('area2d', { + friendlyName: 'Area Chart', + standaloneInit: true, + creditLabel: creditLabel, + defaultDatasetType: 'area', + singleseries: true, + defaultPlotShadow: 0 + }, chartAPI.sscartesian, { + enablemousetracking: true + }, chartAPI.areabase); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-line', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('line', { + friendlyName: 'Line Chart', + standaloneInit: true, + creditLabel: creditLabel, + defaultPlotShadow: 1, + singleseries: true, + axisPaddingLeft: 0, + axisPaddingRight: 0, + defaultDatasetType: 'line' + }, chartAPI.sscartesian, { + zeroplanethickness: 1, + enablemousetracking: true, + zeroplanealpha: 40, + showzeroplaneontop: 0 + }, chartAPI.areabase); +}]); + + +FusionCharts.register ('module', ['private', 'modules.renderer.js-pareto2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI, + pluck = lib.pluck, + pluckNumber = lib.pluckNumber, + componentDispose = lib.componentDispose, + preDefStr = lib.preDefStr, + NINETYSTRING = preDefStr.NINETYSTRING; + + chartAPI ('pareto2d', { + defaultDatasetType: 'column2d', + singleseries : true, + creditLabel: creditLabel, + _createDatasets: function () { + var iapi = this, + components = iapi.components, + dataObj = iapi.jsonData, + is3d = iapi.is3D, + numberFormatter = components.numberFormatter, + dataset = dataObj.data || (dataObj.dataset && dataObj.dataset[0] && dataObj.dataset[0].data), + length = dataset && dataset.length, + chartAttr = dataObj.chart, + yAxis, + i, + datasetStore, + datasetObj, + defaultDatasetType = iapi.defaultDatasetType, + DsGroupClass, + Pareto = FusionCharts.get('component', ['dataset', 'Pareto']), + dsType, + DsClass, + GroupManager, + datasetJSON, + pareto = new Pareto (), + showCumulativeLine = pluckNumber (chartAttr.showcumulativeline, 1), + groupManagerName, + dataOnlyArr = [], + newDataLen, + oldDataLen, + datasetComponent, + TRUE_STRING = 'true', + ONE_STRING = '1', + setObj, + value; + + if (!dataset) { + iapi.setChartMessage(); + return; + } + + for (i = 0; i< length; i++) { + setObj = dataset[i]; + value = numberFormatter.getCleanValue (setObj.value); + if (value !== null && !(setObj.vline === TRUE_STRING || setObj.vline === true || + setObj.vline === 1 || setObj.vline === ONE_STRING)) { + dataOnlyArr.push (setObj); + } + } + iapi.config.categories = dataOnlyArr; + + datasetStore = components.dataset || (components.dataset = []); + + datasetJSON = dataOnlyArr; + dsType = pluck (defaultDatasetType); + dsType = dsType && dsType.toLowerCase (); + DsGroupClass = FusionCharts.register('component', ['datasetGroup', 'column']); + GroupManager = components[groupManagerName] = new DsGroupClass (); + GroupManager.chart = iapi; + GroupManager.init (); + /// get the DsClass + if (is3d) { + DsClass = FusionCharts.get('component', ['dataset', 'Column3d']); + } + else { + DsClass = FusionCharts.get('component', ['dataset', 'Column']); + } + if (DsClass) { + datasetComponent = datasetStore[0]; + if (!datasetComponent) { + // create the dataset Object + datasetObj = new DsClass (); + datasetStore.push (datasetObj); + datasetObj.chart = iapi; + datasetObj.index = i; + // add to group manager + GroupManager && GroupManager.addDataSet (datasetObj, 0, 0); + pareto.init (datasetObj, datasetJSON, defaultDatasetType); + } + else { + newDataLen = datasetJSON.length; + oldDataLen = datasetComponent.components.data.length; + if (newDataLen < oldDataLen) { + datasetComponent.removeData(newDataLen, oldDataLen - newDataLen); + } + datasetComponent.JSONData = { + data: datasetJSON + }; + pareto.configure.call(datasetComponent); + } + + } + yAxis = components.yAxis[1]; + if (showCumulativeLine) { + yAxis && yAxis.setAxisConfig({ + drawLabels: true, + drawPlotLines: true, + drawAxisName: true, + drawAxisLine: true, + drawPlotBands: true, + drawTrendLines: true, + drawTrendLabels: true + }); + yAxis.show(); + DsClass = FusionCharts.get('component', ['dataset', 'line']); + + datasetComponent = datasetStore[1]; + if (!datasetComponent) { + datasetObj = new DsClass (); + datasetStore.push (datasetObj); + datasetObj.chart = iapi; + datasetObj.index = i; + pareto.init (datasetObj, datasetJSON, 'line'); + } + else { + newDataLen = datasetJSON.length; + oldDataLen = datasetComponent.components.data.length; + if (newDataLen < oldDataLen) { + datasetComponent.removeData(newDataLen, oldDataLen - newDataLen); + } + datasetComponent.JSONData = { + data: datasetJSON + }; + pareto.configure.call(datasetComponent); + } + + } + else { + datasetComponent = datasetStore[1]; + if (datasetComponent) { + componentDispose.call(datasetComponent); + datasetStore.pop(); + } + + if (yAxis) { + yAxis.setAxisConfig({ + drawLabels: false, + drawPlotLines: false, + drawAxisName: false, + drawAxisLine: false, + drawPlotBands: false, + drawTrendLines: false, + drawTrendLabels: false + }); + yAxis.hide(); + } + } + + }, + _setCategories: function () { + + var iapi = this, + components = iapi.components, + dataObj = iapi.jsonData, + dataset = dataObj.dataset, + numberFormatter = components.numberFormatter, + xAxis = components.xAxis, + categories = dataObj.data || (dataset && dataset[0].data) || [], + catArr = [], + catObj, + catLen = categories.length, + i, + vLine = {}, + count = 0, + value; + + for (i = 0; i < catLen; i++) { + catObj = categories[i]; + value = numberFormatter.getCleanValue (catObj.value, true); + + if (catObj.vline === 'true' || catObj.vline === '1' || catObj.vline === 1 || + catObj.vline === true) { + vLine[count] = catObj; + } + else { + if (value === null) { + continue; + } + else { + catObj.value = value; + catArr.push (catObj); + } + } + count++; + } + + catArr.sort (function (a, b) { + return b.value - a.value; + }); + + for (i in vLine) { + catArr.splice(i, 0, vLine[i]); + } + xAxis[0].setCategory (catArr); + }, + standaloneInit: true, + hasLegend: false, + isPercentage: true + }, chartAPI.msdybasecartesian, { + enablemousetracking: true, + plotfillalpha: NINETYSTRING + }); + + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-pareto3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI, + preDefStr = lib.preDefStr, + NINETYSTRING = preDefStr.NINETYSTRING; + + chartAPI ('pareto3d', { + standaloneInit: true, + is3D: true, + friendlyName: '3D Pareto Chart', + creditLabel: creditLabel, + fireGroupEvent: true, + defaultPlotShadow: 1, + singleseries : true, + hasLegend: false, + defaultDatasetType: 'column3d', + _createDatasets: chartAPI.pareto2d, + _setCategories: chartAPI.pareto2d, + isPercentage: true + }, chartAPI.msdybasecartesian3d, { + plotfillalpha: NINETYSTRING, + use3dlineshift: 1, + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-pie2d', function () { + var global = this, + lib = global.hcLib, + hasTouch = lib.hasTouch, + win = global.window, + doc = win.document, + //strings + BLANKSTRING = lib.BLANKSTRING, + //add the tools thats are requared + pluck = lib.pluck, + pluckNumber = lib.pluckNumber, + toRaphaelColor = lib.toRaphaelColor, + supportsTouch = 'createTouch' in doc, + // The devices which both touch and pointer. + supportsOnlyTouch = (supportsTouch && + ! (win.navigator.maxTouchPoints || + win.navigator.msMaxTouchPoints)), + ROLLOVER = 'DataPlotRollOver', + ROLLOUT = 'DataPlotRollOut', + EVENTARGS = 'eventArgs', + each = lib.each, + TRANSFORMSTR = 't', + plotEventHandler = lib.plotEventHandler, + schedular = lib.schedular, + priorityList = lib.priorityList, + /* + * Function to get the exact visual position (top, left) of a element + */ + getContainerPosition = function (el, noscroll) { + var p = { + left: 0, + top: 0 + }, + clientRect; + // for newer browsers + if (el.getBoundingClientRect) { + clientRect = el.getBoundingClientRect (); + p.top = clientRect.top + (win.pageYOffset || doc.scrollTop || 0) - (doc.clientTop || 0); + p.left = clientRect.left + (win.pageXOffset || doc.scrollLeft || 0) - (doc.clientLeft || 0); + + } + // for very older browsers + else { + // iterate till the root element of the DOM to get the exact position of the element + while (el) { + p.left += (el.offsetLeft || 0); + p.top += (el.offsetTop || 0); + if (el !== doc.body && el !== doc.documentElement && !noscroll) { + p.left -= (el.scrollLeft || 0); + p.top -= (el.scrollTop || 0); + } + el = el.offsetParent; + } + } + return p; + }, + docMode8 = win.document.documentMode === 8, + UNDEFINED, + HIDDEN = 'hidden', + VISIBLE = docMode8 ? 'visible' : '', + M = 'M', + L = 'L', + math = Math, + mathSin = math.sin, + mathCos = math.cos, + mathRound = math.round, + mathATan2 = math.atan2, + mathMin = math.min, + mathMax = math.max, + mathAbs = math.abs, + mathPI = math.PI, + mathCeil = math.ceil, + mathFloor = math.floor, + deg2rad = mathPI / 180, + rad2deg = 180 / mathPI, + pi = Math.PI, + piBy2 = pi / 2, + pi2 = 2 * pi, + pi3By2 = pi + piBy2, + convertColor = lib.graphics.convertColor, + // COLOR_TRANSPARENT = lib.COLOR_TRANSPARENT, + POSITION_BOTTOM = lib.POSITION_BOTTOM, + POSITION_RIGHT = lib.POSITION_RIGHT, + chartAPI = lib.chartAPI, + COMMASTRING = lib.COMMASTRING, + ZEROSTRING = lib.ZEROSTRING, + ONESTRING = lib.ONESTRING, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + getClickArcTangent = function (x, y, center, ref, pieYScale) { + return mathATan2 ((y - center[1] - ref.top) / pieYScale, x - center[0] - ref.left); + }; + + chartAPI ('pie2d', { + friendlyName: 'Pie Chart', + standaloneInit: true, + defaultSeriesType: 'pie', + defaultPlotShadow: 1, + reverseLegend: 1, + alignCaptionWithCanvas: 0, + sliceOnLegendClick: true, + isSingleSeries: true, + dontShowLegendByDefault: true, + defaultDatasetType : 'Pie2D', + applicableDSList: { + 'Pie2D': true + }, + defaultZeroPlaneHighlighted: false, + creditLabel: creditLabel, + _plotDragMove: function (dx, dy, x, y, evt) { + var o = this, + plotItem = o.data ('plotItem'), + chart = plotItem.chart, + seriesData = plotItem.seriesData, + datasets = chart.components.dataset, + datasetConf = datasets[0].config, + angle; + + if (isNaN(dx) || isNaN(dy) || (!datasetConf.enableRotation || seriesData.singletonCase) || + seriesData.isRightClicked) { + return; + } + angle = getClickArcTangent.call (evt, x, y, seriesData.pieCenter, + seriesData.chartPosition, 1); + if (!seriesData.isRotating) { + seriesData.dragStartAngle !== angle && (seriesData.isRotating = true); + /** + * This event is fired on drag rotation start of pie chart. + * + * @event FusionCharts#rotationStart + * @group chart:pie + * + * @param { number} startingAngle - Gives the value of the + * startingAngle of the chart, when the chart + * starts rotating + */ + global.raiseEvent ('RotationStart', { + startingAngle: (seriesData._rotationalStartAngle = chart._startingAngle()) + }, + chart.chartInstance + ); + } + + datasetConf.startAngle += (angle - seriesData.dragStartAngle); + seriesData.dragStartAngle = angle; + seriesData.moveDuration = 0; + + // Check if already there is an initiation for visual updates. + if (!datasetConf.updateInited) { + // set the flag to truth value. + datasetConf.updateInited = true; + setTimeout(chart._batchRotate || (chart._batchRotate = function () { + // visually update the chart + chart._rotate (); + // turn the flag to falsy after an interval + datasetConf.updateInited = false; + }), 50); + } + }, + _plotDragStart: function (x, y, evt) { + var o = this, + plotItem = o.data ('plotItem'), + chart = plotItem.chart, + seriesData = plotItem.seriesData, + datasets = chart.components.dataset, + datasetConf = datasets[0].config, + startingAng = -datasetConf.startAngle, + angle; + seriesData.isRightClicked = !hasTouch && (evt.button !== 0 && evt.button !== 1) ? true : false; + + if (!datasetConf.enableRotation || seriesData.isRightClicked) { + return; + } + seriesData.isRotating = false; + //Calculate chart's current position. Chart cotainer may be moved mean while + seriesData.chartPosition = getContainerPosition (chart.linkedItems.container); + angle = getClickArcTangent.call (evt, x, y, seriesData.pieCenter, + seriesData.chartPosition, 1); + seriesData.dragStartAngle = angle; + seriesData.startingAngleOnDragStart = startingAng; + }, + _plotDragEnd: function (e) { + var o = this, + rotaionalEndAngle, + plotItem = o.data ('plotItem'), + chart = plotItem.chart, + chartConfig = chart.config, + seriesData = plotItem.seriesData; + if (seriesData.isRightClicked) { + return; + } + + chartConfig.clicked = true; + if (!chart.disposed) { + /*extend2 (chart.logic.chartInstance.jsVars._reflowData, + reflowUpdate, true);*/ + chart._rotate (); + } + + !seriesData.isRotating && chart._plotGraphicClick.call (plotItem.graphic, e); + + delete chartConfig.clicked; + if (seriesData.isRotating) { + /* The events mouseup, dragend and click are raised in order. In order + * to update the flag isRotating to false post click event, setTimeout + * called, to take immediate effect, is programmed to update the flag. + * Thus, the flag gets updated post the series of events, in effect. + * NB: Click event is subscribed conditionally. + */ + setTimeout (function () { + seriesData.isRotating = false; + }, 0); + /** + * This event is fired on drag rotation end of pie chart. + * + * @event FusionCharts#rotationEnd + * @group chart:pie + * + * @param { number} changeInAngle - Gives the value by how much + * the chart was rotated + * @param { number} startingAngle - Gives the value of the + * startingAngle of the chart on rotation end. + */ + global.raiseEvent ('RotationEnd', { + startingAngle: (rotaionalEndAngle = chart._startingAngle()), + changeInAngle: (rotaionalEndAngle - seriesData._rotationalStartAngle) + }, chart.chartInstance); + } + // !chart.isHovered && chart.onPlotHover (o, false); + }, + _plotRollOver: function (e) { + var ele = this, + plotItem = ele.plotItem || ele.data ('plotItem'), + chart = plotItem.chart, + conf = chart.components.dataset[0].config, + innerDiameter, + centerLabelConfig, + centerLabelText; + if (!conf.isRotating) { + plotEventHandler.call (ele, chart, e, ROLLOVER); + chart.onPlotHover (ele, true); + } + conf.isHovered = true; + if (innerDiameter = plotItem.innerDiameter) { + (centerLabelConfig = plotItem.centerLabelConfig) && + (centerLabelText = centerLabelConfig.label) && + chart.drawDoughnutCenterLabel (centerLabelText, plotItem.center[0], + plotItem.center[1], innerDiameter, innerDiameter, centerLabelConfig, false); + } + }, + onPlotHover: function (plot, hover) { + var plotItem = plot.data ('plotItem'), + center = plotItem.center, + rolloverProps = plotItem.rolloverProperties || {}, + color = hover ? rolloverProps.color : plotItem.color, + borderWidth = hover ? rolloverProps.borderWidth : plotItem.borderWidth, + borderColor = hover ? rolloverProps.borderColor : plotItem.borderColor; + if (color) { + if (hover) { + color.cx = center[0]; + color.cy = center[1]; + color.r = plotItem.radius; + } + rolloverProps.enabled && plotItem.graphic.attr ( { + fill: toRaphaelColor(color), + 'stroke-width': borderWidth, + 'stroke': borderColor + }); + } + }, + + _plotRollOut: function (e) { + var ele = this, + plotItem = ele.plotItem || ele.data ('plotItem'), + chart = plotItem.chart, + seriesData = chart.components.dataset[0], + conf = seriesData.config, + /** @todo: enable doughnut center label feature related to enableMultiSlicing */ + enableMultiSlicing = true, //seriesData.enableMultiSlicing, + innerDiameter, + centerLabelConfig, + centerLabelText; + if (!conf.isRotating) { + plotEventHandler.call (ele, chart, e, ROLLOUT); + chart.onPlotHover (ele, false); + } + conf.isHovered = false; + if (innerDiameter = plotItem.innerDiameter) { + (centerLabelConfig = !enableMultiSlicing ? + conf.lastCenterLabelConfig : conf.centerLabelConfig) && + ((centerLabelText = centerLabelConfig.label) || !centerLabelText) && + chart.drawDoughnutCenterLabel (centerLabelText, plotItem.center[0], + plotItem.center[1], innerDiameter, innerDiameter, centerLabelConfig, false); + } + }, + _rotate: function () { + var _ringPath, + _rotateAttrs, + chart = this, + dataOptions = chart.components.dataset[0], + conf = dataOptions.config, + plotData = dataOptions.components.data, + chartConfig = chart.config, + piePlotOptions = conf.piePlotOptions, + startAngle = (conf.startAngle || 0) % pi2, + slicedOffset = conf.slicingDistance, + seriesConf = dataOptions.config, + valueTotal = seriesConf.valueTotal, + factor = pi2 / valueTotal, + cx = chartConfig.canvasLeft + chartConfig.canvasWidth * 0.5, + cy = chartConfig.canvasTop + chartConfig.canvasHeight * 0.5, + r = conf.pieMinRadius, + r2 = (piePlotOptions.innerSize || 0) * 0.5, + val, + angle, + angle1, + angle2, + setConfig, + setGraphics, + i; + + angle1 = angle2 = startAngle; + for (i = 0; i < plotData.length; i += 1) { + setConfig = plotData[i].config; + setGraphics = plotData[i].graphics; + val = setConfig.y; + + if (val === null || val === undefined) { + continue; + } + + // plotItem = plotItems[i]; + + angle2 = angle1; + // This conditional assignment of value 2 * pi is to by-pass a + // computational error inherent to any computer system, which + // happens here for certain values in singleton cases. + angle1 -= !seriesConf.singletonCase ? val * factor : pi2; + angle = (angle1 + angle2) * 0.5; + + setConfig.angle = angle; + setConfig.transX = mathCos (angle) * slicedOffset; + setConfig.transY = mathSin (angle) * slicedOffset; + + setConfig.slicedTranslation = TRANSFORMSTR + + (mathCos (angle) * slicedOffset) + COMMASTRING + + (mathSin (angle) * slicedOffset); + + if (!(_rotateAttrs = setConfig._rotateAttrs)) { + _rotateAttrs = setConfig._rotateAttrs = { + ringpath: [], + transform: BLANKSTRING + }; + } + _ringPath = _rotateAttrs.ringpath; + _ringPath[0] = cx; + _ringPath[1] = cy; + _ringPath[2] = r; + _ringPath[3] = r2; + _ringPath[4] = angle1; + _ringPath[5] = angle2; + _rotateAttrs.transform = setConfig.sliced ? setConfig.slicedTranslation : BLANKSTRING; + setGraphics.element.attr (_rotateAttrs); + } + chart.placeDataLabels (true, plotData, conf); + }, + getPlotData: function (id, slicedState) { + var chart = this, + dataset = chart.components.dataset[0], + data = dataset.components.data[id].config, + userData = dataset.config.userData || (dataset.config.userData = []), + plotData, + value, + prop; + + if (!userData[id]) { + plotData = userData[id] = {}; + for (prop in data) { + typeof (value = data[prop]) !== 'object' && + typeof (value) !== 'function' && + prop.indexOf('_') !== 0 && (plotData[prop] = value); + } + plotData.value = plotData.y; + plotData.categoryLabel = plotData.label = plotData.seriesName; + + delete plotData.y; + delete plotData.total; + delete plotData.doNotSlice; + delete plotData.name; + delete plotData.seriesName; + delete plotData.centerAngle; + delete plotData.showInLegend; + delete plotData.angle; + delete plotData.endAngle; + delete plotData.isVisible; + delete plotData.setColor; + delete plotData.slicedTranslation; + delete plotData.startAngle; + delete plotData.transX; + delete plotData.transY; + delete plotData.pValue; + } + else { + plotData = userData[id]; + } + + plotData.sliced = slicedState; + return plotData; + }, + _plotGraphicClick: function (evt) { + var prevTextPos, + o = this.element || this, + plotItem = o.plotItem || o.data ('plotItem'), + elData = o.data('eventArgs') || {}, + chart = plotItem.chart, + index = plotItem.index, + // elData = o.data ('eventArgs') || { }, + chartSeriesData = chart.components.dataset[0], + seriesData = chartSeriesData.config, + enableMultiSlicing = seriesData.enableMultiSlicing, + set = chartSeriesData.components.data[index], + setGraphics = set.graphics, + setConfig = set.config, + doNotSlice = setConfig.doNotSlice, + atleastOneOtherSliced, + graphic, + dataLabel, + sliced, + slicedTranslation = setConfig.slicedTranslation, + transX, + transY, + connector, + connectorPath, + lastSliceTimeStamp, + minTimeForNextSlice = 400, + animationObj = chart.get('config', 'animationObj'), + animationDuration = animationObj.duration || 200, + mainElm = animationObj.dummyObj, + animObj = animationObj.animObj, + animType = animationObj.animType, + eventArgs, + path; + + !seriesData.isRotating && plotEventHandler.call (o, chart, evt); + + if (seriesData.isRotating || seriesData.singletonCase || doNotSlice) { + return; + } + + // If 'enableMultiSlicing' is false, sliceInOtherPies is called only once + // for the clicked pie. From within sliceInOtherPies, 'enableMultiSlicing' + // is set to true, method plotGraphicClick is called once for each + // sliced pie and finally, value of 'enableMultiSlicing' is reset to false. + // Value of multiSliced is always false for plotGraphicClick call from + // sliceInOtherPies. However, its value may be true or false, by the + // return value of the sliceInOtherPies. + atleastOneOtherSliced = !enableMultiSlicing && chart.sliceInOtherPies (index); + + if ((sliced = setConfig.sliced) && atleastOneOtherSliced) { + return; + } + + // + // In chrome of hybrid touch devices (touch + mouse), slice is getting fired twice for single touch + // To prevent this cancle slice event within very sort period + // + if (supportsTouch && !supportsOnlyTouch) { + lastSliceTimeStamp = new Date ().getTime (); + if (plotItem.lastSliceTimeStamp && + (lastSliceTimeStamp - plotItem.lastSliceTimeStamp) < minTimeForNextSlice) { + return; + } + + // store current time stamp + plotItem.lastSliceTimeStamp = lastSliceTimeStamp; + } + graphic = setGraphics.element; + connector = setGraphics.connector; + dataLabel = setGraphics.label || setGraphics.dataLabel; + slicedTranslation = typeof slicedTranslation === 'object' ? 't' + slicedTranslation : slicedTranslation; + connectorPath = setConfig.connectorPath; + transX = (sliced ? -1 : 1) * setConfig.transX; + transY = (sliced ? -1 : 1) * setConfig.transY; + eventArgs = graphic.data(EVENTARGS) || graphic.data(EVENTARGS, {}); + /** + * This event is fired when a pieSlice in pie-chart starts slicing transition. + * + * @event FusionCharts#slicingStart + * @group chart:pie-slice + * + * @param { object} data - Contains the values for the following + * attributes borderColor, borderWidth, + * categoryLabel, dashStyle, displayValue, + * hoverEffects (boolean), label, link, + * rolloverProperties (boolean), sliced (boolean), + * toolText, value (value of the sliced object) + * @param { boolean} slicedState - Tells the state of the slice before + * transition begins. The value is true for + * sliced-out state and false for sliced-in state. + */ + global.raiseEvent ('slicingStart', { + slicedState: sliced, + dataIndex: ('index' in elData) && elData.index, + data: chart.getPlotData (index, sliced) + }, chart.chartInstance); + + graphic.animateWith(mainElm, animObj, { + transform: sliced ? 't0,0' : slicedTranslation + }, animationDuration, animType, function () { + /** + * This event is fired when a pieSlice in pie-chart ends slicing transition. + * + * @event FusionCharts#slicingEnd + * @group chart:pie-slice + * + * @param { object} data - Contains the values for the following + * attributes borderColor, borderWidth, + * categoryLabel, dashStyle, displayValue, + * hoverEffects (boolean), label, link, + * rolloverProperties (boolean), sliced (boolean), + * toolText, value (value of the sliced object) + * @param { boolean} slicedState - Tells the state of the slice + * before transition begins. The value is true + * for sliced-out state and false for + * sliced-in state. + */ + global.raiseEvent ('slicingEnd', { + slicedState: sliced, + dataIndex: ('index' in elData) && elData.index, + data: chart.getPlotData (index, sliced) + }, chart.chartInstance); + }); + + if (dataLabel && dataLabel.x) { + if (!(prevTextPos = dataLabel.data('textPos'))) { + prevTextPos = dataLabel.data('textPos', { + x: dataLabel.x, + y: dataLabel.y + }); + } + dataLabel.animateWith(mainElm, animObj, { + x: dataLabel.x + (sliced ? 0 : transX) + }, animationDuration, animType); + prevTextPos.x = dataLabel.x + (sliced ? 0 : transX); + } + + if (connectorPath) { + path = connectorPath.slice(0); + path[1] += transX; + path[2] += transY; + path[4] += transX; + path[6] += transX; + connector.animateWith(mainElm, animObj, { + path: path + }, animationDuration, animType); + setConfig.connectorPath = path; + } + // updating the slicing information. + eventArgs.isSliced = (sliced = setConfig.sliced = !sliced); + + /** @todo: Enable center label feature related to enableMultiSlicing */ + //if ((innerDiameter = plotItem.innerDiameter) && !enableMultiSlicing) { + // (centerLabelConfig = sliced && plotItem.centerLabelConfig.label ? + // plotItem.centerLabelConfig : chartSeriesData.centerLabelConfig) && + // (centerLabelText = centerLabelConfig.label) && + // chart.drawDoughnutCenterLabel (centerLabelText, plotItem.center[0], plotItem.center[1], + // innerDiameter, innerDiameter, centerLabelConfig, true); + //} + + return sliced; + }, + sliceInOtherPies: function (mainPieId) { + var chart = this, + series = chart.components.dataset[0], + plotItems = series.components.data, + i = plotItems.length, + numSliced = 0, + plot; + + series.enableMultiSlicing = true; + + while (i--) { + i !== mainPieId && (plot = plotItems[i]).config.sliced && ++numSliced && + chart._plotGraphicClick.call (plot.graphics); + } + + series.enableMultiSlicing = false; + // Returns true when at least one other pie is sliced + return !!numSliced; + }, + placeDataLabels: (function () { + /* + * Pie Helper Functions. + */ + + var sortArrayByPoint = function (a, b) { + return a.point.value - b.point.value; + }, + sortArrayByAngle = function (a, b) { + return a.angle - b.angle; + }, + alignments = ['start', 'start', 'end', 'end'], + alignCenter = 'middle', + ySign = [-1, 1, 1, -1], + xSign = [1, 1, -1, -1]; + + return function (isRotating, plotItems, plot, seriesData) { + var chart = this, + chartConfig = chart.config, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + legendConfig = chartComponents.legend.config, + legendWidth = legendConfig.symbolWidth, + legendAlign = legendConfig.align, + legendBorderwidth = legendConfig.borderWidth, + datasetGraphics = dataSet.graphics, + plotOptions = dataSet.config, + canvasLeft = chartConfig.canvasLeft, + canvasTop = chartConfig.canvasTop, + canvasWidth = chartConfig.canvasWidth, + cx = canvasLeft + chartConfig.canvasWidth * 0.5, + cy = canvasTop + chartConfig.canvasHeight * 0.5, + smartLabel = chart.linkedItems.smartLabel, + dataLabelsOptions = plotOptions.dataLabelOptions, + style = dataLabelsOptions.style, + lineHeight = pluckNumber (mathCeil (parseFloat (style.lineHeight)), 12), + placeInside = (plotItems.length === 1 ? chartConfig.singletonPlaceValue : false), + skipOverlapLabels = dataLabelsOptions.skipOverlapLabels, + manageLabelOverflow = dataLabelsOptions.manageLabelOverflow, + connectorPadding = dataLabelsOptions.connectorPadding, + distanceOption = dataLabelsOptions.distance, + remainingHeight, + seriesCenter = seriesData && seriesData.metrics || [ + cx, + cy, + 2 * plotOptions.pieMinRadius, + (plotOptions.innerSize || 0) + ], + centerY = seriesCenter[1], + centerX = seriesCenter[0], + radius = seriesCenter[2] * 0.5, + // divide the points into quarters for anti collision + quarters = [ + [], // top right + [], // bottom right + [], // bottom left + [] // top left + ], + plotLeft = canvasLeft, + plotTop = canvasTop, + plotWidth = canvasWidth, + dataLabelsRadius = (plot.labelsRadius = radius + distanceOption), + labelFontSize = parseInt (style.fontSize, 10), + labelHeight = labelFontSize, + halfLabelHeight = labelHeight / 2, + xDisplacement = [connectorPadding, + connectorPadding, -connectorPadding, -connectorPadding + ], + maxLabels = (plot.labelsMaxInQuadrant = mathFloor ( + dataLabelsRadius / labelHeight)), + isSmartLineSlanted = dataLabelsOptions.isSmartLineSlanted, + innerRadius = seriesCenter[3] / 2, + align, + i, + labelWidth, + j, + oriY, + maxYmayHave, + spaceRequired, + length, + k, + sliced, + x1, + x2, + x3, + x4, + y1, + y2, + y3, + points, + point, + angle, + connector, + connectorPath, + excess, + excessArr, + labelQuadrantHeight, + maxQuadrantLabel, + dataLabel, + quarter, + transX, + transY, + smartLabelObj, + slicedTranslation, + centerDistance, + sameSideQuadrentLastY = Number.POSITIVE_INFINITY, + extraLineSpaceComp, + lPoint, + pointConfig, + pointGraphics, + leftClubbedQuadrent = [], + rightClubbedQuadrent = [], + prevTextPos, + prevConnectorPos, + animationObj = chart.get('config', 'animationObj'), + // animating on every rotations slows the performance. @revisit. + animationDuration = isRotating ? 0 : (animationObj.duration || 0), + mainElm = animationObj.dummyObj, + animObj = animationObj.animObj, + animType = animationObj.animType, + + plotDragMove = chart._plotDragMove, + plotDragStart = chart._plotDragStart, + plotDragEnd = chart._plotDragEnd, + plotRollOver = chart._plotRollOver, + plotRollOut = chart._plotRollOut, + paper = chartComponents.paper, + dataLabelContainer = datasetGraphics.dataLabelContainer, + _textAttrs, + _textCss; + + // run parent method + /**^ + * Introduced the isRotating argument too to detect + * whether this is called during rotation. + */ + smartLabel.useEllipsesOnOverflow(chartConfig.useEllipsesWhenOverflow); + if (!isRotating) { + //do not set the style every time + // Do it for first time + smartLabel.setStyle (style); + } + + // arrange points for detection collision + // Creates an array of quarter containing labels of each + // quarter if there has only one label the draw it inside + if (plotItems.length == 1 && !innerRadius && placeInside) { + point = plotItems[0]; + if ((_textAttrs = point.config._textAttrs).text) { + pointGraphics = point.graphics; + pointConfig = point.config; + dataLabel = pointGraphics.label; + + point.slicedTranslation = [plotLeft, plotTop]; + _textAttrs['text-anchor'] = alignCenter; + _textAttrs.x = 0; + _textAttrs.y = 0; + _textAttrs.transform = ['t', centerX, centerY]; + + if (!dataLabel) { + dataLabel = pointGraphics.label = paper + .text(_textAttrs, _textCss, dataLabelContainer) + .drag(plotDragMove, plotDragStart, plotDragEnd) + .hover(plotRollOver, plotRollOut); + } + else { + dataLabel.animateWith (mainElm, animObj, _textAttrs, animationDuration, animType); + } + + dataLabel.x = centerX; + dataLabel.data('textPos', { + x: centerX, + y: centerY + }) + .data('plotItem', _textAttrs.plotItem) + .data(EVENTARGS, _textAttrs.eventArgs); + + if (pointConfig.y !== null && pointConfig.y !== undefined) { + dataLabel.show (); + } + + if (pointGraphics.connector) { + pointGraphics.connector.attr({ + path: [] + }); + } + } + } + else { + if (placeInside) { + centerDistance = innerRadius + ((radius - innerRadius) / 2); + each (plotItems, function (point) { + pointConfig = point.config; + if ((_textAttrs = pointConfig._textAttrs).text) { + pointGraphics = point.graphics; + dataLabel = pointGraphics.label; + if (pointConfig.y !== null && pointConfig.y !== undefined) { + connector = pointGraphics.connector; + connector && connector.show(); + dataLabel && dataLabel.show (); + } + _textAttrs.transform = 't0,0'; + angle = pointConfig.angle; + y3 = centerY + (centerDistance * + mathSin (angle)); + //previous implementation adds halfLebelHeight - 2 which makes the + //label aligned to top instead middle [RED - 1717] + /*y3 = centerY + (centerDistance * + mathSin (angle)) + halfLabelHeight - 2;*/ + x3 = centerX + (centerDistance * mathCos (angle)); + _textAttrs._x = x3; + _textAttrs._y = y3; + if (point.sliced) { + slicedTranslation = point.slicedTranslation; + transX = slicedTranslation[0] - plotLeft; + transY = slicedTranslation[1] - plotTop; + x3 = x3 + transX; + y3 = y3 + transY; + } + + _textAttrs['text-anchor'] = alignCenter; + _textAttrs.x = 0; + _textAttrs.y = 0; + _textAttrs.transform = ['t', x3, y3]; + + if (!dataLabel) { + dataLabel = pointGraphics.label = paper + .text(_textAttrs, _textCss, dataLabelContainer) + .drag(plotDragMove, plotDragStart, plotDragEnd) + .hover(plotRollOver, plotRollOut); + } + else { + dataLabel.animateWith (mainElm, animObj, _textAttrs, animationDuration, + animType); + } + dataLabel.x = _textAttrs._x; + // storing original x value + // to use while slicing in (IE Issue original + // x get changed form animate) + dataLabel.x = _textAttrs._x; + dataLabel.y = _textAttrs._y; + + dataLabel + .data('plotItem', _textAttrs.plotItem) + .data(EVENTARGS, _textAttrs.eventArgs); + + if (_textAttrs.visibility === VISIBLE) { + dataLabel.show(); + } + } + + }); + } + else { //outside + for (i = plotItems.length - 1; i >= 0; i --) { + point = plotItems[i]; + pointConfig = point.config; + _textAttrs = pointConfig._textAttrs; + if (!(_textAttrs.text = pointConfig.displayValue)) { + continue; + } + pointGraphics = point.graphics; + if (pointConfig.y !== null && pointConfig.y !== undefined) { + dataLabel = pointGraphics.label; + connector = pointGraphics.connector; + connector && connector.show(); + dataLabel && dataLabel.show (); + } + _textAttrs.text = pointConfig.displayValue; + _textAttrs.transform = 't0,0'; + angle = pointConfig.angle % pi2; + + if (angle < 0) { + angle = pi2 + angle; + } + // Calculate bottom right quarter labels + if (angle >= 0 && angle < piBy2) { + quarter = 1; + } else + // Calculate bottom left quarter labels + if (angle < pi) { + quarter = 2; + } else + // Calculate top left quarter labels + if (angle < pi3By2) { + quarter = 3; + } + // Calculate top right quarter labels + else { + quarter = 0; + } + // Now put labels according to each quarter + quarters[quarter].push ( { + point: point, + angle: angle + }); + } + i = k = 4; + //if excess then remove the low value slice first + while (i--) { + if (skipOverlapLabels) { + // Find labels can fit into the quarters or not + excess = quarters[i].length - maxLabels; + if (excess > 0) { + // sort by point.value + quarters[i].sort (sortArrayByPoint); + // remove extra data form the array + // which labels can not be fitted into + // the quarters + excessArr = quarters[i].splice (0, excess); + //hide all removed labels + for (j = 0, length = excessArr.length; j < length; j += 1) { + point = excessArr[j].point; + _textAttrs = point.config._textAttrs; + pointGraphics = point.graphics; + if (pointGraphics.label) { + pointGraphics.label.attr('visibility', HIDDEN); + } + if (pointGraphics.connector) { + pointGraphics.connector.attr ( { + visibility: HIDDEN + }); + } + } + } + } + // now we sort the data labels by its label angle + quarters[i].sort (sortArrayByAngle); + } + + maxQuadrantLabel = mathMax ( + quarters[0].length, + quarters[1].length, + quarters[2].length, + quarters[3].length + ); + labelQuadrantHeight = mathMax ( + mathMin (maxQuadrantLabel, maxLabels) * labelHeight, + dataLabelsRadius + labelHeight + ); + + // Club the first and second quadrent as they appear in the right side of the + // chart and club the other two. Clubbing here means merge all the points together + // so that marginal quadrent case are handled like one point at first quadrent and + // second point at another quadrent but placed closely. + rightClubbedQuadrent = quarters[0].concat (quarters[1]); + leftClubbedQuadrent = quarters[2].concat (quarters[3]); + + for (i = rightClubbedQuadrent.length - 1; i >= 0; i--) { + lPoint = rightClubbedQuadrent[i].point.config; + // Clear if any previous values are stored + delete lPoint.clearance; + delete lPoint.clearanceShift; + oriY = mathAbs (labelQuadrantHeight * mathSin (lPoint.angle)); + if (Math.abs (sameSideQuadrentLastY - oriY) < lineHeight * 2) { + lPoint.clearance = 0; + rightClubbedQuadrent[i+1].point.clearanceShift = lineHeight / 2; + } + sameSideQuadrentLastY = oriY; + } + + sameSideQuadrentLastY = Number.POSITIVE_INFINITY; + + for (i = 0, length = leftClubbedQuadrent.length; i < length; i++) { + lPoint = leftClubbedQuadrent[i].point.config; + // Clear if any previous values are stored + delete lPoint.clearance; + delete lPoint.clearanceShift; + oriY = mathAbs (labelQuadrantHeight * mathSin (lPoint.angle)); + if (Math.abs (sameSideQuadrentLastY - oriY) < lineHeight * 2) { + lPoint.clearance = 0; + leftClubbedQuadrent[i-1].point.clearanceShift = lineHeight / 2; + } + sameSideQuadrentLastY = oriY; + } + + // reverse 1st and 3rd quardent points + quarters[1].reverse (); + quarters[3].reverse (); + while (k--) { + points = quarters[k]; + length = points.length; + + if (!skipOverlapLabels) { + if (length > maxLabels) { + labelHeight = labelQuadrantHeight / length; + } + else { + labelHeight = labelFontSize; + } + halfLabelHeight = labelHeight / 2; + } + + //1st pass + //place all labels at 1st quarter + + // calculate the total available space to put labels + spaceRequired = length * labelHeight; + // calculate the remaining height + remainingHeight = labelQuadrantHeight; + //place all child point + for (i = 0; i < length; i += 1, spaceRequired -= labelHeight) { + // Get the y position of the label (radius + // where data label is to draw) + oriY = mathAbs (labelQuadrantHeight * mathSin (points[i].angle)); + + if (remainingHeight < oriY) { + oriY = remainingHeight; + } + else if (oriY < spaceRequired) { + oriY = spaceRequired; + } + + remainingHeight = (points[i].oriY = oriY) - labelHeight; + } + + //2nd pass (reverse) + align = alignments[k]; + //place all labels at 1st quarter + maxYmayHave = labelQuadrantHeight - ((length - 1) * labelHeight); + remainingHeight = 0; + + //place all child point + for (i = points.length - 1; i >= 0; i -= 1, maxYmayHave += labelHeight) { + point = points[i].point; + angle = points[i].angle; + pointConfig = point.config; + _textAttrs = pointConfig._textAttrs; + if (!_textAttrs.text) { + continue; + } + _textCss = pointConfig._textCss; + pointGraphics = point.graphics; + sliced = pointConfig.sliced; + dataLabel = pointGraphics.label; + + oriY = mathAbs (labelQuadrantHeight * mathSin (angle)); + + if (oriY < remainingHeight) { + oriY = remainingHeight; + } + else if (oriY > maxYmayHave) { + oriY = maxYmayHave; + } + + remainingHeight = oriY + labelHeight; + + // If the there is a label down underneath or + // bordered put elipses else wrap the word. + extraLineSpaceComp = pointConfig.clearance === undefined? + mathCeil (pluckNumber (parseFloat (pointConfig.style.border), 12), 12) * 2: + mathCeil (pluckNumber (parseFloat (pointConfig.style.border), + pointConfig.clearance)) * 2; + + + + y1 = ((oriY + points[i].oriY) / 2); + x1 = centerX + xSign[k] * dataLabelsRadius * + mathCos (math.asin (y1 / labelQuadrantHeight)); + y1 *= ySign[k]; + y1 += centerY; + + y2 = centerY + (radius * mathSin (angle)); + x2 = centerX + (radius * mathCos (angle)); + + // Relation: centerX <= connectorStartX <= connectorEndX + // (for right half and vice versa for left half) + (k < 2 && x1 < x2 || k > 1 && x1 > x2) && (x1 = x2); + + x3 = x1 + xDisplacement[k]; + y3 = y1 - halfLabelHeight - 2; + x4 = x3 + xDisplacement[k]; + + _textAttrs._x = x4; + + if (manageLabelOverflow) { + labelWidth = k > 1 ? x4 - chartConfig.canvasLeft : chartConfig.canvasLeft + + plotWidth - x4; + smartLabel.setStyle (pointConfig.style); + lineHeight = pluckNumber (mathCeil (parseFloat (pointConfig.style.lineHeight)), + 12) + extraLineSpaceComp; + if (legendAlign === 'right' && pointConfig.transX > 0) { + labelWidth -= legendWidth + (legendBorderwidth * 2); + } + smartLabelObj = + smartLabel.getSmartText (pointConfig.displayValue, labelWidth, lineHeight); + + if (pointConfig.clearance === undefined && smartLabelObj.height > labelHeight) { + y1 += labelHeight; + } + + if (legendAlign !== 'right' && pointConfig.transY > 0) { + y1 -= labelHeight; + } + + _textAttrs.text = smartLabelObj.text; + // _textAttrs.title = smartLabelObj.tooltext || ''; + + _textAttrs.tooltip = smartLabelObj.tooltext; + + + /*dataLabel.attr ( { + text: smartLabelObj.text + //title: (smartLabelObj.tooltext || '') + }) + .tooltip (smartLabelObj.tooltext);*/ + } + _textAttrs._y = y3; + + if (sliced) { + transX = pointConfig.transX; + transY = pointConfig.transY; + x3 = x3 + transX; + x1 = x1 + transX; + x2 = x2 + transX; + y2 = y2 + transY; + x4 = x4 + transX; + } + + _textAttrs['text-anchor'] = align; + _textAttrs.vAlign = 'middle'; + + _textAttrs.x = x4; + _textAttrs.y = y1; + + prevTextPos = dataLabel && dataLabel.data('textPos'); + if (prevTextPos) { + dataLabel.attr({ + x: prevTextPos.x, + y: prevTextPos.y + }). animateWith(mainElm, animObj, _textAttrs, animationDuration); + } + else { + // for the initial rendering. + dataLabel = pointGraphics.label = paper + .text(_textAttrs, _textCss, dataLabelContainer) + .drag(plotDragMove, plotDragStart, plotDragEnd) + .hover(plotRollOver, plotRollOut); + } + + dataLabel.x = _textAttrs._x; + dataLabel._x = _textAttrs._x; + dataLabel.y = _textAttrs._y; + + if (_textAttrs.tooltip) { + dataLabel.tooltip(_textAttrs.tooltip); + delete _textAttrs.tooltip; + } + if (_textAttrs.visibility === VISIBLE) { + dataLabel.show(); + } + dataLabel.data('textPos', { + x: x4, + y: y1 + }) + .data('plotItem', _textAttrs.plotItem) + .data(EVENTARGS, _textAttrs.eventArgs); + // draw the connector + if ((connector = pointGraphics.connector)) { + pointConfig.connectorPath = connectorPath = [ + M, + x2, y2, // base + L, + // first break, next to the label + isSmartLineSlanted ? x1 : x2, y1, + x3, y1 // end of the string at the label + ]; + prevConnectorPos = connector.data('connectorPath'); + if (prevConnectorPos) { + if (!chartConfig.clicked) { + connector.attr({ + path: prevConnectorPos.path + }). animateWith(mainElm, animObj, { + path: connectorPath + }, animationDuration); + } + } + else { + connector.attr ( { + path: connectorPath + }); + } + connector.data('connectorPath', { + path: connectorPath + }); + } + } + } + } + } + }; + } ()), + _spaceManager: function () { + var chart = this, + chartConfig = chart.config, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + data = dataSet.components.data, + conf = dataSet.config, + legend = chartComponents.legend, + colorM = chartComponents.colorManager, + SmartLabel = chart.linkedItems.smartLabel, + textWidthArr = [], + length = conf.dataLabelCounter, + labelMaxW = 0, + fcJSONChart = chart.jsonData.chart, + manageLabelOverflow = pluckNumber (fcJSONChart.managelabeloverflow, 0), + userGivenSlicingDist = pluckNumber (fcJSONChart.slicingdistance), + slicingDistance = !conf.preSliced && (chartConfig.allPlotSliceEnabled === ZEROSTRING) && + (fcJSONChart.showlegend !== ONESTRING || fcJSONChart.interactivelegend === ZEROSTRING) ? + 0 : mathAbs (pluckNumber (userGivenSlicingDist, 20)), + pieRadius = pluckNumber (fcJSONChart.pieradius, 0), + enableSmartLabels = pluckNumber (fcJSONChart.enablesmartlabels, fcJSONChart.enablesmartlabel, 1), + skipOverlapLabels = enableSmartLabels ? pluckNumber (fcJSONChart.skipoverlaplabels, + fcJSONChart.skipoverlaplabel, 1) : 0, + isSmartLineSlanted = pluckNumber (fcJSONChart.issmartlineslanted, 1), + labelDistance = length ? pluckNumber (fcJSONChart.labeldistance, fcJSONChart.nametbdistance, 5) : + slicingDistance, + smartLabelClearance = pluckNumber (fcJSONChart.smartlabelclearance, 5), + width = chartConfig.width, + height = chartConfig.height, + actionBarHeight = (chart._manageActionBarSpace(height * 0.225) || {}).bottom, + chartWorkingWidth = width - (chartConfig.marginRight + chartConfig.marginLeft), + chartWorkingHeight = height - (chartConfig.marginTop + chartConfig.marginBottom) - + (actionBarHeight ? actionBarHeight + chartConfig.marginBottom : 0), + minOfWH = mathMin (chartWorkingHeight, chartWorkingWidth), + smartLineColor = pluck (fcJSONChart.smartlinecolor, colorM.getColor ('plotFillColor')), + smartLineAlpha = pluckNumber (fcJSONChart.smartlinealpha, 100), + smartLineThickness = pluckNumber (fcJSONChart.smartlinethickness, 0.7), + dataLabelOptions = (conf.dataLabelOptions = dataSet._parseDataLabelOptions ()), + style = dataLabelOptions.style, + lineHeight = length ? pluckNumber (parseInt (style.lineHeight, 10), 12) : 0, //2px padding + pieMinRadius = pieRadius === 0 ? minOfWH * 0.15 : pieRadius, + pieMinDia = (2 * pieMinRadius), + legendSpace = { + bottom: 0, + right: 0 + }, + captionSpace, + pieYScale = conf.pieYScale, + pieSliceDepth = conf.pieSliceDepth, + textObj, + avaiableMaxpieSliceDepth, + totalSpaceReq; + // Old code for placeValuesInside + // placeLabelsInside = pluckNumber ((FCchartName === 'doughnut2d') ? 0 : fcJSONChart.placevaluesinside), + + dataLabelOptions.connectorWidth = smartLineThickness; + dataLabelOptions.connectorPadding = pluckNumber (fcJSONChart.connectorpadding, 5); + dataLabelOptions.connectorColor = convertColor (smartLineColor, smartLineAlpha); + + // If smart label is on and there is a label defined only then modify the label distance + if (length) { + if (enableSmartLabels) { + labelDistance = smartLabelClearance; + } + labelDistance += slicingDistance; + } + // Include label + totalSpaceReq = pieMinDia + ((lineHeight + labelDistance) * 2); + + // Provide at least single line height space for caption. + // a space manager that manages the space for the tools as well as the captions. + captionSpace = chart._manageChartMenuBar(totalSpaceReq < chartWorkingHeight ? + chartWorkingHeight - totalSpaceReq : chartWorkingHeight / 2); + chartWorkingHeight -= ((captionSpace.top || 0) + (captionSpace.bottom || 0)); + if (conf.showLegend) { + chart.hasLegend = true; + if (pluck (fcJSONChart.legendposition, POSITION_BOTTOM).toLowerCase () !== POSITION_RIGHT) { + legendSpace = legend._manageLegendPosition (chartWorkingHeight / 2); + chartWorkingHeight -= legendSpace.bottom; + } else { + legendSpace = legend._manageLegendPosition (chartWorkingHeight / 2); + chartWorkingWidth -= legendSpace.right; + } + } + chart._allocateSpace (legendSpace); + // Now get the max width required for all display text + // set the style + SmartLabel.useEllipsesOnOverflow(chartConfig.useEllipsesWhenOverflow); + if (length !== 1) { // Fix for single data in Pie makes pie very small in size. + for (; length--; ) { + SmartLabel.setStyle (data[length].config.style || chartConfig.dataLabelStyle); + textWidthArr[length] = textObj = SmartLabel.getOriSize (data[length].config.displayValue); + labelMaxW = mathMax (labelMaxW, textObj.width); + } + } + // If redius not supplyed then auto calculate it + if (pieRadius === 0) { + pieMinRadius = chart._stubRadius (chartWorkingWidth, labelMaxW, chartWorkingHeight, labelDistance, + slicingDistance, lineHeight, pieMinRadius); + } + else { + conf.slicingDistance = slicingDistance; + conf.pieMinRadius = pieMinRadius; + dataLabelOptions.distance = labelDistance; + } + avaiableMaxpieSliceDepth = chartWorkingHeight - (2 * ((pieMinRadius * pieYScale) + lineHeight)); + conf.managedPieSliceDepth = (pieSliceDepth > avaiableMaxpieSliceDepth) ? (pieSliceDepth - + avaiableMaxpieSliceDepth) : conf.pieSliceDepth; + dataLabelOptions.isSmartLineSlanted = isSmartLineSlanted; + dataLabelOptions.enableSmartLabels = enableSmartLabels; + dataLabelOptions.skipOverlapLabels = skipOverlapLabels; + dataLabelOptions.manageLabelOverflow = manageLabelOverflow; + }, + // manages the spaces when no radius is given. + _stubRadius: function (chartWorkingWidth, labelMaxW, chartWorkingHeight, labelDistance, slicingDistance, + lineHeight, pieMinRadius) { + var chart = this, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + conf = dataSet.config, + fcJSONChart = chart.jsonData.chart, + userGivenSlicingDist = pluckNumber (fcJSONChart.slicingdistance), + dataLabelOptions = conf.dataLabelOptions || + (conf.dataLabelOptions = dataSet._parseDataLabelOptions ()), + availableRadius = 0, + // Slicing distance can not be less then the MINSLICINGDIST (10) + MINSLICINGDIST = 10, + shortFall; + availableRadius = mathMin((chartWorkingWidth / 2) - labelMaxW - slicingDistance, + (chartWorkingHeight / 2) - lineHeight) - labelDistance; + if (availableRadius >= pieMinRadius) {//there has space for min width + pieMinRadius = availableRadius; + } + else if (!userGivenSlicingDist) {/** @todo smartyfy Labels */ + // If slicing distance is not given by the user, adjust slicing distance based on pie radius. + shortFall = pieMinRadius - availableRadius; + // Now reduce the pie slicing distance, but restrict the minimum slicing distance to 10 pixels. + slicingDistance = labelDistance = mathMax(mathMin(labelDistance - shortFall, + slicingDistance), MINSLICINGDIST); + } + conf.slicingDistance = slicingDistance; + conf.pieMinRadius = pieMinRadius; + dataLabelOptions.distance = labelDistance; + + return pieMinRadius; + }, + getDataSet: function (index) { + return this.components.dataset[index]; + }, + _startingAngle: function (angle, relative) { + var ang, + chart = this, + dataSet = chart.components.dataset[0], + seriesData = dataSet.config, + // Angle is differently handled in Pie2D and Pie3D. So, angles is converted + // accordingly to the same base. Its radian in 2D while in degrees in 3D. + // Moreover, sense of positive angle is opposite in the two. + currentAngle = (ang = seriesData.startAngle) * (-rad2deg) + + ((-1) * ang < 0 ? 360 : 0); + if (!isNaN(angle)) { + if (!(seriesData.singletonCase || seriesData.isRotating)) { + angle += relative ? currentAngle : 0; + seriesData.startAngle = -angle * deg2rad; + chart._rotate(angle); + currentAngle = angle; + } + else { + currentAngle = seriesData.startAngle; + } + } + // Angle normalised in the range of [0, 360] + return mathRound(((currentAngle %= 360) + (currentAngle < 0 ? 360 : 0)) * 100) / 100; + }, + eiMethods: /** @lends FusionCharts# */ { + /** + * Pie charts have slices that can be clicked to slice in and out. + * Checks whether a particular wedge of Pie or Doughnut chart is sliced-out or sliced-in. + * + * > Available on `pie` and `doughnut` chart types only. + * + * @group chart:pie-slice + * + * @param {number} index - The index of the data corresponding to the pie/doughnut slice. + * @returns {boolean} - The sliced state of the pie/doughnut wedge. Returns `true` if it's sliced out, + * or `false` if it's sliced in. + * + * @example + * // Render a pie 2d chart with some data in sliced out state, provide data index + * // in an input textfield and get the sliced state of the pie on click of a button + * FusionCharts.ready(function () { + * var chart = new FusionCharts({ + * type: "pie2d", + * renderAt: "chart-container", + * dataSource: "data.json", + * dataFormat: "jsonurl" + * }).render(); + * + * // Get the sliced state of a pie returned when clicked on a button + * // (with an id pie-sliced-state). It picks the data index from + * // an input textfield (with id pie-data-index). + * document.getElementById("pie-sliced-state").onclick = function () { + * var dataIndex = document.getElementById("pie-data-index").value, + * slicedState = chart.isPlotItemSliced(dataIndex); + * }; + * }); + */ + isPlotItemSliced: function (index) { + var num, + data, + config, + dataSet, + apiInstance = this.apiInstance; + + return (apiInstance && apiInstance.components.dataset && + (dataSet = apiInstance.components.dataset[0]) && + (data = dataSet.components.data) && (num = data.length) && + data[index] && (config = data[index].config)) && + config.sliced; + }, + + addData: function () { + var dataSet, + apiInstance = this.apiInstance; + return (apiInstance && apiInstance.components.dataset && + (dataSet = apiInstance.components.dataset[0]) && dataSet.addData.apply(dataSet, arguments)); + }, + + removeData: function () { + var dataSet, + apiInstance = this.apiInstance; + return (apiInstance && apiInstance.components.dataset && + (dataSet = apiInstance.components.dataset[0]) && dataSet.removeData.apply(dataSet, arguments)); + }, + + updateData: function () { + var dataSet, + apiInstance = this.apiInstance; + return (apiInstance && apiInstance.components.dataset && + (dataSet = apiInstance.components.dataset[0]) && dataSet.updateData.apply(dataSet, arguments)); + }, + + /** + * Pie charts have slices. These slices can be clicked by users to slice in or slice out. + * Slices a pie/doughnut wedge to in / out state. In absence of the optional second parameter, it + * toggles the sliced state of the pie. The second parameter only enforces a specific sliced state. + * + * > Available on `pie` and `doughnut` chart types only. + * + * @group chart:pie-slice + * + * @param {number} index - The index of the data corresponding to the pie/doughnut slice. + * @param {boolean=} [slice] - Gives direction to chart on what is the required sliced state. For + * `true`, it slices out, if in sliced-in state. Or else, maintains it's sliced-out state. And + * vice-versa. + * + * @returns {boolean} - The final sliced state of the pie/doughnut wedge. Returns `true` if it's + * sliced out, or `false` if it's sliced in. + * + * @fires FusionCharts#slicingStart + * @fires FusionCharts#slicingEnd + * + * @example + * // Render a pie 2d chart, provide data index in an input textfield + * // and toggle the sliced state of the pie on click of a button + * FusionCharts.ready(function () { + * var chart = new FusionCharts({ + * type: "pie2d", + * renderAt: "chart-container", + * dataSource: "data.json", + * dataFormat: "jsonurl" + * }).render(); + * + * // Toggle the sliced state of the pie when clicked on a button + * // (with an id pie-sliced-state). It picks the data index from + * // an input textfield (with id pie-data-index). + * document.getElementById("pie-sliced-state").onclick = function () { + * var dataIndex = document.getElementById("pie-data-index").value; + * chart.slicePlotItem(dataIndex); + * }; + * }); + */ + slicePlotItem: function (index, slice, callback) { + var dataSet, + data, + config, + num, + output, + sliceVal = !!slice, + apiInstance = this.apiInstance, + asyncRender = apiInstance.chartInstance.args.asyncRender, + list = apiInstance.getJobList(); + + if (callback || asyncRender) { + list.eiMethods.push(schedular.addJob(function(){ + output = (apiInstance && apiInstance.components.dataset && + (dataSet = apiInstance.components.dataset[0]) && (data = dataSet.components.data) && + (num = data.length) && data[index = dataSet.config.reversePlotOrder ? + (num - index - 1) : index] && (config = data[index].config)) && + ((sliceVal !== config.sliced || slice === UNDEFINED) && + apiInstance._plotGraphicClick.call(data[index].graphics.element) || config.sliced); + if (typeof callback === 'function') { + callback(output); + } + }, apiInstance, [], priorityList.postRender)); + } + else { + return (apiInstance && apiInstance.components.dataset && + (dataSet = apiInstance.components.dataset[0]) && + (data = dataSet.components.data) && (num = data.length) && + data[index = dataSet.config.reversePlotOrder ? (num - index - 1) : index] && + (config = data[index].config)) && ((sliceVal !== config.sliced || slice === UNDEFINED) && + apiInstance._plotGraphicClick.call(data[index].graphics.element) || config.sliced); + } + }, + + /** + * Sets the center label in Dougnut 2D chart. The label cosmetics are configurable via the second + * optional parameter, which accepts a host of related properties. + * + * > Available on `doughnut` chart only. + * + * @group chart:pie-center-label + * + * @param {string} labelText - The text to be displayed at doughnut center. + * @param {object=} [options] - The optional parameter that holds a host of configurable params + * with most them being cosmetic properties of the center label. The properties are case sensitive. + * + * @param {string=} [options.font] - Sets the font face of the label. + * @param {string=} [options.fontSize] - Defines the font size of the label. + * @param {boolean=} [options.bold] - Specifies of whether the label be bold. + * @param {boolean=} [options.italic] - Specifies of whether the label be in italic. + * @param {hexcolor=} [options.color] - Sets the color of the label text. + * @param {alpha=} [options.alpha] - Sets the opacity of the label text. + * @param {hexcolor=} [options.hoverColor] - Sets the hover color of the label text. + * @param {alpha=} [options.hoverAlpha] - Sets the hover opacity of the label text. + * @param {hexcolor=} [options.bgColor] - Sets the color of the label background. + * @param {alpha=} [options.bgAlpha] - Sets the opacity of the label background. + * @param {hexcolor=} [options.borderColor] - Sets the color of the label background border. + * @param {alpha=} [options.borderAlpha] - Sets the opacity of the label background border. + * @param {number=} [options.borderThickness] - Sets the thickness of the label background border. + * @param {number=} [options.borderRadius] - Sets the radius for rounded label background. + * @param {number=} [options.padding] - The padding between extremities of the label and inner periphery + * of the doughnut. For rectangular label background, it's relative to any of the 4 corners. While for + * circular background, it's the gap between the 2 concentric circles, background border and inner + * periphery. + * @param {number=} [options.textPadding] - For rectangular label background, it's the gutter between + * the text and the background border. While for circular background, it's the minimum space between + * the background border and the containing circle of the text. + * @param {string=} [options.toolText] - Sets the tooltext for the label. + * + * @fires FusionCharts#centerLabelChanged + * + * @example + * // Render a doughnut 2d chart and set center label with some + * // configuring params on click of a button + * FusionCharts.ready(function () { + * var chart = new FusionCharts({ + * type: "doughnut2d", + * renderAt: "chart-container", + * dataSource: "data.json", + * dataFormat: "jsonurl" + * }).render(); + * + * // Assign the functionality of setting the center label when clicked on + * // a button (with an id set-center-label). + * document.getElementById("set-center-label").onclick = function () { + * chart.centerLabel("The central label", {bold: true, toolText: "center label tooltext"}); + * }; + * }); + */ + centerLabel: function (labelText, options) { + var chart = this.apiInstance, + list = chart.getJobList(), + asyncRender = chart.chartInstance.args.asyncRender, + _helperFn = function() { + var seriesData = chart.components.dataset[0], + config = seriesData.config, + piePlotOptions = config.piePlotOptions, + innerSize = piePlotOptions.innerSize, + pieCenter = config.pieCenter, + cx = pieCenter[0], + cy = pieCenter[1], + centerLabelConfig = config.centerLabelConfig, + key; + + if (typeof options !== 'object') { + options = centerLabelConfig; + } + else { + // Create the config cosmetics object from those obtained + // from argument and default values + for (key in centerLabelConfig) { + options[key] === UNDEFINED && (options[key] = centerLabelConfig[key]); + } + } + options.label = labelText; + seriesData.centerLabelConfig = options; + + innerSize && chart.drawDoughnutCenterLabel(labelText || '', + cx, cy, innerSize, innerSize, options, true); + }; + + if (asyncRender) { + list.eiMethods.push(schedular.addJob(_helperFn, chart, [], priorityList.postRender)); + } + else { + _helperFn(); + } + }, + + /** + * Rotates the pie/doughnut chart to a specific angle or by a specific angle. The mode of + * operation is controlled by the optional second parameter. Even the first parameter is optional, + * in absence of which, the chart doesn't rotate and simply returns the current starting angle + * of the pie/doughnut chart. + * + * Starting angle of a pie/doughnut chart is the angle at which the starting face of the first data is + * aligned to. Each pie is drawn in counter clock-wise direction. + * + * > Available on `pie` and `doughnut` chart types only. + * + * @group chart:pie-slice + * + * @param {degrees=} [angle=0] - The angle by which to rotate the entire pie/doughnut chart. + * @param {boolean=} [relative=false] - Specify whether the angle being set is relative to the current + * angle or with respect to absolute 0. + * @returns {degrees} - The final state of the starting angle of the chart. + * + * @example + * // Render a pie 2d chart and rotate the chart by 90 degrees on click of a button + * FusionCharts.ready(function () { + * var chart = new FusionCharts({ + * type: "pie2d", + * renderAt: "chart-container", + * dataSource: "data.json", + * dataFormat: "jsonurl" + * }).render(); + * + * // Assign the functionality of rotating the chart by 90 degrees when clicked on + * // a button (with an id rotate-chart). + * document.getElementById("rotate-chart").onclick = function () { + * chart.startingAngle(90, true); + * }; + * }); + */ + startingAngle: function (angle, relative, callback) { + var chart = this.apiInstance, + asyncRender = chart.chartInstance.args.asyncRender, + list = chart.getJobList(), + output; + + if (callback || asyncRender) { + list.eiMethods.push(schedular.addJob(function(){ + output = chart._startingAngle(angle, relative); + if (typeof callback === 'function') { + callback(output); + } + }, chart, [], priorityList.postRender)); + } + else { + return chart._startingAngle(angle, relative); + } + } + } + }, chartAPI.guageBase, { + plotborderthickness: 1, + alphaanimation: 0, + singletonPlaceValue: true, + usedataplotcolorforlabels: 0, + enableslicing: ONESTRING + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-pie3d', function () { + var global = this, + lib = global.hcLib, + R = lib.Raphael, + hasTouch = lib.hasTouch, + win = global.window, + getPosition = lib.getPosition, + //add the tools thats are requared + pluck = lib.pluck, + pluckNumber = lib.pluckNumber, + ROLLOVER = 'DataPlotRollOver', + ROLLOUT = 'DataPlotRollOut', + EVENTARGS = 'eventArgs', + each = lib.each, + plotEventHandler = lib.plotEventHandler, + + docMode8 = win.document.documentMode === 8, + HIDDEN = 'hidden', + VISIBLE = docMode8 ? 'visible' : '', + M = 'M', + L = 'L', + V = 'v', + A = 'A', + Z = 'Z', + math = Math, + mathSin = math.sin, + mathCos = math.cos, + mathRound = math.round, + mathATan2 = math.atan2, + mathMin = math.min, + mathMax = math.max, + mathAbs = math.abs, + mathPI = math.PI, + mathCeil = math.ceil, + mathFloor = math.floor, + pi = Math.PI, + piBy2 = pi / 2, + pi2 = 2 * pi, + pi3By2 = pi + piBy2, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + getClickArcTangent = function (x, y, center, ref, pieYScale) { + return mathATan2 ((y - center[1] - ref.top) / pieYScale, x - center[0] - ref.left); + }, + getAbsScaleAngle = function (start, end) { + return (start > end ? pi2 : 0) + end - start; + }, + getDarkColor = lib.graphics.getDarkColor, + getLightColor = lib.graphics.getLightColor, + getFirstValue = lib.getFirstValue, + convertColor = lib.graphics.convertColor, + COMMASTRING = lib.COMMASTRING, + toRaphaelColor = lib.toRaphaelColor, + hasSVG = lib.hasSVG, + UNDEFINED, + map = function (arr, fn) { + var results = [], + i = 0, + len = arr.length; + + for (; i < len; i++) { + results[i] = fn.call (arr[i], arr[i], i, arr); + } + return results; + }, + + /* Helper function */ + normalizeAngle = function (angle, inDegrees) { + var fullCycle = inDegrees ? 360 : pi2; + angle = (angle || 0) % fullCycle; + return angle < 0 ? fullCycle + angle : angle; + }, + defined = function (obj) { + return obj !== UNDEFINED && obj !== null; + }, + isObject = function (obj) { + return typeof obj === 'object'; + }, + isString = function (s) { + return typeof s === 'string'; + }, + pInt = function (s, mag) { + return parseInt (s, mag || 10); + }, + pie3DCacheColorStore = { + lighting3D: { + + }, + lighting2D: { + + } + }; + + chartAPI ('pie3d', { + defaultDatasetType : 'Pie3D', + applicableDSList: { + 'Pie3D': true + }, + is3D: true, + friendlyName: '3D Pie Chart', + fireGroupEvent: true, + creditLabel: creditLabel, + getPointColor: function (color) { + return color; + }, + _configureManager: function () { + var chart = this, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + dataSetComponents = dataSet.components, + pie3DManager = dataSetComponents.Pie3DManager, + data = dataSetComponents.data; + if (pie3DManager) { + pie3DManager.configure(dataSetConfig.pieSliceDepth, data.length === 1, dataSetConfig.use3DLighting, + false); + } + }, + // Pie2D (base) has defaultPlotShadow, but 3d does not. + defaultPlotShadow: 0, + //Initialising the pie3D manager class. + _preDrawCalculate: function () { + var i, + point, + chart = this, + chartConfig = chart.config, + chartComponents = chart.components, + precision = 1000, + total = 0, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + dataSetComponents = dataSet.components, + dataLabelOptions = dataSetConfig.dataLabelOptions, + pie3DOptions = (dataSetConfig.pie3DOptions = dataSet._parsePie3DOptions()), + startingAngle = (pluck (dataSetConfig.startAngle, 0) % pi2), + fontSize, + managedPieSliceDepth = dataSetConfig.managedPieSliceDepth, + slicedOffset = dataSetConfig.slicedOffset = pie3DOptions.slicedOffset, + plotWidth = chartConfig.canvasWidth, + plotHeight = chartConfig.canvasHeight, + positions = [chartConfig.canvasLeft + plotWidth * 0.5, + chartConfig.canvasTop + plotHeight * 0.5 - managedPieSliceDepth * 0.5], + start, + pointConfig, + end, + angle, + lastEnd, + maxEnd, + data = dataSetComponents.data, + fraction, + smallestSize = mathMin (plotWidth, plotHeight), + isPercent, + radiusX, // the x component of the radius vector for a given point + radiusY, + labelDistance = dataLabelOptions.distance, + pieYScale = dataSetConfig.pieYScale, + + slicedOffsetY = dataSetConfig.slicedOffsetY || (dataSetConfig.slicedOffsetY = + slicedOffset * dataSetConfig.pieYScale), + pie3DManager = dataSetComponents.Pie3DManager; + + // get positions - either an integer or a percentage string must be given + positions.push ((2 * dataSetConfig.pieMinRadius), pie3DOptions.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 + // i == 4: innerSize, relative to smallestSize + [plotWidth, plotHeight - managedPieSliceDepth, smallestSize, smallestSize][i] * + pInt (length) / 100: + length; + }); + + + //convert all diameter into radius + positions[2] /= 2; + positions[3] /= 2; + //Add the ry + positions.push (positions[2] * pieYScale); + //centerRadiusX + positions.push ((positions[2] + positions[3]) / 2); + //centerRadiusY + positions.push (positions[5] * pieYScale); + + // utility for getting the x value from a given y, used for anticollision logic in data labels + dataSet.getX = function (y, left) { + + angle = math.asin ((y - positions[1]) / (positions[2] + labelDistance)); + + return positions[0] + + (left ? -1 : 1) * + (mathCos (angle) * (positions[2] + labelDistance)); + }; + + // set center for later use + dataSetConfig.center = positions; + + // get the total sum + each (data, function (point) { + total += point.config.y; + }); + + dataSetConfig.labelsRadius = positions[2] + labelDistance; + dataSetConfig.labelsRadiusY = dataSetConfig.labelsRadius * pieYScale; + dataSetConfig.quadrantHeight = (plotHeight - managedPieSliceDepth) / 2; + dataSetConfig.quadrantWidth = plotWidth / 2; + + lastEnd = startingAngle; + + lastEnd = mathRound (lastEnd * precision) / precision; + maxEnd = lastEnd + pi2; + + fontSize = pluckNumber (parseInt (dataLabelOptions.style.fontSize, 10), 10) + 4,//2px padding + dataSetConfig.maxLabels = mathFloor (dataSetConfig.quadrantHeight / fontSize); //max labels per quarter + dataSetConfig.labelFontSize = fontSize; + dataSetConfig.connectorPadding = pluckNumber (dataLabelOptions.connectorPadding, 5); + dataSetConfig.isSmartLineSlanted = pluck (dataLabelOptions.isSmartLineSlanted, true); + dataSetConfig.connectorWidth = pluckNumber (dataLabelOptions.connectorWidth, 1); + dataSetConfig.enableSmartLabels = dataLabelOptions.enableSmartLabels; + if (!pie3DManager) { + pie3DManager = dataSetComponents.Pie3DManager = new Pie3DManager (chart); + // enabling the tooltip options for slices as it is the parent group being used by the pie3dmanager + chart.get('graphics','datasetGroup').trackTooltip(true); + } + chart._configureManager(); + + // each (data, function (point) { + for (i = data.length - 1; i >= 0; i -= 1) { + point = data[i]; + pointConfig = point.config; + // set start and end angle + start = lastEnd; + fraction = total ? pointConfig.y / total : 0; + + lastEnd = mathRound ((lastEnd + (fraction * pi2)) * precision) / precision; + if (lastEnd > maxEnd) { + lastEnd = maxEnd; + } + end = lastEnd; + + // set the shape + pointConfig.shapeArgs = { + start: mathRound (start * precision) / precision, + end: mathRound (end * precision) / precision + }; + + // center for the sliced out slice + pointConfig.centerAngle = angle = ((end + start) / 2) % pi2; + /** @todo: slicedTranslation is implemented as string */ + pointConfig.slicedTranslation = [ + mathRound (mathCos (angle) * slicedOffset), + mathRound (mathSin (angle) * slicedOffsetY) + ]; + + // set the anchor point for tooltips + radiusX = mathCos (angle) * positions[2]; + dataSetConfig.radiusY = radiusY = mathSin (angle) * positions[4]; + pointConfig.tooltipPos = [ + positions[0] + radiusX * 0.7, + positions[1] + radiusY//changed to reducr mouce on tooltip condition + ]; + + // API properties + pointConfig.percentage = fraction * 100; + pointConfig.total = total; + } + }, + placeDataLabels: (function () { + /* + * Pie Helper Functions. + */ + var sortArrayByPoint = function (a, b) { + return a.point.value - b.point.value; + }, + sortArrayByAngle = function (a, b) { + return a.angle - b.angle; + }, + alignments = ['start', 'start', 'end', 'end'], + alignCenter = 'middle', + ySign = [-1, 1, 1, -1], + xSign = [1, 1, -1, -1]; + + return function (isRotating) { + var attr, + isNewElem, + prevTextPos, + chart = this, + chartConfig = chart.config, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + plotOptions = dataSet.config, + plotItems = dataSet.components.data, + piePlotOptions = plotOptions.piePlotOptions, + canvasLeft = chartConfig.canvasLeft, + canvasTop = chartConfig.canvasTop, + canvasWidth = chartConfig.canvasWidth, + cx = canvasLeft + chartConfig.canvasWidth * 0.5, + cy = canvasTop + chartConfig.canvasHeight * 0.5, + smartLabel = chart.linkedItems.smartLabel, + dataLabelsOptions = plotOptions.dataLabelOptions, + style = dataLabelsOptions.style, + lineHeight = pluckNumber (mathCeil (parseFloat (style.lineHeight)), 12), + placeInside = getFirstValue (dataLabelsOptions.placeInside, false), + skipOverlapLabels = dataLabelsOptions.skipOverlapLabels, + manageLabelOverflow = dataLabelsOptions.manageLabelOverflow, + connectorPadding = dataLabelsOptions.connectorPadding, + distanceOption = dataLabelsOptions.distance, + connectorWidth = dataLabelsOptions.connectorWidth, + remainingHeight, + // divide the points into quarters for anti collision + quarters = [ + [], // top right + [], // bottom right + [], // bottom left + [] // top left + ], + // todo remove the dupliace variables. + plotLeft = canvasLeft, + plotTop = canvasTop, + plotWidth = canvasWidth, + labelFontSize = parseInt (style.fontSize, 10), + labelHeight = labelFontSize, + halfLabelHeight = labelHeight / 2, + xDisplacement = [connectorPadding, + connectorPadding, -connectorPadding, -connectorPadding + ], + isSmartLineSlanted = dataLabelsOptions.isSmartLineSlanted, + align, + i, + labelWidth, + j, + oriY, + maxYmayHave, + spaceRequired, + length, + k, + sliced, + x1, + x2, + x3, + x4, + y1, + y2, + y3, + points, + point, + angle, + excess, + excessArr, + dataLabel, + quarter, + transX, + transY, + smartLabelObj, + pointConfig, + pointGraphics, + connector, + connectorPath, + outside = distanceOption > 0, + center = plotOptions.center || (plotOptions.center = [ + cx, + cy, + piePlotOptions.size, + (piePlotOptions.innerSize || 0) + ]), + centerY = center[1], + centerX = center[0], + radius = center[2], + radiusY = center[4], + dataLabelsRadius = plotOptions.labelsRadius, + dataLabelsRadiusY = mathRound (plotOptions.labelsRadiusY * 100) / 100, + maxLabels = plotOptions.maxLabels, + enableSmartLabels = plotOptions.enableSmartLabels, + labelQuardentHeight, + maxQuardentLabel, + pieSliceDepthHalf = plotOptions.pieSliceDepth / 2, + animationObj = chart.get('config', 'animationObj'), + animationDuration = isRotating ? 0 : animationObj.duration, + mainElm = animationObj.dummyObj, + animObj = animationObj.animObj, + animType = animationObj.animType, + _textCss, + _textAttrs, + plotDragMove = chart._plotDragMove, + plotDragStart = chart._plotDragStart, + plotDragEnd = chart._plotDragEnd, + plotRollOver = chart._plotRollOver, + plotRollOut = chart._plotRollOut, + paper = chartComponents.paper, + datasetGraphics = dataSet.graphics, + dataLabelContainer = datasetGraphics.dataLabelContainer; + smartLabel.useEllipsesOnOverflow(chartConfig.useEllipsesWhenOverflow); + // save the world if there is no labels to be placed. + if (!plotOptions.dataLabelCounter) { + return; + } + if (!isRotating) { + //do not set the style every time + // Do it for first time + smartLabel.setStyle (style); + } + + // arrange points for detection collision + // Creates an array of quarter containing labels of each quarter + //if there has only one label the draw it inside + if (plotItems.length == 1) { + + point = plotItems[0]; + pointGraphics = point.graphics; + pointConfig = point.config; + _textAttrs = pointConfig._textAttrs; + _textCss = pointConfig._textCss; + dataLabel = pointGraphics.label; + connector = pointGraphics.connector; + pointConfig.slicedTranslation = [plotLeft, plotTop]; + if (pointConfig.y !== null && pointConfig.y !== undefined) { + _textAttrs.visibility = VISIBLE; + _textAttrs['text-anchor'] = alignCenter; + _textAttrs.x = centerX; + _textAttrs.y = centerY + halfLabelHeight - 2; + + _textAttrs._x = centerX; + } + if (!dataLabel) { + dataLabel = pointGraphics.label = paper + .text(_textAttrs, _textCss, dataLabelContainer) + .drag(plotDragMove, plotDragStart, plotDragEnd) + .hover(plotRollOver, plotRollOut); + } + else { + dataLabel.animateWith (mainElm, animObj, _textAttrs, animationDuration, animType); + } + if (_textAttrs._x) { + dataLabel.x = _textAttrs._x; + delete _textAttrs.x; + } + dataLabel + .data('plotItem', _textAttrs.plotItem) + .data(EVENTARGS, _textAttrs.eventArgs); + + if (_textAttrs.visibility === VISIBLE) { + dataLabel.show(); + } + + if (connector) { + connector.hide(); + } + } + else { + if (placeInside) { + each (plotItems, function (point) { + pointGraphics = point.graphics; + pointConfig = point.config; + _textAttrs = pointConfig._textAttrs; + dataLabel = pointGraphics.label; + if (pointConfig.y !== null && pointConfig.y !== undefined) { + angle = pointConfig.angle; + y3 = centerY + (center[6] * mathSin (angle)) + halfLabelHeight - 2; + x3 = centerX + (center[5] * mathCos (angle)); + _textAttrs._x = x3; + _textAttrs._y = y3; + if (pointConfig.sliced) { + var slicedTranslation = point.slicedTranslation, + transX = slicedTranslation[0] - plotLeft, + transY = slicedTranslation[1] - plotTop; + x3 = x3 + transX; + y3 = y3 + transY; + } + _textAttrs.visibility = VISIBLE; + _textAttrs.align = alignCenter; + _textAttrs.x = x3; + _textAttrs.y = y3; + } + + if (!dataLabel) { + dataLabel = pointGraphics.label = paper + .text(_textAttrs, _textCss, dataLabelContainer) + .drag(plotDragMove, plotDragStart, plotDragEnd) + .hover(plotRollOver, plotRollOut); + } + else { + dataLabel.animateWith (mainElm, animObj, _textAttrs, animationDuration, animType); + } + + dataLabel + .data('plotItem', _textAttrs.plotItem) + .data(EVENTARGS, _textAttrs.eventArgs); + + if (_textAttrs.visibility === VISIBLE) { + dataLabel.show(); + } + + dataLabel.x = _textAttrs._x; + dataLabel._x = _textAttrs._x; + dataLabel._y = _textAttrs._y; + }); + } + else { //outside + each (plotItems, function (point) { + pointGraphics = point.graphics; + pointConfig = point.config; + _textCss = pointConfig._textCss; + _textAttrs = pointConfig._textAttrs; + if (!(_textAttrs.text = pointConfig.displayValue)) { + return; + } + pointGraphics = point.graphics; + if (pointConfig.y !== null && pointConfig.y !== undefined) { + dataLabel = pointGraphics.label; + connector = pointGraphics.connector; + connector && connector.show(); + dataLabel && dataLabel.show (); + } + + dataLabel = pointGraphics.label; + + angle = pointConfig.angle; + + if (angle < 0) { + angle = pi2 + angle; + } + // Calculate top right quarter labels + if (angle >= 0 && angle < piBy2) { + quarter = 1; + } else + // Calculate bottom right quarter labels + if (angle < pi) { + quarter = 2; + } else + // Calculate bottom left quarter labels + if (angle < (pi3By2)) { + quarter = 3; + } + // Calculate bottom left quarter labels + else { + quarter = 0; + } + // Now put labels according to each quarter + quarters[quarter].push ( { + point : point, + angle : angle + }); + + /*dataLabel = pointGraphics.label; + if (dataLabel) { + angle = pointConfig.angle; + + if (angle < 0) { + angle = pi2 + angle; + } + // Calculate top right quarter labels + if (angle >= 0 && angle < piBy2) { + quarter = 1; + } else + // Calculate bottom right quarter labels + if (angle < pi) { + quarter = 2; + } else + // Calculate bottom left quarter labels + if (angle < (pi3By2)) { + quarter = 3; + } + // Calculate bottom left quarter labels + else { + quarter = 0; + } + // Now put labels according to each quarter + quarters[quarter].push ( { + point : point, + angle : angle + }); + }*/ + }); + + i = k = 4; + //if excess then remove the low value slice first + while (i --) { + if (skipOverlapLabels) { + // Find labels can fit into the quarters or not + excess = quarters[i].length - maxLabels; + if (excess > 0) { + quarters[i].sort (sortArrayByPoint); // sort by point.y + // remove extra data form the array + // which labels can not be fitted into the quarters + excessArr = quarters[i].splice (0, excess); + //hide all removed labels + for (j = 0, length = excessArr.length; j < length; j += 1) { + point = excessArr[j].point; + pointGraphics = point.graphics; + if (pointGraphics.label) { + pointGraphics.label.attr('visibility', HIDDEN); + } + if (pointGraphics.connector) { + pointGraphics.connector.attr ( { + visibility: HIDDEN + }); + } + } + } + } + // now we sort the data labels by its label angle + quarters[i].sort (sortArrayByAngle); + } + + maxQuardentLabel = mathMax ( + quarters[0].length, + quarters[1].length, + quarters[2].length, + quarters[3].length + ); + labelQuardentHeight = mathMax ( + mathMin (maxQuardentLabel, maxLabels) * labelHeight, + dataLabelsRadiusY + labelHeight + ); + + // reverse 1st and 3rd quardent points + quarters[1].reverse (); + quarters[3].reverse (); + smartLabel.setStyle (style); + + while (k --) { + points = quarters[k]; + length = points.length; + + if (!skipOverlapLabels) { + if (length > maxLabels) { + labelHeight = labelQuardentHeight / length; + } + else { + labelHeight = labelFontSize; + } + halfLabelHeight = labelHeight / 2; + } + + //1st pass + //place all labels at 1st quarter + + // calculate the total available space to put labels + spaceRequired = length * labelHeight; + // calculate the remaining height + remainingHeight = labelQuardentHeight; + //place all child point + for (i = 0; i < length; i += 1, spaceRequired -= labelHeight) { + // Get the y position of the label (radius where data label is to draw) + oriY = mathAbs (labelQuardentHeight * mathSin (points[i].angle)); + if (remainingHeight < oriY) { + oriY = remainingHeight; + } + else if (oriY < spaceRequired) { + oriY = spaceRequired; + } + remainingHeight = (points[i].oriY = oriY) - labelHeight; + } + + //2nd pass (reverse) + align = alignments[k]; + //place all labels at 1st quarter + maxYmayHave = labelQuardentHeight - ((length - 1) * labelHeight); + remainingHeight = 0; + + //place all child point + for (i = points.length - 1; i >= 0; i -= 1, maxYmayHave += labelHeight) { + point = points[i].point; + pointGraphics = point.graphics; + pointConfig = point.config; + _textAttrs = pointConfig._textAttrs; + _textCss = pointConfig._textCss; + + if (pointConfig.y === null || !_textAttrs.text) { + continue; + } + angle = points[i].angle; + sliced = pointConfig.sliced; + dataLabel = pointGraphics.label; + + oriY = mathAbs (labelQuardentHeight * mathSin (angle)); + + if (oriY < remainingHeight) { + oriY = remainingHeight; + } + else if (oriY > maxYmayHave) { + oriY = maxYmayHave; + } + + remainingHeight = oriY + labelHeight; + + y1 = ((oriY + points[i].oriY) / 2); + x1 = centerX + xSign[k] * dataLabelsRadius * mathCos (math.asin (y1 / + labelQuardentHeight)); + + y1 *= ySign[k]; + y1 += centerY; + + y2 = centerY + (radiusY * mathSin (angle)); + x2 = centerX + (radius * mathCos (angle)); + + // Relation: centerX <= connectorStartX <= connectorEndX (for right half and vice + // versa for left half) + (k < 2 && x1 < x2 || k > 1 && x1 > x2) && (x1 = x2); + + x3 = x1 + xDisplacement[k]; + y3 = y1 + halfLabelHeight - 2; + x4 = x3 + xDisplacement[k]; + + _textAttrs._x = x4; + + if (manageLabelOverflow) { + labelWidth = k > 1 ? x4 - canvasLeft: canvasLeft + plotWidth - x4; + smartLabel.setStyle (pointConfig.style); + lineHeight = pluckNumber (mathCeil (parseFloat (pointConfig.style.lineHeight)), + 12) + ((mathCeil (parseFloat (pointConfig.style.border), 12) * 2) || 0); + smartLabelObj = smartLabel.getSmartText (pointConfig.displayValue, labelWidth, + lineHeight); + _textAttrs.text = smartLabelObj.text; + _textAttrs.tooltip = smartLabelObj.tooltext; + } + + //shift the labels at front pieSliceDepthHalf + if (angle < pi) { + y1 += pieSliceDepthHalf; + y2 += pieSliceDepthHalf; + y3 += pieSliceDepthHalf; + } + _textAttrs._y = y3; + // dataLabel.y = y3; + if (sliced) { + + transX = pointConfig.transX; + transY = pointConfig.transY; + x3 = x3 + transX; + x1 = x1 + transX; + x2 = x2 + transX; + y2 = y2 + transY; + x4 = x4 + transX; + } + _textAttrs.visibility = VISIBLE; + _textAttrs['text-anchor'] = align; + prevTextPos = dataLabel && dataLabel.data('textPos'); + if (prevTextPos) { + dataLabel.attr({ + x: prevTextPos.x, + y: prevTextPos.y + }); + } + _textAttrs.x = x4; + _textAttrs.y = y1; + if (!isRotating && prevTextPos) { + dataLabel.animateWith(mainElm, animObj, _textAttrs, animationDuration, + animType); + } + else { + if (!dataLabel) { + dataLabel = pointGraphics.label = paper + .text(_textAttrs, _textCss, dataLabelContainer) + .drag(plotDragMove, plotDragStart, plotDragEnd) + .hover(plotRollOver, plotRollOut); + } + else { + _textAttrs && dataLabel.attr(_textAttrs); + } + } + dataLabel.data('textPos', { + x: x4, + y: y1 + }) + .data('plotItem', _textAttrs.plotItem) + .data(EVENTARGS, _textAttrs.eventArgs); + + dataLabel.x = _textAttrs._x; + // storing original x value + // to use while slicing in (IE Issue original x get changed form animate) + dataLabel._x = _textAttrs._x; + dataLabel.y = _textAttrs._y; + + if (_textAttrs.tooltip) { + dataLabel.tooltip(_textAttrs.tooltip); + delete _textAttrs.tooltip; + } + //draw the connector + // draw the connector + if (outside && connectorWidth && enableSmartLabels) { + connector = pointGraphics.connector; + if (!pointConfig.connectorPath) { + isNewElem = true; + } + pointConfig.connectorPath = connectorPath = [ + M, + x2, y2, // base + L, + isSmartLineSlanted ? x1 : x2, y1, // first break, next to the label + x3, y1 // end of the string at the label + ]; + + attr = { + path: connectorPath, + 'stroke-width': connectorWidth, + stroke: dataLabelsOptions.connectorColor || '#606060', + visibility: VISIBLE + }; + if (connector) { + if (!isRotating && !isNewElem) { + connector.animateWith(mainElm, animObj, attr, animationDuration, + animType); + } + else { + connector.attr(attr); + + } + } + } + } + } + } + } + }; + } ()), + animate: function () { + var i, + point, + graphic, + pointGraphics, + pointConfig, + element, + args, + up, + start, + end, + chart = this, + chartGraphics = chart.graphics, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + dataSetComponents = dataSet.components, + plotItems = dataSetComponents.data, + dataSetGroup = chartGraphics.datasetGroup, + len = plotItems.length, + alphaAnim = dataSetConfig.alphaAnimation, + animStartFN = function () { + if (chart.disposed || chart.disposing) { + return; + } + chart.placeDataLabels (false); + }, + animationObj = chart.get('config', 'animationObj'), + animationDuration = animationObj.duration || 0, + mainElm = animationObj.dummyObj, + animObj = animationObj.animObj, + animType = animationObj.animType; + + if (alphaAnim) { + dataSetGroup.attr ( { + opacity: 0 + }); + dataSetGroup.animateWith(mainElm, animObj, { + opacity: 1 + }, animationDuration, animType, animStartFN); + } + else { + for (i = 0; i < len; i++) { + point = plotItems[i]; + pointGraphics = point.graphics; + pointConfig = point.config; + args = pointConfig.shapeArgs; + up = 2 * mathPI; + element = pointGraphics.element; + + // start values + if (element) { + element.attr ( { + start: up, + end: up + }); + + start = args.start; + end = args.end; + + /* Raphael animation do not support start and end attributes. + * Since the attribute setting for Pie3D goes through attrFN + * method of Pie3DManager, we can safely use some unused + * attributes for pie3D to pass through Raphael animation module + * and trap the attributes to convert to start and end in attrFN */ + graphic.animateWith (mainElm, animObj, { + cx: start - up, + cy: end - up + }, animationDuration, animType); + } + } + } + }, + _rotate: function (setAngle) { + var chart = this, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + dataSetComponents = dataSet.components, + data = dataSetComponents.data, + slicedOffset = dataSetConfig.slicedOffset, + slicedOffsetY = dataSetConfig.slicedOffsetY, + startingAngle = dataSetConfig.startAngle, + angle; + + setAngle = !isNaN (setAngle) ? setAngle : -dataSetConfig._lastAngle; + + angle = (setAngle - startingAngle) % 360; + + dataSetConfig.startAngle = pluckNumber (setAngle, + dataSetConfig.startAngle) % 360; + + angle = - (angle * mathPI) / 180; + + if (dataSetComponents.Pie3DManager) { + dataSetComponents.Pie3DManager.rotate (angle); + } + + each (data, function (point) { + var slicedTranslation = [], + pointGraphics = point.graphics, + pointConfig = point.config, + element = pointGraphics.element, + args = pointConfig.shapeArgs, + newAngleArgs = { + start: (args.start += angle), + end: (args.end += angle) + }, + pointAngle = pointConfig.angle = normalizeAngle ((newAngleArgs.start + newAngleArgs.end) / 2), + sliced = pointConfig.sliced, + cosAngle = mathCos (pointAngle), + sinAngle = mathSin (pointAngle); + + //set the slicedTranslation + slicedTranslation = pointConfig.slicedTranslation = [ + mathRound (cosAngle * slicedOffset), + mathRound (sinAngle * slicedOffsetY) + ]; + + pointConfig.transX = slicedTranslation[0]; + pointConfig.transY = slicedTranslation[1]; + pointConfig.slicedX = sliced ? mathCos (angle) * slicedOffset : 0; + pointConfig.slicedY = sliced ? mathSin (angle) * slicedOffsetY : 0; + + if (element && sliced) { + element.attr ( { + transform: 't' + slicedTranslation[0] + ',' + slicedTranslation[1] + }); + + } + + }); + + chart.placeDataLabels (true, data); + + }, + _plotRollOver: function (e) { + var plotItem = this.data ('plotItem'), + index = plotItem.index, + chart = plotItem.chart, + chartConfig = chart.config, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + dataSetComponents = dataSet.components, + data = dataSetComponents.data[index], + setGraphics = data.graphics, + setConfig = data.config, + element = setGraphics.element, + hoverEffects = setConfig.hoverEffects; + if (!dataSetConfig.isRotating) { + plotEventHandler.call (element, chart, e, ROLLOVER); + hoverEffects.enabled && element.attr(hoverEffects); + } + chartConfig.isHovered = true; + }, + + _plotRollOut: function (e) { + var plotItem = this.data ('plotItem'), + index = plotItem.index, + chart = plotItem.chart, + chartConfig = chart.config, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + dataSetComponents = dataSet.components, + data = dataSetComponents.data[index], + setGraphics = data.graphics, + setConfig = data.config, + element = setGraphics.element; + + if (!dataSetConfig.isRotating) { + plotEventHandler.call (element, chart, e, ROLLOUT); + element.attr({ + color: setConfig.color.color.split(',')[0], + alpha: setConfig._3dAlpha, + borderWidth: setConfig.borderWidth, + borderColor: setConfig.borderColor + }); + } + chartConfig.isHovered = false; + }, + + _plotDragStart: function (x, y, evt) { + var plotItem = this.data ('plotItem'), + chart = plotItem.chart, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + angle; + + dataSetConfig.isRightClicked = !hasTouch && (evt.button !== 0 && evt.button !== 1) ? true : false; + if (!dataSetConfig.enableRotation || dataSetConfig.isRightClicked) { + return; + } + + dataSetConfig.isRotating = false; + angle = getClickArcTangent.call (evt, x, y, dataSetConfig.center, + (dataSetConfig.chartPosition = getPosition(chart.linkedItems.container)), dataSetConfig.pieYScale); + dataSetConfig.dragStartAngle = angle; + dataSetConfig._lastAngle = -dataSetConfig.startAngle; + dataSetConfig.startingAngleOnDragStart = dataSetConfig.startAngle; + }, + + _plotDragEnd: function (e) { + var plotItem = this.data ('plotItem'), + index = plotItem.index, + chart = plotItem.chart, + chartConfig = chart.config, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + dataSetComponents = dataSet.components, + Pie3DManager = dataSetComponents.Pie3DManager, + startingAng = dataSetConfig.startAngle; + // save state + /*reflowUpdate = { + hcJSON: { + series: [ { + startAngle: startingAng + }] + } + };*/ + /*if (!chart.disposed) { + extend2 (chart.logic.chartInstance.jsVars._reflowData, + reflowUpdate, true); + }*/ + + if (dataSetConfig.isRightClicked) { + return; + } + if (dataSetConfig.isRotating) { + /* The events mouseup, dragend and click are raised in order. In order + * to update the flag isRotating to false post click event, setTimeout + * called, to take immediate effect, is programmed to update the flag. + * Thus, the flag gets updated post the series of events, in effect. + * NB: Click event is subscribed conditionally. + */ + setTimeout (function () { + dataSetConfig.isRotating = false; + }, 0); + /** + * @event FusionCharts#rotationEnd + * @group chart:pie-slice + * + * @param { number} startingAngle - The initial angle. (desc) + * @param { number} changeInAngle - It is the difference between the starting angle and the starting + * angle on the drag start. + */ + global.raiseEvent ('rotationEnd', { + startingAngle: normalizeAngle (startingAng, true), + changeInAngle: startingAng - dataSetConfig.startingAngleOnDragStart + }, chart.chartInstance); + + !chartConfig.isHovered && Pie3DManager.colorObjs[index] && + Pie3DManager.onPlotHover (index, false); + } + else { + chart._plotGraphicClick.call (this,e); + } + }, + + _plotDragMove: function (dx, dy, x, y, evt) { + var plotItem = this.data ('plotItem'), + chart = plotItem.chart, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + angle, + currentTime, + deltaAngle; + + if (isNaN(dx) || isNaN(dy) || !dataSetConfig.enableRotation || dataSetConfig.singletonCase || + dataSetConfig.isRightClicked) { + return; + } + + angle = getClickArcTangent.call (evt, x, y, dataSetConfig.center, + dataSetConfig.chartPosition, dataSetConfig.pieYScale); + + if (!dataSetConfig.isRotating) { + dataSetConfig.dragStartAngle !== angle && (dataSetConfig.isRotating = true); + /** + * This event is fired when a pie or doughnut chart's rotation is triggered. + * + * @event FusionCharts#rotationStart + * @group chart:pie-slice + * @param { number} startingAngle - This indicates the angle from where rotation started. + */ + global.raiseEvent ('rotationStart', { startingAngle: normalizeAngle (dataSetConfig.startAngle, + true)}, chart.chartInstance); + } + + deltaAngle = angle - dataSetConfig.dragStartAngle; + + dataSetConfig.dragStartAngle = angle; + dataSetConfig.moveDuration = 0; + + dataSetConfig._lastAngle += (deltaAngle * 180 / mathPI); + currentTime = new Date ().getTime (); + + if (!dataSetConfig._lastTime || (dataSetConfig._lastTime + dataSetConfig.timerThreshold < + currentTime)) { + if (!dataSetConfig._lastTime) { + chart._rotate (); + } + dataSetConfig.timerId = setTimeout (function () { + if (!chart.disposed || !chart.disposing) { + chart._rotate (); + } + }, dataSetConfig.timerThreshold); + dataSetConfig._lastTime = currentTime; + } + }, + // manages the spaces when no radius is given. + _stubRadius: function (chartWorkingWidth, labelMaxW, chartWorkingHeight, labelDistance, slicingDistance, + lineHeight, pieMinRadius) { + var chart = this, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + conf = dataSet.config, + fcJSONChart = dataSet.config, + userGivenSlicingDist = pluckNumber (fcJSONChart.slicingdistance), + dataLabelOptions = conf.dataLabelOptions || + (conf.dataLabelOptions = dataSet._parseDataLabelOptions ()), + availableRadius = 0, + // Slicing distance can not be less then the MINSLICINGDIST (10) + MINSLICINGDIST = 10, + pieYScale = conf.pieYScale, + pieSliceDepth = conf.pieSliceDepth, + shortFall; + chartWorkingHeight -= pieSliceDepth; + availableRadius = mathMin ((chartWorkingWidth / 2) - labelMaxW - slicingDistance, + ((chartWorkingHeight / 2) - lineHeight) / pieYScale) - labelDistance; + + if (availableRadius >= pieMinRadius) { //there has space for min width + pieMinRadius = availableRadius; + } + else if (!userGivenSlicingDist) { /** @todo smartyfy Labels */ + // If slicing distance is not given by the user, adjust slicing distance based on pie radius. + shortFall = pieMinRadius - availableRadius; + // Now reduce the pie slicing distance, but restrict the minimum slicing distance to 10 pixels. + slicingDistance = labelDistance = mathMax (mathMin (labelDistance - shortFall, + slicingDistance), MINSLICINGDIST); + } + conf.slicingDistance = slicingDistance; + conf.pieMinRadius = pieMinRadius; + dataLabelOptions.distance = labelDistance; + + return pieMinRadius; + }, + _startingAngle: function (angle, relative) { + var ang, + chart = this, + dataSet = chart.components.dataset[0], + seriesData = dataSet.config, + // Angle is differently handled in Pie2D and Pie3D. So, angles is converted + // accordingly to the same base. Its radian in 2D while in degrees in 3D. + // Moreover, sense of positive angle is opposite in the two. + currentAngle = (ang = seriesData.startAngle) + (ang < 0 ? 360 : 0); + + if (!isNaN(angle)) { + if (!(seriesData.singletonCase || seriesData.isRotating)) { + angle += relative ? currentAngle : 0; + chart._rotate(angle); + currentAngle = angle; + } + } + // Angle normalised in the range of [0, 360] + return mathRound(((currentAngle %= 360) + (currentAngle < 0 ? 360 : 0)) * 100) / 100; + } + }, chartAPI.pie2d, { + plotborderthickness: 0.1, + alphaanimation: 1 + }); + + // **** pie3d manager ***** // + // set the new aimatable properites + if(R._availableAnimAttrs && R._availableAnimAttrs.cx){ + // assuming that cx is also numaric type + R._availableAnimAttrs.innerR = R._availableAnimAttrs.depth = R._availableAnimAttrs.radiusYFactor = + R._availableAnimAttrs.start = R._availableAnimAttrs.end = R._availableAnimAttrs.cx; + } + + // Pie 3D point class + function Pie3DManager (chart) { + var manager = this; + + manager.config = {}; + manager.linkedItems = { + chart: chart + }; + } + + Pie3DManager.prototype = { + configure: function (depth, hasOnePoint, use3DLighting, isDoughnut) { + var manager = this, + chart = manager.linkedItems.chart, + renderer = chart.get('components', 'paper'), + seriesGroup = chart.get('graphics', 'datasetGroup'); + if (isObject (depth)) { + depth = depth.depth; + hasOnePoint = depth.hasOnePoint; + use3DLighting = depth.use3DLighting; + isDoughnut = depth.isDoughnut; + } + // @todo: need to have pie to daughnut transpose + + //add the values to the instance + if (!manager.renderer) { + manager.renderer = renderer; + } + manager.hasOnePoint = hasOnePoint; + manager.use3DLighting = use3DLighting; + manager.isDoughnut = isDoughnut; + manager.depth = depth; + + //create required groups + /** @todo if requared create bottom side group */ + !manager.bottomBorderGroup && (manager.bottomBorderGroup = + renderer.group('bottom-border', seriesGroup)); + + // @todo: need to have animate with for dept + manager.bottomBorderGroup.attr ({ + transform: 't0,' + depth + }); + !manager.slicingWallsBackGroup && (manager.slicingWallsBackGroup = + renderer.group ('slicingWalls-back-Side', seriesGroup)); + !manager.slicingWallsFrontGroup && (manager.slicingWallsFrontGroup = renderer + .group ('slicingWalls-front-Side', seriesGroup)); + !manager.topGroup && (manager.topGroup = renderer.group ('top-Side', seriesGroup)); + + + // if arrays are not availabel the create the m for first time + !manager.pointElemStore && (manager.pointElemStore = []); + !manager.slicingWallsArr && (manager.slicingWallsArr = []); + + //few reusable code + manager.moveCmdArr = [M]; + manager.lineCmdArr = [L]; + manager.closeCmdArr = [Z]; + + manager.colorObjs = []; + }, + + getArcPath : function (cX, cY, startX, startY, endX, endY, rX, rY, isClockWise, isLargeArc) { + return (startX == endX && startY == endY) ? [] : [A, rX, rY, 0, isLargeArc, isClockWise, endX, endY]; + + }, + + _parseSliceColor : function (color, alpha, pointConf) { + var manager = this, + dark1, + dark2, + dark3, + dark4, + dark5, + dark6, + light1, + light2, + light3, + light4, + light5, + light6, + alpha1, + colorStr1, + colorStr2, + alphaStr1, + alphaStr2, + alphaStr3, + colorStr3, + colorStr4, + colorStr5, + alphaFactor = 3, + lighting3D = manager.use3DLighting, + cacheStore = lighting3D ? pie3DCacheColorStore.lighting3D : pie3DCacheColorStore.lighting2D, + colorsObj, + radiusYFactor = pointConf.radiusYFactor, + cx = pointConf.cx, + cy = pointConf.cy, + rx = pointConf.r, + ry = rx * radiusYFactor, + innerRx = pointConf.innerR || 0, + rightX = cx + rx, + leftX = cx - rx, + rightInnerX = cx + innerRx, + leftInnerX = cx - innerRx; + + alpha = alpha || 100; + alpha1 = alpha / 2; + + // check in cacheStore + if (cacheStore[color] && cacheStore[color][alpha]) { // if found return the color + colorsObj = cacheStore[color][alpha]; + } + else {// create the color components + if (!cacheStore[color]) { + cacheStore[color] = {}; + } + if (!cacheStore[color][alpha]) { + cacheStore[color][alpha] = {}; + } + colorsObj = cacheStore[color][alpha]; + + if (lighting3D) { + dark1 = getDarkColor(color, 80); + dark2 = getDarkColor(color, 75); + light1 = getLightColor(color, 85); + light2 = getLightColor(color, 70); + light3 = getLightColor(color, 40); + + light4 = getLightColor(color, 50); + light5 = getLightColor(color, 30); + light6 = getLightColor(color, 65); + dark3 = getDarkColor(color, 85); + dark4 = getDarkColor(color, 69); + dark5 = getDarkColor(color, 75); + dark6 = getDarkColor(color, 95); + } + else { + alphaFactor = 10; + dark1 = getDarkColor(color, 90); + dark2 = getDarkColor(color, 87); + light1 = getLightColor(color, 93); + light2 = getLightColor(color, 87); + light3 = getLightColor(color, 80); + + light6 = light4 = getLightColor(color, 85); + light5 = getLightColor(color, 80); + dark6 = dark3 = getDarkColor(color, 85); + dark4 = getDarkColor(color, 75); + dark5 = getDarkColor(color, 80); + } + colorStr1 = dark2 + COMMASTRING + light1 + COMMASTRING + light2 + + COMMASTRING + light1 + COMMASTRING + dark2; + alphaStr1 = alpha + COMMASTRING + alpha + COMMASTRING + alpha + + COMMASTRING + alpha + COMMASTRING + alpha; + colorStr2 = dark2 + COMMASTRING + color + COMMASTRING + light1 + + COMMASTRING + color + COMMASTRING + dark2; + alphaStr2 = alpha1 + COMMASTRING + alpha1 + COMMASTRING + alpha1 + + COMMASTRING + alpha1 + COMMASTRING + alpha1; + colorStr3 = dark2 + COMMASTRING + color + COMMASTRING + light3 + + COMMASTRING + color + COMMASTRING + dark2; + colorStr4 = dark5 + COMMASTRING + light1 + COMMASTRING + light4 + + COMMASTRING + light1 + COMMASTRING + dark4; + colorStr5 = 'FFFFFF' + COMMASTRING + 'FFFFFF' + COMMASTRING + 'FFFFFF' + + COMMASTRING + 'FFFFFF' + COMMASTRING + 'FFFFFF'; + alphaStr3 = 0 + COMMASTRING + alpha1/alphaFactor + COMMASTRING + alpha/alphaFactor + + COMMASTRING + alpha1/alphaFactor + COMMASTRING + 0; + + if (hasSVG) { + colorsObj.top = { + FCcolor : { + gradientUnits : 'userSpaceOnUse', + radialGradient : true, + color : light6 + COMMASTRING + dark6, + alpha : alpha + COMMASTRING + alpha, + ratio : '0,100' + } + }; + } + else { + colorsObj.top = { + FCcolor : { + gradientUnits : 'objectBoundingBox', + color : light2 + COMMASTRING + light2 + COMMASTRING + light1 + COMMASTRING + dark2, + alpha : alpha + COMMASTRING + alpha + COMMASTRING + alpha + COMMASTRING + alpha, + angle : -72, + ratio : '0,8,15,77' + } + }; + } + + colorsObj.frontOuter = { + FCcolor : { + gradientUnits : 'userSpaceOnUse', + y1 : 0, + y2 : 0, + color : colorStr4, + alpha : alphaStr1, + angle : 0, + ratio : '0,20,15,15,50' + } + }; + colorsObj.backOuter = { + FCcolor : { + gradientUnits : 'userSpaceOnUse', + y1 : 0, + y2 : 0, + color : colorStr3, + alpha : alphaStr2, + angle : 0, + ratio : '0,62,8,8,22' + } + }; + colorsObj.frontInner = { + FCcolor : { + gradientUnits : 'userSpaceOnUse', + y1 : 0, + y2 : 0, + color : colorStr2, + alpha : alphaStr2, + angle : 0, + ratio : '0,25,5,5,65' + } + }; + colorsObj.backInner = { + FCcolor : { + gradientUnits : 'userSpaceOnUse', + y1 : 0, + y2 : 0, + color : colorStr1, + alpha : alphaStr1, + angle : 0, + ratio : '0,62,8,8,22' + } + }; + colorsObj.topBorder = { + FCcolor : { + gradientUnits : 'userSpaceOnUse', + y1 : 0, + y2 : 0, + color : colorStr5, + alpha : alphaStr3, + angle : 0, + ratio : '0,20,15,15,50' + } + }; + colorsObj.topInnerBorder = { + FCcolor : { + gradientUnits : 'userSpaceOnUse', + y1 : 0, + y2 : 0, + color : colorStr5, + alpha : alphaStr3, + angle : 0, + ratio : '0,50,15,15,20' + } + }; + colorsObj.bottom = toRaphaelColor(convertColor(color, alpha1)); + /** @todo will be changed w. r. t. angle */ + colorsObj.startSlice = toRaphaelColor(convertColor(dark1, alpha)); + colorsObj.endSlice = toRaphaelColor(convertColor(dark1, alpha)); + } + + + // check if non color attributes match, else apply them + if (colorsObj.cx !== cx || colorsObj.cy !== cy || colorsObj.rx !== rx || + colorsObj.radiusYFactor !== radiusYFactor || colorsObj.innerRx !== innerRx) { + // appaly positional properties in colors + if (hasSVG) { + colorsObj.top.FCcolor.cx = cx; + colorsObj.top.FCcolor.cy = cy; + colorsObj.top.FCcolor.r = rx; + colorsObj.top.FCcolor.fx = cx - 0.3 * rx; + colorsObj.top.FCcolor.fy = cy + ry * 1.2; + } + colorsObj.topBorder.FCcolor.x1 = colorsObj.backOuter.FCcolor.x1 = colorsObj.frontOuter.FCcolor.x1 = + leftX; + colorsObj.topBorder.FCcolor.x2 = colorsObj.backOuter.FCcolor.x2 = colorsObj.frontOuter.FCcolor.x2 = + rightX; + colorsObj.topInnerBorder.FCcolor.x1 = colorsObj.backInner.FCcolor.x1 = + colorsObj.frontInner.FCcolor.x1 = leftInnerX; + colorsObj.topInnerBorder.FCcolor.x2 = colorsObj.backInner.FCcolor.x2 = + colorsObj.frontInner.FCcolor.x2 = rightInnerX; + + + + // Set positional attributes in color Object + colorsObj.cx = cx; + colorsObj.cy = cy; + colorsObj.rx = rx; + colorsObj.radiusYFactor = radiusYFactor; + colorsObj.innerRx = innerRx; + + } + + return colorsObj; + }, + + rotate : function (angle) { + var manager = this, + pointElemStore = manager.pointElemStore, + x = 0, ln = pointElemStore.length, point, confObject; + if (!manager.hasOnePoint) { + for (; x < ln; x += 1) { + point = pointElemStore[x]; + confObject = point._confObject; + confObject.start += angle; + confObject.end += angle; + manager._setSliceShape(confObject); + } + manager.refreshDrawing(); + } + }, + + removeSlice: function (slice) { + var manager = this, + pointElemStore = manager.pointElemStore, + confObject = slice._confObject, + elements = confObject.elements, + slicingWallsArr = manager.slicingWallsArr, + x, + ln = pointElemStore.length, + point, + wallElement; + // remove the slice from the point store + for (x = ln - 1; x >= 0; x -= 1) { + point = pointElemStore[x]; + if (point === slice) { + pointElemStore.splice(x,1); + } + } + // remove the side elements from the side wall arr + ln = slicingWallsArr.length; + for (x = ln - 1; x >= 0; x -= 1) { + wallElement = slicingWallsArr[x]; + if (wallElement === elements.startSlice || wallElement === elements.frontOuter1 || + wallElement === elements.frontOuter || wallElement === elements.backInner || + wallElement === elements.endSlice) { + slicingWallsArr.splice(x, 1); + } + } + + // hide corrosponding elements + slice.hide && slice.hide(); + + // store the element in pool for future reuse + if (!manager._slicePool) { + manager._slicePool = []; + } + manager._slicePool.push(slice); + + manager.refreshDrawing(); + }, + useSliceFromPool: function () { + var manager = this, + slicePool = manager._slicePool || (manager._slicePool = []), + slicingWallsArr = manager.slicingWallsArr, + newSlice = false, + elements; + if (slicePool.length) { + newSlice = slicePool.shift(); + // restore the element in point store + manager.pointElemStore.push(newSlice); + // show the slice + newSlice.show(); + // push the side walls in to the side wall array + elements = newSlice._confObject.elements; + slicingWallsArr.push(elements.startSlice, elements.frontOuter1, elements.frontOuter); + + elements.backInner && slicingWallsArr.push(elements.backInner); + slicingWallsArr.push(elements.endSlice); + } + return newSlice; + }, + // This function do the z-index management + refreshDrawing : (function () { + var elementZSortFn = function (a, b) { + var centerAngleDiff = (a._conf.index - b._conf.index) || (a._conf.cIndex - b._conf.cIndex) || + (a._conf.isStart - b._conf.isStart) || (a._conf.si - b._conf.si); + //!centerAngleDiff && console.log("aaa"); + return centerAngleDiff; + }, + getStartIndex = function (array) { + var l, + i, + startsAtFrontHalf, + startIndex = array[0] && array[0]._conf.index, + atFrontHalf, + index; + + startsAtFrontHalf = startIndex <= pi; + for (i = 1, l = array.length; i < l; i += 1) { + index = array[i]._conf.index; + atFrontHalf = index <= pi; + if (atFrontHalf != startsAtFrontHalf || index < startIndex) { + return i; + } + } + return 0; + }; + + return function () { + var slicingWallsArr = this.slicingWallsArr, + x = 0, + sWall, + ln = slicingWallsArr.length, + startIndex, + lastElem2, + lastElem3, + index, + frontGroup = this.slicingWallsFrontGroup, + backGroup = this.slicingWallsBackGroup; + + // sort the slicing walls for z-placing + slicingWallsArr.sort(elementZSortFn); + // find the index which cross the pi line + startIndex = getStartIndex(slicingWallsArr); + + for (; x < ln; x += 1, startIndex += 1) { + if (startIndex === ln) { + startIndex = 0; + } + sWall = slicingWallsArr[startIndex], index = sWall._conf.index; + if (index < piBy2) { + frontGroup.appendChild(sWall); + } + else if (index <= pi) { + if (lastElem2) { + sWall.insertBefore(lastElem2); + } + else { + frontGroup.appendChild(sWall); + } + lastElem2 = sWall; + } + else if (index <= pi3By2) { + if (lastElem3) { + sWall.insertBefore(lastElem3); + } + else { + backGroup.appendChild(sWall); + } + lastElem3 = sWall; + } + else{ + backGroup.appendChild(sWall); + } + } + }; + })(), + // @todo: needs to be optimize + _setSliceShape : function (pointConf, doNotApply) { + var Pie3DManager = this, + getArcPath = Pie3DManager.getArcPath, + startOri = pointConf.start, endOri = pointConf.end, + start = normalizeAngle(startOri), + end = normalizeAngle(endOri), + scaleAngle, + startCos, startSin, endCos, endSin, startOuterX, startOuterY, + startOuterTopClipX, startOuterTopClipY, endOuterTopClipX, endOuterTopClipY, + startInnerX, startInnerY, endInnerX, endInnerY, startInnerY1, endInnerY1, + borderThickness = 1, + isDoughnut = Pie3DManager.isDoughnut, + radiusYFactor = pointConf.radiusYFactor, + cx = pointConf.cx, + cy = pointConf.cy, + rx = pointConf.r, + ry = rx * radiusYFactor, + topCliprx = rx + (hasSVG ? -borderThickness : 2), + topClipry = ry + (hasSVG ? -borderThickness : 2), + innerRx = pointConf.innerR || 0, + innerRy = innerRx * radiusYFactor, + depth = Pie3DManager.depth, + depthY = depth + cy, + rightX = cx + rx, + leftX = cx - rx, + rightInnerX = cx + innerRx, + leftInnerX = cx - innerRx, + topY = cy - ry, + bottomY = depthY + ry, + clipPathforNoClip = [M, leftInnerX, topY, L, leftInnerX, bottomY, Z], + elements = pointConf.elements, + startOuterY1, endOuterX, endOuterY, endOuterY1, + tempArr1, tempArr2, tempArr3, tempArr4, tempArr5, tempArr6, + moveCmdArr, + lineCmdArr, + closeCmdArr, + centerPoint, + leftPoint, + topPoint, + rightPoint, + bottomPoint, + leftDepthPoint, + rightDepthPoint, + leftInnerPoint, + rightInnerPoint, + leftInnerDepthPoint, + rightInnerDepthPoint, + pathAttrString = 'path', + middleAngle = (start + end) / 2, // not applicable for the slices that are crossing the 0deg + frontOuterIndex, + BackOuterIndex, + crossed2Pi = start > end; + + startCos = mathCos(start); + startSin = mathSin(start); + endCos = mathCos(end); + endSin = mathSin(end); + + startOuterX = cx + (rx * startCos); + startOuterY = cy + (ry * startSin); + startOuterTopClipX = cx + (topCliprx * startCos); + startOuterTopClipY = cy + (topClipry * startSin); + startOuterY1 = startOuterY + depth; + endOuterX = cx + (rx * endCos); + endOuterY = cy + (ry * endSin); + endOuterTopClipX = cx + (topCliprx * endCos); + endOuterTopClipY = cy + (topClipry * endSin); + endOuterY1 = endOuterY + depth; + + if (isDoughnut) {//doughnut like slice + startInnerX = cx + (innerRx * startCos); + startInnerY = cy + (innerRy * startSin); + startInnerY1 = startInnerY + depth; + endInnerX = cx + (innerRx * endCos); + endInnerY = cy + (innerRy * endSin); + endInnerY1 = endInnerY + depth; + pointConf.startSlice = [M, startOuterX, startOuterY, L, startOuterX, startOuterY1, startInnerX, + startInnerY1, startInnerX, startInnerY, Z]; + pointConf.endSlice = [M, endOuterX, endOuterY, L, endOuterX, endOuterY1, endInnerX, endInnerY1, + endInnerX, endInnerY, Z]; + } + else { + pointConf.startSlice = [M, startOuterX, startOuterY, L, startOuterX, startOuterY1, cx, depthY, cx, + cy, Z]; + pointConf.endSlice = [M, endOuterX, endOuterY, L, endOuterX, endOuterY1, cx, depthY, cx, cy, Z]; + } + + if (hasSVG) { + scaleAngle = getAbsScaleAngle (start, end); + //create the clip for top and bottom + if (!isDoughnut) { + pointConf.clipTopPath = [[M, startOuterX, startOuterY, + A, rx, ry, 0, (scaleAngle > pi ? 1 : 0), 1, endOuterX, endOuterY, + L, cx, cy, + Z]]; + } + else { + pointConf.clipTopPath = [[M, startOuterX, startOuterY, A, rx, ry, 0, (scaleAngle > pi ? 1 : 0), + 1, endOuterX, endOuterY, L, endInnerX, endInnerY, A, innerRx, innerRy, + 0, (scaleAngle > pi ? 1 : 0), 0, startInnerX, startInnerY, Z]]; + } + + pointConf.clipOuterFrontPath1 = [clipPathforNoClip]; + + pointConf.clipTopBorderPath = [[M, startOuterTopClipX, startOuterTopClipY, A, topCliprx, topClipry, + 0, (scaleAngle > pi ? 1 : 0), 1, endOuterTopClipX, endOuterTopClipY, + L, endOuterX, endOuterY, endOuterX, endOuterY + borderThickness, A, + rx, ry, 0, (scaleAngle > pi ? 1 : 0), 0, startOuterX, startOuterY + + borderThickness, L, startOuterX, startOuterY, Z]]; + + if (startOri != endOri) { + if(start > end) {//crossed the 0 deg line + if (start < pi){//crossed the 180 deg line also + pointConf.clipOuterFrontPath = [[M, rightX, cy, + A, rx, ry, 0, 0, 1, endOuterX, endOuterY, + V, depth, + A, rx, ry, 0, 0, 0, rightX, cy + depth, + Z]]; + pointConf.clipOuterFrontPath1 = [[M, leftX, cy, + A, rx, ry, 0, 0, 0, startOuterX, startOuterY, + V, depth, + A, rx, ry, 0, 0, 1, leftX, cy + depth, + Z]]; + pointConf.clipOuterBackPath = [[M, rightX, cy, + A, rx, ry, 0, 1, 0, leftX, cy, + V, depth, + A, rx, ry, 0, 1, 1, rightX, cy + depth, + Z]]; + if (isDoughnut) { + pointConf.clipInnerBackPath = [[M, rightInnerX, cy, + A, innerRx, innerRy, 0, 1, 0, leftInnerX, cy, + V, depth, + A, innerRx, innerRy, 0, 1, 1, rightInnerX, cy + + depth, Z]]; + + pointConf.clipInnerFrontPath = [[M, rightInnerX, cy, + A, innerRx, innerRy, 0, 0, 1, endInnerX, endInnerY, + V, depth, + A, innerRx, innerRy, 0, 0, 0, rightInnerX, cy + + depth, Z, + M, leftInnerX, cy, + A, innerRx, innerRy, 0, 0, 0, startInnerX, + startInnerY, V, depth, + A, innerRx, innerRy, 0, 0, 1, leftInnerX, cy + + depth, Z]]; + + } + } + else if( end > pi) {//crossed the 180 deg line also + pointConf.clipOuterFrontPath = [[M, rightX, cy, + A, rx, ry, 0, 1, 1, leftX, cy, + V, depth, + A, rx, ry, 0, 1, 0, rightX, cy + depth, + Z]]; + pointConf.clipOuterBackPath = [[M, leftX, cy, + A, rx, ry, 0, 0, 1, endOuterX, endOuterY, + V, depth, + A, rx, ry, 0, 0, 0, leftX, cy + depth, + Z, + M, rightX, cy, + A, rx, ry, 0, 0, 0, startOuterX, startOuterY, + V, depth, + A, rx, ry, 0, 0, 1, rightX, cy + depth, + Z]]; + if (isDoughnut) { + + pointConf.clipInnerFrontPath = [[M, rightInnerX, cy, + A, innerRx, innerRy, 0, 1, 1, leftInnerX, cy, + V, depth, + A, innerRx, innerRy, 0, 1, 0, rightInnerX, cy + + depth, Z]]; + + pointConf.clipInnerBackPath = [[M, leftInnerX, cy, + A, innerRx, innerRy, 0, 0, 1, endInnerX, endInnerY, + V, depth, + A, innerRx, innerRy, 0, 0, 0, leftInnerX, cy + + depth, Z, + M, rightInnerX, cy, + A, innerRx, innerRy, 0, 0, 0, startInnerX, + startInnerY, V, depth, + A, innerRx, innerRy, 0, 0, 1, rightInnerX, cy + + depth, Z]]; + } + } + else { + pointConf.clipOuterFrontPath = [[M, rightX, cy, + A, rx, ry, 0, 0, 1, endOuterX, endOuterY, + V, depth, + A, rx, ry, 0, 0, 0, rightX, cy + depth, + Z]]; + pointConf.clipOuterBackPath = [[M, startOuterX, startOuterY, + A, rx, ry, 0, 0, 1, rightX, cy, + V, depth, + A, rx, ry, 0, 0, 0, startOuterX, startOuterY1, + Z]]; + if (isDoughnut) { + + pointConf.clipInnerFrontPath = [[M, rightInnerX, cy, + A, innerRx, innerRy, 0, 0, 1, endInnerX, endInnerY, + V, depth, + A, innerRx, innerRy, 0, 0, 0, rightInnerX, cy + + depth, Z]]; + + pointConf.clipInnerBackPath = [[M, startInnerX, startInnerY, + A, innerRx, innerRy, 0, 0, 1, rightInnerX, cy, + V, depth, + A, innerRx, innerRy, 0, 0, 0, startInnerX, + startInnerY1, Z]]; + } + } + } + else if (start < pi){ + if (end > pi) {//crossed the 180 deg line only + pointConf.clipOuterFrontPath = [[M, startOuterX, startOuterY, + A, rx, ry, 0, 0, 1, leftX, cy, + V, depth, + A, rx, ry, 0, 0, 0, startOuterX, startOuterY1, + Z]]; + pointConf.clipOuterBackPath = [[M, leftX, cy, + A, rx, ry, 0, 0, 1, endOuterX, endOuterY, + V, depth, + A, rx, ry, 0, 0, 0, leftX, cy + depth, + Z]]; + if (isDoughnut) { + pointConf.clipInnerFrontPath = [[M, startInnerX, startInnerY, + A, innerRx, innerRy, 0, 0, 1, leftInnerX, + cy, V, depth, + A, innerRx, innerRy, 0, 0, 0, startInnerX, + startInnerY1, Z]]; + pointConf.clipInnerBackPath = [[M, leftInnerX, cy, + A, innerRx, innerRy, 0, 0, 1, endInnerX, + endInnerY, V, depth, + A, innerRx, innerRy, 0, 0, 0, leftInnerX, + cy + depth, Z]]; + } + } + else {//haven't crossed any thing + pointConf.clipOuterFrontPath = [[M, startOuterX, startOuterY, + A, rx, ry, 0, 0, 1, endOuterX, endOuterY, + V, depth, + A, rx, ry, 0, 0, 0, startOuterX, startOuterY1, + Z]]; + pointConf.clipOuterBackPath = [clipPathforNoClip]; + + if (isDoughnut) { + + pointConf.clipInnerFrontPath = [[M, startInnerX, startInnerY, + A, innerRx, innerRy, 0, 0, 1, endInnerX, endInnerY, + V, depth, + A, innerRx, innerRy, 0, 0, 0, startInnerX, + startInnerY1, Z]]; + + pointConf.clipInnerBackPath = [clipPathforNoClip]; + + } + } + } + else {//haven't crossed any thing + pointConf.clipOuterFrontPath = [clipPathforNoClip]; + pointConf.clipOuterBackPath = [[M, startOuterX, startOuterY, + A, rx, ry, 0, 0, 1, endOuterX, endOuterY, + V, depth, + A, rx, ry, 0, 0, 0, startOuterX, startOuterY1, + Z]]; + if (isDoughnut) { + + pointConf.clipInnerFrontPath = [clipPathforNoClip]; + + pointConf.clipInnerBackPath = [[M, startInnerX, startInnerY, + A, innerRx, innerRy, 0, 0, 1, endInnerX, endInnerY, + V, depth, + A, innerRx, innerRy, 0, 0, 0, startInnerX, startInnerY1, + Z]]; + } + } + } + else {//zero Pie + pointConf.clipOuterFrontPath = pointConf.clipOuterBackPath = pointConf.clipInnerBackPath = + pointConf.clipInnerFrontPath = [clipPathforNoClip]; + } + + pathAttrString = 'litepath'; + pointConf.clipBottomBorderPath = pointConf.clipTopPath; + pointConf.startSlice = [pointConf.startSlice]; + pointConf.endSlice = [pointConf.endSlice]; + } + else {//for VML + moveCmdArr = Pie3DManager.moveCmdArr; + lineCmdArr = Pie3DManager.lineCmdArr; + closeCmdArr = Pie3DManager.closeCmdArr; + centerPoint = [cx, cy]; + leftPoint = [leftX, cy]; + topPoint = [cx, topY]; + rightPoint = [rightX, cy]; + bottomPoint = [cx, cy + ry]; + leftDepthPoint = [leftX, depthY]; + rightDepthPoint = [rightX, depthY]; + leftInnerPoint = [leftInnerX, cy]; + rightInnerPoint = [rightInnerX, cy]; + leftInnerDepthPoint = [leftInnerX, depthY]; + rightInnerDepthPoint = [rightInnerX, depthY]; + pointConf.clipOuterFrontPath1 = []; + if (startOri != endOri) { + if(start > end) {//crossed the 0 deg line + if (start < pi){//crossed the 180 deg line also + tempArr1 = getArcPath(cx, cy, startOuterX, startOuterY, leftX, cy, rx, ry, 1, 0); + tempArr3 = getArcPath(cx, cy, leftX, cy, rightX, cy, rx, ry, 1, 0); + tempArr5 = getArcPath(cx, cy, rightX, cy, endOuterX, endOuterY, rx, ry, 1, 0); + pointConf.clipOuterBackPath = moveCmdArr.concat(leftPoint, tempArr3, lineCmdArr, + rightDepthPoint, getArcPath(cx, depthY, rightX, + depthY, leftX, depthY, rx, ry, 0, 0), closeCmdArr); + pointConf.clipOuterFrontPath1 = moveCmdArr.concat( [startOuterX, startOuterY], tempArr1, + lineCmdArr, leftDepthPoint, getArcPath(cx, depthY, leftX, depthY, startOuterX, + startOuterY1, rx, ry, 0, 0), closeCmdArr); + pointConf.clipOuterFrontPath = moveCmdArr.concat(rightPoint, + tempArr5, lineCmdArr, [endOuterX, endOuterY1], getArcPath(cx, depthY, endOuterX, + endOuterY1, rightX, depthY, rx, ry, 0, 0), closeCmdArr); + pointConf.clipTopBorderPath = moveCmdArr.concat([startOuterX, startOuterY], tempArr1, + tempArr3, tempArr5); + if (isDoughnut) { + tempArr2 = getArcPath(cx, cy, endInnerX, endInnerY, rightInnerX, cy, innerRx, + innerRy, 0, 0); + tempArr4 = getArcPath(cx, cy, rightInnerX, cy, leftInnerX, cy, innerRx, + innerRy, 0, 0); + tempArr6 = getArcPath(cx, cy, leftInnerX, cy, startInnerX, startInnerY, + innerRx, innerRy, 0, 0); + pointConf.clipInnerBackPath = moveCmdArr.concat(rightInnerPoint, tempArr4, + lineCmdArr, leftInnerDepthPoint, + getArcPath(cx, depthY, leftInnerX, depthY, rightInnerX, depthY, + innerRx, innerRy, 1, 0), closeCmdArr); + pointConf.clipInnerFrontPath = moveCmdArr.concat(leftInnerPoint, tempArr6, + lineCmdArr, [startInnerX, startInnerY1], getArcPath(cx, depthY, startInnerX, + startInnerY1, leftInnerX, depthY, innerRx, innerRy, 1, 0), closeCmdArr, + moveCmdArr, + [endInnerX, endInnerY], tempArr2, lineCmdArr, rightInnerDepthPoint, + getArcPath(cx, depthY, rightInnerX, depthY, endInnerX, endInnerY1, + innerRx, innerRy, 1, 0), closeCmdArr); + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, [endInnerX, + endInnerY], tempArr2, tempArr4, tempArr6, closeCmdArr); + pointConf.clipTopBorderPath = pointConf.clipTopBorderPath.concat(moveCmdArr, + [endInnerX, endInnerY], tempArr2, tempArr4, tempArr6); + + } + else { + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, centerPoint, + closeCmdArr); + } + } + else if( end > pi) {//crossed the 180 deg line also + tempArr1 = getArcPath(cx, cy, startOuterX, startOuterY, rightX, cy, rx, ry, 1, 0); + tempArr3 = getArcPath(cx, cy, rightX, cy, leftX, cy, rx, ry, 1, 0); + tempArr5 = getArcPath(cx, cy, leftX, cy, endOuterX, endOuterY, rx, ry, 1, 0); + pointConf.clipOuterFrontPath = moveCmdArr.concat(rightPoint, tempArr3, lineCmdArr, + leftDepthPoint, + getArcPath(cx, depthY, leftX, + depthY, rightX, depthY, rx, ry, 0, 0), closeCmdArr); + pointConf.clipOuterBackPath = moveCmdArr.concat( [startOuterX, startOuterY], tempArr1, + lineCmdArr, + rightDepthPoint, getArcPath(cx, depthY, rightX, + depthY, startOuterX, startOuterY1, rx, ry, 0, 0), closeCmdArr, moveCmdArr, + leftPoint, + tempArr5, lineCmdArr, [endOuterX, endOuterY1], getArcPath(cx, depthY, endOuterX, + endOuterY1, leftX, depthY, rx, ry, 0, 0), closeCmdArr); + pointConf.clipTopBorderPath = moveCmdArr.concat([startOuterX, startOuterY], tempArr1, + tempArr3, tempArr5); + if (isDoughnut) { + tempArr2 = getArcPath(cx, cy, endInnerX, endInnerY, leftInnerX, cy, innerRx, + innerRy, 0, 0); + tempArr4 = getArcPath(cx, cy, leftInnerX, cy, rightInnerX, cy, innerRx, + innerRy, 0, 0); + tempArr6 = getArcPath(cx, cy, rightInnerX, cy, startInnerX, startInnerY, + innerRx, innerRy, 0, 0); + pointConf.clipInnerFrontPath = moveCmdArr.concat(leftInnerPoint, tempArr4, + lineCmdArr, rightInnerDepthPoint, + getArcPath(cx, depthY, rightInnerX, depthY, leftInnerX, depthY, + innerRx, innerRy, 1, 0), closeCmdArr); + pointConf.clipInnerBackPath = moveCmdArr.concat(rightInnerPoint, tempArr6, + lineCmdArr, [startInnerX, startInnerY1], getArcPath(cx, depthY, startInnerX, + startInnerY1, rightInnerX, depthY, innerRx, innerRy, 1, 0), + closeCmdArr, moveCmdArr, [endInnerX, endInnerY], tempArr2, lineCmdArr, + leftInnerDepthPoint, getArcPath(cx, depthY, leftInnerX, depthY, + endInnerX, endInnerY1, innerRx, innerRy, 1, 0), closeCmdArr); + + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, [endInnerX, + endInnerY], tempArr2, tempArr4, tempArr6, closeCmdArr); + pointConf.clipTopBorderPath = pointConf.clipTopBorderPath.concat(moveCmdArr, + [endInnerX, endInnerY], tempArr2, tempArr4, tempArr6); + + } + else { + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, centerPoint, + closeCmdArr); + } + } + else { + tempArr1 = getArcPath(cx, cy, startOuterX, startOuterY, rightX, cy, rx, ry, 1, 0); + tempArr3 = getArcPath(cx, cy, rightX, cy, endOuterX, endOuterY, rx, ry, 1, 0); + pointConf.clipOuterFrontPath = moveCmdArr.concat(rightPoint, tempArr3, lineCmdArr, + [endOuterX, endOuterY1], getArcPath(cx, depthY, endOuterX, endOuterY1, rightX, + depthY, rx, ry, 0, 0), closeCmdArr); + pointConf.clipOuterBackPath = moveCmdArr.concat( [startOuterX, startOuterY], tempArr1, + lineCmdArr, rightDepthPoint, getArcPath(cx, depthY, rightX, depthY, + startOuterX, startOuterY1, rx, ry, 0, 0), closeCmdArr); + pointConf.clipTopBorderPath = moveCmdArr.concat([startOuterX, startOuterY], tempArr1, + tempArr3); + if (isDoughnut) { + tempArr2 = getArcPath(cx, cy, endInnerX, endInnerY, rightInnerX, cy, innerRx, + innerRy, 0, 0); + tempArr4 = getArcPath(cx, cy, rightInnerX, cy, startInnerX, startInnerY, + innerRx, innerRy, 0, 0); + pointConf.clipInnerFrontPath = moveCmdArr.concat([endInnerX, endInnerY], tempArr2, + lineCmdArr, rightInnerDepthPoint, + getArcPath(cx, depthY, rightInnerX, depthY, endInnerX, endInnerY1, innerRx, + innerRy, 1, 0), closeCmdArr); + pointConf.clipInnerBackPath = moveCmdArr.concat(rightInnerPoint, tempArr4, + lineCmdArr, [startInnerX, startInnerY1], getArcPath(cx, depthY, startInnerX, + startInnerY1, rightInnerX, depthY, innerRx, innerRy, 1, 0), + closeCmdArr); + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, [endInnerX, + endInnerY], tempArr2, tempArr4, closeCmdArr); + pointConf.clipTopBorderPath = pointConf.clipTopBorderPath.concat(moveCmdArr, + [endInnerX, endInnerY], tempArr2, tempArr4); + + } + else { + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, centerPoint, + closeCmdArr); + } + } + } + else if (start < pi){ + if (end > pi) {//crossed the 180 deg line only + tempArr1 = getArcPath(cx, cy, startOuterX, startOuterY, leftX, cy, rx, ry, 1, 0); + tempArr3 = getArcPath(cx, cy, leftX, cy, endOuterX, endOuterY, rx, ry, 1, 0); + pointConf.clipOuterBackPath = moveCmdArr.concat(leftPoint, tempArr3, lineCmdArr, + [endOuterX, endOuterY1], + getArcPath(cx, depthY, endOuterX, + endOuterY1, leftX, depthY, rx, ry, 0, 0), closeCmdArr); + pointConf.clipOuterFrontPath = moveCmdArr.concat( [startOuterX, startOuterY], tempArr1, + lineCmdArr, + leftDepthPoint, getArcPath(cx, depthY, leftX, + depthY, startOuterX, startOuterY1, rx, ry, 0, 0), closeCmdArr); + pointConf.clipTopBorderPath = moveCmdArr.concat([startOuterX, startOuterY], tempArr1, + tempArr3); + if (isDoughnut) { + tempArr2 = getArcPath(cx, cy, endInnerX, endInnerY, leftInnerX, cy, innerRx, + innerRy, 0, 0); + tempArr4 = getArcPath(cx, cy, leftInnerX, cy, startInnerX, startInnerY, + innerRx, innerRy, 0, 0); + pointConf.clipInnerBackPath = moveCmdArr.concat([endInnerX, endInnerY], tempArr2, + lineCmdArr, leftInnerDepthPoint, + getArcPath(cx, depthY, leftInnerX, depthY, endInnerX, endInnerY1, innerRx, + innerRy, 1, 0), closeCmdArr); + pointConf.clipInnerFrontPath = moveCmdArr.concat(leftInnerPoint, tempArr4, + lineCmdArr, [startInnerX, startInnerY1], getArcPath(cx, depthY, startInnerX, + startInnerY1, leftInnerX, depthY, innerRx, innerRy, 1, 0), + closeCmdArr); + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, [endInnerX, + endInnerY], tempArr2, tempArr4, closeCmdArr); + pointConf.clipTopBorderPath = pointConf.clipTopBorderPath.concat(moveCmdArr, + [endInnerX, endInnerY], tempArr2, tempArr4); + + } + else { + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, centerPoint, + closeCmdArr); + } + } + else {//haven't crossed any thing + tempArr1 = getArcPath(cx, cy, startOuterX, startOuterY, endOuterX, endOuterY, rx, ry, 1, + 0); + pointConf.clipOuterBackPath = moveCmdArr.concat([startOuterX, startOuterY]); + pointConf.clipTopBorderPath = pointConf.clipOuterBackPath.concat(tempArr1); + pointConf.clipOuterFrontPath = pointConf.clipTopBorderPath.concat( lineCmdArr, + [endOuterX, endOuterY1], getArcPath(cx, depthY, endOuterX, + endOuterY1, startOuterX, startOuterY1, rx, ry, 0, 0), closeCmdArr); + if (isDoughnut) { + tempArr2 = getArcPath(cx, cy, endInnerX, endInnerY, startInnerX, startInnerY, + innerRx, innerRy, 0, 0); + pointConf.clipInnerBackPath = moveCmdArr.concat([endInnerX, endInnerY]); + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, [endInnerX, + endInnerY], tempArr2, closeCmdArr); + pointConf.clipTopBorderPath = pointConf.clipTopBorderPath.concat(moveCmdArr, + [endInnerX, endInnerY], tempArr2); + pointConf.clipInnerFrontPath = pointConf.clipInnerBackPath.concat(tempArr2, + lineCmdArr, [startInnerX, startInnerY1], getArcPath(cx, depthY, startInnerX, + startInnerY1, endInnerX, endInnerY1, innerRx, innerRy, 1, 0), closeCmdArr); + + } + else { + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, centerPoint, + closeCmdArr); + } + } + } + else {//haven't crossed any thing + tempArr1 = getArcPath(cx, cy, startOuterX, startOuterY, endOuterX, endOuterY, rx, ry, 1, 0); + pointConf.clipOuterFrontPath = moveCmdArr.concat([startOuterX, startOuterY]); + pointConf.clipTopBorderPath = pointConf.clipOuterFrontPath.concat(tempArr1); + pointConf.clipOuterBackPath = pointConf.clipTopBorderPath.concat( lineCmdArr, + [endOuterX, endOuterY1], getArcPath(cx, depthY, endOuterX, + endOuterY1, startOuterX, startOuterY1, rx, ry, 0, 0), closeCmdArr); + if (isDoughnut) { + tempArr2 = getArcPath(cx, cy, endInnerX, endInnerY, startInnerX, startInnerY, innerRx, + innerRy, 0, 0); + pointConf.clipInnerFrontPath = moveCmdArr.concat([endInnerX, endInnerY]); + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, [endInnerX, + endInnerY], tempArr2, closeCmdArr); + pointConf.clipTopBorderPath = pointConf.clipTopBorderPath.concat( + pointConf.clipInnerFrontPath, tempArr2); + pointConf.clipInnerBackPath = pointConf.clipInnerFrontPath.concat(tempArr2, + lineCmdArr, [startInnerX, startInnerY1], getArcPath(cx, depthY, startInnerX, + startInnerY1, endInnerX, endInnerY1, innerRx, innerRy, 1, 0), closeCmdArr); + + } + else { + pointConf.clipTopPath = pointConf.clipTopBorderPath.concat(lineCmdArr, centerPoint, + closeCmdArr); + } + } + //enlarge the bounded box so that the gradient works perfactly + tempArr1 = moveCmdArr.concat(leftPoint, lineCmdArr, rightPoint); + tempArr2 = moveCmdArr.concat(topPoint, lineCmdArr, bottomPoint); + pointConf.clipTopPath = pointConf.clipTopPath.concat(tempArr1, tempArr2); + pointConf.clipOuterFrontPath = pointConf.clipOuterFrontPath.concat(tempArr1); + pointConf.clipOuterFrontPath1 = pointConf.clipOuterFrontPath1.concat(tempArr1); + pointConf.clipOuterBackPath = pointConf.clipOuterBackPath.concat(tempArr1); + + if (isDoughnut) { + tempArr2 = moveCmdArr.concat(leftInnerPoint, lineCmdArr, rightInnerPoint); + pointConf.clipInnerFrontPath = pointConf.clipInnerFrontPath.concat(tempArr2); + pointConf.clipInnerBackPath = pointConf.clipInnerBackPath.concat(tempArr2); + } + } + else {//zero Pie + pointConf.clipTopPath = + pointConf.clipOuterFrontPath = + pointConf.clipOuterBackPath = []; + if (isDoughnut) { + pointConf.clipInnerFrontPath = + pointConf.clipInnerBackPath = []; + } + } + + pointConf.clipBottomBorderPath = pointConf.clipTopBorderPath; + } + + //now apply the changes + if (!doNotApply) { + elements.startSlice._conf.index = start; + elements.endSlice._conf.index = end; + elements.backOuter._conf.index = BackOuterIndex = + (crossed2Pi && (start <= pi3By2 || end > pi3By2)) || + (start <= pi3By2 && end > pi3By2) ? pi3By2 : (start > pi ? start : end); + + elements.frontOuter._conf.index = frontOuterIndex = end <= piBy2 ? end : ((start > end || + start <= piBy2) ? piBy2 : start); + elements.frontOuter1._conf.index = start; + elements.frontOuter1._conf.cIndex = pi; + if (start > end) { + elements.backOuter._conf.cIndex = start < pi3By2 ? pi3By2 : pi2; + elements.startSlice._conf.cIndex = start < pi ? (start + pi) / 2 : (start + pi2) / 2; + elements.endSlice._conf.cIndex = elements.frontOuter._conf.cIndex = 0; + } + else { + elements.backOuter._conf.cIndex = elements.startSlice._conf.cIndex = + elements.endSlice._conf.cIndex = elements.frontOuter._conf.cIndex = middleAngle; + } + + if (scaleAngle > pi) { + elements.frontOuter1.show().attr( + pathAttrString, pointConf.clipOuterFrontPath1 + ); + } + else { + elements.frontOuter1.hide(); + } + pointConf.thisElement._attr( + pathAttrString, pointConf.clipTopPath + ); + elements.bottom.attr( + pathAttrString, pointConf.clipTopPath + ); + elements.bottomBorder.attr( + pathAttrString, pointConf.clipBottomBorderPath + ); + + elements.topBorder && elements.topBorder.attr( + pathAttrString, pointConf.clipTopBorderPath + ); + elements.frontOuter.attr( + pathAttrString, pointConf.clipOuterFrontPath + ); + elements.backOuter.attr( + pathAttrString, pointConf.clipOuterBackPath + ); + + if (isDoughnut) { + elements.backInner.attr( + pathAttrString, pointConf.clipInnerBackPath + ); + elements.frontInner.attr( + pathAttrString, pointConf.clipInnerFrontPath + ); + elements.backInner._conf.index = BackOuterIndex; + elements.frontInner._conf.index = frontOuterIndex; + if (start > end) { + elements.backInner._conf.cIndex = pi2; + elements.frontInner._conf.cIndex = 0; + } + else { + elements.backInner._conf.cIndex = + elements.frontInner._conf.cIndex = middleAngle; + } + } + + if (Pie3DManager.hasOnePoint) { + elements.startSlice.hide(); + elements.endSlice.hide(); + } + else { + elements.startSlice.attr( + pathAttrString, pointConf.startSlice + ).show(); + elements.endSlice.attr( + pathAttrString, pointConf.endSlice + ).show(); + } + } + }, + + _setSliceCosmetics: function (pointConf) { + var manager = this, + topElement = pointConf.thisElement, + showBorderEffect = pointConf.showBorderEffect, + elements = pointConf.elements, + colorObj, + borderColor = convertColor(pointConf.borderColor, pluckNumber(pointConf.borderAlpha, + pointConf.alpha)), + borderWidth = pointConf.borderWidth, + topAttrObj; + if (!pointConf.color) { + return; + } + colorObj = manager._parseSliceColor(pointConf.color, pointConf.alpha, pointConf); + if (hasSVG) { + topAttrObj = {fill: toRaphaelColor(colorObj.top), 'stroke-width': 0}; + + if (showBorderEffect) { + elements.topBorder.show().attr({ + fill: toRaphaelColor(colorObj.topBorder), + 'stroke-width': 0 + }); + } + else { + elements.topBorder.hide(); + topAttrObj.stroke = borderColor; + topAttrObj['stroke-width'] = borderWidth; + } + + // top + topElement._attr(topAttrObj); + } + else { + topElement._attr({ + fill: toRaphaelColor(colorObj.top), + 'stroke-width': 0 + }); + // top border + elements.topBorder.attr({ + stroke: borderColor, + 'stroke-width': borderWidth + }); + } + + // bottom + elements.bottom.attr({ + fill: toRaphaelColor(colorObj.bottom) + }); + + // bottom + elements.bottomBorder.attr({ + stroke: borderColor, + 'stroke-width': borderWidth + }); + + elements.frontOuter.attr({ + fill: toRaphaelColor(colorObj.frontOuter) + }); + elements.frontOuter1.attr({ + fill: toRaphaelColor(colorObj.frontOuter) + }); + + // outerback + elements.backOuter.attr({ + fill: toRaphaelColor(colorObj.backOuter) + }); + + // startSlice + // whenAtBack + elements.startSlice.attr({ + fill: toRaphaelColor(colorObj.startSlice), + stroke: borderColor, + 'stroke-width': borderWidth + }); + + // endSlice + // whenAtBack + elements.endSlice.attr({ + fill: toRaphaelColor(colorObj.endSlice), + stroke: borderColor, + 'stroke-width': borderWidth + }); + if (manager.isDoughnut) { + // innerFront + elements.frontInner.attr({ + fill: toRaphaelColor(colorObj.frontInner) + }); + + elements.backInner.attr({ + fill: toRaphaelColor(colorObj.backInner) + }); + } + + }, + + /** + * This function create a new 3d slice and return that for futher use + * @returns {slice} an raphael like composite object that can be used as a slice element + * @todo update slice color depending upon angle + * @todo For proper z-index create 2 back outer element for larger (>180 deg) slices + * @todo Optimize ***** the element creation, instead of outer1, back and from for all elements, + * create few extra element per manager, which will act as outer1, back / front (inner / outer wall) for + * slices, who has both. Because, at max 1 slice can have outer1 and only 2 slice can have + * back and front both + */ + createSlice: (function () { + var attrKeyList = { + //block following attribute + stroke: true, + strokeWidth: true, + 'stroke-width': true, + dashstyle: true, + 'stroke-dasharray': true, + translateX: true, + translateY: true, + 'stroke-opacity': true, + fill: true, + opacity: true, + // attribute that has direct effect + transform: true, + ishot : true, + cursor: true, + start: true, + end : true, + color: true, + alpha: true, + borderColor: true, + borderAlpha: true, + borderWidth: true, + rolloverProps: true, + showBorderEffect: true, + positionIndex: true, + cx: true, + cy: true, + radiusYFactor: true, + r: true, + innerR: true + }, + attrFN = function(hash, val) { + var key, + value, + slice = this, + confObject = slice._confObject, + commonAttr = {}, + elements = confObject.elements, + x, + updateShape, + updateColor, + Pie3DManager = confObject.Pie3DManager, + applyCommonAttr, + attrObj; + + // 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 (!hash || isString(hash)) { + if (attrKeyList[hash]) { + slice = confObject[hash]; + } + else { + slice = slice._attr(hash); + } + // setter + } else { + + for (key in hash) { + value = hash[key]; + + //if belongs from the list then handle here + if (attrKeyList[key]) { + //store the att in confObject for further use + confObject[key] = value; + if (key === 'ishot' || key === 'cursor' || key === 'transform') { + attrObj = {}; + commonAttr[key] = value; + applyCommonAttr = true; + + } + /* jshint ignore:end */ + else if (key === 'start' || key === 'end' || key === 'cx' || key === 'cy' || + key === 'radiusYFactor' || key === 'r' || key === 'innerR') { + updateShape = true; + } + else if (key === 'color' || key === 'alpha' || key === 'borderColor' || + key === 'borderAlpha' || key === 'borderWidth'){ + updateColor = true; + } + } else { //else leve for the original attr + slice._attr(key, value); + } + } + + // if paths need to be updated + if (updateShape) { + Pie3DManager._setSliceShape(confObject); + //refreash the drawinh for proper z lavel for elements + Pie3DManager.refreshDrawing(); + } + // if colors need to be updated + // If the shape got changed, then also cange the color + if (updateColor || updateShape) { + Pie3DManager._setSliceCosmetics(confObject); + } + // apply common attributes + if (applyCommonAttr) { + //other elements + for (x in elements) { + elements[x].attr(commonAttr); + } + //main element + slice._attr(commonAttr); + } + + } + return slice; + }, + onFN = function (eventType, handler) { + var slice = this, + confObject = slice._confObject, + elements = confObject.elements, + element; + + for (element in elements) { + elements[element].on(eventType, handler); + } + return slice._on(eventType, handler); + }, + onDragFN = function (dragStart, dragMove, dragEnd) { + var element, + slice = this, + confObject = slice._confObject, + elements = confObject.elements, + navigator = win.navigator, + ua = navigator.userAgent.toLowerCase(), + isAndroid = ua.indexOf('android') > -1; + for (element in elements) { + if (isAndroid) { + if (element === 'topBorder' || element === 'frontOuter' || element === 'startSlice' || + element === 'endSlice') { + elements[element].drag(dragStart, dragMove, dragEnd); + } + } + else { + elements[element].drag(dragStart, dragMove, dragEnd); + } + } + return slice._drag(dragStart, dragMove, dragEnd); + }, + hideFN = function () { + var slice = this, + confObject = slice._confObject, + elements = confObject.elements, + element; + + for (element in elements) { + elements[element].hide(); + } + return slice._hide(); + }, + showFN = function () { + var slice = this, + confObject = slice._confObject, + elements = confObject.elements, + element; + + for (element in elements) { + elements[element].show(); + } + return slice._show(); + }, + destroyFN = function () { + var confObject = this._confObject, + elements = confObject.elements, x; + //other elements + for (x in elements) { + elements[x].destroy(); + } + if (hasSVG) { + //destory other element + /** @todo check whether this clip elements are not destroying from else where */ + confObject.clipTop.destroy(); + confObject.clipOuterFront.destroy(); + confObject.clipOuterBack.destroy(); + if (confObject.clipOuterFront1) { + confObject.clipOuterFront1.destroy(); + } + if (confObject.clipInnerFront) { + confObject.clipInnerFront.destroy(); + } + if (confObject.clipInnerBack) { + confObject.clipInnerBack.destroy(); + } + } + //main element + return this._destroy(); + }, + tooltipFN = function (tooltext) { + var slice = this, + confObject = slice._confObject, + elements = confObject.elements, + element; + //other elements + for (element in elements) { + elements[element].tooltip(tooltext); + } + //main element + return slice._tooltip(tooltext); + }, + dataFN = function (key, value) { + var slice = this, + confObject = slice._confObject, + elements = confObject.elements, + element; + if (value === undefined) { + return slice._data(key); + } + else { + //other elements + for (element in elements) { + elements[element].data(key, value); + } + //main element + return slice._data(key, value); + } + }, + si = 0; // slice index + return function () { + + var manager = this, + renderer = manager.renderer, + returnElement, + confObject = { + elements : {}, + Pie3DManager : manager + }, + slicingWallsArr = manager.slicingWallsArr, + elements = confObject.elements, + renderingPath = hasSVG ? 'litepath' : 'path'; + + // create elements + returnElement = renderer[renderingPath](manager.topGroup); + //store the _confObject reference + returnElement._confObject = confObject; + confObject.thisElement = returnElement; + + //modify few core function + + returnElement._destroy = returnElement.destroy; + returnElement.destroy = destroyFN; + + returnElement._show = returnElement.show; + returnElement.show = showFN; + + returnElement._hide = returnElement.hide; + returnElement.hide = hideFN; + + returnElement._on = returnElement.on; + returnElement.on = onFN; + + returnElement._drag = returnElement.drag; + returnElement.drag = onDragFN; + + returnElement._attr = returnElement.attr; + returnElement.attr = attrFN; + + returnElement._tooltip = returnElement.tooltip; + returnElement.tooltip = tooltipFN; + + returnElement._data = returnElement.data; + returnElement.data = dataFN; + + //add the element to the store + manager.pointElemStore.push(returnElement); + + elements.topBorder = renderer[renderingPath](manager.topGroup); + elements.bottom = renderer[renderingPath](manager.bottomBorderGroup) + .attr({ + 'stroke-width' : 0 + }); + elements.bottomBorder = renderer[renderingPath](manager.bottomBorderGroup); + elements.frontOuter = renderer[renderingPath](manager.slicingWallsFrontGroup) + .attr({ + 'stroke-width' : 0 + }); + elements.backOuter = renderer[renderingPath](manager.slicingWallsFrontGroup) + .attr({ + 'stroke-width' : 0 + }); + elements.startSlice = renderer[renderingPath](manager.slicingWallsFrontGroup); + elements.endSlice = renderer[renderingPath](manager.slicingWallsFrontGroup); + elements.frontOuter1 = renderer[renderingPath](manager.slicingWallsFrontGroup) + .attr({ + 'stroke-width' : 0 + }); + + // update config object for proper z order + elements.frontOuter._conf = { + si: si, + isStart : 0.5 + }; + elements.frontOuter1._conf = { + si: si, + isStart : 0.5 + }; + elements.startSlice._conf = { + si: si, + isStart : 0 + }; + elements.endSlice._conf = { + si: si, + isStart : 1 + }; + elements.backOuter._conf = { + si: si, + isStart : 0.4 + }; + slicingWallsArr.push(elements.startSlice, elements.frontOuter1, elements.frontOuter, + elements.backOuter, elements.endSlice); + if (manager.isDoughnut) { + // innerFront + elements.frontInner = renderer[renderingPath](manager.slicingWallsFrontGroup) + .attr({ + 'stroke-width' : 0 + }); + elements.backInner = renderer[renderingPath](manager.slicingWallsFrontGroup) + .attr({ + 'stroke-width' : 0 + }); + + elements.backInner._conf = { + si: si, + isStart : 0.5 + }; + + elements.frontInner._conf = { + si: si, + isStart : 0.4 + }; + slicingWallsArr.push(elements.frontInner, elements.backInner); + } + + si += 1; + return returnElement; + }; + })() + }; + + Pie3DManager.prototype.constructor = Pie3DManager; + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-doughnut2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI, + getFirstColor = lib.getFirstColor, + getFirstAlpha = lib.getFirstAlpha, + hasSVG = lib.hasSVG, + math = Math, + docMode8 = win.document.documentMode === 8, + toRaphaelColor = lib.toRaphaelColor, + hashify = lib.hashify, + HIDDEN = 'hidden', + VISIBLE = docMode8 ? 'visible' : '', + getLightColor = lib.graphics.getLightColor, + mathFloor = math.floor, + COMMA = ',', + getDarkColor = lib.graphics.getDarkColor; + + chartAPI ('doughnut2d', { + friendlyName: 'Doughnut Chart', + defaultDatasetType : 'Doughnut2D', + creditLabel: creditLabel, + applicableDSList: { + 'Doughnut2D': true + }, + getPointColor: function (color, alpha, radius3D) { + var colorObj, + loLight, + hiLight; + + color = getFirstColor (color); + alpha = getFirstAlpha (alpha); + + // Radial gradient is not supported in VML, hence we use for SVG + // alone. + if (radius3D < 100 && hasSVG) { + loLight = getDarkColor (color, + mathFloor ((85 - 0.2 * (100 - radius3D)) * 100) / 100); + + hiLight = getLightColor (color, + mathFloor ((100 - 0.5 * radius3D) * 100) / 100); + + colorObj = { + FCcolor: { + color: loLight + COMMA + hiLight + COMMA + hiLight + + COMMA + loLight, + alpha: alpha + COMMA + alpha + COMMA + alpha + COMMA + alpha, + radialGradient: true, + gradientUnits: 'userSpaceOnUse', + r: radius3D + } + }; + } + else { + /** @todo replace the single shade radial to solid fill */ + colorObj = { + FCcolor: { + color: color + COMMA + color, + alpha: alpha + COMMA + alpha, + ratio: '0,100' + } + }; + } + + return colorObj; + }, + drawDoughnutCenterLabel: function (labelText, cx, cy, dx, dy, centerLabelConfig, updateConfig) { + var chart = this, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + seriesData = dataSet.config, + labelConfig = centerLabelConfig || seriesData.lastCenterLabelConfig, + paper = chartComponents.paper, + smartLabel = chart.linkedItems.smartLabel, + chartGraphics = chart.graphics, + grp = chartGraphics.datasetGroup, + labelPadding = labelConfig.padding, + textpadding = labelConfig.textPadding * 2, + cssObj = { + fontFamily: labelConfig.font, + fontSize: labelConfig.fontSize + 'px', + lineHeight: (1.2 * labelConfig.fontSize) + 'px', + fontWeight: labelConfig.bold ? 'bold' : '', + fontStyle: labelConfig.italic ? 'italic' : '' + }, + txtW = ((dx * 0.5 - labelPadding) * 1.414) - textpadding, + txtH = ((dy * 0.5 - labelPadding) * 1.414) - textpadding, + centerLabel, + smartLabelObj, + labelOvalBg; + + smartLabel.setStyle(cssObj); + smartLabel.useEllipsesOnOverflow(chart.config.useEllipsesWhenOverflow); + smartLabelObj = smartLabel.getSmartText(labelText, txtW, txtH); + + if (!(centerLabel = chartGraphics.doughnutCenterLabel)) { + labelConfig.bgOval && + (chartGraphics.centerLabelOvalBg = labelOvalBg = paper.circle(cx, cy, dx * 0.5 - labelPadding, + grp)); + centerLabel = chartGraphics.doughnutCenterLabel = paper.text(grp) + .hover(chart.centerLabelRollover, chart.centerLabelRollout) + .click(chart.centerLabelClick); + /** @todo: Fix reference issue */ + centerLabel.chart = chart; + } + else { + centerLabel.attr('text') !== labelText && chart.centerLabelChange(labelText); + labelOvalBg = chartGraphics.centerLabelOvalBg; + } + + if (labelText) { + centerLabel.css(cssObj) + .attr({ + x: cx, + y: cy, + text: smartLabelObj.text, + visibility: VISIBLE, + direction: seriesData.textDirection, + //title: labelConfig.toolText ? '' : smartLabelObj.tooltext || '', + fill: toRaphaelColor({ + FCcolor: { + color: labelConfig.color, + alpha: labelConfig.alpha + } + }), + 'text-bound': labelConfig.bgOval ? 'none' : [ + toRaphaelColor({ + FCcolor: { + color: labelConfig.bgColor, + alpha: labelConfig.bgAlpha + } + }), + toRaphaelColor({ + FCcolor: { + color: labelConfig.borderColor, + alpha: labelConfig.borderAlpha + } + }), + labelConfig.borderThickness, + labelConfig.textPadding, + labelConfig.borderRadius + ] + }) + .tooltip(labelConfig.toolText || smartLabelObj.tooltext); + + if (labelConfig.bgOval) { + labelOvalBg && labelOvalBg.attr({ + visibility: VISIBLE, + fill: hashify(labelConfig.bgColor), + 'fill-opacity': labelConfig.bgAlpha / 100, + stroke: hashify(labelConfig.borderColor), + 'stroke-width': labelConfig.borderThickness, + 'stroke-opacity': labelConfig.borderAlpha / 100 + }); + } + } + else { + centerLabel.attr('visibility', HIDDEN); + labelOvalBg && labelOvalBg.attr('visibility', HIDDEN); + } + + if (updateConfig) { + seriesData.lastCenterLabelConfig = labelConfig; + seriesData.centerLabelConfig = labelConfig; + } + }, + + centerLabelRollover: function () { + var chart = this.chart, + chartComponents = chart.components, + chartConfig = chart.config, + dataSet = chartComponents.dataset[0], + chartInstance = chart.chartInstance, + seriesData = dataSet.config, + ref = chartInstance.ref, + labelConfig = seriesData.lastCenterLabelConfig, + eventArgs = { + height: chartConfig.height, + width: chartConfig.width, + pixelHeight: ref.offsetHeight, + pixelWidth: ref.offsetWidth, + id: chartInstance.id, + renderer: chartInstance.args.renderer, + container: chart.linkedItems.container, + centerLabelText: labelConfig && labelConfig.label + }; + /** + * This event is fired on mouse rollover on label at center of doughnut 2D. + * + * > Available on `doughnut` chart only. + * + * @group chart:pie-center-label + * @event FusionCharts#centerLabelRollover + * + * @param {string} centerLabelText - is the text for display at center label + * @param {number} chartX - is the relative X-Cordinate to chart container where the chart was clicked + * @param {number} chartY - is the relative Y-Cordinate to chart container where the chart was clicked. + * @param {string} container - is the DOM element where the chart is being rendered. + * @param {numeric|percent} height - height of the chart + * @param {numeric|percent} width - width of the chart + * @param {string} id - is the chart id + * @param {number} pageX - is the relative X-Cordinate to screen where the chart is clicked + * @param {number} pageY - is the relative Y-Cordinate to screen where the chart is clicked + * @param {number} pixelHeight - is the height of the DOM element where the chart is being rendered in + * pixels + * @param {number} pixelWidth - is the width of the DOM element where the chart is being rendered in + * pixels + * @param {string} renderer - tells if the chart is rendered using JavaScript or Flash + */ + this.attr('text') && global.raiseEvent('centerLabelRollover', + eventArgs, chartInstance, this, chart.hoverOnCenterLabel); + }, + + centerLabelRollout: function () { + var chart = this.chart, + chartConfig = chart.config, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + chartInstance = chart.chartInstance, + ref = chartInstance.ref, + seriesData = dataSet.config, + labelConfig = seriesData.lastCenterLabelConfig, + eventArgs = { + height: chartConfig.height, + width: chartConfig.width, + pixelHeight: ref.offsetHeight, + pixelWidth: ref.offsetWidth, + id: chartInstance.id, + renderer: chartInstance.args.renderer, + container: chart.linkedItems.container, + centerLabelText: labelConfig && labelConfig.label + }; + /** + * This event is fired on mouse rollout from label at center of + * doughnut 2D. + * + * > Available on `doughnut` chart only. + * + * @group chart:pie-center-label + * @event FusionCharts#centerLabelRollout + * + * @param {string} centerLabelText - is the text for display at center label + * @param {number} chartX - is the relative X-Cordinate to chart container where the chart was clicked + * @param {number} chartY - is the relative Y-Cordinate to chart container where the chart was clicked. + * @param {string} container - is the DOM element where the chart is being rendered. + * @param {numeric|percent} height - height of the chart + * @param {numeric|percent} width - width of the chart + * @param {string} id - is the chart id + * @param {number} pageX - is the relative X-Cordinate to screen where the chart is clicked + * @param {number} pageY - is the relative Y-Cordinate to screen where the chart is clicked + * @param {number} pixelHeight - is the height of the DOM element where the chart is being rendered in + * pixels + * @param {number} pixelWidth - is the width of the DOM element where the chart is being rendered in + * pixels + * @param {string} renderer - tells if the chart is rendered using JavaScript or Flash + */ + this.attr('text') && global.raiseEvent('centerLabelRollout', eventArgs, chartInstance, this, + chart.hoverOffCenterLabel); + }, + + centerLabelClick: function () { + var chart = this.chart, + chartConfig = chart.config, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + chartInstance = chart.chartInstance, + ref = chartInstance.ref, + seriesData = dataSet.config, + labelConfig = seriesData.lastCenterLabelConfig, + eventArgs = { + height: chartConfig.height, + width: chartConfig.width, + pixelHeight: ref.offsetHeight, + pixelWidth: ref.offsetWidth, + id: chartInstance.id, + renderer: chartInstance.args.renderer, + container: chart.linkedItems.container, + centerLabelText: labelConfig && labelConfig.label + }; + /** + * This event is fired on click on label at center of doughnut 2D. + * + * > Available on `doughnut` chart only. + * + * @group chart:pie-center-label + * @event FusionCharts#centerLabelClick + * + * @param {string} centerLabelText - is the text for display at center label. + * @param {number} chartX - is the relative X-Cordinate to chart container where the chart was clicked. + * @param {number} chartY - is the relative Y-Cordinate to chart container where the chart was clicked. + * @param {string} container - is the DOM element where the chart is being rendered. + * @param {numeric|percent} height - height of the chart + * @param {numeric|percent} width - width of the chart + * @param {string} id - is the chart id + * @param {number} pageX - is the relative X-Cordinate to screen where the chart is clicked + * @param {number} pageY - is the relative Y-Cordinate to screen where the chart is clicked + * @param {number} pixelHeight - is the height of the DOM element where the chart is being rendered in + * pixels + * @param {number} pixelWidth - is the width of the DOM element where the chart is being rendered in + * pixels + * @param {string} renderer - tells if the chart is rendered using JavaScript or Flash + */ + this.attr('text') && global.raiseEvent('centerLabelClick', eventArgs, chartInstance); + }, + + centerLabelChange: function (labelText) { + var chart = this, + chartConfig = chart.config, + chartInstance = chart.chartInstance, + ref = chartInstance.ref, + eventArgs = { + height: chartConfig.height, + width: chartConfig.width, + pixelHeight: ref.offsetHeight, + pixelWidth: ref.offsetWidth, + id: chartInstance.id, + renderer: chartInstance.args.renderer, + container: chart.linkedItems.container, + centerLabelText: labelText + }; + /** + * This event is fired on change of label at center of doughnut 2D. + * + * > Available on `doughnut` chart only. + * + * @group chart:pie-center-label + * @event FusionCharts#centerLabelChanged + * + * @param {string} centerLabelText - is the text for display at center label + * @param {number} chartX - is the relative X-Cordinate to chart container where the chart was clicked + * @param {number} chartY - is the relative Y-Cordinate to chart container where the chart was clicked. + * @param {string} container - is the DOM element where the chart is being rendered. + * @param {numeric|percent} height - height of the chart + * @param {numeric|percent} width - width of the chart + * @param {string} id - is the chart id + * @param {number} pageX - is the relative X-Cordinate to screen where the chart is clicked + * @param {number} pageY - is the relative Y-Cordinate to screen where the chart is clicked + * @param {number} pixelHeight - is the height of the DOM element where the chart is being rendered in + * pixels + * @param {number} pixelWidth - is the width of the DOM element where the chart is being rendered in + * pixels + * @param {string} renderer - tells if the chart is rendered using JavaScript or Flash + */ + global.raiseEvent('centerLabelChanged', eventArgs, chartInstance); + }, + + hoverOnCenterLabel: function () { + var chart = this.chart, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + seriesData = dataSet.config, + labelConfig = seriesData.lastCenterLabelConfig; + + if (labelConfig.hoverColor || labelConfig.hoverAlpha) { + this.attr({fill: toRaphaelColor({ + FCcolor: { + color: labelConfig.hoverColor || labelConfig.color, + alpha: labelConfig.hoverAlpha || labelConfig.alpha + } + }) + }); + } + }, + + hoverOffCenterLabel: function () { + var chart = this.chart, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + seriesData = dataSet.config, + labelConfig = seriesData.lastCenterLabelConfig; + + if (labelConfig.hoverColor || labelConfig.hoverAlpha) { + this.attr({fill: toRaphaelColor({ + FCcolor: { + color: labelConfig.color, + alpha: labelConfig.alpha + } + }) + }); + } + } + }, chartAPI.pie2d, { + singletonPlaceValue: false + }); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-doughnut3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('doughnut3d', { + friendlyName: '3D Doughnut Chart', + defaultDatasetType : 'Doughnut3D', + creditLabel: creditLabel, + applicableDSList: { + 'Doughnut3D': true + }, + _configureManager: function () { + var chart = this, + chartComponents = chart.components, + dataSet = chartComponents.dataset[0], + dataSetConfig = dataSet.config, + dataSetComponents = dataSet.components, + pie3DManager = dataSetComponents.Pie3DManager, + data = dataSetComponents.data; + + if (pie3DManager) { + pie3DManager.configure(dataSetConfig.pieSliceDepth, data.length === 1, dataSetConfig.use3DLighting, + true); + } + } + }, chartAPI.pie3d); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-mscolumn2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('mscolumn2d', { + standaloneInit: true, + friendlyName: 'Multi-series Column Chart', + creditLabel: creditLabel, + defaultDatasetType : 'column', + applicableDSList: { 'column': true }, + eiMethods : { } + },chartAPI.mscartesian, { + enablemousetracking: true + }); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-mscolumn3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('mscolumn3d', { + standaloneInit: true, + defaultDatasetType: 'column3d', + friendlyName: 'Multi-series 3D Column Chart', + applicableDSList: { 'column3d': true }, + // Default shadow is visible for 3D variant of MSColumn2D chart + defaultPlotShadow: 1, + fireGroupEvent: true, + is3D: true, + creditLabel: creditLabel, + defaultZeroPlaneHighlighted: false + }, chartAPI.mscartesian3d, { + showplotborder: 0, + enablemousetracking: true + }); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-msbar2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('msbar2d', { + standaloneInit: true, + friendlyName: 'Multi-series Bar Chart', + isBar: true, + hasLegend: true, + creditLabel: creditLabel, + defaultDatasetType: 'bar2d', + applicableDSList: { 'bar2d': true } + }, chartAPI.msbarcartesian, { + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-msbar3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('msbar3d', { + standaloneInit: true, + defaultSeriesType: 'bar3d', + friendlyName: 'Multi-series 3D Bar Chart', + fireGroupEvent: true, + defaultPlotShadow: 1, + is3D: true, + isBar: true, + hasLegend: true, + creditLabel: creditLabel, + defaultZeroPlaneHighlighted: false, + defaultDatasetType: 'bar3d', + applicableDSList: { 'bar3d': true } + }, chartAPI.msbarcartesian3d, { + showplotborder: 0, + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-msarea', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('msarea', { + standaloneInit: true, + friendlyName: 'Multi-series Area Chart', + creditLabel: creditLabel, + defaultDatasetType : 'area', + defaultPlotShadow: 0, + applicableDSList: { 'area': true } + }, chartAPI.areabase, { + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-msline', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('msline', { + standaloneInit: true, + friendlyName: 'Multi-series Line Chart', + creditLabel: creditLabel, + defaultDatasetType : 'line', + defaultPlotShadow: 1, + axisPaddingLeft: 0, + axisPaddingRight: 0, + applicableDSList: { 'line': true } + }, chartAPI.areabase, { + zeroplanethickness: 1, + zeroplanealpha: 40, + showzeroplaneontop: 0, + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-stackedarea2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + preDefStr = lib.preDefStr, + HUNDREDSTRING = preDefStr.HUNDREDSTRING; + + chartAPI ('stackedarea2d', { + friendlyName: 'Stacked Area Chart', + showsum: 0, + creditLabel: creditLabel + }, chartAPI.msarea, { + plotfillalpha: HUNDREDSTRING, + isstacked: 1 + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-stackedcolumn2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('stackedcolumn2d', { + friendlyName: 'Stacked Column Chart', + creditLabel: creditLabel + }, chartAPI.mscolumn2d, { + isstacked: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-stackedcolumn3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('stackedcolumn3d', { + friendlyName: '3D Stacked Column Chart', + creditLabel: creditLabel, + _mouseEvtHandler: function (e) { + var iapi = this, + data = e.data, + mouseTracker = data.mouseTracker, + oriEvent = e.originalEvent, + chartConfig = iapi.config, + canvasLeft = chartConfig.canvasLeft, + canvasRight = chartConfig.canvasRight, + canvasBottom = chartConfig.canvasBottom, + canvasTop = chartConfig.canvasTop, + datasets = chartConfig.datasetOrder || iapi.components.dataset, + coordinate = lib.getMouseCoordinate(iapi.linkedItems.container, oriEvent, iapi), + chartX = coordinate.chartX, + chartY = coordinate.chartY, + dataset, + chartComponents = iapi.components, + group = 'datasetGroup_' + datasets[0].type, + hoveredInfo, + pointFound = false, + i = datasets.length, + j, + l, + derivedEvensInfo, + _lastDatasetIndex = mouseTracker._lastDatasetIndex, + _lastPointIndex = mouseTracker._lastPointIndex, + MOUSEOUT = 'mouseout'; + + // todo we have to implement this for charts with more than one canvas like candle stick + // if inside the canvas + if (chartX > canvasLeft && chartX < canvasRight && chartY > canvasTop && chartY < canvasBottom || + iapi.config.plotOverFlow) { + // todo make sure the datasets are as per their z-order + while (i-- && !pointFound) { + dataset = datasets[i]; + dataset.valueLook = true; + if (dataset && dataset.visible) { + hoveredInfo = dataset._getHoveredPlot && dataset._getHoveredPlot(chartX, chartY); + if (hoveredInfo && hoveredInfo.hovered) { + pointFound = true; + hoveredInfo.datasetIndex = i; + derivedEvensInfo = mouseTracker._getMouseEvents(e, hoveredInfo.datasetIndex, + hoveredInfo.pointIndex); + } + } + } + + i = 0; + while (i < datasets.length) { + if (pointFound) { + break; + } + dataset = datasets[i]; + dataset.valueLook = false; + if (dataset && dataset.visible) { + hoveredInfo = dataset._getHoveredPlot && dataset._getHoveredPlot(chartX, chartY); + if (hoveredInfo && hoveredInfo.hovered) { + pointFound = true; + hoveredInfo.datasetIndex = i; + derivedEvensInfo = mouseTracker._getMouseEvents(e, hoveredInfo.datasetIndex, + hoveredInfo.pointIndex); + } + } + i++; + } + } + + // todo instead of sending event names, create a event object of that type and send it + + // fire out on last hovered plot + if ((!pointFound || (derivedEvensInfo && derivedEvensInfo.fireOut)) && + _lastDatasetIndex !== undefined) { + // delete stored last ds details + delete mouseTracker._lastDatasetIndex; + delete mouseTracker._lastPointIndex; + + datasets[_lastDatasetIndex] && datasets[_lastDatasetIndex]._firePlotEvent && + datasets[_lastDatasetIndex]._firePlotEvent(MOUSEOUT, _lastPointIndex, e); + + // todo scope to have sticky tracked tooltip + } + // fire remaining events + if (pointFound) { + l = derivedEvensInfo.events && derivedEvensInfo.events.length; + // store the index of the hovered DS and plot + mouseTracker._lastDatasetIndex = hoveredInfo.datasetIndex; + _lastPointIndex = mouseTracker._lastPointIndex = hoveredInfo.pointIndex; + + chartConfig.drawTrendRegion && chartComponents[group]._notifyGroup(true, e); + for (j = 0; j < l; j += 1) { + dataset && dataset._firePlotEvent && dataset._firePlotEvent(derivedEvensInfo.events[j], + _lastPointIndex, e, hoveredInfo.datasetIndex); + } + } + else { + chartConfig.drawTrendRegion && chartComponents[group]._notifyGroup(false, e); + } + + chartConfig.drawTrendRegion && chartComponents[group]._getHoveredRegion(chartX, chartY, e); + } + }, chartAPI.mscolumn3d, { + showplotborder: 0, + enablemousetracking: true + }, chartAPI.stackedcolumn2d); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-stackedbar2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('stackedbar2d', { + friendlyName: 'Stacked Bar Chart', + creditLabel: creditLabel + }, chartAPI.msbar2d, { + maxbarheight: 50, + enablemousetracking: true + }, chartAPI.stackedcolumn2d); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-stackedbar3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('stackedbar3d', { + friendlyName: '3D Stacked Bar Chart', + creditLabel: creditLabel, + _mouseEvtHandler: function (e) { + var iapi = this, + data = e.data, + mouseTracker = data.mouseTracker, + oriEvent = e.originalEvent, + chartConfig = iapi.config, + canvasLeft = chartConfig.canvasLeft, + canvasRight = chartConfig.canvasRight, + canvasBottom = chartConfig.canvasBottom, + canvasTop = chartConfig.canvasTop, + datasets = chartConfig.datasetOrder || iapi.components.dataset, + coordinate = lib.getMouseCoordinate(iapi.linkedItems.container, oriEvent, iapi), + chartX = coordinate.chartX, + chartY = coordinate.chartY, + dataset, + chartComponents = iapi.components, + group = 'datasetGroup_' + datasets[0].type, + hoveredInfo, + pointFound = false, + i = datasets.length, + k, + j, + l, + derivedEvensInfo, + _lastDatasetIndex = mouseTracker._lastDatasetIndex, + _lastPointIndex = mouseTracker._lastPointIndex, + MOUSEOUT = 'mouseout', + datasetBuffer, + hoveredInfoBuffer; + + // todo we have to implement this for charts with more than one canvas like candle stick + // if inside the canvas + if (chartX > canvasLeft && chartX < canvasRight && chartY > canvasTop && chartY < canvasBottom || + iapi.config.plotOverFlow) { + // todo make sure the datasets are as per their z-order + i = datasets.length; + while (i-- && !pointFound) { + dataset = datasets[i]; + dataset.valueLook = true; + if (dataset && dataset.visible) { + hoveredInfo = dataset._getHoveredPlot && dataset._getHoveredPlot(chartX, chartY); + + if (hoveredInfo && hoveredInfo.hovered) { + for (k = 0; k <= i; ++k) { + if (i === k || !hoveredInfo) { + continue; + } + datasetBuffer = datasets[k]; + hoveredInfoBuffer = datasetBuffer._getHoveredPlot && + datasetBuffer._getHoveredPlot(chartX, chartY); + if (hoveredInfoBuffer && + hoveredInfoBuffer.pointIndex === hoveredInfo.pointIndex - 1) { + hoveredInfo = hoveredInfoBuffer; + i = k; + dataset = datasetBuffer; + dataset.valueLook = true; + break; + } + } + } + + + if (hoveredInfo && hoveredInfo.hovered) { + pointFound = true; + hoveredInfo.datasetIndex = i; + derivedEvensInfo = mouseTracker._getMouseEvents(e, hoveredInfo.datasetIndex, + hoveredInfo.pointIndex); + } + } + } + + i = 0; + while (i < datasets.length) { + if (pointFound) { + break; + } + dataset = datasets[i]; + dataset.valueLook = false; + if (dataset && dataset.visible) { + hoveredInfo = dataset._getHoveredPlot && dataset._getHoveredPlot(chartX, chartY); + + if (hoveredInfo && hoveredInfo.hovered) { + for (k = 0; k <= i; ++k) { + if (i === k || !hoveredInfo) { + continue; + } + datasetBuffer = datasets[k]; + hoveredInfoBuffer = datasetBuffer._getHoveredPlot && + datasetBuffer._getHoveredPlot(chartX, chartY); + if (hoveredInfoBuffer && + hoveredInfoBuffer.pointIndex === hoveredInfo.pointIndex - 1) { + hoveredInfo = hoveredInfoBuffer; + i = k; + dataset = datasetBuffer; + dataset.valueLook = false; + break; + } + + } + } + + if (hoveredInfo && hoveredInfo.hovered) { + pointFound = true; + hoveredInfo.datasetIndex = i; + derivedEvensInfo = mouseTracker._getMouseEvents(e, hoveredInfo.datasetIndex, + hoveredInfo.pointIndex); + } + } + i++; + } + } + + // todo instead of sending event names, create a event object of that type and send it + + // fire out on last hovered plot + if ((!pointFound || (derivedEvensInfo && derivedEvensInfo.fireOut)) && + _lastDatasetIndex !== undefined) { + // delete stored last ds details + delete mouseTracker._lastDatasetIndex; + delete mouseTracker._lastPointIndex; + datasets[_lastDatasetIndex] && datasets[_lastDatasetIndex]._firePlotEvent && + datasets[_lastDatasetIndex]._firePlotEvent(MOUSEOUT, _lastPointIndex, e); + + // todo scope to have sticky tracked tooltip + } + // fire remaining events + if (pointFound) { + l = derivedEvensInfo.events && derivedEvensInfo.events.length; + // store the index of the hovered DS and plot + mouseTracker._lastDatasetIndex = hoveredInfo.datasetIndex; + _lastPointIndex = mouseTracker._lastPointIndex = hoveredInfo.pointIndex; + + chartConfig.drawTrendRegion && chartComponents[group]._notifyGroup(true, e); + for (j = 0; j < l; j += 1) { + + dataset && dataset._firePlotEvent && dataset._firePlotEvent(derivedEvensInfo.events[j], + _lastPointIndex, e, hoveredInfo.datasetIndex); + } + } + else { + chartConfig.drawTrendRegion && chartComponents[group]._notifyGroup(false, e); + } + + chartConfig.drawTrendRegion && chartComponents[group]._getHoveredRegion(chartX, chartY, e); + } + /*, + _mouseEvtHandler: function (e) { + chartAPI.stackedcolumn3d._mouseEvtHandler.call(this, e); + }*/ + }, chartAPI.msbar3d, { + showplotborder: 0, + enablemousetracking: true + }, chartAPI.stackedcolumn2d); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-marimekko', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + math = Math, + mathMin = math.min, + mathMax = math.max; + + chartAPI ('marimekko', { + standaloneInit: true, + friendlyName: 'Marimekko Chart', + isValueAbs: true, + distributedColumns: true, + stack100percent: true, + defaultDatasetType: 'marimekko', + applicableDSList: {'marimekko': true}, + isStacked: true, + showsum: 1, + creditLabel: creditLabel, + _setAxisLimits : function () { + var iapi = this, + components = iapi.components, + dataset = components.dataset, + yAxis = components.yAxis, + xAxis = components.xAxis, + currentDataset, + length = dataset.length, + i, + infMin = -Infinity, + infMax = +Infinity, + max = infMin, + min = infMax, + xMin = infMax, + xMax = infMin, + lastXPos, + maxminObj, + groupManager, + xLimit, + xRange, + len, + catLen, + value, + catXVal, + groupManagerObj = { }, + categories = iapi.config.categories, + stackPercentValue, + stackValWidth, + noManager = [], + getMaxMin = function (maxminObj) { + max = mathMax (max, maxminObj.max); + min = mathMin (min, maxminObj.min); + xMax = mathMax (xMax, maxminObj.xMax || infMin); + xMin = mathMin (xMin, maxminObj.xMin || infMax); + + }; + + for (i=0; i len) { + categories.splice(len, catLen - len); + } + iapi._setCategories(); + xLimit = xAxis[0].getLimit(); + xMin = xLimit.min; + xMax = xLimit.max; + lastXPos = xMin; + + xRange = xMax - xMin; + for (i = 0; i < stackPercentValue.length; i++) { + value = stackPercentValue[i]; + stackValWidth = xRange * value/100; + catXVal = lastXPos + (stackValWidth / 2); + xAxis[0].updateCategory(i, {x: catXVal}); + lastXPos += stackValWidth; + } + } + }, chartAPI.mscartesian, { + isstacked: true, + showpercentvalues: 0, + usepercentdistribution: 1, + showsum: 1, + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-msstackedcolumn2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI, + pluck = lib.pluck, + componentDispose = lib.componentDispose; + + chartAPI ('msstackedcolumn2d', { + standaloneInit: true, + defaultDatasetType: 'column', + applicableDSList: { 'column': true }, + friendlyName: 'Multi-series Stacked Column Chart', + _createDatasets: function () { + var iapi = this, + components = iapi.components, + dataObj = iapi.jsonData, + dataset = dataObj.dataset, + length = (dataset && dataset.length) || 0, + i, + j, + datasetStore, + datasetObj, + defaultSeriesType = iapi.defaultDatasetType, + applicableDSList = iapi.applicableDSList, + GroupManager, + dsType, + DsClass, + DsGroupClass, + datasetJSON, + groupManagerName, + parentDataObj, + innerLength, + lineSets = dataObj.lineset || [], + lineSetJSON, + config = iapi.config, + dataSetMap = config.dataSetMap, + lineSetMap = config.lineSetMap, + dataSetMapLen = dataSetMap && dataSetMap.length, + legend = components.legend, + tempDataStoreMap = [], + tempLineStoreMap = [], + datasetIndex = 0, + currDataLength, + prevDataLength, + prevLineSetLen, + prevData, + k = 0, + len, + inited, + positionIndex = -1, + dataSet, + currCatLen, + catLen = iapi.config.catLen, + xAxis = components.xAxis[0], + dataDiff, + diff, + catDiff, + startIndex, + diffObj, + properDsStructure, + currentDataStore = components.dataset, + prevDSInnerLen; + + if (!dataset && lineSets.length === 0) { + iapi.setChartMessage(); + return; + } + + iapi.config.categories = dataObj.categories && dataObj.categories[0].category; + + datasetStore = components.dataset = []; + + for (j=0; j 0) { + datasetObj.removeData(startIndex, diff, false); + } + + datasetObj.JSONData = datasetJSON; + datasetObj.configure(); + } + datasetIndex ++; + tempDataStoreMap[j].push(datasetObj); + datasetStore.push(datasetObj); + // add to group manager + GroupManager && GroupManager.addDataSet (datasetObj, positionIndex, i); + } + } + } + else { + // Resetting inner Length and i for dispose of any previous dataset + innerLength = i = 0; + positionIndex --; + } + prevDSInnerLen = dataSetMap && dataSetMap[j] && dataSetMap[j].length; + + // When the number of inner datasets entered vis setChartData is less than the existing inner + // dataset then unadd the extra datasets and dispose them. + if (prevDSInnerLen > innerLength) { + for (k = i, len = prevDSInnerLen - innerLength + i; k < len; k ++ ) { + dataSet = dataSetMap[j][k]; + legend.removeItem(dataSet.legendItemId); + componentDispose.call(dataSet); + } + } + } + + if (dataSetMapLen > length) { + for (k = j, len = dataSetMapLen - length + j; k < len; k ++ ) { + innerLength = dataSetMap[k].length; + for (i = 0; i < innerLength; i ++) { + dataSet = dataSetMap[k][i]; + legend.removeItem(dataSet.legendItemId); + componentDispose.call(dataSet); + } + } + } + + config.dataSetMap = tempDataStoreMap; + + if (iapi.lineset) { + // For setting the lineset data if any + for (j = 0, length = lineSets.length; j < length; j++) { + lineSetJSON = lineSets[j]; + DsClass = FusionCharts.get('component', ['dataset', 'line']); + datasetObj = new DsClass (); + if (!(lineSetMap && lineSetMap[j])) { + datasetObj.chart = iapi; + datasetObj.index = datasetIndex; + datasetObj.init (lineSetJSON); + } + else { + datasetObj = lineSetMap[j]; + datasetObj.index = datasetIndex; + prevData = datasetObj.JSONData; + prevDataLength = prevData.data.length; + currDataLength = (lineSetJSON.data && lineSetJSON.data.length) || 0; + // Removing data plots if the number of current data plots is more than + // the existing ones. + if (prevDataLength > currDataLength) { + datasetObj.removeData(currDataLength, + prevDataLength - currDataLength, false); + } + datasetObj.JSONData = lineSetJSON; + datasetObj.configure(); + } + tempLineStoreMap.push (datasetObj); + datasetStore.push(datasetObj); + datasetIndex++; + } + + prevLineSetLen = lineSetMap && lineSetMap.length; + if (prevLineSetLen > length) { + for (k = j, len = prevLineSetLen - length + j; k < len; k ++ ) { + dataSet = lineSetMap[k]; + legend.removeItem(dataSet.legendItemId); + componentDispose.call(dataSet); + } + } + + config.lineSetMap = tempLineStoreMap; + } + // When the data entered is of column2d or mscolumn2d + if (!properDsStructure) { + components.dataset = currentDataStore; + iapi.setChartMessage(); + return; + } + iapi.config.catLen = xAxis.getCategoryLen(); + }, + creditLabel: creditLabel + }, chartAPI.mscartesian, { + isstacked: true, + enablemousetracking: true + }); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-mscombi2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + UNDEFINED, + //add the tools thats are requared + pluck = lib.pluck, + componentDispose = lib.componentDispose; + + chartAPI ('mscombi2d', { + friendlyName: 'Multi-series Combination Chart', + standaloneInit: true, + creditLabel: creditLabel, + defaultDatasetType: 'column', + applicableDSList: { 'line': true, 'area': true, 'column': true }, + _createDatasets : function () { + var iapi = this, + components = iapi.components, + dataObj = iapi.jsonData, + dataset = dataObj.dataset, + length = dataset && dataset.length, + i, + j, + datasetStore, + datasetObj, + defaultSeriesType = iapi.defaultDatasetType, + applicableDSList = iapi.applicableDSList, + legend = iapi.components.legend, + xAxis = components.xAxis[0], + GroupManager, + dsType, + DsClass, + DsGroupClass, + datasetJSON, + isStacked = iapi.config.isstacked, + groupManagerName, + parentyaxis, + prevDataLength, + currDataLength, + groupManagers = [], + dsCount = { }, + config = iapi.config, + groupManager, + count, + diff, + catLen = iapi.config.catLen, + currCatLen, + dataDiff, + catDiff, + prevData, + diffObj, + startIndex, + // map,line,area,column, stores the index of the various dataplots in combinational charts. + datasetMap = config.datasetMap || (config.datasetMap = { + line : [], + area : [], + column : [], + column3d: [], + scrollcolumn2d: [] + }), + dsTypeRef, + tempMap = { + line : [], + area : [], + column : [], + column3d: [], + scrollcolumn2d: [] + }; + + if (!dataset) { + iapi.setChartMessage(); + } + iapi.config.categories = dataObj.categories && dataObj.categories[0].category; + datasetStore = components.dataset = []; + legend && legend.emptyItems(); + + for (i=0; i 0) { + datasetObj.removeData(startIndex, diff, false); + } + datasetObj.index = i; + datasetObj.JSONData = datasetJSON; + datasetObj.configure(); + dsTypeRef.splice(0, 1); + } + // Push new dataset object into both tempmap array and datastore array + tempMap[dsType].push(datasetObj); + datasetStore.push (datasetObj); + } + } + + + iapi._setDatasetOrder(); + // Removing unused datasets if any + for (dataset in datasetMap) { + dsTypeRef = datasetMap[dataset]; + groupManager = dsTypeRef[0] && dsTypeRef[0].groupManager; + length = dsTypeRef.length; + count = dsCount[dataset] === UNDEFINED ? 0 : dsCount[dataset] + 1; + if (length) { + isStacked && groupManager && groupManager.removeDataSet(0, count, length); + for (j = 0; j < length; j++) { + groupManager && !isStacked && groupManager.removeDataSet(count, 0, 1); + if (dsTypeRef[j].type === 'column' && iapi.is3D === true) { + dsTypeRef[j].visible = false; + dsTypeRef[j].draw(); + } + else { + componentDispose.call(dsTypeRef[j]); + } + } + } + } + config.datasetMap = tempMap; + iapi.config.catLen = xAxis.getCategoryLen(); + } + }, chartAPI.areabase, { + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-mscombi3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('mscombi3d', { + standaloneInit: true, + friendlyName: 'Multi-series 3D Combination Chart', + defaultDatasetType: 'column3d', + is3D: true, + creditLabel: creditLabel, + defaultPlotShadow: 1, + applicableDSList: { 'column3d': true, 'line': true, 'area': true }, + _createDatasets : chartAPI.mscombi2d + }, chartAPI.mscartesian3d, { + showplotborder: 0, + enablemousetracking: true + }, chartAPI.areabase); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-mscolumnline3d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('mscolumnline3d', { + friendlyName: 'Multi-series Column and Line Chart', + is3D: true, + creditLabel: creditLabel, + defaultPlotShadow: 1, + applicableDSList: { 'column3d': true, 'line': true } + }, chartAPI.mscombi3d, { + use3dlineshift: 1, + showplotborder: 0, + enablemousetracking: true + }, chartAPI.msarea); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-stackedcolumn2dline', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('stackedcolumn2dline', { + friendlyName: 'Stacked Column and Line Chart', + defaultDatasetType: 'column', + creditLabel: creditLabel, + applicableDSList: { 'line': true, 'column': true } + }, chartAPI.mscombi2d, { + isstacked: true, + stack100percent: 0, + enablemousetracking: true + }, chartAPI.msarea); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-stackedcolumn3dline', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('stackedcolumn3dline', { + friendlyName: 'Stacked 3D Column and Line Chart', + is3D: true, + creditLabel: creditLabel, + _mouseEvtHandler: chartAPI.stackedcolumn3d._mouseEvtHandler, + applicableDSList: { 'column3d' :true, 'line': true } + }, chartAPI.mscombi3d, { + use3dlineshift: 1, + isstacked: true, + stack100percent: 0, + showplotborder: 0, + enablemousetracking: true + }, chartAPI.msarea); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-mscombidy2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('mscombidy2d', { + standaloneInit: true, + friendlyName: 'Multi-series Dual Y-Axis Combination Chart', + defaultDatasetType: 'column', + sDefaultDatasetType: 'line', + _createDatasets: chartAPI.mscombi2d, + creditLabel: creditLabel, + applicableDSList: { 'column': true, 'line': true, 'area': true } + }, chartAPI.msdybasecartesian, { + isdual: 1, + enablemousetracking: true + }, chartAPI.msarea); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-mscolumn3dlinedy', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('mscolumn3dlinedy', { + standaloneInit: true, + friendlyName: 'Multi-series 3D Column and Line Chart', + defaultDatasetType: 'column3d', + sDefaultDatasetType: 'line', + is3D: true, + creditLabel: creditLabel, + _createDatasets: chartAPI.mscombi2d, + defaultPlotShadow: 1, + applicableDSList: { 'column3d' :true, 'line': true } + }, chartAPI.msdybasecartesian3d, { + use3dlineshift: 1, + isdual: true, + showplotborder: 0, + enablemousetracking: true + }, chartAPI.msarea); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-stackedcolumn3dlinedy', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('stackedcolumn3dlinedy', { + standaloneInit: true, + friendlyName: 'Stacked 3D Column and Line Chart', + is3D: true, + defaultDatasetType: 'column3d', + creditLabel: creditLabel, + sDefaultDatasetType: 'line', + defaultSecondaryDataset: 'line', + _createDatasets: chartAPI.mscombi2d, + _mouseEvtHandler: chartAPI.stackedcolumn3d._mouseEvtHandler, + applicableDSList: { 'column3d': true, 'line': true } + }, chartAPI.msdybasecartesian3d, { + use3dlineshift: 1, + isdual: true, + isstacked: true, + showplotborder: 0, + enablemousetracking: true + }, chartAPI.msarea); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-msstackedcolumn2dlinedy', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('msstackedcolumn2dlinedy', { + standaloneInit: true, + friendlyName: 'Multi-series Dual Y-Axis Stacked Column and Line Chart', + stack100percent: 0, + defaultDatasetType: 'column', + sDefaultDatasetType: 'line', + hasLineSet: true, + creditLabel: creditLabel, + applicableDSList: { 'column': true }, + lineset : true, + _createDatasets: chartAPI.msstackedcolumn2d + }, chartAPI.msdybasecartesian, { + isdual: true, + haslineset: true, + isstacked: true, + enablemousetracking: true + }, chartAPI.msarea); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-scrollcolumn2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + math = Math, + mathMin = math.min, + mathMax = math.max, + mathFloor = math.floor, + mathRound = math.round, + pluckNumber = lib.pluckNumber, + UNDEFINED, + R = lib.Raphael; + + chartAPI ('scrollcolumn2d', { + standaloneInit: true, + friendlyName: 'Scrollable Multi-series Column Chart', + tooltipConstraint: 'plot', + canvasborderthickness: 1, + creditLabel: creditLabel, + defaultDatasetType : 'scrollcolumn2d', + applicableDSList: { 'scrollcolumn2d': true }, + avgScrollPointWidth: 40, + hasScroll: true, + defaultPlotShadow: 1, + binSize : 0, + + //function to handle swipe gesture + _swipeX: function (e, chartX) { + var iapi = this, + chartConfig = iapi.config, + components = iapi.components, + xAxis = components.xAxis[0], + axisConfig = xAxis.config, + canvasConfig = components.canvas.config, + canvasBorderWidth = canvasConfig.canvasBorderWidth, + + scrollBar = components.scrollBar, + scrollConf = scrollBar.conf, + scrollRatio = scrollConf.scrollRatio, + w = scrollConf.width - 1, + h = scrollConf.height - 1, + initialScrollPosition = chartConfig.scrollToEnd, + lastScrollPosition = chartConfig.lastScrollPosition, + canvasLeft = chartConfig.canvasLeft, + + aXisLineStartExtension = pluckNumber(canvasBorderWidth, axisConfig.lineStartExtension), + prevPos = iapi.touchCurrPos, + swipeStart = iapi.swipeStart, + type = e.type, + x = canvasLeft - aXisLineStartExtension, + button = (chartConfig.scrollShowButtons ? mathMin(h, w * 0.5) : 0), + mousedown = iapi.config.mousedown, + track, + trackLength, + trackOffset, + anchorOffset, + pos, + position; + + lastScrollPosition = lastScrollPosition !== undefined ? lastScrollPosition : initialScrollPosition; + + switch (type) { + case 'touchstart': + case 'mousedown': + iapi.config.mousedown = true; + iapi.prevScrollPosition = lastScrollPosition; + iapi.touchCurrPos = chartX; + break; + case 'touchmove': + case 'mousemove': + if (mousedown) { + if(!swipeStart) { + global.raiseEvent('scrollStart', { + scrollPosition: lastScrollPosition + }, iapi.chartInstance); + } + // lib.toolTip && lib.toolTip.hide(); + + track = w * scrollRatio - (button * 2 * scrollRatio); + trackLength = w - 2 * button - track; + trackOffset = x + button + 0.5; + + anchorOffset = trackOffset + (track - 1) * 0.5; + + pos =lastScrollPosition + ((prevPos - chartX) / trackLength); + + position = mathMin(mathMax(pos, 0),1); + + iapi.updateManager(position); + + // global.raiseEvent('onScroll', { + // scrollPosition: position + // }, iapi.chartInstance); + + iapi.swipeStart = true; + + iapi.touchCurrPos = chartX; + + if(e.originalEvent.preventDefault){ + e.originalEvent.preventDefault(); + } else { + e.originalEvent.returnValue = false; + } + + return true; + } + break; + case 'touchend': + case 'mouseup': + if(mousedown) { + if(iapi.swipeStart) { + global.raiseEvent('scrollEnd', { + prevScrollPosition: iapi.prevScrollPosition, + scrollPosition: chartConfig.lastScrollPosition + }, iapi.chartInstance); + iapi.swipeStart = false; + } + chartConfig.mousedown = false; + } + } + }, + + eiMethods: { + scrollTo: chartAPI.mscartesian._scrollTo + }, + + _manageScrollerPosition: function () { + var iapi = this, + config = iapi.config, + chartComponents = iapi.components, + _scrollBar = iapi._scrollBar, + availableHeight, + availableWidth, + scrollEnabled, + getScrollItems = _scrollBar.get, + scrollBar = chartComponents.scrollBar, + scrollItem, + scrollDimensions; + + // Fetching the scroll Items. + scrollItem = getScrollItems()[0]; + scrollBar.setConfiguaration(scrollItem.conf); + scrollEnabled = config.scrollEnabled; + //manage space for the scroll bar. + // fetch the availble space for the canvas area after other space management is over + availableHeight = config.canvasHeight; + availableWidth = config.canvasWidth; + scrollDimensions = scrollBar.getLogicalSpace(); + //allocate space for toolBox and set the chart configurations. + // shift denotes the amount of shift required by the x-axis + iapi._allocateSpace ({ + bottom: (config.shift = scrollEnabled === false ? 0 : + (scrollDimensions.height + scrollBar.conf.padding)) + }); + + }, + _resetViewPortConfig: function () { + var iapi = this; + + iapi.config.viewPortConfig = { + scaleX: 1, + scaleY: 1, + x: 0, + y: 0 + }; + }, + updateManager: function (pos) { + var iapi = this, + config = iapi.config, + viewPortConfig = iapi.config.viewPortConfig, + scaleX = viewPortConfig.scaleX, + canvasWidth = config.canvasWidth, + datasetLayer = iapi.graphics.datasetGroup, + dataLabelsLayer = iapi.graphics.datalabelsGroup, + trackerGroup = iapi.graphics.trackerGroup, + offset = (canvasWidth * (scaleX - 1) * pos), + xAxis = iapi.components.xAxis[0], + xAxisAnifConfig, + xAxisNameDrawConfig, + sumLabelsLayer = iapi.graphics.sumLabelsLayer, + transformAttr; + viewPortConfig.x = offset / scaleX; + // Taking mathround of offset for crisp value + transformAttr = 't' + -mathRound(offset) + ',0'; + config.lastScrollPosition = pos; + if (pos !== UNDEFINED){ + iapi.components.scrollBar.node && iapi.components.scrollBar.node.attr({ + 'scroll-position': pos + }); + } + datasetLayer.attr({ + transform: transformAttr + }); + dataLabelsLayer.attr({ + transform: transformAttr + }); + trackerGroup.attr({ + transform: transformAttr + }); + sumLabelsLayer && sumLabelsLayer.attr({ + transform: transformAttr + }); + + xAxisAnifConfig = xAxis.getAxisConfig('animateAxis'); + xAxisNameDrawConfig = xAxis.getAxisConfig('drawAxisName'); + // temp fix for axis animation + xAxis.setAxisConfig({ + animateAxis : false, + drawAxisName : false + }); + xAxis.draw(); + // reset the animation configuration + xAxis.setAxisConfig({ + animateAxis : xAxisAnifConfig, + drawAxisName : xAxisNameDrawConfig + }); + }, + _createToolBox: function () { + var iapi = this, + components = iapi.components, + _scrollBar = iapi._scrollBar, + getScrollItems = _scrollBar.get, + addScrollItems = _scrollBar.add, + tb, + Scroller, + scrollItem, + ComponentGroup, + scrollBar = components.scrollBar, + toolBoxAPI; + + // create the export or print buttons if required. + chartAPI.mscartesian._createToolBox.call(iapi); + tb = components.tb; + toolBoxAPI = components.toolBoxAPI || tb.getAPIInstances(tb.ALIGNMENT_HORIZONTAL); + Scroller = toolBoxAPI.Scroller; + ComponentGroup = toolBoxAPI.ComponentGroup; + // temp code: On update scroll items needs to be reused. + _scrollBar.clear(); + // Adding the scroll items in the scroll bar. + addScrollItems({ + isHorizontal: true + }, { + // Attach the callback for scroll Interaction. + 'scroll' : (function (ref) { + return function () { + var pos = arguments && arguments[0], + components = ref.components, + scrollBar = components.scrollBar, + scrollConf = scrollBar.conf, + isScrollTo = scrollConf.scrollTo; + ref.config.scrollCurrPosition = pos; + if (!isScrollTo){ + global.raiseEvent('onScroll', { + scrollPosition: pos + }, ref.chartInstance); + } + scrollConf.scrollTo = false; + ref.updateManager.apply(ref, arguments); + }; + })(iapi) + }); + + // Fetching the scroll Items. + scrollItem = getScrollItems()[0]; + + if (!scrollBar) { + // adding the scrollbar. + components.scrollBar = new Scroller(scrollItem.conf, tb.idCount, tb.pId) + .attachEventHandlers(scrollItem.handler); + } + }, + + _setAxisScale: function () { + var iapi = this, + components = iapi.components, + config = iapi.config, + xAxis = components.xAxis[0], + catCount = xAxis.getCategoryLen(), + jsonData = iapi.jsonData, + scrollOptions = config.scrollOptions || (config.scrollOptions = {}), + datasets = iapi.components.dataset, + outerDataSetLen = datasets.length, + chartAttr = jsonData.chart, + chartWidth = config.width, + scaleX, + dataset, + i, + numOfColumnSeries = 0, + offset, + noOfDatasets, + canvasWidth = config.canvasWidth, + totalNumPoint, + scrollToEnd = config.scrollToEnd, + lastScrollPosition = config.lastScrollPosition, + pos, + //number of columns to be drawn. + numVisiblePlot = pluckNumber (chartAttr.numvisibleplot, + mathFloor (chartWidth / iapi.avgScrollPointWidth)); + for (i = 0; i < outerDataSetLen; i++) { + dataset = datasets[i]; + if (dataset.type === 'column') { + numOfColumnSeries++; + } + } + noOfDatasets = numOfColumnSeries; + if (iapi.config.isstacked) { + numOfColumnSeries = 1; + } + + totalNumPoint = catCount * (numOfColumnSeries || 1); + + + if (numVisiblePlot >= 2 && numVisiblePlot < totalNumPoint) { + //update the scaleX for the axis. + config.viewPortConfig.scaleX = scaleX = totalNumPoint / numVisiblePlot; + if (lastScrollPosition !== undefined) { + pos = lastScrollPosition; + } + else { + pos = scrollToEnd ? 1 : 0; + } + + offset = (canvasWidth * (scaleX - 1) * pos); + config.viewPortConfig.x = offset / scaleX; + + //parse the scroll properties + scrollOptions.vxLength = numVisiblePlot / outerDataSetLen; + config.scrollEnabled = true; + } + else { + config.scrollEnabled = false; + } + }, + drawScrollBar: function () { + var iapi = this, + config = iapi.config, + viewPortConfig = config.viewPortConfig, + components = iapi.components, + graphics = iapi.graphics, + paper = components.paper, + xAxis = components.xAxis[0], + axisConfig = xAxis.config, + axisRange = xAxis.config.axisRange, + scrollOptions = config.scrollOptions || (config.scrollOptions = {}), + max = axisRange.max, + min = axisRange.min, + vxLength = scrollOptions.vxLength, + scrollBar = components.scrollBar, + scrollNode = scrollBar.node, + scrollToEnd = config.scrollToEnd, + lastScrollPosition = config.lastScrollPosition, + scaleX = viewPortConfig.scaleX, + canvasLeft, + canvasTop, + canvasHeight, + canvasWidth, + canvasConfig, + canvasBorderWidth, + aXisLineWidth, + startPercent, + aXisLineStartExtension, + aXisLineEndExtension, + scrollRatio, + windowedCanvasWidth, + fullCanvasWidth, + scrollBarParentGroup; + if (lastScrollPosition !== undefined) { + startPercent = lastScrollPosition; + } + else { + startPercent = scrollToEnd ? 1 : 0; + } + canvasLeft = config.canvasLeft; + canvasTop = config.canvasTop; + canvasHeight = config.canvasHeight; + canvasWidth = config.canvasWidth; + canvasConfig = components.canvas.config; + canvasBorderWidth = canvasConfig.canvasBorderWidth; + aXisLineWidth = axisConfig.showAxisLine ? axisConfig.axisLineThickness || 0 : 0; + aXisLineStartExtension = pluckNumber(canvasBorderWidth, axisConfig.lineStartExtension); + aXisLineEndExtension = pluckNumber(canvasBorderWidth, axisConfig.lineEndExtension); + scrollOptions.viewPortMin = min; + scrollOptions.viewPortMax = max; + scrollRatio = (scrollOptions.scrollRatio = 1 / scaleX); + windowedCanvasWidth = scrollOptions.windowedCanvasWidth = xAxis.getAxisPosition(vxLength); + fullCanvasWidth = scrollOptions.fullCanvasWidth = + xAxis.getAxisPosition(max - min) - windowedCanvasWidth; + + scrollBarParentGroup = graphics.scrollBarParentGroup; + if (!scrollBarParentGroup) { + scrollBarParentGroup = graphics.scrollBarParentGroup = paper.group('scrollBarParentGroup', + graphics.parentGroup).insertBefore(graphics.datalabelsGroup); + } + //draw the scroller element + // todo padding needs to be included. + if (config.scrollEnabled !== false) { + scrollBar.draw (canvasLeft - aXisLineStartExtension, + canvasTop + canvasHeight + canvasBorderWidth + aXisLineWidth - 2,{ + width: canvasWidth + aXisLineStartExtension + aXisLineEndExtension, + scrollRatio: scrollRatio, + roundEdges: canvasConfig.isRoundEdges, + fullCanvasWidth: fullCanvasWidth, + windowedCanvasWidth: windowedCanvasWidth, + scrollPosition: startPercent, + parentLayer: scrollBarParentGroup + }); + + // attach the callback for raising event only for it is a new scroll node. + !scrollNode && (function () { + var prevPos; + R.eve.on('raphael.scroll.start.' + scrollBar.node.id, function (pos) { + prevPos = pos; + global.raiseEvent('scrollstart', { + scrollPosition: pos + }, iapi.chartInstance); + }); + + R.eve.on('raphael.scroll.end.' + scrollBar.node.id, function (pos) { + global.raiseEvent('scrollend', { + prevScrollPosition: prevPos, + scrollPosition: pos + }, iapi.chartInstance); + }); + }()); + } + else { + scrollBar && scrollBar.node && scrollBar.node.hide(); + } + }, + _drawDataset: function () { + var iapi = this; + iapi._setClipping(); + chartAPI.mscartesian._drawDataset.call(this); + }, + _setClipping: function () { + var chart = this, + config = chart.config, + datasetLayer = chart.graphics.datasetGroup, + dataLabelsLayer = chart.graphics.datalabelsGroup, + trackerLayer = chart.graphics.trackerGroup, + viewPortConfig = config.viewPortConfig, + sumLabelsLayer = chart.graphics.sumLabelsLayer, + scaleX = viewPortConfig.scaleX, + animationObj = chart.get('config', 'animationObj'), + animation = animationObj.duration, + dummyAnimElem = animationObj.dummyObj, + dummyAnimObj = animationObj.animObj, + animType = animationObj.animType, + x = viewPortConfig.x, + chartHeight = config.height, + clipCanvas = chart.components.canvas.config.clip['clip-canvas']; + + clipCanvas = (clipCanvas && clipCanvas.slice(0)) || []; + if (!chart.config.clipSet) { + datasetLayer.attr({ + 'clip-rect': clipCanvas + }); + dataLabelsLayer.attr({ + 'clip-rect': clipCanvas + }); + trackerLayer.attr({ + 'clip-rect': clipCanvas + }); + clipCanvas[3] = chartHeight; + clipCanvas[1] = 0; + sumLabelsLayer && sumLabelsLayer.attr({ + 'clip-rect': clipCanvas + }); + } + else { + datasetLayer.animateWith(dummyAnimElem, dummyAnimObj,{ + 'clip-rect': clipCanvas + }, animation, animType); + dataLabelsLayer.animateWith(dummyAnimElem, dummyAnimObj,{ + 'clip-rect': clipCanvas + }, animation, animType); + trackerLayer.attr({ + 'clip-rect': clipCanvas + }); + + clipCanvas[3] = chartHeight; + clipCanvas[1] = 0; + sumLabelsLayer && sumLabelsLayer.animateWith(dummyAnimElem, dummyAnimObj, { + 'clip-rect': clipCanvas + }, animation, animType); + } + datasetLayer.attr({ + transform: 'T' + - (x * scaleX) + ',0' + }); + dataLabelsLayer.attr({ + transform: 'T' + - (x * scaleX) + ',0' + }); + trackerLayer.attr({ + transform: 'T' + - (x * scaleX) + ',0' + }); + sumLabelsLayer && sumLabelsLayer.attr({ + transform: 'T' + - (x * scaleX) + ',0' + }); + chart.config.clipSet = true; + }, + configure: function () { + var chart = this, + jsonData = chart.jsonData, + chartAttr = jsonData.chart, + chartConfig; + chartAPI.mscolumn2d.configure.call(this); + chartConfig = chart.config; + chartConfig.scrollToEnd = pluckNumber(chartAttr.scrolltoend, 0); + chartConfig.lastScrollPosition = UNDEFINED; + } + }, chartAPI.scrollbase); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-scrollarea2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI, + pluckNumber = lib.pluckNumber, + math = Math, + mathFloor = math.floor; + + chartAPI ('scrollarea2d', { + friendlyName: 'Scrollable Multi-series Area Chart', + tooltipConstraint: 'plot', + canvasborderthickness: 1, + creditLabel: creditLabel, + hasScroll: true, + defaultDatasetType: 'scrollarea2d', + applicableDSList: { 'scrollarea2d': true }, + avgScrollPointWidth: 75, + defaultPlotShadow: 0, + binSize : 0, + _setAxisScale: function () { + var iapi = this, + components = iapi.components, + config = iapi.config, + xAxis = components.xAxis[0], + catCount = xAxis.getCategoryLen(), + jsonData = iapi.jsonData, + scrollOptions = config.scrollOptions || (config.scrollOptions = {}), + chartAttr = jsonData.chart, + chartWidth = config.width, + scaleX, + totalNumPoint = catCount, + offset, + lastScrollPosition = config.lastScrollPosition, + pos, + scrollToEnd = config.scrollToEnd, + canvasWidth = config.canvasWidth, + //number of columns to be drawn. + numVisiblePlot = pluckNumber (chartAttr.numvisibleplot, + mathFloor (chartWidth / iapi.avgScrollPointWidth)); + if (numVisiblePlot >= 2 && numVisiblePlot < totalNumPoint) { + //update the scaleX for the axis. + config.viewPortConfig.scaleX = scaleX = totalNumPoint / numVisiblePlot; + if (lastScrollPosition !== undefined) { + pos = lastScrollPosition; + } + else { + pos = scrollToEnd ? 1 : 0; + } + + + offset = (canvasWidth * (scaleX - 1) * pos); + config.viewPortConfig.x = offset / scaleX; + + //parse the scroll properties + scrollOptions.vxLength = numVisiblePlot; + config.scrollEnabled = true; + } + else { + config.scrollEnabled = false; + } + } + }, chartAPI.scrollcolumn2d, { + enablemousetracking: true + }, chartAPI.areabase); + + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-scrollline2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('scrollline2d', { + friendlyName: 'Scrollable Multi-series Line Chart', + tooltipConstraint: 'plot', + canvasborderthickness: 1, + defaultDatasetType: 'line', + creditLabel: creditLabel, + avgScrollPointWidth: 75, + defaultPlotShadow: 1, + binSize : 0 + }, chartAPI.scrollarea2d, { + zeroplanethickness: 1, + zeroplanealpha: 40, + showzeroplaneontop: 0, + enablemousetracking: true + }, chartAPI.areabase); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-scrollstackedcolumn2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('scrollstackedcolumn2d', { + friendlyName: 'Scrollable Stacked Column Chart', + canvasborderthickness: 1, + tooltipConstraint: 'plot', + avgScrollPointWidth: 75, + creditLabel: creditLabel + }, chartAPI.scrollcolumn2d, {}, chartAPI.stackedcolumn2d); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-scrollcombi2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('scrollcombi2d', { + friendlyName: 'Scrollable Combination Chart', + tooltipConstraint: 'plot', + hasScroll: true, + canvasborderthickness: 1, + avgScrollPointWidth: 40, + applicableDSList: {'area': true, 'line': true, 'column': true}, + creditLabel: creditLabel, + _createDatasets : chartAPI.mscombi2d + }, chartAPI.scrollcolumn2d, {}, chartAPI.msarea); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-scrollcombidy2d', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI; + + chartAPI ('scrollcombidy2d', { + friendlyName: 'Scrollable Dual Y-Axis Combination Chart', + tooltipConstraint: 'plot', + canvasborderthickness: 1, + avgScrollPointWidth: 40, + hasScroll: true, + _swipeX: chartAPI.scrollcolumn2d, + _drawDataset: chartAPI.scrollcolumn2d, + updateManager: chartAPI.scrollcolumn2d, + _setAxisScale: chartAPI.scrollcolumn2d, + _createToolBox: chartAPI.scrollcolumn2d, + _scrollBar: chartAPI.scrollcolumn2d, + _manageScrollerPosition: chartAPI.scrollcolumn2d, + drawScrollBar: chartAPI.scrollcolumn2d, + _setClipping: chartAPI.scrollcolumn2d, + creditLabel: creditLabel, + configure: chartAPI.scrollcolumn2d, + eiMethods: { + scrollTo: chartAPI.mscartesian._scrollTo + } + }, chartAPI.mscombidy2d, { + enablemousetracking: true, + isdual: true + }, chartAPI.areabase); + +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-scatter', function () { + var global = this, + lib = global.hcLib, + win = global.window, + chartAPI = lib.chartAPI, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname); + + chartAPI ('scatter', { + friendlyName: 'Scatter Chart', + isXY: true, + standaloneInit: true, + hasLegend: true, + defaultZeroPlaneHighlighted: false, + creditLabel: creditLabel, + defaultDatasetType : 'Scatter', + applicableDSList: { + 'Scatter': true + }, + drawTracker: true + }, chartAPI.scatterBase, { + allowreversexaxis: true, + enablemousetracking: true + }); +}]); + +FusionCharts.register ('module', ['private', 'modules.renderer.js-bubble', function () { + var global = this, + lib = global.hcLib, + win = global.window, + creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname), + chartAPI = lib.chartAPI, + math = Math, + mathMax = math.max, + mathMin = math.min; + + chartAPI ('bubble', { + friendlyName: 'Bubble Chart', + standaloneInit: true, + defaultDatasetType: 'bubble', + creditLabel: creditLabel, + applicableDSList: { 'bubble': true }, + getDataLimits: function () { + var iapi = this, + datasets = iapi.components.dataset, + i, + dataset, + len, + limits, + zMax = -Infinity, + zMin = +Infinity; + + for (i = 0,len = datasets.length; i < len; i++) { + dataset = datasets[i]; + limits = dataset.getDataLimits(); + zMax = mathMax(zMax, limits.zMax || -Infinity); + zMin = mathMin(zMin, limits.zMin || +Infinity); + } + zMax = zMax === -Infinity ? 0 : zMax; + zMin = zMin === +Infinity ? 0 : zMin; + return { + zMax: zMax, + zMin: zMin + }; + } + }, chartAPI.scatter, { + enablemousetracking: true + }); +}]); + +}, [3, 2, 2, 'sr4']]); +/* jshint ignore: end */ + +/** + * FusionCharts JavaScript Library + * ZoomLine visualization module extension comprising visualization logic as well as renderer adapter. + * @private + * + * @module fusioncharts.renderer.javascript.charts.zoomline + * @requires fusioncharts.renderer.javascript.charts.common + */ +FusionCharts.register ('module', ['private', 'modules.renderer.js-zoomline', function () { + /*jslint newcap: false */ + var global = this, + lib = global.hcLib, + hashify = lib.hashify, + win = global.window, + doc = win.document, + Image = win.Image, + MouseEvent = win.MouseEvent, + userAgent = win.navigator.userAgent, + isIE = /msie/i.test (userAgent) && !win.opera, + chartAPI = lib.chartAPI, + extend2 = lib.extend2, + addEvent = lib.addEvent, + pluck = lib.pluck, + // BLANKSTRING = lib.BLANKSTRING, + // parseTooltext = lib.parseTooltext, + pluckNumber = lib.pluckNumber, + getFirstColor = lib.getFirstColor, + convertColor = lib.graphics.convertColor, + bindSelectionEvent = lib.bindSelectionEvent, + // parseTrendlines = lib.createTrendLine, + parseUnsafeString = lib.parseUnsafeString, + componentDispose = lib.componentDispose, + // regescape = lib.regescape, + R = lib.Raphael, + toRaphaelColor = lib.toRaphaelColor, + hasTouch = lib.hasTouch, + plotEventHandler = lib.plotEventHandler, + getMouseCoordinate = lib.getMouseCoordinate, + UNDEFINED, + creditLabel = false && !lib.CREDIT_REGEX.test(win.location.hostname), + // CONFIGKEY = lib.FC_CONFIG_STRING, + // G = 'g', + PIPE = '|', + // DOT = '.', + BLANK = '', + TOUCH_THRESHOLD_PIXELS = lib.TOUCH_THRESHOLD_PIXELS, + CLICK_THRESHOLD_PIXELS = lib.CLICK_THRESHOLD_PIXELS, + // hot/tracker threshold in pixels + HTP = hasTouch ? TOUCH_THRESHOLD_PIXELS : CLICK_THRESHOLD_PIXELS, + COLOR_WHITE = '#FFFFFF', + COLOR_E3E3E3 = '#E3E3E3', + COLOR_C2C2C2 = '#C2C2C2', + COLOR_EFEFEF = '#EFEFEF', + STR_DEF = 'default', + POINTER = 'pointer', + preDefStr = lib.preDefStr, + DEFAULT_CURSOR = preDefStr.DEFAULT, + DATAPLOTCLICK = 'dataplotclick', + //default cursor type. + // STR_DEF = 'default', + PX = 'px', + TRACKER_FILL = 'rgba(192,192,192,' + (isIE ? 0.002 : 0.000001) + ')', // invisible but clickable + UNDEF, + schedular = lib.schedular, + priorityList = lib.priorityList, + math = Math, + mathCeil = math.ceil, + mathFloor = math.floor, + mathRound = math.round, + mathMax = math.max, + mathMin = math.min, + mathCos = math.cos, + mathSin = math.sin, + // mathAbs = math.abs, + toFloat = win.parseFloat, + toInt = win.parseInt, + MAX_MITER_LINEJOIN = 2, + CrossLine; // function (constructor) + + // Add events to the legacy event list + extend2 (lib.eventList, { + zoomed: 'FC_Zoomed', + pinned: 'FC_Pinned', + resetzoomchart: 'FC_ResetZoomChart' + }); + + chartAPI ('zoomline',{ + standaloneInit: true, + canvasborderthickness: 1, + defaultDatasetType: 'zoomline', + applicableDSList: { + 'zoomline': true + }, + friendlyName: 'Zoomable and Panable Multi-series Line Chart', + creditLabel: creditLabel, + /* + * Only y-axes are being drawn. + * x-axis is drawn after setting the label step value. + */ + _drawAxis : function () { + var iapi = this, + components = iapi.components, + yAxisArr = components.yAxis || [], + i, + len; + for (i = 0, len = yAxisArr.length; i < len; i++) { + yAxisArr[i].draw (); + } + }, + _setCategories: function () { + var iapi = this, + config = iapi.config, + components = iapi.components, + dataObj = iapi.jsonData, + xAxis = components.xAxis, + tempArr, + data, + j, + len, + cdm = config.cdm, + cdmchar = config.cdmchar, + category = (dataObj.categories && dataObj.categories[0].category) || []; + if (cdm || typeof category === 'string') { + if (category.split) { + tempArr = category.split(cdmchar); + data = []; + for (j = 0, len = tempArr.length; j < len; j += 1) { + data.push({ + label : tempArr[j] + }); + } + iapi.config.categories = dataObj.categories[0].category = data; + } + } + xAxis[0].setAxisPadding(0, 0); + xAxis[0].setCategory (data || category); + }, + + _createDatasets : function () { + var i, + j, + len, + data, + diff, + dsType, + DsClass, + tempArr, + datasetObj, + datasetJSON, + parentyaxis, + datasetStore, + prevDataLength, + datasetStoreLen, + currDataLength, + dsCount = {}, + iapi = this, + config = iapi.config, + components = iapi.components, + dataObj = iapi.jsonData, + dataset = dataObj.dataset, + length = dataset && dataset.length, + cdmchar = config.cdmchar, + cdm = config.cdm, + defaultSeriesType = iapi.defaultDatasetType, + applicableDSList = iapi.applicableDSList, + legend = iapi.components.legend, + legendItems = legend.components.items || [], + category = dataObj.categories && dataObj.categories[0].category; + if (!dataset || !category) { + iapi.setChartMessage(); + } + iapi.config.categories = category; + datasetStore = components.dataset || (components.dataset = []); + datasetStoreLen = datasetStore.length; + for (i=0; i currDataLength) { + datasetObj.removeData(currDataLength, prevDataLength - currDataLength, false); + } + datasetStore[i].JSONData = datasetJSON; + datasetStore[i].configure(); + datasetStore[i]._deleteGridImages && datasetStore[i]._deleteGridImages(); + } + } + } + + // When the number of datasets entered vis setChartData is less than the existing dataset then dispose the + // extra datasets. + if (datasetStoreLen > length) { + diff = datasetStoreLen - length; + for (j = i, length = diff + i; j < length; j ++ ) { + componentDispose.call(datasetStore[j]); + } + datasetStore.splice(i, diff); + legendItems.splice(i, diff); + } + }, + + isWithinCanvas : function (e, chart) { + var chartConfig = chart.get('config'), + mousePos = lib.getMouseCoordinate(chart.get('linkedItems', 'container'),e, chart), + /*converts the original mouse event toa Fusion Charts event( that has chartX, chartY, pageX and pageY as + its property)*/ + chartX = mousePos.chartX, + chartY = mousePos.chartY, + minX = chartConfig.canvasLeft, + minY = chartConfig.canvasTop, + maxX = chartConfig.canvasLeft + chartConfig.canvasWidth, + maxY = chartConfig.canvasHeight + chartConfig.canvasTop; + //default value of the flag. + mousePos.insideCanvas = false; + + // store the original event as well + mousePos.originalEvent = e; + //return true if within the canvas + if (chartX > minX && chartX < maxX && chartY > minY && chartY < maxY) { + //set the flag to be TRUE if triggered within the canvas area. + mousePos.insideCanvas = true; + } + return mousePos; + }, + + highlightPoint: function (showHover,cx,cy,point,index, toolText) { + var chart = this, + chartConfig = chart.config, + chartComponents = chart.components, + chartGraphics = chart.graphics, + paper = chartComponents.paper, + tracker = chartGraphics.tracker, + datasetObj = chartComponents.dataset[index], + datasetConfig = datasetObj && datasetObj.config, + radius = ( datasetObj && datasetConfig.zoomedRadius || 0), + hoverCosmetics = datasetObj && datasetConfig.hoverCosmetics, + fill = hoverCosmetics && hoverCosmetics.fill, + borderColor = hoverCosmetics && hoverCosmetics.borderColor, + borderThickness = hoverCosmetics && hoverCosmetics.borderThickness, + attrObj = {}, + //attach the callbacks for the click and hover interactions for the hovering element. + plotEventHandlerCallback = { + 'click': function (e){ + lib.plotEventHandler.call(this, chart, e); + }, + 'hoverIn': function (e){ + lib.plotEventHandler.call(this, chart, e, 'dataplotRollover'); + }, + 'hoverOut': function (e) { + lib.plotEventHandler.call(this, chart, e, 'dataplotRollout'); + } + }; + + if (!tracker) { + // in case the tracker element is not created. Attach the callbacks for click and hovering effects. + tracker = chartGraphics.tracker = paper.circle(0, 0, 0, chartGraphics.trackerGroup) + .attr({ + 'clip-rect': chartConfig.canvasLeft + ',' + (chartConfig.canvasTop) + ',' + + chartConfig.canvasWidth + ',' + chartConfig.canvasHeight + }) + .click(plotEventHandlerCallback.click) + .trackTooltip(true) + .hover(plotEventHandlerCallback.hoverIn, plotEventHandlerCallback.hoverOut); + } + //Attach the required information for the hovering element. + point && tracker.data('eventArgs', { + x: point.x, + y: point.y, + tooltip: point.tooltip, + link: point.link + }); + + /* store the hovered point as last visible point. This is required to avoid redaundant calls if the same + point is hovered. */ + chartConfig.lastHoveredPoint = point; + + // if hover cosmetics then add that in the attrObj + if (Number(showHover)) { + attrObj = { + r: radius, + fill: fill, + stroke: borderColor, + 'stroke-width': borderThickness + }; + } + else { // make transparent configuration + attrObj = { + r: radius, + fill: TRACKER_FILL, + stroke: TRACKER_FILL, + 'stroke-width': 0 + }; + } + tracker + .attr(attrObj) + .tooltip(toolText) + .transform('t' + (cx + chartConfig.canvasLeft) + ',' + (cy + chartConfig.canvasTop)); + /*on first mouse move the element is created and on the next mouse move the tooltip is shown. + In order give the effect of displaying the tooltip once hovered, another mouseMove event is + fired forcefully */ + point && chart.fireMouseEvent('mouseover', tracker && tracker.node, chartConfig.lastMouseEvent); + }, + + fireMouseEvent : function (eventName, domElement, mouseEventInit) { + var event; + if (!domElement || !eventName) { + return; + } + + if(!mouseEventInit){ + mouseEventInit = {}; + } + if (mouseEventInit.originalEvent) { + mouseEventInit = mouseEventInit.originalEvent; + } + // map touch event for touch devices + if (mouseEventInit.touches) { + mouseEventInit = mouseEventInit.touches[0]; + } + + + if (domElement.dispatchEvent) { + if (MouseEvent) { + //for FireFox, chrome and opera. NOT confirmed in Safari + // Creates a MouseEvent object. + event = new MouseEvent(eventName, { + bubbles: !!mouseEventInit.bubbles, + cancelable: !!mouseEventInit.cancelable, + clientX: mouseEventInit.clientX || ( mouseEventInit.pageX && (mouseEventInit.pageX - + doc.body.scrollLeft - doc.documentElement.scrollLeft)) || 0, + clientY: mouseEventInit.clientY || ( mouseEventInit.pageY && (mouseEventInit.pageY - + doc.body.scrollTop - doc.documentElement.scrollTop)) || 0, + screenX: mouseEventInit.screenX || 0, + screenY: mouseEventInit.screenY || 0, + pageX: mouseEventInit.pageX || 0, + pageY: mouseEventInit.pageY || 0 + }); + } + else if (doc.createEvent) { + //for IE support. + event = doc.createEvent('HTMLEvents'); + event.initEvent(eventName, !!mouseEventInit.bubbles, !!mouseEventInit.cancelable); + } + event.eventName = eventName; + event && domElement.dispatchEvent(event); + } + else if(doc.createEventObject && domElement.fireEvent){ + event = doc.createEventObject(); + event.eventType = eventName; + event.eventName = eventName; + //trigger the event forcefully. + domElement.fireEvent('on' + eventName, event); + } + }, + + configure: function () { + var style, + iapi = this, + jsonData = iapi.jsonData, + chartDef = jsonData.chart || {}, + colorManager = iapi.components.colorManager, + canvasBorderColor = colorManager.getColor('canvasBorderColor'), + config; + // todo code: Need to extend support for these attributes, temporarily hardcoded. + chartDef.animation = 0; + chartDef.showvalues = 0; + + chartAPI.msline.configure.call(iapi); + // The base configure fn above creates a dummy chart object if there is no chart object in json data. + config = iapi.config; + style = config.style; + // overwrite the existing chart configurations. + // Copy and prepare some configurations for zoom charts + extend2(config, { + useRoundEdges: pluckNumber (chartDef.useroundedges,0), + animation: false, + zoomType: 'x', + canvasPadding: pluckNumber(chartDef.canvaspadding, 0), + scrollColor: getFirstColor(pluck(chartDef.scrollcolor, + colorManager.getColor('altHGridColor'))), + scrollShowButtons: !!pluckNumber(chartDef.scrollshowbuttons, 1), + scrollHeight: pluckNumber(chartDef.scrollheight, 16) || 16, + scrollBarFlat: pluckNumber (chartDef.flatscrollbars, 0), + allowPinMode: pluckNumber(chartDef.allowpinmode, 1), + skipOverlapPoints: pluckNumber(chartDef.skipoverlappoints, 1), + showToolBarButtonTooltext: pluckNumber(chartDef.showtoolbarbuttontooltext, 1), + btnResetChartTooltext: pluck(chartDef.btnresetcharttooltext, 'Reset Chart'), + btnZoomOutTooltext: pluck(chartDef.btnzoomouttooltext, 'Zoom out one level'), + btnSwitchToZoomModeTooltext: pluck(chartDef.btnswitchtozoommodetooltext, + 'Switch to Zoom Mode
Select a subset of data to zoom ' + + 'into it for detailed view'), + btnSwitchToPinModeTooltext: pluck(chartDef.btnswitchtopinmodetooltext, + 'Switch to Pin Mode
Select a subset of data and compare ' + + 'with the rest of the view'), + /** + * @note pinPaneStroke related attribute parsing is unused in + * present JS ZoomLine implementation. + pinPaneStrokeWidth: pluckNumber(chartDef.pinpaneborderthickness, 1), + pinPaneStroke: convertColor(pluck(chartDef.pinpanebordercolor, + canvasBorderColor), pluckNumber(chartDef.pinpaneborderalpha, 15)), + */ + pinPaneFill: convertColor(pluck(chartDef.pinpanebgcolor, + canvasBorderColor), pluckNumber(chartDef.pinpanebgalpha, 15)), + zoomPaneFill: convertColor(pluck(chartDef.zoompanebgcolor, + '#b9d5f1'), pluckNumber(chartDef.zoompanebgalpha, 30)), + zoomPaneStroke: convertColor(pluck(chartDef.zoompanebordercolor, + '#3399ff'), pluckNumber(chartDef.zoompaneborderalpha, 80)), + showPeakData: pluckNumber(chartDef.showpeakdata, 0), + maxPeakDataLimit: pluckNumber(chartDef.maxpeakdatalimit, chartDef.maxpeaklimit, null), + minPeakDataLimit: pluckNumber(chartDef.minpeakdatalimit, chartDef.minpeaklimit, null), + crossline: { + enabled: pluckNumber(chartDef.showcrossline, 1), + line: { + 'stroke-width': pluckNumber(chartDef.crosslinethickness, 1), + 'stroke': getFirstColor(pluck(chartDef.crosslinecolor, '#000000')), + 'stroke-opacity': pluckNumber(chartDef.crosslinealpha, 20) / 100 + }, + labelEnabled: pluckNumber(chartDef.showcrosslinelabel, + chartDef.showcrossline, 1), + labelstyle: { + fontSize: toFloat(chartDef.crosslinelabelsize) ? + toFloat(chartDef.crosslinelabelsize) + PX : style.outCanfontSize, + fontFamily: pluck(chartDef.crosslinelabelfont, + style.outCanfontFamily) + }, + valueEnabled: pluckNumber(chartDef.showcrosslinevalues, + chartDef.showcrossline, 1), + valuestyle: { + fontSize: toFloat(chartDef.crosslinevaluesize) ? + toFloat(chartDef.crosslinevaluesize) + PX : style.inCanfontSize, + fontFamily: pluck(chartDef.crosslinevaluefont, + style.inCanvasStyle.fontFamily) + } + }, + useCrossline: pluckNumber(chartDef.usecrossline, 1), + tooltipSepChar: pluck(chartDef.tooltipsepchar, ', '), + showTerminalValidData: pluckNumber(chartDef.showterminalvaliddata, 0), + cdmchar: pluck(chartDef.dataseparator, PIPE), + cdm: pluckNumber(chartDef.compactdatamode, 0) + }); + }, + + getValuePixel: function (px) { + var chart = this, + chartConfig = chart.config, + info = chartConfig.viewPortConfig; + return info.ddsi + mathFloor(px / info.ppp); + }, + + __toolbar: function () { + var toolBoxAPI, + SymbolStore, + ComponentGroup, + HorizontalToolbar, + chart = this, + chartComponents = chart.components, + toolBox = chartComponents.tb = new (FusionCharts.register('component', ['toolbox', 'toolbox']))(), + toolConf = toolBox.getDefaultConfiguration(), + Symbol, + Scroller; + + toolBox.init({ + iAPI: { + chart: chart + }, + graphics: chart.graphics, + chart: chart, + components: chartComponents + }); + + toolBoxAPI = chartComponents.toolBoxAPI || toolBox.getAPIInstances(toolBox.ALIGNMENT_HORIZONTAL); + SymbolStore = toolBoxAPI.SymbolStore; + ComponentGroup = toolBoxAPI.ComponentGroup; + HorizontalToolbar = toolBoxAPI.Toolbar; + Symbol = toolBoxAPI.Symbol; + Scroller = toolBoxAPI.Scroller; + toolBox.graphics = {}; + + return { + reInit: function () { + toolBox.init({ + iAPI: { + chart: chart + }, + graphics: chart.graphics, + chart: chart, + components: chartComponents + }); + }, + addSymbol: function (symbolName, callBack, options, group) { + var symbol = new Symbol(symbolName); + options && group.setConfiguaration({ + buttons : extend2(extend2({},toolConf),options) + }); + callBack.tooltext = options.tooltip; + callBack && symbol.attachEventHandlers(callBack); + group.addSymbol(symbol); + return symbol; + }, + + addScroll: function (options, callBack) { + var scrl = new Scroller(options); + /*options && group.setConfiguaration({ + buttons : extend2(extend2({},toolConf),options) + }); + callBack.tooltext = options.tooltip;*/ + callBack && scrl.attachEventHandlers(callBack); + return scrl; + }, + + addComponentGroup: function (groupName, options) { + var group; + group = new ComponentGroup(); + group.setConfiguaration({ + group : { + fill : options ? options.fill : convertColor('EBEBEB', 0), + borderThickness : options ? pluckNumber(options.borderThickness, 0) : 0 + } + }); + return group; + }, + + addToolBox: function (componentGroups) { + var i, + toolBox = new HorizontalToolbar(); + + for (i = 0; i < componentGroups.length; i += 1) { + toolBox.addComponent(componentGroups[i]); + } + return toolBox; + }, + + setDrawingArea: function (toolBox, drawingArea) { + toolBox.drawingArea = drawingArea; + return toolBox; + }, + + draw: function (toolBoxes) { + var i, + toolBox, + drawingArea; + for (i = 0; i < toolBoxes.length; i += 1) { + toolBox = toolBoxes[i]; + drawingArea = toolBox.drawingArea; + toolBox.draw(drawingArea.x, drawingArea.y); + } + }, + + registerSymbol: function (symbolName, symbolPathFn) { + SymbolStore.register(symbolName, symbolPathFn); + }, + + getLogicalSpace: function (toolBox) { + return toolBox.getLogicalSpace(); + }, + + getNode: function (buttonGroup) { + return buttonGroup.node; + } + }; + }, + + __preDraw: function () { + var seriesItemConf, + ppp, + ppl, + visw, + visx, + yminValue, + ymin, + pinclip, + tAtt, + pingroup, + datalayer, + preZoomed, + scrollerLayer, + pinrect, + iapi = this, + iapiComponents = iapi.components, + paper = iapiComponents.paper, + iapiGraphics = iapi.graphics, + //todo: containerelement should be a part of graphics components. + // containerElem = iapiGraphics.container || iapi.container, + imageContainer = iapiGraphics.imageContainer, + iapiConfig = iapi.config, + canvasLeft = iapiConfig.canvasLeft, + canvasWidth = iapiConfig.canvasWidth, + chartDef = iapi.jsonData.chart, + cdm = iapiConfig.cdm, + xAxis = iapiComponents.xAxis[0], + // listeners = iapiComponents.eventListeners || (iapiComponents.eventListeners = []), + // containerElem = iapi.container, + info = iapiConfig.viewPortConfig, + canvasConfig = iapi.components.canvas.config, + canvasPadding = mathMax(canvasConfig.canvasPadding, canvasConfig.canvasPaddingLeft, + canvasConfig.canvasPaddingRight), + yAxis = iapiComponents.yAxis[0], + datasetGroup = iapiGraphics.datasetGroup, + canvasHeight = iapiConfig.canvasHeight, + canvasTop = iapiConfig.canvasTop, + chartAttrs = iapi.jsonData.chart, + borderWidth = iapiConfig.borderWidth || (iapiConfig.borderWidth = pluckNumber (chartAttrs.showborder, + 1) ? pluckNumber (chartAttrs.borderthickness, 1) : 0), + allowpin = iapiConfig.allowPinMode, + crosslineOptions = iapiConfig.crossline, + clen = xAxis.getCategoryLen(), + // Validate and parse the data display indices and also calculate + // initial pixels-per-point. + dsi = toInt(pluckNumber(chartDef.displaystartindex, 1), 10) - 1, + dei = toInt(pluckNumber(chartDef.displayendindex, clen || 2), 10) - 1, + + overFlowingMarkerWidth = 0, + dataSetArr = iapiComponents.dataset, + j = dataSetArr.length, + crossline = iapiGraphics.crossline; + + iapiConfig.updateAnimDuration = 500; // default animation durations. + //the origin of the container element should coincide with the origin(top-left) of the canvas area. + + imageContainer.transform('t' + canvasLeft + ',' + canvasTop); + //apply clipping to the container element. + imageContainer.attr({ + 'clip-rect': canvasLeft + ',' + canvasTop + ',' + canvasWidth + ',' + canvasHeight + }); + iapiConfig.status = 'zoom'; + //set the maximum scaleX and scaleY. + iapiConfig.maxZoomLimit = pluckNumber(chartDef.maxzoomlimit, 1000); + + //stores the different visual configurations for a historical reference. + iapiConfig.viewPortHistory = []; + + ((ppp = pluckNumber(chartDef.pixelsperpoint, 15)) < 1) && (ppp = 1); + ((ppl = pluckNumber(chartDef.pixelsperlabel, chartDef.xaxisminlabelwidth, + xAxis.getAxisConfig('labels').rotation ? 20 : 60)) < ppp) && (ppl = ppp); + // start index must be positive and less than end. last index must + // not be greater than category count. + (dsi < 0 || dsi >= ((clen - 1) || 1)) && (dsi = 0); + (dei <= dsi || dei > ((clen - 1) || 1)) && (dei = (clen - 1) || 1); + // Set initial zoom information + info = (iapiConfig.viewPortConfig = extend2(iapiConfig.viewPortConfig, { + // cnd: pluckNumber(chartDef.connectnulldata, 0), // connectNullData + amrd: pluckNumber(chartDef.anchorminrenderdistance, 20), // anchor render distance + nvl: pluckNumber(chartDef.numvisiblelabels, 0), // num visible labels + cdm: cdm, // compact data mode + oppp: ppp, // original pixels per point + oppl: ppl, // original pixels per label + dsi: dsi, // dislay start index + dei: dei, // display end index + vdl: dei - dsi, // visible display length + // dmax: legacyYAxisConf.max = dmax, // max value of all data + // dmin: legacyYAxisConf.min = dmin, // min value of all data + // dsecondarymax : secondaryYAxisConf.max = dsecondarymax, + // dsecondarymin : secondaryYAxisConf.min = dsecondarymin, + clen: clen, // category length and data length + + // Internal variables required for zoom state. + offset: 0, // (internal) drawing offset for smooth scroll, + step: 1, // (internal) default stepping or skipping, + llen: 0, // (internal) number of labels + alen: 0, // (internal) length of anchors already drawn + ddsi: dsi, // (internal) dynamic display start as per scroll + ddei: dei, // (internal) dynamic display end as per scroll + ppc: 0 // (internal) pixels per category + })); + + if (!info.clen) { + return; + } + // calculate the overflowing markers width + while (j--) { + seriesItemConf = dataSetArr[j].config; + overFlowingMarkerWidth = mathMax(overFlowingMarkerWidth, ((seriesItemConf.drawanchors && + ((seriesItemConf.anchorradius || 0) + (Number(seriesItemConf.anchorborderthickness) || 0))) || 0)); + } + + iapiConfig.overFlowingMarkerWidth = overFlowingMarkerWidth; + canvasPadding = (iapiConfig.canvasPadding = mathMax(overFlowingMarkerWidth, canvasPadding)); + + // Do a check whether user has initially zoomed. That would + // mean to keep zoomOut button visible and also to create a + // fake first zoom level. + preZoomed = iapiConfig._prezoomed = (info.dei - info.dsi < info.clen - 1); + // Set the visual dimensions of plot inside canvas. + visw = iapiConfig._visw = iapiConfig.canvasWidth - canvasPadding * 2; + visx = iapiConfig._visx = iapiConfig.canvasLeft + canvasPadding; + iapiConfig._visout = -(iapiConfig.height + canvasHeight + 1e3); + + // Get the y-axis pixel value ratio, other y-axis related values and store for later use. + iapiConfig._ypvr = yAxis && yAxis.getPVR() || 0; + yminValue = iapiConfig._yminValue = yAxis.getLimit().min; + ymin = iapiConfig._ymin = yAxis.getPixel(yminValue); + + // Clip the dataset layer to required dimension. This layer will be + // scrolled by the scroller + // Increase the clipping region to acomodate overflowing anchors + datalayer = datasetGroup.attr('clip-rect', [visx - overFlowingMarkerWidth, + canvasTop, visw + (overFlowingMarkerWidth * 2), canvasHeight]); + scrollerLayer = iapiGraphics.scroll || (iapiGraphics.scroll = + paper.group('scroll').insertAfter(iapiGraphics.datasetGroup)); + + // Create the group to store pinlines. We do it here as it is easier + // to transform that way. + if (allowpin) { + // Create the pin graphics. We create a background that sits atop the + // canvas and is clipped to match size later. + tAtt = R.crispBound(0, canvasTop - ymin, 0, canvasHeight, borderWidth); + /** @todo need to not do renderer based clipping box after raphael's + * clipping on transformed group is addressed. + */ + pinclip = iapiConfig['clip-pinrect'] = + [tAtt.x, canvasTop, tAtt.width, tAtt.height]; + pingroup = (iapiGraphics.zoompin = paper.group('zoompin')) + .insertBefore(datalayer) + .transform(iapiConfig._pingrouptransform = ['T', visx, ymin]).hide(); + + pinrect = iapiGraphics.pinrect = paper.rect(0, canvasTop - ymin, + visw, canvasHeight, pingroup).attr({ + 'stroke-width': 0, + stroke: 'none', + fill: iapiConfig.pinPaneFill, + 'shape-rendering': 'crisp', + ishot: true + }); + + // draw pin tracker + iapiGraphics.pintracker = paper.rect(iapiGraphics.trackerGroup).attr({ + transform: pingroup.transform(), + x: 0, + y: canvasTop - ymin, + width: 0, + height: canvasHeight, + stroke: 'none', + fill: TRACKER_FILL, + ishot: true, + cursor: R.svg && 'ew-resize' || 'e-resize' + }) + .hide() + .drag(function (_dx) { + var offset = visx + _dx + this.__pindragdelta, + pbl = this.__pinboundleft, + pbr = this.__pinboundright, + clip = this.data('cliprect').slice(0); + + // Restrict to boundaries. + if (offset < pbl) { + offset = pbl; + } + else if (offset > pbr) { + offset = pbr; + } + + pingroup.transform(['T', offset, ymin]); + iapiGraphics.pintracker.transform(pingroup.transform()); + // reclip the pin area visibility for VML browser + if (!R.svg) { + clip[0] = clip[0] + offset - visx - this.__pindragdelta; + pingroup.attr('clip-rect', clip); + } + this.__pindragoffset = _dx; + }, function () { + + // Calculate the pin bounds. + /** @todo remove renderer checks */ + this.__pinboundleft = 0 - pinclip[0] + visx + canvasLeft; + this.__pinboundright = this.__pinboundleft + visw - pinclip[2]; + + // Store the value of clip-rect to be used later while re-clipping + // the pin area for VML browsers, as VML browser doesn't support clipispath + + this.data('cliprect', pingroup.attr('clip-rect')); + + // temporarily mark the group as if it is a clip path and + // not a clip rect. This is to prevent raphael's internal + // matrix inversion on clipping. + pingroup._.clipispath = true; + }, function () { + pingroup._.clipispath = false; // reset clip behavior + // store the last delta movement so that dragging can be + // resumed on next drag on same pin instance. + this.__pindragdelta += this.__pindragoffset; + + // delete unneeded flags and accumulators; + delete this.__pindragoffset; + delete this.__pinboundleft; + delete this.__pinboundright; + }); + } + + // Draw the scrollbars and perform the initial configuration of + // the scrollbars. + // First crispen the scroller position to keep it in sync with the + // canvas. We temporarily increment plotborderwidth to account for + // the 1 pixel stroke width of scrollbar. + borderWidth++; + tAtt = R.crispBound(canvasLeft - borderWidth, canvasTop + canvasHeight + borderWidth, + canvasWidth + borderWidth + borderWidth, iapiConfig.scrollHeight, borderWidth); + borderWidth--; // revert the temporary increment + // During creation of the scroller element, we check for the + // "useRoundEdges" options and based on that, match the visuals and + // positioning of the scrollbar with the canvas. We shift it up + // slightly when useRoundEdges is on; so that it covers the lower + // round edges of the canvas. + + // Bind pin and zoom selection events. + bindSelectionEvent(iapi, { + attr: { + stroke: iapiConfig.zoomPaneStroke, + fill: iapiConfig.zoomPaneFill, + strokeWidth: 0 + }, + + selectionStart: function () {}, + + selectionEnd: function (o) { + // Calculate the pixel start and pixel end of the selection. + var pxs = o.selectionLeft - canvasLeft, + pxe = pxs + o.selectionWidth; + // In case chart crossline is available and visible, we hide it. + // In all cases, on selection end, the crossline is not needed + // to be visible. + iapiGraphics.crossline && iapiGraphics.crossline.hide(); + // Based on the flag status of pin mode, we send the selection + // pixels to either pinRange or zoomRange functions. + iapi[iapiConfig.viewPortConfig.pinned ? + 'pinRangePixels' : 'zoomRangePixels'](pxs, pxe); + } + }); + // Create the crosshair and its related events. The crossline + // constructor is self aware and independently configures itself + // from the chart options. + if (crosslineOptions && crosslineOptions.enabled !== 0 && iapiConfig.useCrossline === 1) { + if (!crossline) { + crossline = iapiGraphics.crossline = new CrossLine(); + } + crossline.configure(iapi, crosslineOptions); + } + else { + crosslineOptions && (crosslineOptions.enabled = 0); + crossline && crossline.hide(); + } + }, + + resetZoom: function () { + var iapi = this, + iapiConfig = iapi.config, + history = iapiConfig.viewPortHistory, + origInfo = history[0]; + + // cannot reset twice! + if (!history.length) { + return false; + } + + + history.length = 0; // clear history + if (iapi.zoomTo(origInfo.dsi, origInfo.dei, origInfo)) { + /** + * This event is fired whenever the zoom history is cleared on a ZoomLine chart. + * + * @event FusionCharts#zoomReset + * @group chart-zoomline:zoom + */ + global.raiseEvent('zoomReset', iapi._zoomargs, + iapi.chartInstance, [iapi.chartInstance.id]); + } + + return true; + }, + + eiMethods: /** @lends FusionCharts# */ { + /** + * Zooms ZoomLine chart one level out + * @group chart-zoomline:zoom-1 + * + * @fires FusionCharts#zoomed + * @fires FusionCharts#zoomedOut + */ + zoomOut: function (callback) { + var chart = this.apiInstance, + asyncRender = chart.chartInstance.args.asyncRender, + output, + list = chart.getJobList(); + + if (!chart) { + return; + } + + if (asyncRender) { + list.eiMethods.push(schedular.addJob(function () { + output = chart.zoomOut && chart.zoomOut(); + if (typeof callback === 'function') { + callback(output); + } + }, chart, [], priorityList.postRender)); + } + else { + return chart.zoomOut && chart.zoomOut(); + } + }, + + scrollTo: chartAPI.mscartesian._scrollTo, + /** + * Zooms ZoomLine chart to a range of data. + * + * @group chart-zoomline:zoom-2 + * + * @fires FusionCharts#zoomed + * @fires FusionCharts#zoomedIn + * + * @param {number} startIndex The index of the dataset from which it needs to be zoomed into. + * @param {number} endIndex the index of the dataset until which it needs to be zoomed into. + */ + zoomTo: function (startIndex, endIndex, callback) { + var chart = this.apiInstance, + asyncRender = chart.chartInstance.args.asyncRender, + output, + list = chart.getJobList(); + + if (!chart) { + return; + } + + if (asyncRender || callback) { + list.eiMethods.push(schedular.addJob(function () { + output = chart.zoomRange && chart.zoomRange(startIndex, endIndex); + if (typeof callback === 'function') { + callback(output); + } + }, chart, [], priorityList.postRender)); + } + else { + return chart.zoomRange && chart.zoomRange(startIndex, endIndex); + } + }, + + /** + * Reset all zoom, pan and pin actions that has been done on ZoomLine chart. + * + * @group chart-zoomline:zoom-3 + * + * @fires FusionCharts#zoomReset + */ + resetChart: function () { + var chart = this.apiInstance, + asyncRender = chart.chartInstance.args.asyncRender, + list = chart.getJobList(), + _helperFn = function () { + chart.pinRangePixels && chart.pinRangePixels(); + chart.resetZoom && chart.resetZoom(); + }; + + if (!chart) { + return; + } + + if (asyncRender) { + list.eiMethods.push(schedular.addJob(_helperFn, chart, [], priorityList.postRender)); + } + else { + _helperFn(); + } + }, + + /** + * Switches between zoom and pin mode. This function does not work when `allowPinMode` is set to `0` in + * chart XML or JSON. + * + * Zoom Line charts can have either a zoom mode or a pin mode. Zoom mode lets you select a section of the + * chart by dragging mouse cursor across the canvas and the chart zooms in on the selected section. In pin + * mode, the selected portion can be dragged around to compare with the rest of the chart. Zoom mode and pin + * mode can be toggled by clicking a button on the top right corner of the chart. This function lets you + * switch between zoom mode and pin mode programmatically. + * + * @group chart-zoomline:zoom-4 + * + * @fires FusionCharts#zoomModeChanged + * + * @param {boolean} yes Boolean value to be `true` if zoom mode needs to be activated, `false` to activate + * pin mode. + */ + setZoomMode: function (yes) { + var chart = this.apiInstance, + asyncRender = chart.chartInstance.args.asyncRender, + list = chart.getJobList(); + + if (!chart) { + return; + } + + if (asyncRender) { + list.eiMethods.push(schedular.addJob(function () { + chart.activatePin && chart.activatePin(!yes); + }, chart, [], priorityList.postRender)); + } + else { + chart.activatePin && chart.activatePin(!yes); + } + }, + + /** + * Returns the index of the first visible point on canvas of ZoomLine chart + * @group chart-zoomline:view-1 + * @returns {number} + */ + getViewStartIndex: function (callback) { + var chart = this.apiInstance, + asyncRender = chart.chartInstance.args.asyncRender, + zi, + list = chart.getJobList(); + + if (callback || asyncRender) { + list.eiMethods.push(schedular.addJob(function () { + if (typeof callback === 'function') { + if (!(chart && (zi = chart.config.viewPortConfig))) { + return; + } + callback(zi.ddsi); + } + }, chart, [], priorityList.postRender)); + } + else { + if (!(chart && (zi = chart.config.viewPortConfig))) { + return; + } + return zi.ddsi; + } + }, + + /** + * Returns the index of the last visible point on canvas of ZoomLine chart + * @group chart-zoomline:view-2 + * @returns {number} + */ + getViewEndIndex: function (callback) { + var chart = this.apiInstance, + asyncRender = chart.chartInstance.args.asyncRender, + zi, + vei, + list = chart.getJobList(); + + + if (callback || asyncRender) { + list.eiMethods.push(schedular.addJob(function () { + if (typeof callback === 'function') { + if (!(chart && (zi = chart.config.viewPortConfig))) { + return; + } + + vei = zi.ddei - 1; + callback((vei >= zi.clen ? zi.clen : vei) - 1); + } + }, chart, [], priorityList.postRender)); + } + else { + if (!(chart && (zi = chart.config.viewPortConfig))) { + return; + } + + vei = zi.ddei - 1; + return ((vei >= zi.clen ? zi.clen : vei) - 1); + } + } + }, + + zoomOut: function () { + var lastinfo, + origInfo, + iapi = this, + iapiConfig = iapi.config, + history = iapiConfig.viewPortHistory, + dsi, + dei, + args; + lastinfo = history.pop(); // access the last history + origInfo = history[0] || iapiConfig.viewPortConfig; + if (lastinfo) { + dsi = lastinfo.dsi; + dei = lastinfo.dei; + } + // If zoom level is less than 1, it is equivalent to reset. + else { + // But, in case chart was initially zoomed, we need to zoom out + // to full view. + if (iapiConfig._prezoomed) { + dsi = 0; + dei = origInfo.clen - 1; + } + } + /*info.lskip = lastinfo.lskip; + info.step = lastinfo.step; + iapi.components.xAxis[0].setAxisConfig({ + 'labelStep': info.lskip + 1 + });*/ + if (args = iapi.zoomTo(dsi, dei, lastinfo)) { + /** + * This event is fired when user zooms out on a ZoomLine chart. + * + * @event FusionCharts#zoomedOut + * @group chart-zoomline:zoom + * + * @param {number} level - Indicates to which zoom level the user has zoomed out to. `1` indicates that + * the chart has been completely zoomed out. + * + * @param {number} startIndex - The data start index that is in view for the zoomed out level + * @param {string} startLabel - The label of the data of the starting item in view. + * @param {number} endIndex - The data end index that is in view for the zoomed out level + * @param {string} endLabel - The label of the data of the last item in view. + */ + global.raiseEvent('zoomedout', args, iapi.chartInstance); + } + + return true; + }, + + zoomRangePixels: function (pxs, pxe) { + var chart = this, + chartConfig = chart.config, + history = chartConfig.viewPortHistory, + info = chartConfig.viewPortConfig, + ppp = info.ppp, + start = info.ddsi, + args; + history.push(info); // push current state to history + + // Peform function equvalent to this.getValuePixel(). + // Code repeated here for lesser performance penalty of function + // call. + /*if (args = chart.zoomTo(start + mathFloor(pxs / ppp), + start + mathFloor(pxe / ppp))) {*/ + if (args = chart.zoomTo(start + mathFloor(pxs / ppp), + start + mathFloor(pxe / ppp))) { + /** + * This event is fired when user zooms in on a ZoomLine chart. + * + * @event FusionCharts#zoomedIn + * @group chart-zoomline:zoom + * + * @param {number} level - Indicates to which zoom level the user has zoomed out to. `1` indicates that + * the chart has been completely zoomed out. It increments as user zooms in further. + * + * @param {number} startIndex - The data start index that is in view for the zoomed in level + * @param {string} startLabel - The label of the data of the starting item in view. + * @param {number} endIndex - The data end index that is in view for the zoomed in level + * @param {string} endLabel - The label of the data of the last item in view. + */ + global.raiseEvent('zoomedin', args, chart.chartInstance); + } + else { + // If zooming has failed then pop the history state that we + // pushed earlier. + history.pop(); + } + + }, + + zoomRange: function (dsi, dei) { + var pxs, + pxe, + iapi = this, + iapiConfig = iapi.config, + info = iapiConfig.viewPortConfig, + lastinfo, + xAxis = iapi.components.xAxis[0], + history = iapiConfig.viewPortHistory, + args; + + history.push(info); // push current state to history + lastinfo = info; + info = history[0]; + pxs = xAxis.getPixel(dsi); + pxe = xAxis.getPixel(dei); + lastinfo.x = pxs; + lastinfo.scaleX = iapiConfig.canvasWidth / (pxs - pxe); + info = lastinfo; + if (args = iapi.zoomTo(+dsi, +dei)) { + // already described in apidocs insidr zoomRangePixls + global.raiseEvent('zoomedin', args, iapi.chartInstance); + } + else { + // If zooming has failed then pop the history state that we + // pushed earlier. + history.pop(); + } + }, + + zoomTo: function (dsi, dei, lastinfo) { + var pxs, + pxe, + origPos, + chart = this, + chartConfig = chart.config, + components = chart.components, + // labels = chart.xlabels.data, + info = chartConfig.viewPortConfig, + canvasHeight = chartConfig.canvasHeight, + canvasLeft = chartConfig.canvasLeft, + canvasTop = chartConfig.canvasTop, + canvasBottom = chartConfig.canvasBottom, + newinfo, + history = chartConfig.viewPortHistory, + clen = info.clen, + args, + xAxis = chart.components.xAxis[0]; + // Detect max zoom and update the zoom history. + // start index must be positive and less than end. last index must + // not be greater than category count. + (dsi < 0) && (dsi = 0); + (dsi >= clen - 1) && (dsi = clen - 1); + (dei <= dsi) && (dei = dsi + 1); + (dei > clen - 1) && (dei = clen - 1); + // Find the final zoom level and bail out. + if (dsi === dei || (dsi === info.dsi && dei === info.dei)) { + return false; + } + + // Revert pin mode, in case it is active. + chart.pinRangePixels(); + // dsi = Math.floor(xAxis.getValue(pxs)); + // dei = Math.ceil(xAxis.getValue(pxe)); + newinfo = extend2({}, info); + newinfo.dsi = dsi; + newinfo.dei = dei; + info = (chartConfig.viewPortConfig = newinfo); // set current state + // Derive new zoom state from existing state. + if (!lastinfo) { + pxs = xAxis.getPixel(dsi); + pxe = xAxis.getPixel(dei); + origPos = chart.getOriginalPositions(pxs - canvasLeft, + canvasTop, pxe - canvasLeft, canvasBottom - canvasTop); + chart.zoomSelection(origPos[0], 0, origPos[2], canvasHeight); + } + else { + chart.updateVisual(lastinfo.x, lastinfo.y, lastinfo.scaleX, lastinfo.scaleY); + } + components.scrollBar.node.attr({ + 'scroll-ratio': info.vdl / (clen - !!clen), + 'scroll-position': [info.dsi / (clen - info.vdl - 1), true] + }); + args = { + level: history.length + 1, + startIndex: dsi, + startLabel: xAxis.getLabel(dsi).label, + endIndex: dei, + endLabel: xAxis.getLabel(dei).label + }; + + /** + * This event is fired when user either zooms in or zooms out on a ZoomLine chart. + * + * @event FusionCharts#zoomed + * @group chart-zoomline:zoom + * + * @param {number} level - Indicates to which zoom level the user has zoomed to. `1` indicates that + * the chart has been completely zoomed out. It increments as user zooms in further and decrements when user + * zooms out. + * + * @param {number} startIndex - The data start index that is in view for the zoomed level + * @param {string} startLabel - The label of the data of the starting item in view. + * @param {number} endIndex - The data end index that is in view for the zoomed level + * @param {string} endLabel - The label of the data of the last item in view. + */ + global.raiseEvent('zoomed', args, chart.chartInstance, [chart.chartInstance.id, dsi, dei, args.startLabel, + args.endLabel, args.level]); + + return args; + }, + + activatePin: function (yes) { + var iapi = this, + iapiConfig = iapi.config, + toolBoxGraphics = iapi.components.tb.graphics, + info = iapiConfig.viewPortConfig, + button = toolBoxGraphics.pinButton; + + // Checking for button is an indirect way to check if pinning is + // allowed. + /*if (!button) { + return; + }*/ + + // If pin is already active and "yes" is true then we get lost. + if (!(info.pinned ^ (yes = !!yes))) { + return; + } + if (!yes) { + // Call pin range with no range to deactivate pin. + iapi.pinRangePixels(); + } + + /** + * This event is fired when user toggles between zoom and pin mode of a zoomline chart. + * + * @event FusionCharts#zoomModeChanged + * @group chart-zoomline:zoom + * + * @param {boolean} pinModeActive - `true` indicates that post the mode change, pin mode is active. + */ + global.raiseEvent('zoomModeChanged', { + pinModeActive: yes + }, iapi.chartInstance, []); + /*iapiConfig.showToolBarButtonTooltext && + (button.conf.tooltip = iapiConfig[yes && + 'btnSwitchToZoomModeTooltext' || + 'btnSwitchToPinModeTooltext'] || BLANK);*/ + iapi.updateButtonVisual(button.node, yes ? 'pressed' : 'enable'); + + return (info.pinned = yes); + }, + + updateButtonVisual: function (buttonNode, mode) { + var config = { + disable:{ + config: { + hover: { + fill: COLOR_WHITE, + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: COLOR_E3E3E3, + cursor: STR_DEF + }, + normal: { + fill: COLOR_WHITE, + 'fill-symbol': COLOR_WHITE, + stroke: COLOR_E3E3E3, + 'stroke-width': 1, + cursor: STR_DEF + }, + disable: { + fill: COLOR_WHITE, + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: COLOR_E3E3E3, + 'stroke-opacity': 1, + cursor: STR_DEF + }, + pressed: { + fill: COLOR_WHITE, + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: COLOR_E3E3E3, + cursor: STR_DEF + } + }, + 'button-disabled': false, + 'stroke': COLOR_E3E3E3, + 'stroke-opacity': 1 + } , + enable: { + config: { + hover: { + fill: COLOR_WHITE, + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: '#aaaaaa', + cursor: 'pointer' + }, + normal: { + fill: COLOR_WHITE, + 'fill-symbol': COLOR_WHITE, + stroke: COLOR_C2C2C2, + 'stroke-width': 1, + cursor: 'pointer' + }, + disable: { + fill: COLOR_WHITE, + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: COLOR_E3E3E3, + 'stroke-opacity': 1, + cursor: 'pointer' + }, + pressed: { + fill: COLOR_EFEFEF, + 'fill-symbol': COLOR_EFEFEF, + 'stroke-width': 1, + stroke: COLOR_C2C2C2, + cursor: 'pointer' + } + }, + 'button-disabled': false, + fill: [COLOR_WHITE, COLOR_WHITE, COLOR_WHITE, COLOR_WHITE, true], + 'stroke': COLOR_C2C2C2, + 'stroke-opacity': 1 + }, + pressed: { + config: { + hover: { + fill: '#dcdcdc', + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: '#b7b7b7', + cursor: 'pointer' + }, + normal: { + fill: '#dcdcdc', + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: '#b7b7b7', + cursor: 'pointer' + }, + pressed: { + fill: '#dcdcdc', + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: '#b7b7b7', + cursor: 'pointer' + } + }, + fill: '#dcdcdc', + 'fill-symbol': COLOR_WHITE, + 'stroke-width': 1, + stroke: '#b7b7b7', + cursor: 'pointer' + } + }; + return buttonNode.attr(config[mode]); + }, + + pinRangePixels: function (pxs, pxe) { + var plotGraphics, + iapi = this, + iapiComponents = iapi.components, + paper = iapiComponents.paper, + iapiGraphics = iapi.graphics, + iapiConfig = iapi.config, + canvasLeft = iapiConfig.canvasLeft, + // elements = chart.elements, + // labels = chart.xlabels.data, + info = iapiConfig.viewPortConfig, + pingroup = iapiGraphics.zoompin, + pinrect = iapiGraphics.pinrect, + pinclip = iapiConfig['clip-pinrect'], + pingrouptransform = iapiConfig._pingrouptransform, + plots = iapiComponents.dataset, + pxw = pxe - pxs, + plot, + pinline, + i, + pintracker = iapiGraphics.pintracker; + // Find the no-pin situation and bailout. + if (!info || !pingroup || !pinrect) { + return; + } + // Hide + if (pxs === pxe) { + pingroup.hide(); + pintracker.hide(); + // todo code + // chart.pinButton.attr('button-active', false); + return info.pinned = false; + } + + // Iterate over plots and copy the lines. + i = plots.length; + while (i--) { + plot = plots[i]; + plotGraphics = plot.graphics; + pinline = plotGraphics.pinline; + if (!pinline) { + pinline = plotGraphics.pinline = paper.path(pingroup); + } + pinline.attr({ + 'path': plotGraphics.lineElement.attrs.path, + 'transform': ['T',-iapiConfig._visx, -iapiConfig._ymin] + }) + .attr(plot.config.pin); + } + + // Adjust the cliprect to the new x amd width. + /** @todo remove renderer checks */ + pinclip[0] = pxs + canvasLeft; + pinclip[2] = pxw; + pingroup.attr({ + 'clip-rect': pinclip, + 'transform': pingrouptransform + }).show(); + pintracker.__pindragdelta = 0; // dragging helper + pintracker.show().attr({ + transform: pingrouptransform, + x: pxs, + width: pxw + }); + + // store the dsi and dei in px variables for raising in events + pxs = iapi.getValuePixel(pxs); + pxe = iapi.getValuePixel(pxe); + /** + * This event is fired when user switches to pin mode on zoomline chart and then performs a selection on the + * data plot to "pin" a range. + * + * @event FusionCharts#pinned + * + * @group chart-zoomline + * + * @param {number} startIndex - The data start index of the pinned range. + * @param {string} startLabel - The label of the data of the starting item of the pinned range. + * @param {number} endIndex - The data end index that is in view of the pinned range. + * @param {string} endLabel - The label of the data of the last item of the pinned range. + */ + // global.raiseEvent('pinned', { + // startIndex: pxs, + // endIndex: pxe, + // startLabel: labels[pxs], + // endLabel: labels[pxe] + // }, iapi.chartInstance, [iapi.chartInstance.id, pxs, pxe, + // labels[pxs], labels[pxe]]); + + // state pin state in meta. + return info.pinned = true; + }, + + _createLayers: function () { + var iapi = this, + iapiGraphics, + paper = iapi.components.paper; + chartAPI.scatter._createLayers.call(iapi); + iapiGraphics = iapi.graphics; + //create the additional layers. + //create the container element + iapiGraphics.imageContainer = paper.group('dataset-orphan', iapiGraphics.dataSetGroup); + iapi.__preDraw(); + iapi.toogleDragPan(true); + }, + + getValue: function (point) { + var chart = this, + chartConfig = chart.config, + chartComponents = chart.components, + viewPortConfig = chartConfig.viewPortConfig, + //the pixel wrt original canvas size + origpixel = chart.getOriginalPositions(point.x,point.y,point.x,point.y), + origX = origpixel[0], + origY = origpixel[1], + xAxis = chartComponents.xAxis[0], + yAxis = chartComponents.yAxis[0], + xaxisRange = xAxis.config.axisRange, + yaxisRange = yAxis.config.axisRange, + minX = xaxisRange.min, + maxX = xaxisRange.max, + maxY = yaxisRange.max, + minY = yaxisRange.min, + //calcualte the Pixel to Value Ratios. + xPVR = chartConfig.canvasWidth * viewPortConfig.scaleX / (maxX - minX), + yPVR = chartConfig.canvasHeight * viewPortConfig.scaleY / (maxY - minY); + + return { + x: minX + ((origX - chartConfig.canvasLeft) / xPVR), + y: maxY - ((origY - chartConfig.canvasTop) / yPVR) + }; + }, + + getOriginalPositions: function (x1,y1,x2,y2) { + var newW, + newH, + newX, + newY, + chart = this, + chartConfig = chart.config, + viewPortConfig = chartConfig.viewPortConfig, + oldScaleX = viewPortConfig.scaleX, + oldScaleY = viewPortConfig.scaleY, + //coodinates of the visual canvas origin wrt to original canvas. + oldX = viewPortConfig.x, + oldY = viewPortConfig.y, + + xMin = mathMin(x1, x2), + xMax = mathMax(x1, x2), + yMin = mathMin(y1, y2), + yMax = mathMax(y1, y2); + + //Right Bottom limit boundary + xMax = xMax > chartConfig.canvasWidth ? chartConfig.canvasWidth : xMax; + yMax = yMax > chartConfig.canvasHeight ? chartConfig.canvasHeight : yMax; + //Left Top Limit Boundary + xMin = xMin < 0 ? 0 : xMin; + yMin = yMin < 0 ? 0 : yMin; + // update the dimensions wrt to initial viewPort configurations. + newW = (xMax - xMin ) / oldScaleX; + newH = (yMax - yMin ) / oldScaleY; + newX = oldX + (xMin / oldScaleX); + newY = oldY + (yMin / oldScaleY); + //converts to the coordinates wrt original image + return [newX, newY, newW, newH]; + }, + + zoomSelection: function (x, y, w, h) { + var chart = this, + chartConfig = chart.config, + scaleX, + scaleY, + newWidth, + newHeight, + maxX, + maxY, + newOriginX, + newOriginY; + + + // if the width or height is 0 return it + if (!w || !h) { + return; + } + //scale factors cannnot be negatives. + scaleX = Math.abs(chartConfig.canvasWidth / w); + scaleY = Math.abs(chartConfig.canvasHeight / h); + //total dimensions it would look alike when zoomed with these scale factors + newWidth = chartConfig.canvasWidth * scaleX; + newHeight = chartConfig.canvasHeight * scaleY; + //the amount to be shifted so that the zoom portion falls in the visible area. + newOriginX = x * scaleX; + newOriginY = y * scaleY; + //impose restrictions on the boundaries. + maxX = (newWidth - chartConfig.canvasWidth); + maxY = (newHeight - chartConfig.canvasHeight); + + //left top restricition + newOriginX = (newOriginX < 0) ? 0 : newOriginX; + newOriginY = (newOriginY < 0) ? 0 : newOriginY; + + //right bottom restriction + newOriginX = (newOriginX > maxX) ? maxX : newOriginX; + newOriginY = (newOriginY > maxY) ? maxY : newOriginY; + //update the final visual(drawing) part. + chart.updateVisual(x, y, scaleX, scaleY); + }, + + updateVisual: function (zoomX, zoomY, scaleX, scaleY, pixelatedDraw) { + var chart = this, + chartConfig = chart.config, + viewPortConfig = chartConfig.viewPortConfig, + oldCanvasWidth = chartConfig.canvasWidth, + oldCanvasHeight = chartConfig.canvasHeight, + // newCanvasWidth = oldCanvasWidth, + // newCanvasHeight = oldCanvasHeight, + viewPortHistory = chartConfig.viewPortHistory, + lastViewPortConfig = viewPortHistory.slice(-1)[0] || viewPortConfig, + // zoomEvent = [], + // viewPortStatus = viewPortConfig.status, + + // xAxis = chartComponents.xAxis[0], + // yAxis = chartComponents.yAxis[0], + + maxZoomLimit = chartConfig.maxZoomLimit; //restrictions in the zooming limit. + //check for validity for the input arguments provided. + //Incase invalid, revert to the last viewPort configurations, that is visually there remains no change. + viewPortConfig.x = isNaN(zoomX) ? (zoomX = lastViewPortConfig.x) : zoomX; + viewPortConfig.y = isNaN(zoomY) ? (zoomY = lastViewPortConfig.y) : zoomY; + viewPortConfig.scaleX = scaleX || (scaleX = lastViewPortConfig.scaleX); + viewPortConfig.scaleY = scaleY || (scaleY = lastViewPortConfig.scaleY); + + // apply the limit + if (scaleX > maxZoomLimit) { + viewPortConfig.x = zoomX = mathMin(zoomX, (oldCanvasWidth - oldCanvasWidth/maxZoomLimit)); + viewPortConfig.scaleX = scaleX = maxZoomLimit; + } + if (scaleY > maxZoomLimit) { + viewPortConfig.y = zoomY = mathMin(zoomY, (oldCanvasHeight - oldCanvasHeight/maxZoomLimit)); + viewPortConfig.scaleY = scaleY = maxZoomLimit; + } + chart.updateManager(pixelatedDraw); + }, + + toogleDragPan: function (isToogle) { + var chart = this, + chartConfig = chart.config, + viewPortConfig = chartConfig.viewPortConfig, + status = viewPortConfig.status; + if (isToogle) { + viewPortConfig.status = (status === 'zoom') ? 'pan': 'zoom'; + // global.raiseEvent('zoomModeChanged', { + // panModeActive: chartConfig.viewPortConfig.status + // }, chart.fusionCharts, [chart.fusionCharts.id]); + } + //visual update + //chart.updateButtonVisual(); + + }, + + resize: function () { + var chart = this, + chartConfig = chart.config, + chartGraphics = chart.graphics, + canvasComponents = chart.components.canvas, + canvasConfig = canvasComponents.config, + canvasGraphics = canvasComponents.graphics, + canvasBorder = canvasGraphics.canvasBorderElement, + canvas = canvasGraphics.canvasElement, + //bridge code + canvasBorderThickness = canvasConfig.canvasBorderThickness, + canvasHalfThickness = canvasBorderThickness / 2, + newHeight = (chartConfig.canvasHeight -= canvasBorderThickness), + newWidth = (chartConfig.canvasWidth -= (2*canvasBorderThickness)), + left = (chartConfig.canvasLeft += canvasBorderThickness); + chartConfig.canvasBottom -= canvasBorderThickness; + chartConfig.canvasRight -= canvasBorderThickness; + //resize the canvas according to the latest modifications in the canvas dimensions. + if (canvas) { + canvas.attr({ + x: left, + y: chartConfig.canvasTop, + height: newHeight, + width: newWidth + }); + } + else { + chart.drawCanvas(); // draw the canvas if it ceases to exist. + } + + if (canvasBorder) { + //update the dimensions of the border of the canvas + canvasBorder.attr({ + x: left - canvasHalfThickness, + y: chartConfig.canvasTop - canvasHalfThickness, + height: newHeight + canvasBorderThickness, + width: newWidth + canvasBorderThickness, + 'stroke-width': canvasBorderThickness /* stroke-width is a property being applied both on + outer and inner side, hence canvasHalfThickness is used instead the full of it.*/ + }); + } + + //update the image container wrt modified canvas dimension after resizing. + chartGraphics.imageContainer.attr({ + 'clip-rect': chartConfig.canvasLeft + ',' + chartConfig.canvasTop + ',' + chartConfig.canvasWidth + + ',' + chartConfig.canvasHeight + }).transform('t' + chartConfig.canvasLeft + ',' + chartConfig.canvasTop); + //clipping the hot tracker element. + chartGraphics.trackerElem.attr({ + x: chartConfig.canvasLeft, + y: chartConfig.canvasTop, + width: chartConfig.canvasWidth, + height: chartConfig.canvasHeight + }); + /*Clipping on the tracker is required when a single plot covers more than the screen and one hover on + it, the hovering circle goes out of the canvas, which needs to be prevented and hence needs to be + clipped. This clipping again needs to be updated with every resizing.*/ + chartGraphics.tracker && chartGraphics.tracker.attr({ + 'clip-rect': chartConfig.canvasLeft + ',' + chartConfig.canvasTop + ',' + chartConfig.canvasWidth + + ',' + chartConfig.canvasHeight + }); + }, + + updateManager: function (pos) { + var i, + labelStep, + stepValue, + chart = this, + scaleX, + chartComponents = chart.components, + dataSets = chartComponents.dataset, + len = dataSets.length, + chartConfig = chart.config, + allowPinMode = chartConfig.allowPinMode, + info = chartConfig.viewPortConfig, + ypvr = chartConfig._ypvr, + visW = chartConfig._visw, + xAxis = chart.components.xAxis[0], + getPixelX = function() { + return xAxis.getPixel.apply(xAxis,arguments); + }, + // labels = chart.xlabels, + cssLabel = xAxis.getAxisConfig('labels').style, + // labelGroup = labels.group, + // textDirection = chartConfig.textDirection, + oppp, // target pixels-per-point + vdl, // visible display length + ppl, // num visible labels + ppp, // current pixels-per-point + step, // stepping on vdl to reach target ppp + lskip, + norm, // normalizer of vdl to allow smooth scrolling + dsi, // display start index + dei, // display end index + ddsi, // dynamic dsi post normalization + ddei, + nvl, + xAxisAnifConfig, + xAxisNameDrawConfig, + visibleExtremes, + updateButtonVisual = chart.updateButtonVisual, + toolBoxGraphics = chartComponents.tb.graphics, + zoomOutButton = toolBoxGraphics.zoomOutButton, + resetButton = toolBoxGraphics.resetButton, + pinButton = toolBoxGraphics.pinButton, + history = chartConfig.viewPortHistory; + if (chartConfig.legendClicked) { + for (i = 0; i < len; i += 1) { + dataSets[i].draw(); + } + return; + } + // Use default config if none has been provided else extend current + // state. + !info && (info = chartConfig.viewPortConfig); + + // Calculate stepping values here. This is required so that the + // number of anchors can be recalculated prior to updating plot. + oppp = info.oppp; + nvl = ppl = info.nvl; + dsi = info.dsi; + dei = info.dei; + vdl = info.vdl = dei - dsi; + ppl = info.ppl = nvl ? visW / nvl : info.oppl; + // Calculate label and anchor stepping. + step = info.step = ((ppp = info.ppp = visW / vdl) < oppp) ? mathCeil(oppp / ppp) : 1; + lskip = info.lskip = mathCeil(mathMax(ppl, toFloat(cssLabel.lineHeight)) / ppp / step); + + // If scroll position is provided, we recalculate indices and + // ignore what has been sent via zoom info. + // We do not put position calculation in a separate function to + // avoid repeated recalculations + if (pos !== UNDEF) { + ddsi = (info.clen - vdl - 1) * pos ; + info.offset = (ddsi - (ddsi = toInt(ddsi))) * ppp; + ddei = ddsi + vdl; + } + else { + ddsi = info.dsi; + ddei = info.dei; + info.offset = 0; + } + norm = info.norm = ddsi % step; + + // normalize the indices + info.ddsi = (ddsi = ddsi - norm); + info.ddei = (ddei = ddei + 2 * step - norm); + info.pvr = ypvr; + info._ymin = chartConfig._ymin; + info._yminValue = chartConfig._yminValue; + info.x = ((getPixelX(ddsi) - getPixelX(xAxis.getLimit().min) + info.offset)/ info.scaleX); + // once the visible labels are exceeding the category length. + if ((ddei - ddsi) > xAxis.getCategoryLen()) { + info.scaleX = 1; + } + else { + // info.scaleX = chartConfig.canvasWidth / (mathRound((ddei - ddsi + 1)/ (step)) * 0.5 * ppl); + info.scaleX = xAxis.getCategoryLen() / Math.abs(ddei - ddsi - step - 0.9); + } + if (pos !== UNDEF){ + chartComponents.scrollBar.node && chartComponents.scrollBar.node.attr({ + 'scroll-position': (info._pos = pos) + }); + } + visibleExtremes = xAxis._getVisibleConfig(); + + stepValue = Math.ceil((visibleExtremes.maxValue - visibleExtremes.minValue + 1) / nvl); + scaleX = chartConfig.viewPortConfig && chartConfig.viewPortConfig.scaleX; + labelStep = Math.max(Math.round(xAxis.getAxisConfig('labelStep')/scaleX), nvl ? stepValue : lskip * step); + xAxis.setLabelConfig({ + step: labelStep + }); + /*xAxis.setAxisConfig({ + 'labelStep': labelStep + });*/ + xAxisAnifConfig = xAxis.getAxisConfig('animateAxis'); + xAxisNameDrawConfig = xAxis.getAxisConfig('drawAxisName'); + pos && (xAxis.setAxisConfig({ + animateAxis : false, + drawAxisName : false + })); + xAxis.draw(); + xAxis.setAxisConfig({ + animateAxis : xAxisAnifConfig, + drawAxisName : xAxisNameDrawConfig + }); + // Calculate the label length + /*len = labels.show ? mathCeil((ddei - ddsi) / step / lskip) : 0; + oldlen = info.llen - 1; + info.llen = len; + ppc = info.ppc = ppp * lskip * step; // pixels between two x-labels + labelGroup.trackTooltip(true); + // Iterate over the labels and update them. + // Add new anchor elements or if added, show them. + if (len > oldlen) { + for (j = oldlen, jj = len; j < jj; j++) { + (label = labels[j]) && label.show() || + (labels[j] = paper.text(0, 0, BLANK, labelGroup).css(cssLabel).attr({ + direction: textDirection + })); + } + } + // Hide extra label elements. + else { + for (j = len, jj = oldlen + 1; j < jj; j++) { + labels[j].hide(); + } + } + // Calculate amount of anchors that will be visible. Until amrd is reached, + // all labels should be hidden. (re-use the previous len variables) + len = (ppp * step < info.amrd) ? 0 : mathCeil((ddei - ddsi) / step); + deltalen = len - info.alen; + oldlen = info.alen - 1; + info.alen = len; // Update anchor length.*/ + // redraw the datasets + for (i = 0; i < len; i += 1) { + dataSets[i].draw(); + } + + // Show reset button when zoom history is long enough and always show + // zoom out button on every zoom-in. + updateButtonVisual(zoomOutButton.node, (info.vdl === info.clen - 1 ? 'disable' : 'enable')); + updateButtonVisual(resetButton.node, (history.length > 0 ? 'enable' : 'disable')); + updateButtonVisual(pinButton.node, (allowPinMode ? 'enable' : 'disable')); + + + if (win.FC_DEV_ENVIRONMENT && win.jQuery) { + if (FusionCharts['debugger'].enable()) { + this.debug = this.debug || (win.jQuery('#fc-zoominfo').length || + win.jQuery('body').append('
'), win.jQuery('#fc-zoominfo').css({
+                        position: 'absolute',
+                        left: '10px',
+                        top: '0',
+                        'pointer-events': 'none',
+                        opacity: 0.7,
+                        width: '250px',
+                        zIndex: '999',
+                        border: '1px solid #cccccc',
+                        'box-shadow': '1px 1px 3px #cccccc',
+                        background: '#ffffff'
+                    }));
+                    this.debug.text(JSON.stringify(info, 0, 2));
+                }
+                else {
+                    this.debug && win.jQuery('#fc-zoominfo').remove();
+                    delete this.debug;
+                }
+            }
+        },
+        _drawDataset: function () {
+            var iapi = this;
+            chartAPI.zoomline.updateManager.call(iapi);
+        },
+
+        getParsedLabel: function (index) {
+            var xlabels = this.xlabels;
+            return xlabels.parsed[index] ||
+                (xlabels.parsed[index] =
+                    parseUnsafeString(xlabels.data[index] || BLANK));
+        },
+        _createToolBox: function () {
+            var toolBox,
+                toolBoxGraphics,
+                toolBoxAPI,
+                group,
+                SymbolStore,
+                Symbol,
+                zoomOutButton,
+                resetButton,
+                pinButton,
+                iapi = this,
+                config = iapi.config,
+                allowPinMode = config.allowPinMode,
+                components = iapi.components,
+                tooltip = config.showToolBarButtonTooltext,
+                chartMenuBar = components.chartMenuBar,
+                actionBar = components.actionBar;
+            /* Do not reconfigure the toolbox if its already drawn. This flag is set falsy on each time configurations
+            are updated. */
+            if (chartMenuBar && chartMenuBar.drawn || actionBar && actionBar.drawn) {
+                return;
+            }
+            chartAPI.scrollcolumn2d._createToolBox.call(iapi);
+            toolBox = components.tb;
+            toolBoxGraphics = toolBox.graphics || (toolBox.graphics = {});
+            toolBoxAPI = components.toolBoxAPI || toolBox.getAPIInstances(toolBox.ALIGNMENT_HORIZONTAL);
+            Symbol = toolBoxAPI.Symbol;
+            SymbolStore = toolBoxAPI.SymbolStore;
+            group = (components.chartMenuBar || components.actionBar).componentGroups[0];
+
+            // Add the symbols in the chartMenuBar
+            zoomOutButton = toolBoxGraphics.zoomOutButton = new Symbol('zoomOutIcon', undefined, toolBox.idCount++,
+                toolBox.pId)
+            .attachEventHandlers({
+                'click' : function () {
+                    iapi.zoomOut();
+                },
+                'tooltext': tooltip && config.btnZoomOutTooltext || BLANK
+            });
+            resetButton = toolBoxGraphics.resetButton = new Symbol('resetIcon', undefined, toolBox.idCount++,
+                toolBox.pId)
+            .attachEventHandlers({
+                'click' : function () {
+                    iapi.resetZoom();
+                },
+                'tooltext': tooltip && config.btnResetChartTooltext || BLANK
+            });
+            if (allowPinMode) {
+                pinButton = toolBoxGraphics.pinButton = new Symbol('pinModeIcon', undefined, toolBox.idCount++,
+                    toolBox.pId)
+                .attachEventHandlers({
+                    'click' : function () {
+                        var info = config.viewPortConfig;
+                        iapi.activatePin(!info.pinned);
+                    },
+                    'tooltext': tooltip && config.btnSwitchToPinModeTooltext || BLANK
+                });
+                // append the instance of the buttons to the group
+                group.addSymbol(pinButton, true);
+            }
+            group.addSymbol(resetButton, true);
+            group.addSymbol(zoomOutButton, true);
+        },
+        _scrollBar: chartAPI.scrollcolumn2d,
+        _manageScrollerPosition: chartAPI.scrollcolumn2d,
+
+        draw: function () {
+            var borderWidth,
+                roundEdges,
+                info,
+                tAtt,
+                scrollBar,
+                scrollNode,
+                canvasLeft,
+                canvasTop,
+                canvasHeight,
+                canvasWidth,
+                canvasConfig,
+                canvasBorderWidth,
+                iapi = this,
+                config = iapi.config,
+                graphics = iapi.graphics || (iapi.graphics = {}),
+                components = iapi.components,
+                jsonData = iapi.jsonData,
+                dataSet = jsonData.dataset,
+                category = jsonData.categories && jsonData.categories[0].category,
+                toolboxParentGroup;
+            chartAPI.msline.draw.call (iapi);
+
+            canvasLeft = config.canvasLeft;
+            canvasTop = config.canvasTop;
+            canvasHeight = config.canvasHeight;
+            canvasWidth = config.canvasWidth;
+            canvasConfig = components.canvas.config;
+            canvasBorderWidth = canvasConfig.canvasBorderWidth;
+            borderWidth = config.borderWidth;
+            roundEdges = config.useRoundEdges;
+            info = config.viewPortConfig;
+            if (!(toolboxParentGroup = graphics.toolboxParentGroup)) {
+                toolboxParentGroup = graphics.toolboxParentGroup = components.paper.group('toolbarParentGroup',
+                    graphics.parentGroup);
+            }
+            if (dataSet && category) {
+
+                // Draw the scrollbars and perform the initial configuration of
+                // the scrollbars.
+                // First crispen the scroller position to keep it in sync with the
+                // canvas. We temporarily increment plotborderwidth to account for
+                // the 1 pixel stroke width of scrollbar.
+                borderWidth++;
+                tAtt = R.crispBound(canvasLeft - borderWidth, canvasTop + canvasHeight + borderWidth,
+                    canvasWidth + borderWidth + borderWidth, config.scrollHeight, borderWidth);
+                borderWidth--; // revert the temporary increment
+                // During creation of the scroller element, we check for the
+                // "useRoundEdges" options and based on that, match the visuals and
+                // positioning of the scrollbar with the canvas. We shift it up
+                // slightly when useRoundEdges is on; so that it covers the lower
+                // round edges of the canvas.
+                scrollBar = components.scrollBar;
+                scrollNode = scrollBar && scrollBar.node;
+                // donot draw the scroller element if there is no dataSet in the JSON data.
+                scrollBar.draw(tAtt.x + (roundEdges && -1 || (borderWidth % 2)), tAtt.y - (roundEdges && 4 || 2), {
+                    isHorizontal: true,
+                    width: tAtt.width - (!roundEdges && 2 || 0),
+                    height: tAtt.height,
+                    showButtons: config.scrollShowButtons,
+                    scrollRatio: info.vdl / (info.clen - !!info.clen), // standard
+                    scrollPosition: [info.dsi / (info.clen - info.vdl - 1), false],
+                    r: roundEdges && 2 || 0,
+                    parentLayer : toolboxParentGroup.insertBefore(graphics.datalabelsGroup)
+                });
+                // attach the callback for raising event only for it is a new scroll node.
+                !scrollNode && (function () {
+                    var prevPos;
+                    R.eve.on('raphael.scroll.start.' + scrollBar.node.id, function (pos) {
+                        prevPos = pos;
+                        iapi.graphics.crossline && iapi.graphics.crossline.disable(true);
+
+                        global.raiseEvent('scrollstart', {
+                            scrollPosition: pos
+                        }, iapi.chartInstance);
+                    });
+
+                    R.eve.on('raphael.scroll.end.' + scrollBar.node.id, function (pos) {
+                        iapi.graphics.crossline && iapi.graphics.crossline.disable(false);
+                        global.raiseEvent('scrollend', {
+                            prevScrollPosition: prevPos,
+                            scrollPosition: pos
+                        }, iapi.chartInstance);
+                    });
+                }());
+            }
+        }
+    }, chartAPI.msline, {
+        showValues: 0,
+        zeroplanethickness: 1,
+        zeroplanealpha: 40,
+        showzeroplaneontop: 0,
+        enablemousetracking: true
+    });
+
+    chartAPI('zoomlinedy',{
+        standaloneInit: true,
+        defaultDatasetType: 'zoomline',
+        applicableDSList: {
+            'zoomline': true
+        },
+        creditLabel: creditLabel,
+        friendlyName : 'Zoomable and Panable Multi-series Dual-axis Line Chart',
+        _spaceManager: chartAPI.msdybasecartesian._spaceManager,
+        _setAxisLimits: chartAPI.msdybasecartesian._setAxisLimits,
+        _createAxes: chartAPI.msdybasecartesian._createAxes,
+        _feedAxesRawData : chartAPI.msdybasecartesian._feedAxesRawData
+    }, chartAPI.zoomline, {
+        isdual: true
+    });
+
+    FusionCharts.register('component', ['dataset', 'zoomline', {
+        _setConfigure: function () {
+            var dataSet = this,
+                conf = dataSet.config,
+                cdef = dataSet.chart.jsonData.chart,
+                JSONData = dataSet.JSONData;
+            conf.drawanchors = pluckNumber(cdef.drawanchors, cdef.showanchors, 1);
+            conf.anchorradius = pluckNumber(JSONData.anchorradius, cdef.anchorradius, conf.linethickness + 2);
+            dataSet.__base__._setConfigure.apply(dataSet, arguments);
+        },
+        _firePlotEvent: function (eventType, plotIndex, e, datasetIndex) {
+            var dataset = this,
+                chart = dataset.chart,
+                components = dataset.components,
+                dataStore = components.dataRT || components.data,
+                data = dataStore[plotIndex],
+                setElement = data.graphics.element,
+                tip = lib.toolTip,
+                originalEvent = e.originalEvent,
+                style = chart.components.paper.canvas.style,
+                noCrossline = !dataset.chart.config.useCrossline,
+                config,
+                eventArgs,
+                setLink;
+
+            if (setElement) {
+                config = data.config;
+                setLink = config.setLink;
+                eventArgs = config.eventArgs;
+                switch (eventType) {
+                    case 'mouseover' :
+                        noCrossline && dataset._decideTooltipType(plotIndex, datasetIndex, e);
+                        dataset._rolloverResponseSetter(chart, data, originalEvent);
+                        setLink && (style.cursor = POINTER);
+                        break;
+                    case 'mouseout' :
+                        tip.hide(chart.chartInstance.id);
+                        dataset._rolloutResponseSetter(chart, data, originalEvent);
+                        setLink && (style.cursor = DEFAULT_CURSOR);
+                        break;
+                    case 'click' :
+                        plotEventHandler.call(setElement, chart, originalEvent, DATAPLOTCLICK, eventArgs);
+                        break;
+                    case 'mousemove' :
+                        noCrossline && dataset._decideTooltipType(plotIndex, datasetIndex, e);
+                }
+            }
+        },
+        configure: function () {
+            var pgsw,
+                conf,
+                pin = {},
+                dataSet = this,
+                cdef = dataSet.chart.jsonData.chart;
+            //no animation is supported.
+            cdef.animation = 0;
+            cdef.showvalues = pluckNumber(cdef.showvalues, 0);
+            dataSet.__base__.configure.call(dataSet);
+            conf = dataSet.config;
+            // pin line graphics is same as main graphics except a few changes
+            pgsw = conf.linethickness + pluckNumber(cdef.pinlinethicknessdelta, 1);
+            pin['stroke-width'] = pgsw > 0 && pgsw || 0;
+            pin['stroke-dasharray'] = [3, 2];
+            pin.stroke = lib.hashify(conf.linecolor);
+            pin['stroke-opacity'] = conf.alpha / 100;
+            pin['stroke-linejoin'] = (conf['stroke-linejoin'] = 'round');
+            pin['stroke-linecap'] = (conf['stroke-linecap'] = 'round');
+
+            conf.pin = pin;
+            // animation is disabled in zoomline charts.
+            conf.animation = false;
+            conf.transposeanimduration = 0;
+        },
+        isWithinShape: function (pointObj, pX, x, y) {
+                if (!pointObj) {
+                    return;
+                }
+
+                var anchorProps = pointObj.config.anchorProps,
+                    config = pointObj.config,
+                    radius,
+                    borderThickness = anchorProps.borderThickness,
+                    dataset = this,
+                    dataStore = dataset.components.data,
+                    dragTolerance = pluckNumber(config.dragTolerance, 0),
+                    xPos,
+                    yPos,
+                    dx,
+                    dy,
+                    diff,
+                    hoverEffects;
+
+                xPos = pointObj._xPos;
+                yPos = pointObj._yPos;
+
+                if (yPos !== null) {
+                    hoverEffects = pointObj.config.hoverEffects;
+                    radius =  Math.max(anchorProps.radius, hoverEffects && hoverEffects.anchorRadius || 0, HTP) +
+                        borderThickness / 2;
+                    dx = (x - xPos);
+                    dy = (y - yPos);
+                    diff = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+
+                    if (diff <= radius || diff <= dragTolerance) {
+                        return {
+                            pointIndex: pX,
+                            hovered: true,
+                            pointObj: dataStore[pX]
+                        };
+                    }
+                    else {
+                        return false;
+                    }
+                }
+            },
+        draw: function () {// retrieve required objects
+            var //newElem,
+                graphics,
+                UNDEF = null,
+                flStart = false,
+                flEnd = false,
+                k,
+                flag1 = false,
+                flag2 = false,
+                dataSet = this,
+                JSONData = dataSet.JSONData,
+                chart = dataSet.chart,
+                chartComponents = chart.components,
+                conf = dataSet.config,
+                datasetIndex = dataSet.index || dataSet.positionIndex,
+                chartConfig = chart.config,
+                chartAttr = chart.jsonData.chart,
+                dataSetComponents = dataSet.components,
+                dataStore = dataSetComponents.data,
+                dataSetLen = dataStore.length,
+                len = dataSetLen,
+                i,
+                paper = chartComponents.paper,
+                xAxis = chartComponents.xAxis[0],
+                yAxis = dataSet.yAxis,
+                xPos,
+                yPos,
+                layers = chart.graphics,
+                dataLabelsLayer = layers.datalabelsGroup,
+                parseUnsafeString = lib.parseUnsafeString,
+                getValidValue = lib.getValidValue,
+                toolText,
+                label,
+                setElement,
+                //hotElement,
+                setLink,
+                setValue,
+                eventArgs,
+                displayValue,
+                groupId,
+                animationDuration = conf.animation.duration,
+                dataObj,
+                setRolloutAttr,
+                setRolloverAttr,
+                lineThickness = conf.linethickness,
+                container = dataSet.graphics.container,
+                trackerContainer = dataSet.graphics.trackerContainer,
+                // Called when clicking on the data plot
+                // @param {Array} setDataArr
+                clickFunc = function (setDataArr) {
+                    var ele = this;
+                    plotEventHandler.call(ele, chart, setDataArr);
+                },
+                /*
+                    Called when hovering over anchor
+                    @param {object} dataObj
+                    @param {boolean} hoverEnabled
+                */
+                // rolloverResponseSetter = function (data) {
+                //     var ele = this,
+                //         dataObj = ele.data('dataObj'),
+                //         hoverEnabled = dataObj.config.hoverEffects;
+                //     // Calling hoverplotanchor if hovereffects are enabled
+                //     if (hoverEnabled && dataObj && dataObj.graphics && dataObj.graphics.element) {
+                //         dataSet._hoverPlotAnchor(dataObj, ROLLOVER, chartAttr);
+                //     }
+                //     plotEventHandler.call(ele, chart, data, ROLLOVER);
+                // },
+                /*
+                    Called when hovering out of anchor
+                    @param {object} dataObj
+                    @param {boolean} hoverEnabled
+                */
+                // rolloutResponseSetter = function (data) {
+                //     var ele = this,
+                //     dataObj = ele.data('dataObj'),
+                //     hoverEnabled = dataObj.config.hoverEffects;
+                //     // Calling hoverplotanchor if hovereffects are enabled
+                //     if (hoverEnabled && dataObj && dataObj.graphics && dataObj.graphics.element) {
+                //         dataSet._hoverPlotAnchor(dataObj, ROLLOUT, chartAttr);
+                //     }
+                //     plotEventHandler.call(ele, chart, data, ROLLOUT);
+                // },
+                viewPortConfig = chartConfig.viewPortConfig,
+                showTooltip = chartConfig.showtooltip,
+                //attr,
+                group = layers.datasetGroup,
+                hoverEffects,
+                shadow = conf.shadow,
+                anchorShadow,
+                dataLabelContainer = dataSet.graphics.dataLabelContainer,
+                anchorProps = {},
+                imgRef,
+                addAttr,
+                symbol,
+                config,
+                is3D = chart.is3D,
+                use3dlineshift = conf.use3dlineshift,
+                showValue,
+                /*
+                    Called when transpose animation is completed
+                    for hiding the dataset
+                */
+                /*animCallBack = function() {
+                    lineElement.attr({
+                        path: currentPath.getPathArr()
+                    });
+                    if (dataSet.visible === false && (dataSet._conatinerHidden === false ||
+                            dataSet._conatinerHidden=== undefined)) {
+                        container.lineGroup.hide();
+                        container.lineShadowGroup.hide();
+                        container.anchorShadowGroup.hide();
+                        container.anchorGroup.hide();
+                        trackerContainer.hide();
+                        dataLabelContainer && dataLabelContainer.hide();
+                        // isLineSet ? (dataSet._conatinerHidden  = fcJSON.lineset._conatinerHidden) :
+                        //     (dataSet._conatinerHidden = true);
+                        dataSet._conatinerHidden = true;
+                    }
+                },*/
+                // animCompleteFn = chart.getAnimationCompleteFn(),
+                /*
+                    Called when the initial animation compeletes
+                    for showing the dataset
+                */
+                initAnimCallBack = function () {
+                    container.lineShadowGroup.show();
+                    container.anchorShadowGroup.show();
+                    container.anchorGroup.show();
+                    trackerContainer.show();
+                    dataLabelContainer && dataLabelContainer.show();
+                    chart._animCallBack();
+                    // animCompleteFn();
+                },
+                // animFlag = true,
+                setTooltext,
+                connector,
+                dashStyle,
+                yBase = yAxis.getAxisBase(),
+                yBasePos = yAxis.yBasePos = yAxis.getAxisPosition(yBase),
+                xAxisZeroPos = xAxis.getAxisPosition(0),
+                xAxisFirstPos = xAxis.getAxisPosition(1),
+                pointDistance = xAxisFirstPos - xAxisZeroPos,
+                totalCanvasWidth,
+                xDepth = is3D ? 10 : 0,
+                yDepth = (is3D && use3dlineshift) ? 10 : 0,
+                clipCanvas = [
+                    mathMax(0, chartConfig.canvasLeft - xDepth),
+                    mathMax(0, chartConfig.canvasTop - yDepth),
+                    mathMax(1, chartConfig.canvasWidth + xDepth * 2),
+                    mathMax(1, chartConfig.canvasHeight + yDepth)
+                ],
+                clipCanvasInit = [
+                    mathMax(0, chartConfig.canvasLeft - xDepth),
+                    mathMax(0, chartConfig.canvasTop - yDepth),
+                    1,
+                    mathMax(1, chartConfig.canvasHeight + yDepth * 2)
+                ],
+                scroll = {},
+                isScroll = chart.hasScroll || false,
+                scrollPosition,
+                lineDashStyle = conf.lineDashStyle,
+                lineColorObj = {
+                    color: conf.linecolor,
+                    alpha: conf.alpha
+                },
+                lscthash = [toRaphaelColor(lineColorObj), lineDashStyle].join(':'),
+                setColor,
+                setDashStyle,
+                lineSegmentChange,
+                colorObj,
+                lineDrawing = 0,
+                initialAnimation = false,
+                connectorShadow,
+                lineElement = dataSet.graphics.lineElement,
+                visible = dataSet.visible,
+                x,
+                dip,
+                pool = dataSet.pool || (dataSet.pool = {
+                    element: []
+                }),
+                removePath = {},
+                currentPath = {},
+                connectorPath = {},
+                anchorRadius = conf.anchorradius,
+                catLabel,
+                dataArr = [],
+                cntr,
+                j,
+                dataIndex,
+                strtIndex,
+                skippedVals,
+                endIndex,
+                showTerminalValidData = chartConfig.showTerminalValidData,
+                info = chartConfig.viewPortConfig,
+                showPeakData = chartConfig.showPeakData,
+                maxPeakDataLimit = chartConfig.maxPeakDataLimit,
+                minPeakDataLimit = chartConfig.minPeakDataLimit,
+                useCrossline = pluckNumber(chartConfig.useCrossline, 0),
+                step = info.step, // stepping that can fit target pixels per point
+                // minimum distance between two visible anchors
+                anchorminrenderdistance = xAxis.getPixel(info.step) - xAxisZeroPos,
+                // make anchors visible only when it is less than amrd.
+                hideAnchors = anchorminrenderdistance < info.amrd,
+                addAnchors = function (dataObj, dataIndex) {
+                    var graphics = dataObj.graphics;
+
+                    config = dataObj.config;
+                    setValue = config.setValue;
+                    setLink  = config.setLink;
+                    x = config.x || dataIndex;
+                    setTooltext = getValidValue(parseUnsafeString(pluck(config.setLevelTooltext,
+                        JSONData.plottooltext, chartAttr.plottooltext)));
+                    config.toolTipValue = yAxis.dataLabels(setValue);
+                    showValue = config.showValue;
+                    anchorProps = config.anchorProps;
+                    symbol = anchorProps.symbol;
+                    anchorShadow = anchorProps.shadow;
+                    displayValue = config.displayValue;
+                    dip = config.dip || 0;
+                    // Creating the data object if not created
+                    if (!dataObj) {
+                        dataObj = dataStore[dataIndex] = {
+                            graphics : {}
+                        };
+                    }
+                    // Storing the color Object of this data
+                    colorObj = {
+                        color: config.color,
+                        alpha: config.alpha
+                    };
+                    dashStyle = config.dashStyle;
+                    xPos = config.xPos || (xAxis.getAxisPosition(x) - xDepth);
+                    // On hiding a dataset the y position of the hidden dataset is set to yBasePos
+                    if (!dataSet.visible) {
+                        yPos = yBasePos;
+                    }
+                    else {
+                        yPos = yAxis.getAxisPosition(setValue) + yDepth;
+                    }
+                    hoverEffects = config.hoverEffects;
+                    anchorProps.isAnchorHoverRadius = hoverEffects.anchorRadius;
+
+                    label = config.label;
+                    catLabel = xAxis.getLabel(dataIndex);
+                    toolText = config.toolText + (setTooltext ? BLANK :
+                        config.toolTipValue);
+                    config.finalTooltext = toolText;
+                    // Storing the event arguments
+                    eventArgs = {
+                        index: dataIndex,
+                        link: setLink,
+                        value: setValue,
+                        displayValue: displayValue,
+                        categoryLabel: catLabel,
+                        toolText: toolText,
+                        id: conf.userID,
+                        datasetIndex: datasetIndex,
+                        datasetName: JSONData.seriesname,
+                        visible: visible
+                    };
+
+                    // donot create anchor elements if thats a null data.
+                    if (config.setValue !== null && !hideAnchors) {
+                        // If imageurl is present
+                        if (anchorProps.imageUrl) {
+                            imgRef = new Image();
+                            addAttr = {
+                                isTooltip : showTooltip,
+                                setLink : setLink,
+                                hotLayer : trackerContainer,
+                                groupId : groupId,
+                                clickFunc : clickFunc
+                            };
+                            imgRef.onload = dataSet._onAnchorImageLoad(dataSet, dataIndex, eventArgs, xPos, yPos);
+                            imgRef.onerror = dataSet._onErrorSetter(xPos, yPos, dataIndex, dataSet);
+                            imgRef.src = anchorProps.imageUrl;
+                        }
+                        else {
+                            setElement = graphics.element;
+                            if (!setElement) {
+                                // If there is no existing graphics element then create it
+                                if(pool.element && pool.element.length) {
+                                    setElement = graphics.element = pool.element.shift();
+                                }
+                                else {
+                                    setElement = graphics.element = paper.polypath(container.anchorGroup);
+                                }
+                            }
+                            // Set all attributes that are not related to non position
+                            setElement
+                            .attr({
+                                polypath: [anchorProps.symbol[1] || 2, xPos, yPos,
+                                anchorProps.radius, anchorProps.startAngle, dip],
+                                fill: toRaphaelColor({
+                                    color: anchorProps.bgColor,
+                                    alpha: anchorProps.bgAlpha
+                                }),
+                                stroke: toRaphaelColor({
+                                    color: anchorProps.borderColor,
+                                    alpha: anchorProps.borderAlpha
+                                }),
+                                'stroke-width': anchorProps.borderThickness,
+                                'visibility': !anchorProps.radius ? 'hidden' : visible
+                            })
+                            .shadow(anchorShadow, container.anchorShadowGroup)
+                            .data('anchorRadius', anchorProps.radius)
+                            .data('anchorHoverRadius', hoverEffects.anchorRadius)
+                            .data('hoverEnabled', hoverEffects.enabled)
+                            .data('eventArgs',eventArgs);
+
+                            if (hoverEffects.enabled) {
+                                setRolloverAttr = {
+                                    polypath: [hoverEffects.anchorSides || 2,
+                                                xPos, yPos,
+                                                hoverEffects.anchorRadius,
+                                                hoverEffects.startAngle,
+                                                hoverEffects.dip
+                                            ],
+                                    fill: toRaphaelColor({
+                                        color: hoverEffects.anchorColor,
+                                        alpha: hoverEffects.anchorBgAlpha
+                                    }),
+                                    stroke: toRaphaelColor({
+                                        color: hoverEffects.anchorBorderColor,
+                                        alpha: hoverEffects.anchorBorderAlpha
+                                    }),
+                                    'stroke-width': hoverEffects.anchorBorderThickness
+                                };
+                                setRolloutAttr = {
+                                    polypath: [anchorProps.sides, xPos, yPos,
+                                                anchorProps.radius, anchorProps.startAngle, dip
+                                            ],
+                                    fill: toRaphaelColor({
+                                        color: anchorProps.bgColor,
+                                        alpha: anchorProps.bgAlpha
+                                    }),
+                                    stroke: toRaphaelColor({
+                                        color: anchorProps.borderColor,
+                                        alpha: anchorProps.borderAlpha
+                                    }),
+                                    'stroke-width': anchorProps.borderThickness
+                                };
+
+                                setElement && setElement
+                                .data('setRolloverAttr', setRolloverAttr)
+                                .data('setRolloutAttr', setRolloutAttr);
+                            }
+                            // hide the anchor element if the data is that of a null data
+                            setElement[(setValue || (setValue === 0)) ? 'show' : 'hide']();
+                        }
+
+                        // anchor Radius of hot element is set to maximum of hover radius and anchor radius
+                        anchorRadius = mathMax(anchorProps.radius,
+                            hoverEffects &&
+                            hoverEffects.anchorRadius || 0);
+                    }
+                    dataObj._xPos = xPos;
+                    dataObj._yPos = yPos;
+                    /*
+                        if colorObj and dash style of this data is different from
+                        the previous data then a new line segment is to be created
+                    */
+                    lineSegmentChange = (lscthash !== [
+                        toRaphaelColor(colorObj || lineColorObj),
+                        dashStyle || lineDashStyle
+                    ].join(':'));
+                    connector = dataObj.graphics.connector;
+                    connectorPath = dataSet.getLinePath([dataObj], connectorPath);
+                    setColor = toRaphaelColor(colorObj || lineColorObj);
+                    if (colorObj) {
+                        connectorShadow = {
+                            opacity: colorObj && colorObj.alpha/100
+                        };
+                    }
+                    else {
+                        connectorShadow = shadow;
+                    }
+                    setDashStyle = dashStyle || lineDashStyle;
+                    /*If color,alpha or dashed is not defined for this data
+                    then line drawing is set to 1 so the path of this data is
+                    appended to mainLinePath and not the connector path
+                    */
+                    if (pluck(config.setColor, config.setAlpha, config.setDashed) === UNDEFINED) {
+                        lineDrawing = 1;
+                    }
+                    else {
+                        lineDrawing = 0;
+                    }
+                    lscthash = [setColor, setDashStyle].join(':');
+                    /*Storing the x position and y position in dataObject for future reference
+                    For example - when drawing labels we need this xPos and yPos
+                    */
+                    showValue && !anchorProps.imageUrl && dataSet.drawLabel(dataIndex);
+                    dataArr.push(dataObj);
+                },
+                renderPeakData = function(cVal, index) {
+                    var numVals = cVal && cVal.length,
+                        orderArr = cVal.slice().sort(function (a, b){
+                            return a.config.setValue - b.config.setValue;
+                        }),
+                        maxVal = orderArr && orderArr.pop().config.setValue,
+                        minVal = (orderArr.length && orderArr.shift().config.setValue) || maxVal,
+                        counter = 0,
+                        origIndex,
+                        val;
+                    //now if any value is above or below of the
+                    //peak limits enter into iteration. This is to maximize
+                    //performance.
+                    if(maxVal > maxPeakDataLimit || minVal < minPeakDataLimit) {
+                        while(counter < numVals) {
+                            setElement = cVal[counter];
+                            val = setElement.config.setValue;
+                            if(val > maxPeakDataLimit || val < minPeakDataLimit) {
+                                origIndex = index + counter;
+                                //we have a sudden peak. need to show this
+                                addAnchors(setElement, origIndex);
+                            }
+                            counter += 1;
+                        }
+                    }
+
+                },
+                reuseFN = function (start, end) {
+                    // todo: Need to re-validate the use of this. Its a safer approach to remove one elements each
+                    // from both sides
+                    start -= 1;
+                    end += 1;
+                    // todo ends.
+                    var prop;
+                    for (i = start; i < end; i += 1) {
+                        graphics = dataStore[i] && dataStore[i].graphics || {};
+                        dataStore[i] && (dataStore[i].config.isRemoving = true);
+                        for (prop in graphics) {
+                            if (!pool[prop]) {
+                                pool[prop] = [];
+                            }
+                            if (graphics[prop]) {
+                                pool[prop].push(graphics[prop].hide());
+                                graphics[prop] = undefined;
+                            }
+                        }
+                    }
+                },
+                ddsi = (viewPortConfig.ddsi || 0),
+                ii = viewPortConfig.ddei || len,
+                _oldStartIndex = conf._oldStartIndex,
+                _oldEndIndex = conf._oldEndIndex,
+                _oldStep = conf._oldStep,
+                removeDataArr = dataSetComponents.removeDataArr,
+                removeDataArrLen = removeDataArr && removeDataArr.length;
+
+            // Creating the line group and appending it to dataset layer if not created
+            group.line = group.line ||
+                paper.group('line', group);
+            /*
+             * Creating lineConnector group and appending it to dataset layer if not created
+             * Lineconnector group has the anchorgroups of all datasets
+             */
+            group.lineConnector = group.lineConnector ||
+                paper.group('line-connector', group);
+            // Create dataset container if not created
+            if (!container) {
+                container = dataSet.graphics.container = {
+                    lineShadowGroup: paper.group('connector-shadow', group.line),
+                    anchorShadowGroup: paper.group('anchor-shadow', group.lineConnector),
+                    lineGroup: paper.group('line', group.line),
+                    anchorGroup: paper.group('anchors', group.lineConnector)
+                };
+                container.lineGroup.trackTooltip(true);
+                if (!visible) {
+                    container.lineShadowGroup.hide();
+                    container.anchorShadowGroup.hide();
+                    container.lineGroup.hide();
+                    container.anchorGroup.hide();
+                }
+            }
+            // Create tracker container if not created
+            if (!trackerContainer) {
+                trackerContainer = dataSet.graphics.trackerContainer = paper.group('line-hot',layers.trackerGroup)
+                .toBack();
+                if (!visible) {
+                    trackerContainer.hide();
+                }
+            }
+
+            if (!dataStore) {
+                dataStore = dataSet.components.data = [];
+            }
+
+            if (!dataLabelContainer) {
+                dataLabelContainer = dataSet.graphics.dataLabelContainer = dataSet.graphics.dataLabelContainer ||
+                    paper.group('datalabel', dataLabelsLayer);
+                if (!visible) {
+                    dataLabelContainer.hide();
+                }
+            }
+            /*  Calculating total canvas width
+                Required for scroll charts
+            */
+            totalCanvasWidth = pointDistance * len;
+            // if anchors were shown in previous state and now hidden due to amrd constrain, hide them all of the prev.
+            if (hideAnchors && !conf._oldHideAnchors) {
+                reuseFN(_oldStartIndex, _oldEndIndex);
+            }
+            else {
+                // If step values are changed while zoom in/out, remove all of the prev anchors.
+                if (step !== _oldStep) {
+                    reuseFN(_oldStartIndex, _oldEndIndex);
+                }
+                // useful in case of scroll. Here the step values are not changed. Hence removing optimally.
+                else {
+                    if (ddsi > _oldStartIndex) {
+                        reuseFN(_oldStartIndex, (ddsi > _oldEndIndex) ? _oldEndIndex : ddsi);
+                    }
+                    if (ii < _oldEndIndex) {
+                        reuseFN((ii < _oldStartIndex) ? _oldStartIndex : ii, _oldEndIndex);
+                    }
+                    if (ddsi < _oldStartIndex || ii > _oldEndIndex) {
+                        reuseFN(_oldStartIndex, _oldEndIndex);
+                    }
+                }
+            }
+            // caching the present state for future reference.
+            conf._oldHideAnchors = hideAnchors;
+            conf._oldEndIndex = ii;
+            conf._oldStep = step;
+            dataSet.setVisibility(visible);
+            //create plot elements
+            for (i = (conf._oldStartIndex = ddsi); i <= ii; i += (step)) {
+                dataObj = dataStore[i] || {};
+                config = dataObj.config || {};
+                config.isRemoving = false;
+                setValue = config.setValue || UNDEF;
+                dataIndex = i;
+                if (showTerminalValidData) {
+                    // search for first valid data point and first step valid data point
+                    // true if first data value is undefined
+                    if ((i === 0) && (setValue === UNDEF)) {
+                        cntr = 0;
+                        for (j = k = i; j < len;) {
+
+                            // search for first valid data point and set flag1 true,
+                            // if first valid data point found
+                            if ((dataStore[j].config.setValue === UNDEF) && !flag1) {
+                                j++;
+                            }
+                            else {
+                                flag1 = true;
+                            }
+
+                            // search for first valid step data point and set flag2 true,
+                            // if first valid data point found
+                            if ((dataStore[k].config.setValue === UNDEF) && (!flag2) && (k <= len)) {
+                                k += step;
+                                cntr++;
+                            }
+                            else {
+                                flag2 = true;
+                            }
+
+                            // check both flag value
+                            // terminates loop if both first valid data point and first valid step data point found
+                            if (flag1 && flag2) {
+                                flag1 = flag2 = false;
+                                break;
+                            }
+                        }
+                        if ( j % step !== 0) {
+                            flStart = true;
+                            config = dataStore[j].config;
+                            dataIndex = j;
+                        }
+                    }
+
+                    // search for last valid data point and last step valid data point
+                    // true if i exceeds data length
+                    else if ((i >= len) && (setValue === UNDEF)) {
+                        for (j = k = i; j > 0;) {
+
+                            // search for last valid data point and set flag1 true,
+                            // if last valid data point found
+                            if ((dataStore[j] === undefined) && !flag1) {
+                                j--;
+                            }
+                            else {
+                                flag1 = true;
+                            }
+
+                            // search for last valid step data point and set flag2 true,
+                            // if last valid data point found
+                            if (dataStore[k] === undefined && (!flag2)  && (k >= 0)) {
+                                k -= step;
+                            }
+                            else {
+                                flag2 = true;
+                            }
+
+                            // check both flag value
+                            // terminates loop if both last valid data point and last valid step data point found
+                            if (flag1 && flag2) {
+                                break;
+                            }
+                        }
+                        if ( j % step !== 0) {
+                            flEnd = true;
+                            config = dataStore[j].config;
+                            dataIndex = j;
+                        }
+                    }
+                }
+                dataObj = dataStore[dataIndex];
+                if (!dataObj) {
+                    continue;
+                }
+                addAnchors(dataObj, dataIndex);
+                // No point searching for peak when ther is no stepping
+                if(showPeakData && step > 1) {
+                    strtIndex = mathMin((i + 1), ii);
+                    endIndex = mathMin((strtIndex + step), ii);
+                    skippedVals = (endIndex === ii) ? dataStore.slice(strtIndex) : dataStore.slice(strtIndex,
+                        endIndex);
+                    skippedVals.length && renderPeakData(skippedVals, strtIndex);
+                }
+            }
+            currentPath = dataSet.getLinePath(dataArr, {});
+            removePath = dataSet.getLinePath(dataArr, removePath);
+            conf.lastPath = currentPath;
+            if (!lineElement) {
+                if (pool.lineElement && pool.lineElement.length) {
+                    lineElement = dataSet.graphics.lineElement = pool.lineElement.shift();
+                }
+                else {
+                    lineElement = dataSet.graphics.lineElement = paper.path(container.lineGroup);
+                }
+            }
+            // Show tooltip if crossline is disabled
+            if (!useCrossline) {
+                if (!lineElement.tooltipListenerAttached) {
+                    lineElement.tooltipListenerAttached = true;
+                    lineElement.mousemove(function (e) {
+                        info = chartConfig.viewPortConfig;
+                        var plotX = chartConfig._visx,
+                            step = info.step,
+                            stepw = info.ppp * step,
+                            x = getMouseCoordinate(chart.linkedItems.container, e, chart).chartX - plotX,
+                            pos,
+                            parsedLabel,
+                            tooltipText,
+                            tooltipTextSeparator = chartConfig.tooltipSepChar;
+                        x = (x += (stepw / 2) + info.offset) - x % (stepw);
+                        pos = (pos = (chart.getValuePixel(x))) + pos % step;
+                        parsedLabel = xAxis.getLabel(pos).label;
+
+                        // Initial tooltip text
+                        tooltipText = parsedLabel + tooltipTextSeparator +
+                            dataSet.components.data[pos].config.formatedVal;
+                        // Add plot name if exists in tooltip text
+                        tooltipText = conf.seriesname && (conf.seriesname + tooltipTextSeparator + tooltipText) ||
+                            tooltipText;
+                        lineElement.tooltip(chartConfig.crossline.enabled === 0 ? tooltipText : false);
+                    });
+                }
+            }
+            lineElement
+            .attr({
+                path: currentPath.getPathArr(),
+                'stroke-dasharray': lineDashStyle,
+                'stroke-width': lineThickness,
+                stroke: toRaphaelColor(lineColorObj),
+                'stroke-linecap': 'round',
+                /*  for lines even with thickness as 2 we need to have round line join
+                otherwise the line join may look like exceeding the correct position
+                */
+                'stroke-linejoin': lineThickness >= MAX_MITER_LINEJOIN ? 'round' : 'miter'
+            })
+            .shadow(shadow, container.lineShadowGroup);
+
+            // Animation from right when scrollToEnd is 1
+            if (isScroll) {
+                scrollPosition = scroll.startPercent;
+                clipCanvas[2] = totalCanvasWidth + clipCanvasInit[0];
+                if (scrollPosition === 1) {
+                    clipCanvasInit[0] = clipCanvas[2];
+                    clipCanvas[0] = 0;
+                }
+            }
+            clipCanvas[3] = clipCanvas[3] + yDepth;
+            if (animationDuration && visible && initialAnimation) {
+                container.anchorGroup.hide();
+                container.lineShadowGroup.hide();
+                container.anchorShadowGroup.hide();
+                dataLabelContainer.hide();
+                group.line.attr({
+                    'clip-rect': clipCanvasInit
+                })
+                .animate({
+                    'clip-rect': clipCanvas
+                }, animationDuration, 'normal', initAnimCallBack);
+            }
+            dataSet.drawn = true;
+            removeDataArrLen && dataSet.remove();
+        },
+        setVisibility: function (isVisible, isTranspose) {
+            var dataSet = this,
+                graphics = dataSet.graphics,
+                container = graphics && graphics.container,
+                trackerContainer = graphics && graphics.trackerContainer,
+                dataLabelContainer = graphics && graphics.dataLabelContainer,
+                action = isVisible ? 'show' : 'hide';
+            container.lineGroup[action]();
+            container.anchorGroup[action]();
+            container.anchorShadowGroup[action]();
+            container.lineShadowGroup[action]();
+            trackerContainer[action]();
+            dataLabelContainer[action]();
+
+            isTranspose && dataSet.transposeLimits(isVisible);
+
+        },
+        transposeLimits: function (isVisible) {
+            var dataSet = this,
+                chart = dataSet.chart,
+                chartConfig = chart.config,
+                yAxis = dataSet.yAxis;
+
+            chart._chartAnimation();
+            dataSet.visible = isVisible;
+            dataSet._conatinerHidden = !isVisible;
+
+            chart._setAxisLimits();
+            yAxis.draw();
+            chartConfig.legendClicked = true;
+            // Calling the draw function for redrawing the dataset
+            chart._drawDataset();
+            delete chartConfig.legendClicked;
+        },
+        /*
+         * Hides when clicked on its respective legend
+         * Fired every time an activated legend is clicked
+         */
+        hide : function() {
+            this.setVisibility(false, true);
+        },
+        show : function() {
+            this.setVisibility(true, true);
+        }
+    },'Line']);
+
+    CrossLine = function ()  {};
+
+    CrossLine.prototype.configure = function (chart, options) {
+        // Create the tracker for cross-hair. This is needed for mouse
+        // tracking.
+        var i,
+            ii,
+            plot,
+            plotColor,
+            attrObj = {},
+            crossLine = this,
+            labelPadding = 2.5,
+            chartComponents = chart.components,
+            numberFormatter = chartComponents.numberFormatter,
+            paper = chartComponents.paper,
+            chartConfig = chart.config,
+            chartGraphics = chart.graphics,
+            plotX = this.left = chartConfig._visx,
+            plotY = this.top = chartConfig.canvasTop,
+            plotH = this.height = chartConfig.canvasHeight,
+            plotO = this._visout = chartConfig._visout,
+            plots = this.plots = chart.components.dataset,
+            datalayer = chartGraphics.datalabelsGroup,
+            group,
+            line,
+            labelStyle = options.labelstyle,
+            valueStyle = options.valuestyle,
+            pyaxis = chartComponents.yAxis[0],
+            pYAxisLimits = pyaxis.getLimit(),
+            syaxis = chartComponents.yAxis[1],
+            sYAxisLimits = syaxis && syaxis.getLimit(),
+            tracker = this.tracker,
+            labels = this.labels,
+            positionLabel = this.positionLabel,
+            linkedItems = chart.get('linkedItems'),
+            containerElem = linkedItems.container,
+            listeners = linkedItems.eventListeners || (linkedItems.eventListeners = []),
+            isWithinCanvas = function (e, fn, fnOut) {
+                // calls the function only if it is within the canvasArea.
+                if (chart.isWithinCanvas(e, chart).insideCanvas) {
+                    fn.call(crossLine, e);
+                }
+                else {
+                    fnOut.call(crossLine, e);
+                }
+            };
+
+        crossLine.width = chartConfig._visw;
+        // Create the group inside data layer where the cross-line elements will play around.
+        group = this.group;
+        if (!group) {
+            group = this.group = paper.group ('crossline-labels', datalayer);
+            // Store chart's container to be use by mouseMove event
+            // to calculate the mouse coordinates.
+            this.container = containerElem;
+        }
+        group
+        .attr ( {
+            transform: ['T', plotX, chartConfig._ymin]
+        })
+        .css(valueStyle);
+
+        // Cross-line needs a personal tracker to intercept mouse interactions around and over data plots.
+        if (!tracker) {
+            tracker = crossLine.tracker = containerElem;
+
+            //adds to event stack.
+            listeners.push(addEvent(containerElem, 'touchstart mousemove', function (e) {
+                isWithinCanvas(e, crossLine.onMouseMove, crossLine.onMouseOut);
+            }, crossLine));
+
+            //adds to event stack.
+            listeners.push(addEvent(containerElem, 'mousedown', function () {
+                crossLine.onMouseDown();
+            }, crossLine));
+
+            //adds to event stack.
+            listeners.push(addEvent(containerElem, 'mouseup', function () {
+                crossLine.onMouseUp();
+            }, crossLine));
+
+            //adds to event stack.
+            listeners.push(addEvent(containerElem, 'mouseout', function () {
+                crossLine.onMouseOut();
+            }, crossLine));
+        }
+        /*tracker
+        .attr ({
+            x: plotX,
+            y: plotY,
+            width: plotW,
+            height: plotH,
+            stroke: 'none',
+            'stroke-width': 0,
+            fill: TRACKER_FILL
+        });*/
+
+        // Cross-line obviously needs a line.
+        line = this.line;
+
+        if (!line) {
+            line = this.line = paper.path(datalayer)
+            .toBack ();
+        }
+        line
+        .attr (extend2 ( {
+            path: ['M', plotX, plotY, 'l', 0, plotH]
+        }, options.line));
+
+        if (!labels) {
+            labels = this.labels = options.valueEnabled && paper.set ();
+        }
+        // add the category label
+        if (options.labelEnabled) {
+            attrObj.x = plotO;
+            attrObj.y = plotY + plotH + (chartConfig.scrollHeight || 0) + labelPadding;
+            attrObj['vertical-align'] = 'top';
+            attrObj.direction = chartConfig.textDirection;
+            attrObj.text = BLANK;
+            if (!positionLabel) {
+                positionLabel = this.positionLabel = paper.text(attrObj, labelStyle, chartGraphics.datalabelsGroup)
+                .insertBefore (chartGraphics.datasetGroup);
+            }
+            else {
+                positionLabel.attr(attrObj);
+                positionLabel.css(labelStyle);
+            }
+        }
+        else {
+            positionLabel && positionLabel.remove();
+            delete this.positionLabel;
+        }
+
+        // initially hidden
+        this.hide ();
+        this.ppixelRatio = -pyaxis.getPVR();
+        this.spixelRatio = syaxis && -syaxis.getPVR();
+        this.yminValue = chartConfig._yminValue;
+        this.pyaxisminvalue = pYAxisLimits.min;
+        this.pyaxismaxvalue = pYAxisLimits.max;
+        this.syaxisminvalue = sYAxisLimits && sYAxisLimits.min;
+        this.syaxismaxvalue = sYAxisLimits && sYAxisLimits.max;
+        this.positionLabels = chartConfig.xlabels || {
+            data: [],
+            parsed: []
+        };
+        this.chart = chart;
+
+        // Open closed function to access chart variables.
+        this.getZoomInfo = function () {
+            return chartConfig.viewPortConfig;
+        };
+
+        this.getDataIndexFromPixel = function (px) {
+            return Math.round(chart.components.xAxis[0].getValue(px));
+        };
+
+        this.getPositionLabel = function (index) {
+            var text = chart.components.xAxis[0].getLabel(index);
+            return (text && text.label) || BLANK;
+        };
+
+        if (options.valueEnabled) {
+            for (i = 0, ii = plots.length; i < ii; i += 1) {
+                plot = plots[i];
+                plotColor = hashify(plot.config.linecolor);
+
+                attrObj.x = 0;
+                attrObj.y = plotO;
+                attrObj.fill = plotColor;
+                attrObj.direction = chartConfig.textDirection;
+                attrObj.text = BLANK;
+                attrObj['text-bound'] = valueStyle['text-bound'];
+                attrObj.lineHeight = valueStyle.lineHeight;
+                if (!labels[i]) {
+                    labels[i] = labels.items[i] = paper.text(attrObj, UNDEFINED, group);
+                }
+                else {
+                    labels[i]
+                    .attr(attrObj);
+                    // .css (valueStyle);
+                }
+            }
+            for (; i < labels.items.length; i += 1) {
+                labels[i].remove();
+                delete labels[i];
+                labels.items.splice(i,1);
+            }
+            this.numberFormatter = numberFormatter;
+        }
+        else if (labels.items && labels.items.length) {
+            for (i = 0; i < labels.items.length; i += 1) {
+                labels[i].remove();
+                delete labels[i];
+            }
+            labels.length = 0;
+        }
+    };
+    CrossLine.prototype.disable = function (state) {
+        if (state !== UNDEF) {
+            this.disabled = !!state;
+            if (this.disabled && this.visible) {
+                this.hide ();
+            }
+        }
+        return this.disabled;
+    };
+
+    CrossLine.prototype.onMouseOut = function () {
+        this.hide ();
+        this.position = undefined;
+    };
+
+    CrossLine.prototype.onMouseDown = function () {
+        !hasTouch && this.hide ();
+        this._mouseIsDown = true;
+    };
+
+    CrossLine.prototype.onMouseUp = function () {
+        !hasTouch && this.hide ();
+        delete this._mouseIsDown;
+    };
+
+    CrossLine.prototype.onMouseMove = function (e) {
+        if (this.disabled || (this._mouseIsDown && !hasTouch)) {
+            return;
+        }
+        var residue,
+            info = this.getZoomInfo (),
+            line = this.line,
+            plotX = this.left,
+            step = info.step,
+            chart = this.chart,
+            xAxis = chart.components.xAxis[0],
+            chartConfig = chart.get('config'),
+            canvasLeft = chartConfig.canvasLeft,
+            axisDimention = xAxis.getAxisConfig('axisDimention'),
+            // labelStep = xAxis.getAxisConfig('labelStep'),
+            x = getMouseCoordinate (this.container, e, chart).chartX - plotX,
+            xAxisVisible = xAxis._getVisibleConfig(),
+            // cdm = chart.config.cdm,
+            //bridge code.
+            /*bridgePixel = cdm ? (xAxis.getPixel(0) - xAxis.getPixel(axisMin)) / info.scaleX :
+                axisDimention.x - canvasLeft,*/
+            bridgePixel = axisDimention.x - canvasLeft,
+            pos;
+        // x = (x += (stepw / 2) + info.offset) - x % (stepw);
+        pos = (pos = this.getDataIndexFromPixel (mathRound (x))) + ((((residue =
+            (pos % step)) > (step / 2)) ? step - residue : -residue));
+        x = (xAxis.getPixel(pos) - bridgePixel) - canvasLeft;
+        // x -= info.offset;
+        line.transform(['T', mathRound(x), 0]);
+        (this.hidden && (chartConfig.crossline.enabled !== 0)) && this.show ();
+        // Donot show the crossline out of canvas area.
+        (pos < xAxisVisible.minValue || pos > xAxisVisible.maxValue) && (this.hide());
+        if (pos !== this.position || this.hidden) {
+            this.position = pos;
+            this.lineX = x;
+            this.updateLabels ();
+        }
+    };
+
+    CrossLine.prototype.updateLabels = function () {
+        var crossline = this,
+            labelPadding = 2.5,
+            labels = crossline.labels,
+            plots = crossline.plots,
+            visw = crossline.width,
+            position = crossline.position,
+            x = crossline.lineX,
+            flooredX = mathFloor (x),
+            ppvr = crossline.ppixelRatio,
+            spvr = crossline.spixelRatio,
+            yminValue = crossline.yminValue,
+            plotOut = crossline._visout,
+            numberFormatter = crossline.numberFormatter,
+            pYAxisMinValue = crossline.pyaxisminvalue,
+            pYAxisMaxValue = crossline.pyaxismaxvalue,
+            sYAxisMinValue = crossline.syaxisminvalue,
+            sYAxisMaxValue = crossline.syaxismaxvalue,
+            verticalLimits = (function () {
+                /*
+                 * This controls the overlapping of the crosshair labels if the plots are close.
+                 * This calculates the space to display the labels at the before it is plotted in DOM.
+                 * The buleprint of the algorithm is like:
+                 * When the labels position is being calculated.
+                 * a) Place the label if the position is not occupied
+                 * b) If the position is occupied find the neares unoccupied space
+                 * c) If the unoccupied space is downwards place it there
+                 * d) If the unoccupied space is upwards move the whole system up and place it in the next available
+                 * down position
+                 */
+                var _top = crossline.height * (-1),
+                    _bottom = yminValue * ppvr,
+                    boxHeight = 0,  // Height of text
+                    margin = 2,
+                    oMatrix,
+                    result = { },
+                    isSpaceEnough = false,
+                    sections,
+                    abs = Math.abs,
+                    floor = Math.floor,
+                    scale = { };
+
+                /*
+                * Polyfills
+                * Ofcourse and obviously for IE8
+                */
+                // Pollyfills for Object.create
+                // Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
+                if (typeof Object.create != 'function') {
+                    // Production steps of ECMA-262, Edition 5, 15.2.3.5
+                    // Reference: http://es5.github.io/#x15.2.3.5
+                    /*jslint freeze: false */
+                    Object.create = (function () {
+                        // To save on memory, use a shared constructor
+                        function Temp () { }
+
+                        // make a safe reference to Object.prototype.hasOwnProperty
+                        var hasOwn = Object.prototype.hasOwnProperty;
+
+                        return function (O) {
+                            var Properties, prop, obj;
+                            // 1. If Type (O) is not Object or Null throw a TypeError exception.
+                            if (typeof O != 'object') {
+                                throw new TypeError ('Object prototype may only be an Object or null');
+                            }
+
+                            // 2. Let obj be the result of creating a new object as if by the
+                            //    expression new Object () where Object is the standard built-in
+                            //    constructor with that name
+                            // 3. Set the [[Prototype]] internal property of obj to O.
+                            Temp.prototype = O;
+                            obj = new Temp ();
+                            Temp.prototype = null; // Let's not keep a stray reference to O...
+
+                            // 4. If the argument Properties is present and not undefined, add
+                            //    own properties to obj as if by calling the standard built-in
+                            //    function Object.defineProperties with arguments obj and
+                            //    Properties.
+                            if (arguments.length > 1) {
+                                // Object.defineProperties does ToObject on its first argument.
+                                Properties = Object (arguments[1]);
+                                for (prop in Properties) {
+                                    if (hasOwn.call (Properties, prop)) {
+                                        obj[prop] = Properties[prop];
+                                    }
+                                }
+                            }
+
+                            // 5. Return obj
+                            return obj;
+                        };
+                    }) ();
+                }
+
+                // Pollyfills for Array indexOf
+                // Ref: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
+                if (!Array.prototype.indexOf) {
+                    /*jslint freeze: false */
+                    Array.prototype.indexOf = function (searchElement, fromIndex) {
+
+                        var k, O, len, n;
+
+                        // 1. Let O be the result of calling ToObject passing
+                        //    the this value as the argument.
+                        if (this == null) {
+                            throw new TypeError ('"this" is null or not defined');
+                        }
+
+                        O = Object (this);
+
+                        // 2. Let lenValue be the result of calling the Get
+                        //    internal method of O with the argument "length".
+                        // 3. Let len be ToUint32 (lenValue).
+                        len = O.length >>> 0;
+
+                        // 4. If len is 0, return -1.
+                        if (len === 0) {
+                            return -1;
+                        }
+
+                        // 5. If argument fromIndex was passed let n be
+                        //    ToInteger (fromIndex); else let n be 0.
+                        n = +fromIndex || 0;
+
+                        if (Math.abs (n) === Infinity) {
+                            n = 0;
+                        }
+
+                        // 6. If n >= len, return -1.
+                        if (n >= len) {
+                            return -1;
+                        }
+
+                        // 7. If n >= 0, then Let k be n.
+                        // 8. Else, n<0, Let k be len - abs (n).
+                        //    If k is less than 0, then let k be 0.
+                        k = Math.max (n >= 0 ? n : len - Math.abs (n), 0);
+
+                        // 9. Repeat, while k < len
+                        while (k < len) {
+                            // a. Let Pk be ToString (k).
+                            //   This is implicit for LHS operands of the in operator
+                            // b. Let kPresent be the result of calling the
+                            //    HasProperty internal method of O with argument Pk.
+                            //   This step can be combined with c
+                            // c. If kPresent is true, then
+                            //    i.  Let elementK be the result of calling the Get
+                            //        internal method of O with the argument ToString (k).
+                            //   ii.  Let same be the result of applying the
+                            //        Strict Equality Comparison Algorithm to
+                            //        searchElement and elementK.
+                            //  iii.  If same is true, return k.
+                            if (k in O && O[k] === searchElement) {
+                                return k;
+                            }
+                            k++;
+                        }
+                        return -1;
+                    };
+                }
+
+                // Pollyfills for Array forEach
+                // Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
+                if (!Array.prototype.forEach) {
+                    // Production steps of ECMA-262, Edition 5, 15.4.4.18
+                    // Reference: http://es5.github.io/#x15.4.4.18
+                    /*jslint freeze: false */
+                    Array.prototype.forEach = function (callback, thisArg) {
+
+                        var T, k, O, len, kValue;
+
+                        if (this == null) {
+                            throw new TypeError (' this is null or not defined');
+                        }
+
+                        // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
+                        O = Object (this);
+
+                        // 2. Let lenValue be the result of calling the Get internal method of O
+                        // with the argument "length".
+                        // 3. Let len be ToUint32 (lenValue).
+                        len = O.length >>> 0;
+
+                        // 4. If IsCallable (callback) is false, throw a TypeError exception.
+                        // See: http://es5.github.com/#x9.11
+                        if (typeof callback !== 'function') {
+                            throw new TypeError (callback + ' is not a function');
+                        }
+
+                        // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+                        if (arguments.length > 1) {
+                            T = thisArg;
+                        }
+
+                        // 6. Let k be 0
+                        k = 0;
+
+                        // 7. Repeat, while k < len
+                        while (k < len) {
+                            // a. Let Pk be ToString (k).
+                            //   This is implicit for LHS operands of the in operator
+                            // b. Let kPresent be the result of calling the HasProperty internal method of O
+                            // with argument Pk.
+                            //   This step can be combined with c
+                            // c. If kPresent is true, then
+                            if (k in O) {
+
+                                // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
+                                kValue = O[k];
+
+                                // ii. Call the Call internal method of callback with T as the this value and
+                                // argument list containing kValue, k, and O.
+                                callback.call (T, kValue, k, O);
+                            }
+                            // d. Increase k by 1.
+                            k++;
+                        }
+                        // 8. return undefined
+                    };
+                }
+
+                // Attachable label can be positioned / attached anywhere along the y axis.
+                // If its position is changed via shifting or providing index it auto calculates the y.
+                function AttachableLabel () {
+                    this.y = 0;  // Absolute position
+                    this.lRef = undefined;   // Label object itself
+                    this.__shift = 0;    // Inner properties to calculate y. Indicate relative shift.
+                    this.__index = 0;     // Inner properties to calculate y. Indicate absolute index.
+                }
+
+
+                AttachableLabel.prototype.constructor = AttachableLabel;
+
+                AttachableLabel.prototype.applyShift = function (shiftApplied) {
+                    this.__shift = shiftApplied;
+                    // Shift applied, now calculate the y
+                    this.lRef.calcY = (this.y += shiftApplied * boxHeight);
+                };
+
+                AttachableLabel.prototype.applyDirectIndex = function (newIndex) {
+                    this.__index = newIndex;
+                    // Index changed along the sections of y axis. now calculate the y
+                    this.lRef.calcY = (this.y = _top - (newIndex * boxHeight * -1));
+                };
+
+                /*
+                 * An enum to determine whether the actions (shift / unoccupied position) is in the left side
+                 * or right side.
+                 * >----------------I----------------<
+                 * I is the reference index from which the actions are calculated.
+                 * Anypoint left to I is scale.NEG otherwise scale.POS
+                 */
+                try {
+                    Object.defineProperty (scale, 'POS', {
+                        enumerable : false,
+                        configurable : false,
+                        get : function () { return 1; }
+                    });
+
+                    Object.defineProperty (scale, 'NEG', {
+                        enumerable : false,
+                        configurable : false,
+                        get : function () { return -1; }
+                    });
+                }catch (e) {
+                    // For almighty IE8
+                    scale.POS = 1;
+                    scale.NEG = -1;
+                }
+
+                /*
+                 * Get an array, whose value incrementing from 0 to n-1 for index 0, n-1
+                 * @param: n { int} The number till which increment is needed
+                 * @return: { Array} with value populated from 0 to n-1
+                 */
+                //Array.prototype.inc = function (n) {
+                function inc (n) {
+                    var counter = 0;
+                    while (counter < n) {
+                        this.push (counter++);
+                    }
+                    return this;
+                }
+
+
+                /*
+                 * Calculates the position of nearest undefined (unoccupied) element.
+                 * @param: pos { int} The position from where the reference to be calculated
+                 * @return: { Object} { absValue: { int}, noScaleSide: { scale}}
+                 */
+                //Array.prototype.nearestUndefined = function (pos) {
+                function nearestUndefined (pos) {
+                    var i,
+                        diff,
+                        _scale,
+                        nearest = {},
+                        lowest = Number.POSITIVE_INFINITY;
+
+                    for (i = 0; i < this.length; i++) {
+                        diff = this[i] - pos;
+                        diff < 0 ? (_scale = scale.NEG) : (_scale = scale.POS);
+                        diff = abs (diff);
+
+                        if (diff <= lowest) {
+                            lowest = diff;
+                            nearest.absValue = diff;
+                            nearest.noScaleSide = _scale;
+                        }
+                    }
+
+                    return nearest;
+                }
+
+                /*
+                 * Keeps a matrix of lables plotted virtually alreday, (not actually in DOM) and
+                 * controls the overlapping by shifting or suggesting indexes.
+                 * This class when initialized, is itself an array containg the plotted labels.
+                 * There is an holes array which is of same length and keeps track of the unoccupied position.
+                 * These two are closely related and relate like
+                 *  -------------------------
+                 * |   |   | l1 |   |   | l2 |  Is the occupency matrix itself
+                 *  -------------------------
+                 *  ---------------
+                 * | 0 | 1 | 3 | 4 | Would be the holes.
+                 *  ---------------
+                 * @param: count { int} - size of the matrix. Generally be the size of the sections
+                 */
+                function OccupancyMatrix (count) {
+                    this.holes = inc.call ([], count);
+                }
+
+                OccupancyMatrix.prototype = Object.create (Array.prototype);
+                OccupancyMatrix.prototype.constructor = OccupancyMatrix;
+
+                /*
+                 * Recalculate the state of unoccupied positions freshly.
+                 * Removes the state before it was called
+                 */
+                OccupancyMatrix.prototype.repositionHoles = function () {
+                    var i,
+                        index = 0,
+                        value;
+
+                    this.holes.length = 0;
+                    for (i = 0; i < this.length; i++) {
+                        value = this[i];
+                        !value && (this.holes[index++] = i);
+                    }
+                };
+
+
+                /*
+                 * Possition the labels and attach the shidt information along with calculeatedY on the labels.
+                 * @param: value { int} - value of the labels, inthis case y position of the labels
+                 * @param: index { int} - the section where it would fit normally, calculated based on his value only.
+                 * @param: label { object} - the label object, which is to be attached. label.calcY is injected
+                 *                          after calculating it correctly.
+                 */
+                OccupancyMatrix.prototype.attachShift = function (value, index, label) {
+                    var indexVal,
+                        length = this.length,
+                        nearestUndefIndex,
+                        tempArr,
+                        attachedLabel,
+                        _index,
+                        calibratedIndex,
+                        nearestOffset;
+
+                    if (value === plotOut) {
+                        // Plot outside if label is not visible
+                        label.calcY = plotOut;
+                        return;
+                    }else {
+                        calibratedIndex = (index > (length - 1)) ? length - 1 : index;  // If the plot value is too low
+                        indexVal = this[calibratedIndex];
+                    }
+                    attachedLabel = new AttachableLabel (); // Create a new label which is attachable
+                    attachedLabel.y = value;
+                    attachedLabel.lRef = label;
+
+                    if (!indexVal) {
+                        // If the position is unoccupied, go ahead and occupy it
+                        attachedLabel.applyDirectIndex (calibratedIndex);
+                        this.splice (calibratedIndex, 1, attachedLabel);
+                        this.holes.splice (this.holes.indexOf (calibratedIndex), 1); // Update the occupancy matrix.
+                        return;
+                    }
+
+                    // If position is occupied, the label needs to be opsitioned down or up
+                    nearestOffset = nearestUndefined.call (this.holes, calibratedIndex);
+                    // Get the absolute nearest index
+                    nearestUndefIndex = calibratedIndex + (nearestOffset.absValue * nearestOffset.noScaleSide);
+
+                    if (nearestOffset.noScaleSide === scale.POS) {
+                        // If labels to be attached down the y axis
+                        attachedLabel.applyDirectIndex (nearestUndefIndex);
+                        this.splice (nearestUndefIndex, 1, attachedLabel);
+                        this.holes.splice (this.holes.indexOf (nearestUndefIndex), 1);
+                        return nearestUndefIndex;
+                    }
+
+                    if (nearestOffset.noScaleSide === scale.NEG) {
+                        // If the labels to be aattached is up the y axis we need the shift of sections and
+                        // then put it down
+                        tempArr = this.splice (nearestUndefIndex + 1, this.length - 1); // Section to be shifted
+                        this.pop ();
+                        tempArr.forEach (function (element) {
+                            // Shift the system of attachable lable
+                            element && (element.applyShift (-1));
+                        });
+                        [].push.apply (this, tempArr);
+                        _index = nearestUndefIndex;
+                        // Find the nearest  unoccupied position after shifting the index
+                        while (true) {
+                            if (!this[_index]) {
+                                break;
+                            }
+                            _index++;
+                        }
+                        // This is an dummy insert for recalculation of holes since the whole system has changed.
+                        this.push (0);
+                        this.repositionHoles ();
+                        // After recalculation get the nearest unoocupied position again since there might be better
+                        // place to push the new label
+                        nearestOffset = nearestUndefined.call (this.holes, _index);
+                        _index += (nearestOffset.absValue * nearestOffset.noScaleSide);
+                        attachedLabel.applyDirectIndex (_index);
+                        // Add the label where it was suggested
+                        this.splice (_index, 1, attachedLabel);
+                        this.repositionHoles ();
+                        return this.length - 1;
+                    }
+                };
+
+                try {
+                    Object.defineProperty (result, 'top', {
+                        enumerable : false,
+                        configurable : false,
+                        get : function () { return _top; }
+                    });
+
+                    Object.defineProperty (result, 'bottom', {
+                        enumerable : false,
+                        configurable : false,
+                        get : function () { return _bottom; }
+                    });
+                }catch (e) {
+                    // IE-8
+                    result.top = _top;
+                    result.bottom = _bottom;
+                }
+
+
+                /*
+                 * Initialize the limiting system
+                 * @param height { int} - label height
+                 * @param labelCount { int} - total no of labels
+                 */
+                result.init = function (height, labelCount) {
+                    var i,
+                        defaultValue = 0;
+
+                    boxHeight = height + margin;
+                    _top += (boxHeight / 2);
+                    sections = floor (abs (_top) / boxHeight);
+
+                    if (sections >= labelCount) {
+                        isSpaceEnough = true;
+                    }
+                    oMatrix = new OccupancyMatrix (sections);
+                    for (i = 0; i < sections ; i++) {
+                        oMatrix.push (defaultValue);
+                    }
+                };
+
+                /*
+                 * Occupy one section in the vertical scale
+                 * @param pos { int} - value from data config
+                 * @param label { object} - label object
+                 */
+                result.occupy = function (pos, label) {
+                    var passedSections = floor (abs (_top - pos) / boxHeight);
+                    oMatrix && oMatrix.attachShift (pos, passedSections, label);
+                };
+
+
+                return result;
+
+            }) ();
+        if (labels) {
+            // First set text so that we get correct value of boundingBox
+            labels[0] && labels[0].attr ( {
+                text: numberFormatter.yAxis ('0')
+            });
+
+            labels[0] && verticalLimits.init (labels[0].getBBox ().height, labels.length);
+
+            labels.forEach (function (label, i) {
+                var plot = plots[i],
+                    value = plot.components.data[position] && plot.components.data[position].config.setValue,
+                    labelYPos,
+                    yAxis = plot.config.parentYAxis;
+                if (value === undefined || !plot.visible ||
+                    (yAxis ? (value > sYAxisMaxValue || value < sYAxisMinValue):
+                        (value > pYAxisMaxValue || value < pYAxisMinValue))) {
+                    labelYPos = plotOut;
+                } else {
+                    labelYPos = (yAxis ? (value - sYAxisMinValue) * spvr : (value - pYAxisMinValue) * ppvr ) ;
+                }
+                verticalLimits.occupy (labelYPos, label);
+            });
+        }
+
+
+        labels && labels.forEach (function (label, i) {
+            var plot = plots[i],
+                GUTTER = 10,
+                value = plot.components.data[position] && plot.components.data[position].config.setValue,
+                bBox,
+                labelWidth,
+                halfLabelWidth,
+                adjustedHalfLabelWidth,
+                labelHeight,
+                _xPos,
+                _yPos,
+                text = numberFormatter[plot.config.parentYAxis ? 'sYAxis' : 'yAxis'] (value);
+
+            // Only defined and valid texts are shown on the labels.
+            if (text) {
+                label.attr({
+                    text: text
+                });
+
+                // Now calculate boundingBox and label positions
+                bBox = label.getBBox();
+                labelWidth = bBox && bBox.width;
+                halfLabelWidth = labelWidth && labelWidth * 0.5;
+                adjustedHalfLabelWidth = halfLabelWidth && (halfLabelWidth + GUTTER);
+                labelHeight = bBox && bBox.height;
+                _yPos = label.calcY;
+                _xPos = mathMax (0, mathMin (flooredX, visw));
+                (_yPos !== UNDEFINED && _xPos !== UNDEFINED) && (label.attr ( {
+                    x: _xPos,
+                    y: _yPos,
+                    'text-anchor': (x <= adjustedHalfLabelWidth) && 'start' ||
+                        ((x + adjustedHalfLabelWidth) >= visw) && 'end' || 'middle',
+                    'text-bound': ['rgba(255,255,255,0.8)', 'rgba(0,0,0,0.2)', 1, labelPadding]
+                }));
+            }
+            else {
+                // In case of undefined text labels, the label is transfered to out of visual. One way of hiding it.
+                label.attr({
+                    x: -visw
+                });
+            }
+
+        });
+
+        crossline.positionLabel && crossline.positionLabel.attr ( {
+            x: x + crossline.left,
+            text: crossline.getPositionLabel (position),
+            'text-bound': ['rgba(255,255,255,1)', 'rgba(0,0,0,1)', 1, labelPadding]
+        });
+    };
+
+    CrossLine.prototype.show = function () {
+        if (!this.disabled) {
+            this.hidden = false;
+            this.group.attr ('visibility', 'visible');
+            this.line.attr ('visibility', 'visible');
+            this.positionLabel && this.positionLabel.attr ('visibility', 'visible');
+        }
+    };
+
+    CrossLine.prototype.hide = function () {
+        this.hidden = true;
+        this.group.attr ('visibility', 'hidden');
+        this.line.attr ('visibility', 'hidden');
+        this.positionLabel && this.positionLabel.attr ('visibility', 'hidden');
+    };
+
+    CrossLine.prototype.dispose = function () {
+        var crossline = this,
+            key;
+
+        // delete all the properties in crossline object
+        for (key in crossline) {
+            crossline.hasOwnProperty (key) && (delete crossline[key]);
+        }
+    };
+
+    R.addSymbol ( {
+        pinModeIcon: function (posx, posy, rad) {
+            var x = posx,
+                y = posy,
+                r = rad,
+                r1 = r * 0.5,
+                r2 = r - r1,
+                x1 = x - r,
+                x2 = x + r,
+                x3 = x - r1,
+                x4 = x + r1,
+                x5 = x - 0.5,
+                x6 = x + 0.5,
+                x7 = x6 + 1,
+                x8 = x6 + 1.5,
+                y1 = y - r,
+                y2 = y + r1,
+                y3 = y - r1,
+                y4 = y + r2,
+                y5 = y + r  + 0.5;
+
+            return ['M', x1, y1, 'L', x3, y3, x3, y4, x1, y2, x5, y2, x, y5, x6,
+                y2, x2, y2, x4, y4, x4, y3, x2, y1, x8, y1, x8, y3, x8, y4, x7,
+                y4, x7, y3, x8, y3, x8, y1, 'Z'];
+        },
+
+        zoomOutIcon: function (x, y, radius) {
+
+            var
+            icoX = x - radius * 0.2,
+            icoY = y - radius * 0.2,
+            rad = radius * 0.8,
+            startAngle = R.rad (43),
+            endAngle = R.rad (48), // to prevent cos and sin of start and end from becoming equal on 360 arcs
+            startX = icoX + rad * mathCos (startAngle),
+            startY = icoY + rad * mathSin (startAngle),
+            endX = icoX + rad * mathCos (endAngle),
+            endY = icoY + rad * mathSin (endAngle),
+            handleHeight = radius, // the height of the handle
+            handAngle = R.rad (45),
+            handX1 = startX + handleHeight * mathCos (handAngle),
+            handY1 = startY + handleHeight * mathSin (handAngle),
+            handX2 = endX + handleHeight * mathCos (handAngle),
+            handY2 = endY + handleHeight * mathSin (handAngle),
+            semiW = 2;
+
+            return ['M', startX , startY,
+                'A', rad, rad, 0, 1, 0, endX, endY, 'Z', 'M', startX + 1 , startY + 1 , 'L',
+                handX1, handY1, handX2, handY2, endX + 1,
+                endY + 1, 'Z', 'M', icoX - semiW, icoY, 'L', icoX + semiW,
+                icoY, 'Z'];
+
+        },
+
+        resetIcon: function (x, y, radius) {
+            var r = radius,
+            startX = x - r, startY = y,
+            endAngle = (math.PI / 2 + math.PI) / 2,
+            endX = x + r * mathCos (endAngle),
+            endY = y + r * mathSin (endAngle),
+            arrowLength = r * 2 / 3,
+
+            paths = ['M', startX, startY, 'A',
+                r, r, 0, 1, 1, endX, endY, 'L', endX + arrowLength,
+                endY - 1, endX + 2, endY + arrowLength - 0.5, endX, endY];
+
+            return paths;
+        }
+    });
+
+}]);
+
+
+}));
diff --git a/fusioncharts.gantt.js b/fusioncharts.gantt.js
new file mode 100644
index 0000000..e42965b
--- /dev/null
+++ b/fusioncharts.gantt.js
@@ -0,0 +1,5472 @@
+
+(function (factory) {
+    if (typeof module === 'object' && typeof module.exports !== "undefined") {
+        module.exports = factory;
+    } else {
+        factory(FusionCharts);
+    }
+}(function (FusionCharts) {
+
+/**!
+ * @license FusionCharts JavaScript Library - Gantt Chart
+ * Copyright FusionCharts Technologies LLP
+ * License Information at 
+ *
+ * @version 3.12.0
+ */
+/**
+ * @private
+ * @module fusioncharts.renderer.javascript.gantt
+ * @export fusioncharts.gantt.js
+ */
+FusionCharts.register ('module', ['private', 'modules.renderer.js-gantt', function () {
+    var global = this,
+        lib = global.hcLib,
+        win = global.window,
+        userAgent = win.navigator.userAgent,
+        isIE = /msie/i.test (userAgent) && !win.opera,
+        chartapi = lib.chartAPI,
+        extend2 = lib.extend2,
+        pluck = lib.pluck,
+        pluckNumber = lib.pluckNumber,
+        pluckFontSize = lib.pluckFontSize,
+        getFirstColor = lib.getFirstColor,
+        parseConfiguration = lib.parseConfiguration,
+        setAttribDefs = lib.setAttribDefs,
+        //hasAttribDefs = lib.hasAttribDefs,
+        graphics = lib.graphics,
+        convertColor = graphics.convertColor,
+        getDarkColor = graphics.getDarkColor,
+        parseUnsafeString = lib.parseUnsafeString,
+        getFirstValue = lib.getFirstValue,
+        getValidValue = lib.getValidValue,
+        toPrecision = lib.toPrecision,
+        R = lib.Raphael,
+        chartPaletteStr = lib.chartPaletteStr,
+        componentDispose = lib.componentDispose,
+        schedular = lib.schedular,
+        COMMA = lib.COMMASTRING,
+        setLineHeight = lib.setLineHeight,
+        getDashStyle = lib.getDashStyle,
+        toRaphaelColor = lib.toRaphaelColor,
+        each = lib.each,
+        ROLLOVER = 'DataPlotRollOver',
+        ROLLOUT = 'DataPlotRollOut',
+        attrTypeNum = lib.attrTypeNum,
+        attrTypeBool = lib.attrTypeBool,
+        PXSTRING = 'px',
+        BLANK = '',
+        MAX_MITER_LINEJOIN = 2,
+        dropHash = lib.dropHash,
+        HASHSTRING = lib.HASHSTRING,
+        creditLabel = false && !lib.CREDIT_REGEX.test (win.location.hostname),
+        TRACKER_FILL = 'rgba(192,192,192,'+ (isIE ? 0.002 : 0.000001) +')', // invisible but clickable
+        UNDEF,
+        // The default value for stroke-dash attribute.
+        DASH_DEF = 'none',
+        mapSymbolName = graphics.mapSymbolName,
+        math = Math,
+        mathMax = math.max,
+        mathMin = math.min,
+        mathAbs = math.abs,
+        pInt = parseInt,
+        toFloat = parseFloat,
+        M = 'M',
+        L = 'L',
+        v = 'v',
+        H = 'H',
+        PX = 'px',
+        ATTRFN = 'attr',
+        BOLD = 'bold',
+        ITALIC = 'italic',
+        NORMAL = 'normal',
+        NONE = 'none',
+        UND_LINE = 'underline',
+        POSITION_BOTTOM = 'bottom',
+        getLightColor = lib.graphics.getLightColor,
+        plotEventHandler = lib.plotEventHandler,
+        hoverTimeout,
+        lastHoverEle,
+        merge = function () { /** @todo refactor dependency */
+            var args = arguments;
+            return lib.extend2 (lib.extend2 (lib.extend2 (lib.extend2 ( { }, args[0]), args[1]), args[2]), args[3]);
+        },
+
+        UNDEFINED,
+
+        defined = function (obj) {
+            return obj !== UNDEFINED && obj !== null;
+        },
+        isPercent = function (srt) {
+            return (/%/g).test (srt);
+        },
+        align = {
+            left: 'start',
+            right: 'end',
+            center: 'middle'
+        },
+        xAlign = {
+            left: 0,
+            right: 1,
+            center: 0.5,
+            'undefined': 0.5
+        },
+        alignGutter = {
+            left: 5,
+            right: -5,
+            center: 0,
+            'undefined': 0
+        },
+        emptyFn = function () {
+        },
+        checkInvalidValue = function () {
+            var i = 0,
+                ii = arguments.length,
+                allValuesValid = false,
+                val;
+
+            for (i = 0; i < ii; i++) {
+                val = arguments[i];
+                if (isNaN(val)) {
+                    return false;
+                }
+                else {
+                    allValuesValid = true;
+                }
+            }
+            return allValuesValid;
+
+        },
+        stylePropValues = {
+            fontWeight: [NORMAL, BOLD],
+            fontStyle: [NORMAL, ITALIC]
+        },
+        extractLabelStyle = function (styleObj) {
+            var style,
+                prop;
+
+            for (prop in styleObj) {
+                if (styleObj[prop] !== UNDEFINED) {
+                    style = style || {};
+                    switch (prop) {
+                        case 'fontWeight':
+                        case 'fontStyle':
+                            style[prop] = stylePropValues[prop][styleObj[prop]];
+                            break;
+                        default:
+                            style[prop] = styleObj[prop];
+                    }
+                }
+            }
+            return style;
+        };
+    // New gantt API
+    chartapi('gantt', {
+        defaultDatasetType: 'task',
+        applicableDSList: {'task': true, 'milestone': true, 'connectors': true},
+        fireGroupEvent: true,
+        aligncaptionwithcanvas: 0,
+        hasInteractiveLegend: false,
+        creditLabel: creditLabel,
+        //init: function (){},
+        //configure: function(){},
+        //manageSpace: function(){},
+        //draw: function(){}
+        _createDatasets : function () {
+            var iapi = this,
+                config = iapi.config,
+                components = iapi.components,
+                dataObj = iapi.jsonData,
+                dataset = [],
+                length,
+                i,
+                datasetStore,
+                datasetStoreLen,
+                datasetObj,
+                datasets,
+                defaultSeriesType = iapi.defaultDatasetType,
+                applicableDSList = iapi.applicableDSList,
+                dsType,
+                DsClass,
+                datasetJSON,
+                JSONData,
+                datasetMap = config.datasetMap || (config.datasetMap = {
+                    'task': [],
+                    'milestone': [],
+                    'connectors': []
+                }),
+                tempMap = {
+                    'task': [],
+                    'milestone': [],
+                    'connectors': []
+                },
+                dsTypeRef,
+                dsRef,
+                prevDataLength,
+                currDataLength,
+                dataType,
+                dsCount = { };
+            if (dataObj.tasks) {
+                dataset = dataset.concat(dataObj.tasks);
+            }
+            if (dataObj.milestones) {
+                dataset = dataset.concat(dataObj.milestones);
+            }
+            if (dataObj.connectors) {
+                dataset = dataset.concat(dataObj.connectors);
+            }
+            length = dataset && dataset.length;
+
+            if(dataset && !(dataset instanceof Array)){
+                dataset = [dataset];
+                length = 1;
+            }
+
+            if (!length) {
+                iapi.setChartMessage();
+            }
+
+            iapi.config.categories = dataObj.categories && dataObj.categories[0].category;
+
+            datasetStore = components.dataset = [];
+            datasetStoreLen = datasetStore.length;
+
+            for (i=0; i currDataLength) {
+                            dsRef.removeData(currDataLength - 1, prevDataLength - currDataLength, false);
+                        }
+                        dsRef.JSONData = datasetJSON;
+                        dsRef.configure();
+                        dsTypeRef.shift();
+                    }
+                }
+            }
+
+            iapi._createLegendItems();
+
+            // Removing unused datasets if any
+            for (dsType in datasetMap) {
+                datasets = datasetMap[dsType];
+                length = datasets.length;
+                if (length) {
+                    for (i = 0; i < length; i++) {
+                        datasetObj = datasets[i];
+                        if (datasetObj) {
+                            // legend.removeItem(datasets[j].legendItemId);
+                            componentDispose.call(datasetObj);
+                        }
+
+                    }
+                }
+            }
+            config.datasetMap = tempMap;
+        },
+
+        configure: function () {
+            var iapi = this,
+                config = iapi.config,
+                jsonData = iapi.jsonData,
+                background = iapi.components.background,
+                bConfig = background.config,
+                chartAttrs = jsonData.chart;
+            this.__setDefaultConfig();
+            chartapi.mscartesian.configure.call(this);
+            config.showBorder = pluckNumber(chartAttrs.showborder, 0);
+            config.borderWidth = config.showBorder ? pluckNumber (chartAttrs.borderthickness, 1) : 0;
+            bConfig.borderWidth = config.borderWidth;
+            config.lastVScrollPosition = UNDEFINED;
+            config.lastHScrollPosition = UNDEFINED;
+
+        },
+        _createLegendItems: function () {
+            var iapi = this,
+                components = iapi.components,
+                dataObj = iapi.jsonData,
+                legend = components.legend,
+                length,
+                i,
+                strokeColor,
+                lightColor,
+                color,
+                fillColor,
+                itemObj,
+                config,
+                prevLen,
+                currLen,
+                legendItem,
+                legendItemsArray = components.legendItems,
+                items = dataObj.legend && dataObj.legend.item || [];
+
+            prevLen = components.legendItems && components.legendItems.length || 0;
+            currLen = items.length;
+            if (prevLen > currLen) {
+                legend.emptyItems(currLen, prevLen - currLen);
+                legendItemsArray && legendItemsArray.splice(currLen, prevLen - currLen);
+            }
+
+            if (!legendItemsArray) {
+                components.legendItems = legendItemsArray = [];
+            }
+
+            for (i = 0, length = items.length; i < length; i++) {
+                itemObj = items[i];
+                legendItem = legendItemsArray[i];
+                color = itemObj.color;
+                strokeColor = getLightColor(color, 60).replace(dropHash, HASHSTRING);
+                lightColor = getLightColor(color, 40);
+
+                fillColor = {
+                    FCcolor: {
+                        color: color + ',' + color + ',' + lightColor + ',' + color + ',' + color,
+                        ratio: '0,70,30',
+                        angle: 270,
+                        alpha: '100,100,100,100,100'
+                    }
+                };
+
+                !legendItem && (legendItem = legendItemsArray[i] = {});
+                config = {
+                    fillColor : toRaphaelColor(fillColor),
+                    strokeColor: toRaphaelColor(strokeColor),
+                    label : itemObj.label,
+                    interactiveLegend: false,
+                    legendItemId: legendItem.legendItemId
+                };
+                legendItemsArray[i].legendItemId = legend.addItems(iapi, emptyFn, config);
+            }
+
+        },
+        _setAxisLimits: function () {
+
+        },
+        _createAxes : function () {
+            var iapi = this,
+                components = iapi.components,
+                TimeAxis = FusionCharts.get ('component', ['axis', 'time']),
+                ProcessAxis = FusionCharts.get ('component', ['axis', 'process']),
+                yAxis,
+                xAxis;
+
+
+            components.yAxis = [];
+            components.xAxis = [];
+            components.yAxis[0] = yAxis = new ProcessAxis ();
+            components.xAxis[0] = xAxis = new TimeAxis ();
+            yAxis.chart = iapi;
+            xAxis.chart = iapi;
+
+            yAxis.init ();
+            xAxis.init ();
+        },
+
+        _feedAxesRawData : function () {
+            var iapi = this,
+                components = iapi.components,
+                colorM = components.colorManager,
+                dataObj = iapi.jsonData,
+                chartAttrs = dataObj.chart,
+                xAxisConf,
+                yAxisConf,
+                is3d = iapi.is3d,
+                palleteString = is3d ? chartPaletteStr.chart3D : chartPaletteStr.chart2D,
+                yAxis,
+                xAxis;
+
+
+            xAxisConf = {
+                outCanfontFamily: pluck (chartAttrs.outcnvbasefont, chartAttrs.basefont, 'Verdana,sans'),
+                outCanfontSize:  pluckFontSize (chartAttrs.outcnvbasefontsize, chartAttrs.basefontsize, 10),
+                outCancolor: pluck (chartAttrs.outcnvbasefontcolor, chartAttrs.basefontcolor,
+                    colorM.getColor (palleteString.baseFontColor)).replace (/^#? ([a-f0-9]+)/ig, '#$1'),
+                axisBreaks : chartAttrs.xaxisbreaks,
+                axisNamePadding: chartAttrs.xaxisnamepadding,
+                axisValuePadding: chartAttrs.labelpadding,
+                axisNameFont: chartAttrs.xaxisnamefont,
+                axisNameFontSize: chartAttrs.xaxisnamefontsize,
+                axisNameFontColor: chartAttrs.xaxisnamefontcolor,
+                axisNameFontBold: chartAttrs.xaxisnamefontbold,
+                axisNameFontItalic: chartAttrs.xaxisnamefontitalic,
+                axisNameBgColor: chartAttrs.xaxisnamebgcolor,
+                axisNameBorderColor: chartAttrs.xaxisnamebordercolor,
+                axisNameAlpha: chartAttrs.xaxisnamealpha,
+                axisNameFontAlpha: chartAttrs.xaxisnamefontalpha,
+                axisNameBgAlpha: chartAttrs.xaxisnamebgalpha,
+                axisNameBorderAlpha: chartAttrs.xaxisnameborderalpha,
+                axisNameBorderPadding: chartAttrs.xaxisnameborderpadding,
+                axisNameBorderRadius: chartAttrs.xaxisnameborderradius,
+                axisNameBorderThickness: chartAttrs.xaxisnameborderthickness,
+                axisNameBorderDashed: chartAttrs.xaxisnameborderdashed,
+                axisNameBorderDashLen: chartAttrs.xaxisnameborderdashlen,
+                axisNameBorderDashGap: chartAttrs.xaxisnameborderdashgap,
+                useEllipsesWhenOverflow: chartAttrs.useellipseswhenoverflow,
+                divLineColor: pluck (chartAttrs.vdivlinecolor, colorM.getColor (palleteString.divLineColor)),
+                divLineAlpha: pluck (chartAttrs.vdivlinealpha, is3d ? colorM.getColor('divLineAlpha3D') :
+                    colorM.getColor ('divLineAlpha')),
+                divLineThickness: pluckNumber (chartAttrs.vdivlinethickness, 1),
+                divLineIsDashed: Boolean (pluckNumber (chartAttrs.vdivlinedashed, chartAttrs.vdivlineisdashed, 0)),
+                divLineDashLen: pluckNumber (chartAttrs.vdivlinedashlen, 4),
+                divLineDashGap: pluckNumber (chartAttrs.vdivlinedashgap, 2),
+                showAlternateGridColor: pluckNumber (chartAttrs.showalternatevgridcolor, 0),
+                alternateGridColor: pluck (chartAttrs.alternatevgridcolor, colorM.getColor ('altVGridColor')),
+                alternateGridAlpha: pluck (chartAttrs.alternatevgridalpha, colorM.getColor ('altVGridAlpha')),
+                numDivLines: pluckNumber(chartAttrs.numvdivlines, iapi.numVDivLines),
+                labelFont: chartAttrs.labelfont,
+                labelFontSize: chartAttrs.labelfontsize,
+                labelFontColor: chartAttrs.labelfontcolor,
+                labelFontAlpha: chartAttrs.labelalpha,
+                labelFontBold: chartAttrs.labelfontbold,
+                labelFontItalic: chartAttrs.labelfontitalic,
+                maxLabelHeight : chartAttrs.maxlabelheight,
+                axisName: chartAttrs.xaxisname,
+                axisMinValue: chartAttrs.xaxisminvalue,
+                axisMaxValue: chartAttrs.xaxismaxvalue,
+                setAdaptiveMin: chartAttrs.setadaptivexmin,
+                adjustDiv: chartAttrs.adjustvdiv,
+                labelDisplay: chartAttrs.labeldisplay,
+                showLabels: chartAttrs.showlabels,
+                rotateLabels: chartAttrs.rotatelabels,
+                slantLabel: pluckNumber (chartAttrs.slantlabels, chartAttrs.slantlabel),
+                labelStep: pluckNumber (chartAttrs.labelstep, chartAttrs.xaxisvaluesstep),
+                showAxisValues: pluckNumber (chartAttrs.showxaxisvalues,  chartAttrs.showxaxisvalue),
+                showLimits: pluckNumber(chartAttrs.showvlimits, iapi.showvlimits),
+                showDivLineValues: pluckNumber (chartAttrs.showvdivlinevalues, chartAttrs.showvdivlinevalues),
+                //showZeroPlane: chartAttrs.showvzeroplane,
+                zeroPlaneColor: chartAttrs.vzeroplanecolor,
+                zeroPlaneThickness: chartAttrs.vzeroplanethickness || 2,
+                zeroPlaneAlpha: chartAttrs.vzeroplanealpha,
+                showZeroPlaneValue: chartAttrs.showvzeroplanevalue,
+                trendlineColor: chartAttrs.trendlinecolor,
+                trendlineToolText: chartAttrs.trendlinetooltext,
+                trendlineThickness: chartAttrs.trendlinethickness,
+                trendlineAlpha: chartAttrs.trendlinealpha,
+                showTrendlinesOnTop: chartAttrs.showtrendlinesontop,
+                showAxisLine: pluckNumber (chartAttrs.showxaxisline, chartAttrs.showaxislines,
+                    chartAttrs.drawAxisLines, 0),
+                axisLineThickness: pluckNumber (chartAttrs.xaxislinethickness, chartAttrs.axislinethickness, 1),
+                axisLineAlpha: pluckNumber (chartAttrs.xaxislinealpha, chartAttrs.axislinealpha, 100),
+                axisLineColor: pluck (chartAttrs.xaxislinecolor, chartAttrs.axislinecolor, '#000000')
+            };
+            yAxisConf = {
+                outCanfontFamily: pluck (chartAttrs.outcnvbasefont, chartAttrs.basefont, 'Verdana,sans'),
+                outCanfontSize:  pluckFontSize (chartAttrs.outcnvbasefontsize, chartAttrs.basefontsize, 10),
+                outCancolor: pluck (chartAttrs.outcnvbasefontcolor, chartAttrs.basefontcolor,
+                    colorM.getColor (palleteString.baseFontColor)).replace (/^#? ([a-f0-9]+)/ig, '#$1'),
+                axisBreaks : chartAttrs.yaxisbreaks,
+                axisNamePadding: chartAttrs.yaxisnamepadding,
+                axisValuePadding: chartAttrs.yaxisvaluespadding,
+                axisNameFont: chartAttrs.yaxisnamefont,
+                axisNameFontSize: chartAttrs.yaxisnamefontsize,
+                axisNameFontColor: chartAttrs.yaxisnamefontcolor,
+                axisNameFontBold: chartAttrs.yaxisnamefontbold,
+                axisNameFontItalic: chartAttrs.yaxisnamefontitalic,
+                axisNameBgColor: chartAttrs.yaxisnamebgcolor,
+                axisNameBorderColor: chartAttrs.yaxisnamebordercolor,
+                axisNameAlpha: chartAttrs.yaxisnamealpha,
+                axisNameFontAlpha: chartAttrs.yaxisnamefontalpha,
+                axisNameBgAlpha: chartAttrs.yaxisnamebgalpha,
+                axisNameBorderAlpha: chartAttrs.yaxisnameborderalpha,
+                axisNameBorderPadding: chartAttrs.yaxisnameborderpadding,
+                axisNameBorderRadius: chartAttrs.yaxisnameborderradius,
+                axisNameBorderThickness: chartAttrs.yaxisnameborderthickness,
+                axisNameBorderDashed: chartAttrs.yaxisnameborderdashed,
+                axisNameBorderDashLen: chartAttrs.yaxisnameborderdashlen,
+                axisNameBorderDashGap: chartAttrs.yaxisnameborderdashgap,
+                axisNameWidth: chartAttrs.yaxisnamewidth,
+                useEllipsesWhenOverflow: chartAttrs.useellipseswhenoverflow,
+                rotateAxisName: pluckNumber (chartAttrs.rotateyaxisname, 1),
+                axisName: chartAttrs.yaxisname,
+                divLineColor: pluck (chartAttrs.divlinecolor, colorM.getColor (palleteString.divLineColor)),
+                divLineAlpha: pluck (chartAttrs.divlinealpha, is3d ? colorM.getColor('divLineAlpha3D') :
+                    colorM.getColor ('divLineAlpha')),
+                divLineThickness: pluckNumber (chartAttrs.divlinethickness, 1),
+                divLineIsDashed: Boolean (pluckNumber (chartAttrs.divlinedashed, chartAttrs.divlineisdashed, 0)),
+                divLineDashLen: pluckNumber (chartAttrs.divlinedashlen, 4),
+                divLineDashGap: pluckNumber (chartAttrs.divlinedashgap, 2),
+                showAlternateGridColor: pluckNumber (chartAttrs.showalternatehgridcolor, 1),
+                alternateGridColor: pluck (chartAttrs.alternatehgridcolor, colorM.getColor ('altHGridColor')),
+                alternateGridAlpha: pluck (chartAttrs.alternatehgridalpha, colorM.getColor ('altHGridAlpha')),
+                numDivLines: pluckNumber(chartAttrs.numdivlines, iapi.numDivLines),
+                axisMinValue: chartAttrs.yaxisminvalue,
+                axisMaxValue: chartAttrs.yaxismaxvalue,
+                setAdaptiveMin: chartAttrs.setadaptiveymin,
+                adjustDiv: chartAttrs.adjustdiv,
+                labelStep: chartAttrs.yaxisvaluesstep,
+                showAxisValues: pluckNumber (chartAttrs.showyaxisvalues, chartAttrs.showyaxisvalue),
+                showLimits: pluckNumber(chartAttrs.showlimits, iapi.showLimits),
+                showDivLineValues: pluckNumber (chartAttrs.showdivlinevalues, chartAttrs.showdivlinevalue),
+                //showZeroPlane: chartAttrs.showzeroplane,
+                zeroPlaneColor: chartAttrs.zeroplanecolor,
+                zeroPlaneThickness: chartAttrs.zeroplanethickness || 2,
+                zeroPlaneAlpha: chartAttrs.zeroplanealpha,
+                showZeroPlaneValue: chartAttrs.showzeroplanevalue,
+                trendlineColor: chartAttrs.trendlinecolor,
+                trendlineToolText: chartAttrs.trendlinetooltext,
+                trendlineThickness: chartAttrs.trendlinethickness,
+                trendlineAlpha: chartAttrs.trendlinealpha,
+                showTrendlinesOnTop: chartAttrs.showtrendlinesontop,
+                showAxisLine: pluckNumber (chartAttrs.showyaxisline, chartAttrs.showaxislines,
+                    chartAttrs.drawAxisLines, 0),
+                axisLineThickness: pluckNumber (chartAttrs.yaxislinethickness, chartAttrs.axislinethickness, 1),
+                axisLineAlpha: pluckNumber (chartAttrs.yaxislinealpha, chartAttrs.axislinealpha, 100),
+                axisLineColor: pluck (chartAttrs.yaxislinecolor, chartAttrs.axislinecolor, '#000000')
+            };
+
+            xAxisConf.vtrendlines = dataObj.trendlines;
+            //yAxisConf.trendlines = dataObj.trendlines;
+
+            yAxis = components.yAxis[0];
+            xAxis = components.xAxis[0];
+
+            yAxis.setCommonConfigArr (yAxisConf, true, true, false);
+            xAxis.setCommonConfigArr (xAxisConf, false, false, true);
+            yAxis.configure();
+            xAxis.configure();
+        },
+
+        _setCategories: function(){
+            var iapi = this,
+                components = iapi.get('components'),
+                dataObj = iapi.jsonData,
+                xAxis = components.xAxis,
+                yAxis = components.yAxis,
+                processes = dataObj.processes,
+                dataTable = dataObj.datatable,
+                categories = dataObj.categories;
+
+            yAxis[0].setAxisPadding(0.5, 0.5);
+            yAxis[0].setProcess(processes);
+            yAxis[0].setDataTable(dataTable);
+            xAxis[0].setCategory(categories);
+
+        },
+        _setAxisValuePadding: function () {
+            var iapi = this,
+                datasets = iapi.components.dataset,
+                len = datasets.length,
+                i,
+                datasetObj,
+                axisPaddingLeft = -Infinity,
+                axisPaddingRight = -Infinity,
+                //yAxis = iapi.components.yAxis,
+                paddingObj;
+            for (i = 0; i < len; i++) {
+                datasetObj = datasets[i];
+                paddingObj = datasetObj.getAxisValuePadding && datasetObj.getAxisValuePadding() || {};
+                axisPaddingLeft = mathMax(axisPaddingLeft, paddingObj.left || -Infinity);
+                axisPaddingRight = mathMax(axisPaddingRight, paddingObj.right || -Infinity);
+            }
+            if (axisPaddingLeft === -Infinity) {
+                axisPaddingLeft = 0;
+            }
+            if (axisPaddingRight === -Infinity) {
+                axisPaddingRight = 0;
+            }
+            //xAxis && xAxis[0].setAxisPadding(axisPaddingLeft, axisPaddingLeft);
+        },
+
+        _spaceManager: function () {
+            // todo marge _allocateSpace and _spacemanager
+            var availableWidth,
+                availableHeight,
+                iapi = this,
+                config = iapi.config,
+                components = iapi.components,
+                xAxis = components.xAxis && components.xAxis[0],
+                yAxis = components.yAxis && components.yAxis[0],
+                legend = components.legend,
+                legendPosition = legend.config.legendPos,
+                allottedSpace,
+                ganttWidthPercent = config.ganttwidthpercent,
+                processWidthPercent = 100 - (ganttWidthPercent || 67),
+                chartBorderWidth = config.borderWidth,
+                spaceUsed,
+                processHeight,
+                totalWidth = 0,
+                totalHeight = 0;
+
+            iapi._resetViewPortConfig && iapi._resetViewPortConfig();
+            xAxis.resetTransletAxis();
+            yAxis.resetTransletAxis();
+            iapi._allocateSpace ( {
+                top : chartBorderWidth,
+                bottom : chartBorderWidth,
+                left : chartBorderWidth,
+                right : chartBorderWidth
+            });
+            iapi._allocateSpace(iapi._manageActionBarSpace &&
+                iapi._manageActionBarSpace(config.availableHeight * 0.225) || {});
+
+            availableHeight = (legendPosition === POSITION_BOTTOM) ? config.canvasHeight * 0.6 :
+                config.canvasWidth * 0.6;
+
+            // a space manager that manages the space for the tools as well as the captions.
+            iapi._manageChartMenuBar(availableHeight);
+
+
+            if (legendPosition === 'right') {
+                allottedSpace = config.canvasWidth * 0.3;
+            }
+            else {
+                allottedSpace = config.canvasHeight * 0.3;
+            }
+
+
+
+            //Manage space for legend
+            iapi._manageLegendSpace(allottedSpace);
+
+            config.actualCanvasTop = config.canvasTop;
+            config.actualCanvasLeft = config.canvasLeft;
+            //****** Manage space for y axis here y axis is the process column
+            availableWidth = config.canvasWidth * (processWidthPercent / 100);
+
+            spaceUsed = yAxis.placeAxis (availableWidth);
+
+            totalWidth += (spaceUsed.left || 0) + (spaceUsed.right || 0);
+
+            yAxis && iapi._allocateSpace (spaceUsed);
+
+            availableHeight = (legendPosition === POSITION_BOTTOM) ? config.canvasHeight * 0.6 :
+                config.canvasWidth * 0.6;
+
+            availableHeight = config.canvasHeight * 0.6;
+
+            spaceUsed = xAxis.placeAxis (availableHeight);
+
+            totalHeight += (spaceUsed.top || 0);
+
+            config.totalWidth = totalWidth;
+            config.totalHeight = totalHeight;
+
+            xAxis && iapi._allocateSpace (spaceUsed);
+
+            processHeight = yAxis && yAxis.setProcessHeight();
+            yAxis.setAxisConfig({
+                processTotalHeight : processHeight
+            });
+        },
+
+        _drawCanvas: function () {
+            var iapi = this,
+                jsonData = iapi.jsonData,
+                chartAttrs = jsonData.chart,
+                components = iapi.components,
+                chartConfig = iapi.config,
+                chartGraphics = iapi.graphics,
+                paper = components.paper,
+                canvas = components.canvas,
+                graphics = canvas.graphics,
+                config = canvas.config,
+                clip = config.clip = { },
+                canvasBorderElement = graphics.canvasBorderElement,
+                animationObj = iapi.get('config', 'animationObj'),
+                animationDuration = animationObj.duration,
+                dummyAnimElem = animationObj.dummyObj,
+                dummyAnimObj = animationObj.animObj,
+                animType = animationObj.animType,
+                canvasElement = graphics.canvasElement,
+                canvasLeft = chartConfig.actualCanvasLeft,
+                canvasTop = chartConfig.actualCanvasTop,
+                actualCanvasWidth = chartConfig.canvasWidth,
+                actualCanvasHeight = chartConfig.canvasHeight,
+                actualCanvasLeft = chartConfig.canvasLeft,
+                actualCanvasTop = chartConfig.canvasTop,
+                canvasWidth = chartConfig.canvasWidth + chartConfig.totalWidth,
+                canvasHeight = chartConfig.canvasHeight + chartConfig.totalHeight,
+                canvasGroup = chartGraphics.canvasGroup,
+                canvasBorderRadius = config.canvasBorderRadius,
+                canvasBorderWidth = config.canvasBorderWidth,
+                borderWHlf = canvasBorderWidth * 0.5,
+                canvasBorderColor = config.canvasBorderColor,
+                canBGColor = config.canBGColor,
+                shadow = config.shadow,
+                canvasBgColor,
+                attr,
+                showCanvasBg = config.showCanvasBG = Boolean (pluckNumber (chartAttrs.showcanvasbg, 1)),
+                shadowOnCanvasFill = config.shadowOnCanvasFill,
+                showCanvasBorder = config.showCanvasBorder;
+
+            canvasBgColor = canBGColor;
+            attr = {
+                x: canvasLeft - borderWHlf,
+                y: canvasTop - borderWHlf,
+                width: canvasWidth + canvasBorderWidth,
+                height: canvasHeight + canvasBorderWidth,
+                r: canvasBorderRadius,
+                'stroke-width': canvasBorderWidth,
+                stroke: canvasBorderColor,
+                'stroke-linejoin': canvasBorderWidth > MAX_MITER_LINEJOIN ? 'round' : 'miter'
+            };
+
+            if (showCanvasBorder) {
+                if (!canvasBorderElement) {
+                    graphics.canvasBorderElement = paper.rect (attr, canvasGroup)
+                    .shadow(shadow);
+                }
+                else {
+                    canvasBorderElement.show();
+                    canvasBorderElement.animateWith(dummyAnimElem, dummyAnimObj, {
+                            x: canvasLeft - borderWHlf,
+                            y: canvasTop - borderWHlf,
+                            width: canvasWidth + canvasBorderWidth,
+                            height: canvasHeight + canvasBorderWidth,
+                            r: canvasBorderRadius
+                        }, animationDuration, animType);
+                    canvasBorderElement.attr ({
+                        'stroke-width': canvasBorderWidth,
+                        stroke: canvasBorderColor,
+                        'stroke-linejoin': canvasBorderWidth > MAX_MITER_LINEJOIN ? 'round' : 'miter'
+                    });
+                    canvasBorderElement.shadow(shadow);
+                }
+            }
+            else {
+                canvasBorderElement && canvasBorderElement.hide();
+            }
+
+
+            //create a clip-rect to clip canvas for later use
+            clip['clip-canvas'] = [
+                mathMax (0, actualCanvasLeft),
+                mathMax (0, actualCanvasTop),
+                mathMax (1, actualCanvasWidth),
+                mathMax (1, actualCanvasHeight)
+            ];
+            clip['clip-canvas-init'] = [
+                mathMax (0, actualCanvasLeft),
+                mathMax (0, actualCanvasTop),
+                1,
+                mathMax (1, actualCanvasHeight)
+            ];
+
+            if (showCanvasBg) {
+                attr = {
+                    x: canvasLeft,
+                    y: canvasTop,
+                    width: canvasWidth,
+                    height: canvasHeight,
+                    r: canvasBorderRadius,
+                    'stroke-width': 0,
+                    'stroke': NONE,
+                    fill: toRaphaelColor (canvasBgColor)
+                };
+
+                if (!canvasElement) {
+                    graphics.canvasElement = paper.rect (attr, canvasGroup)
+                    .shadow (shadowOnCanvasFill);
+                }
+                else {
+                    canvasElement.show();
+                    if (animationDuration) {
+                        canvasElement.animateWith(dummyAnimElem, dummyAnimObj, {
+                            x: canvasLeft,
+                            y: canvasTop,
+                            width: canvasWidth,
+                            height: canvasHeight,
+                            r: canvasBorderRadius
+                        }, animationDuration, animType);
+                    }
+                    canvasElement.attr (attr);
+                    canvasElement.shadow (shadowOnCanvasFill);
+                }
+            }
+            else {
+                canvasElement && canvasElement.hide();
+            }
+        },
+        _postSpaceManagement : function () {
+            var iapi = this,
+                config = iapi.config,
+                components = iapi.components,
+                xAxis = components.xAxis && components.xAxis[0],
+                yAxis = components.yAxis && components.yAxis[0],
+                processTotalHeight = yAxis.getAxisConfig('processTotalHeight'),
+                canvasHeight = config.canvasHeight,
+                legend = components.legend,
+                xDepth = config.xDepth,
+                canvasConfig = components.canvas.config,
+                canvasBorderWidth = canvasConfig.canvasBorderWidth,
+                canvasPadding = canvasConfig.canvasPadding,
+                vScrollBar = components.vScrollBar,
+                conf = vScrollBar.userConf,
+                vScrollWidth,
+                vScrollEnabled,
+                canvasPaddingLeft = canvasConfig.canvasPaddingLeft,
+                canvasPaddingRight = canvasConfig.canvasPaddingRight,
+                gPaneDuration = Number(config.ganttpaneduration),
+                gPaneDurationUnit = config.ganttpanedurationunit,
+                hProcessScrollBar = components.hProcessScrollBar,
+                hScrollBar = components.hScrollBar,
+                hScrollBarHeight = hScrollBar && hScrollBar.userConf.height || 0,
+                hProcessScrollHeight = hProcessScrollBar && hProcessScrollBar.userConf.height || 0,
+                totalProcessWidth,
+                totalVisiblelProcessWidth,
+                hScrollEnabled,
+                hProcessScrollEnabled,
+                maxHScrollBarHeight,
+                actualCanvasHeight,
+                axisLength;
+
+            if (gPaneDuration !== UNDEF && gPaneDurationUnit !== UNDEF) {
+                hScrollEnabled = true;
+            }
+            else {
+                hScrollEnabled = false;
+            }
+            totalProcessWidth = yAxis.getAxisConfig('totalWidth');
+            totalVisiblelProcessWidth = yAxis.getAxisConfig('totalVisiblelWidth');
+            if (totalProcessWidth > totalVisiblelProcessWidth) {
+                hProcessScrollEnabled = true;
+            }
+            else {
+                hProcessScrollEnabled = false;
+            }
+
+            maxHScrollBarHeight = mathMax(hProcessScrollEnabled ? hProcessScrollHeight : 0,
+                hScrollEnabled ? hScrollBarHeight : 0);
+            actualCanvasHeight = canvasHeight - maxHScrollBarHeight;
+
+            // Need to call manageScrollerPosition here for knowing whether vertical scroll bar is there
+            if (processTotalHeight > actualCanvasHeight) {
+                vScrollEnabled = true;
+            }
+
+            vScrollWidth = vScrollEnabled ? conf.width || 0 : 0;
+
+            axisLength = config.canvasWidth - (xDepth || 0) - mathMax(canvasPaddingLeft, canvasPadding) -
+                mathMax(canvasPaddingRight, canvasPadding) - vScrollWidth;
+            xAxis && xAxis.setAxisDimention ( {
+                x : config.canvasLeft + (xDepth || 0) + mathMax(canvasPaddingLeft, canvasPadding),
+                y : config.canvasTop - (config.shift || 0),
+                opposite : config.canvasBottom + canvasBorderWidth,
+                axisLength : axisLength
+            });
+
+            config.currentCanvasWidth = axisLength;
+
+            yAxis && yAxis.setAxisDimention ( {
+                x : config.canvasLeft - (config.shift || 0),
+                y : config.canvasTop,
+                opposite : config.canvasRight + canvasBorderWidth,
+                axisLength : config.canvasHeight
+            });
+            iapi._manageScrollerPosition();
+            legend.postSpaceManager();
+        },
+
+        _resetViewPortConfig: function () {
+            var iapi = this;
+
+            iapi.config.viewPortConfig = {
+                scaleX: 1,
+                scaleY: 1,
+                x: 0,
+                y: 0
+            };
+        },
+        _manageScrollerPosition: function () {
+            var iapi = this,
+                config = iapi.config,
+                chartComponents = iapi.components,
+                availableHeight,
+                availableWidth,
+                hScrollEnabled,
+                vScrollEnabled,
+                hScrollBar = chartComponents.hScrollBar,
+                vScrollBar = chartComponents.vScrollBar,
+                hProcessScrollBar = chartComponents.hProcessScrollBar,
+                totalWidth = config.totalWidth || 0,
+                totalHeight = config.totalHeight || 0,
+                scrollDimensions;
+            iapi._setAxisScale && iapi._setAxisScale();
+            vScrollEnabled = config.vScrollEnabled;
+            hScrollEnabled = config.hScrollEnabled;
+            //manage space for the scroll bar.
+            // fetch the availble space for the canvas area after other space management is over
+            availableHeight = config.canvasHeight;
+            availableWidth = config.canvasWidth;
+            scrollDimensions = hScrollBar.getLogicalSpace();
+            //allocate space for toolBox and set the chart configurations.
+            // shift denotes the amount of shift required by the x-axis
+            config.hScrollHeight = hScrollEnabled === false ? 0 : scrollDimensions.height + vScrollBar.conf.padding;
+            scrollDimensions = vScrollBar.getLogicalSpace();
+
+            config.vScrollWidth = vScrollEnabled !== false ?
+                scrollDimensions.width + vScrollBar.conf.padding : 0;
+
+            scrollDimensions = hProcessScrollBar.getLogicalSpace();
+            config.hProcessScrollHeight = config.hProcessScrollEnabled ?
+                scrollDimensions.height + hProcessScrollBar.conf.padding : 0;
+
+            totalHeight += mathMax(config.hProcessScrollHeight, config.hScrollHeight);
+
+            iapi._allocateSpace({
+                bottom: mathMax(config.hProcessScrollHeight, config.hScrollHeight)
+            });
+            config.totalWidth = totalWidth;
+            config.totalHeight = totalHeight;
+
+        },
+        updateManager: function (pos, isHorizontal) {
+            var iapi = this,
+                config = iapi.config,
+                viewPortConfig = iapi.config.viewPortConfig,
+                scaleX = viewPortConfig.scaleX,
+                xAxis = iapi.components.xAxis[0],
+                yAxis = iapi.components.yAxis[0],
+                datasetLayer = iapi.graphics.datasetGroup,
+                dataLabelsLayer = iapi.graphics.datalabelsGroup,
+                trackerGroup = iapi.graphics.trackerGroup,
+                xOffset = config.xOffset || 0,
+                yOffset = config.yOffset || 0,
+                canvasHeight = config.canvasHeight,
+                currentCanvasWidth = config.currentCanvasWidth,
+                scaleY = viewPortConfig.scaleY,
+                transformAttr;
+
+            if (isHorizontal) {
+                config.lastHScrollPosition = pos;
+            }
+            else {
+                config.lastVScrollPosition = pos;
+            }
+            if (isHorizontal) {
+                xOffset = config.xOffset = (currentCanvasWidth * (scaleX - 1) * pos);
+                viewPortConfig.x =  xOffset / scaleX;
+                xAxis.translateAxis(-xOffset, undefined);
+            }
+            else {
+                yOffset = config.yOffset = (canvasHeight * (scaleY - 1) * pos);
+                viewPortConfig.y = yOffset / scaleY;
+                yAxis.translateAxis(undefined, -yOffset);
+            }
+            transformAttr = 't' + -xOffset + ', ' + -yOffset;
+            datasetLayer.attr({
+                transform: transformAttr
+            });
+
+
+            dataLabelsLayer.attr({
+                transform: transformAttr
+            });
+            trackerGroup.attr({
+                transform: transformAttr
+            });
+        },
+        _setAxisScale: function () {
+            var iapi = this,
+                components = iapi.components,
+                config = iapi.config,
+                xAxis = components.xAxis[0],
+                limits = xAxis.getLimit(),
+                max = limits.max,
+                min = limits.min,
+                minDt = new Date(min),
+                yAxis = components.yAxis[0],
+                numberFormatter = iapi.components.numberFormatter,
+                gPaneDuration = Number(config.ganttpaneduration),
+                scrollOptions = config.scrollOptions || (config.scrollOptions = {}),
+                gPaneDurationUnit = config.ganttpanedurationunit,
+                // scrollToDate = config.scrolltodate,
+                scaleX,
+                ms = max - min,
+                canvasHeight = config.canvasHeight,
+                scrollToDate = config.scrolltodate,
+                canvasWidth = config.canvasWidth,
+                datems,
+                canvasLeft = config.canvasLeft,
+                hProcessScrollBar = components.hProcessScrollBar,
+                hScrollBar = components.hScrollBar,
+                maxHScrollBarHeight,
+                hScrollBarHeight = hScrollBar && hScrollBar.userConf.height || 0,
+                hProcessScrollHeight = hProcessScrollBar && hProcessScrollBar.userConf.height || 0,
+                datePixel,
+                totalWidth = xAxis.getPixel(max) - canvasLeft,
+                processTotalHeight = yAxis.getAxisConfig('processTotalHeight'),
+                totalVisiblelProcessWidth,
+                totalProcessWidth,
+                actualCanvasHeight,
+                width,
+                units;
+            if (gPaneDuration === UNDEF || gPaneDurationUnit === UNDEF) {
+                config.hScrollEnabled = false;
+            }
+            else {
+
+                switch (gPaneDurationUnit) {
+                    case 'y' :
+                        minDt.setFullYear(minDt.getFullYear() + gPaneDuration);
+                        break;
+                    case 'm' :
+                        minDt.setMonth(minDt.getMonth() + gPaneDuration);
+                        break;
+                    case 'd' :
+                        minDt.setDate(minDt.getDate() + gPaneDuration);
+                        break;
+                    case 'h' :
+                        minDt.setHours(minDt.getHours() + gPaneDuration);
+                        break;
+                    case 'mn' :
+                        minDt.setMinutes(minDt.getMinutes() + gPaneDuration);
+                        break;
+                    default :
+                        minDt.setSeconds(minDt.getSeconds() + gPaneDuration);
+                        break;
+                }
+                minDt = minDt.getTime();
+                width = xAxis.getPixel(minDt) - canvasLeft;
+                config.hScrollEnabled = true;
+                //update the scaleX for the axis.
+                config.viewPortConfig.scaleX = scaleX = totalWidth / width;
+                //parse the scroll properties
+                scrollOptions.horizontalVxLength = (ms / units) * gPaneDuration;
+                if (scrollToDate) {
+                    datems = numberFormatter.getDateValue (scrollToDate).ms;
+                    datePixel = xAxis.getPixel(datems);
+                    config.viewPortConfig.x = (mathMin(datePixel - canvasLeft, canvasWidth * (scaleX - 1)) / scaleX);
+                    // console.log(config.viewPortConfig.x);
+                }
+
+            }
+
+            totalProcessWidth = yAxis.getAxisConfig('totalWidth');
+            totalVisiblelProcessWidth = yAxis.getAxisConfig('totalVisiblelWidth');
+            if (totalProcessWidth > totalVisiblelProcessWidth) {
+                config.hProcessScrollEnabled = true;
+            }
+            else {
+                config.hProcessScrollEnabled = false;
+            }
+
+
+            maxHScrollBarHeight = mathMax(config.hProcessScrollEnabled ? hProcessScrollHeight : 0,
+                config.hScrollEnabled ? hScrollBarHeight : 0);
+            actualCanvasHeight = canvasHeight - maxHScrollBarHeight;
+            if (Math.floor(processTotalHeight) > actualCanvasHeight) {
+                config.viewPortConfig.scaleY = processTotalHeight / actualCanvasHeight;
+                config.vScrollEnabled = true;
+            }
+            else {
+                config.vScrollEnabled = false;
+            }
+        },
+
+
+        drawScrollBar: function () {
+            var iapi = this,
+                config = iapi.config,
+                components = iapi.components,
+                xAxis = components.xAxis[0],
+                axisConfig = xAxis.config,
+                axisRange = xAxis.config.axisRange,
+                viewPortConfig = config.viewPortConfig,
+                scrollOptions = config.scrollOptions || (config.scrollOptions = {}),
+                max = axisRange.max,
+                min = axisRange.min,
+                vxLength = scrollOptions.horizontalVxLength,
+                hScrollBar = components.hScrollBar,
+                hScrollNode = hScrollBar.node,
+                vScrollBar = components.vScrollBar,
+                vScrollNode = vScrollBar.node,
+                hProcessScrollBar = components.hProcessScrollBar,
+                hProcessScrollNode = hProcessScrollBar.node,
+                useVerticalScrollBar = config.useverticalscrolling,
+                scrollableLength = max - min,
+                canvasRight = config.canvasRight,
+                scaleX = viewPortConfig.scaleX,
+                scaleY = viewPortConfig.scaleY,
+                canvasLeft,
+                canvasTop,
+                canvasHeight,
+                canvasWidth,
+                canvasConfig,
+                canvasBorderWidth,
+                aXisLineWidth,
+                aXisLineStartExtension,
+                aXisLineEndExtension,
+                scrollRatio,
+                vScrollRatio,
+                windowedCanvasHeight,
+                fullCanvasHeight,
+                vScrollEnabled = config.vScrollEnabled,
+                // canvasHeight = config.canvasHeight,
+                yAxis = components.yAxis[0],
+                windowedCanvasWidth,
+                vScrollWidth = vScrollEnabled ? vScrollBar.conf.width : 0,
+                fullCanvasWidth,
+                totalProcessWidth,
+                totalVisiblelProcessWidth,
+                graphics = iapi.graphics,
+                scrollBarParentGroup,
+                paper = components.paper;
+
+            canvasLeft = config.canvasLeft;
+            canvasTop = config.canvasTop;
+            canvasHeight = config.canvasHeight;
+            canvasWidth = config.canvasWidth;
+            canvasConfig = components.canvas.config;
+            canvasBorderWidth = canvasConfig.canvasBorderWidth;
+            aXisLineWidth = pluckNumber(canvasBorderWidth, (axisConfig.showLine ? axisConfig.axisLineThickness : 0));
+            aXisLineStartExtension = pluckNumber(canvasBorderWidth, axisConfig.lineStartExtension);
+            aXisLineEndExtension = pluckNumber(canvasBorderWidth, axisConfig.lineEndExtension);
+            scrollOptions.viewPortMin = min;
+            scrollOptions.viewPortMax = max;
+            scrollRatio = (scrollOptions.scrollRatio = vxLength / scrollableLength);
+            windowedCanvasWidth = scrollOptions.windowedCanvasWidth = xAxis.getAxisPosition(vxLength);
+            fullCanvasWidth = scrollOptions.fullCanvasWidth =
+                xAxis.getAxisPosition(max - min) - windowedCanvasWidth;
+
+            fullCanvasHeight = scrollOptions.fullCanvasHeight = yAxis.getAxisConfig('processTotalHeight');
+            windowedCanvasHeight = scrollOptions.windowedCanvasHeight = canvasHeight;
+            totalProcessWidth = yAxis.getAxisConfig('totalWidth');
+            totalVisiblelProcessWidth = yAxis.getAxisConfig('totalVisiblelWidth');
+
+            vScrollRatio = 1 / scaleY;
+            scrollBarParentGroup = graphics.scrollBarParentGroup;
+            if (!scrollBarParentGroup) {
+                scrollBarParentGroup = graphics.scrollBarParentGroup = paper.group('scrollBarParentGroup',
+                   graphics.parentGroup).insertBefore(graphics.datalabelsGroup);
+            }
+            //draw the scroller element
+            // todo padding needs to be included.
+            if (config.hScrollEnabled !== false) {
+                hScrollBar.draw (canvasLeft,
+                    canvasTop + canvasHeight,{
+                        width: canvasWidth - vScrollWidth,
+                        scrollRatio: 1 / scaleX,
+                        scrollPosition: (viewPortConfig.x  * scaleX) / (canvasWidth * (scaleX - 1)),
+                        roundEdges: canvasConfig.isRoundEdges,
+                        fullCanvasWidth: fullCanvasWidth,
+                        windowedCanvasWidth: windowedCanvasWidth,
+                        parentLayer: scrollBarParentGroup
+                    });
+
+                // attach the callback for raising event only for it is a new scroll node.
+                !hScrollNode && (function () {
+                    var prevPos;
+                    R.eve.on('raphael.scroll.start.' + hScrollBar.node.id, function (pos) {
+                        prevPos = pos;
+                        global.raiseEvent('scrollstart', {
+                            scrollPosition: pos
+                        }, iapi.chartInstance);
+                    });
+
+                    R.eve.on('raphael.scroll.end.' + hScrollBar.node.id, function (pos) {
+                        global.raiseEvent('scrollend', {
+                            prevScrollPosition: prevPos,
+                            scrollPosition: pos
+                        }, iapi.chartInstance);
+                    });
+                }());
+            }
+            else {
+                hScrollBar && hScrollBar.node && hScrollBar.node.hide();
+            }
+
+            if (vScrollEnabled !== false && useVerticalScrollBar) {
+                vScrollBar.draw (canvasRight - vScrollWidth, canvasTop, {
+                    height: canvasHeight,
+                    scrollRatio: vScrollRatio,
+                    roundEdges: canvasConfig.isRoundEdges,
+                    fullCanvasWidth: fullCanvasHeight,
+                    windowedCanvasWidth: windowedCanvasHeight,
+                    parentLayer: scrollBarParentGroup
+                });
+
+                // attach the callback for raising event only for it is a new scroll node.
+                !vScrollNode && (function () {
+                    var prevPos;
+                    R.eve.on('raphael.scroll.start.' + vScrollBar.node.id, function (pos) {
+                        prevPos = pos;
+                        global.raiseEvent('scrollstart', {
+                            scrollPosition: pos
+                        }, iapi.chartInstance);
+                    });
+
+                    R.eve.on('raphael.scroll.end.' + vScrollBar.node.id, function (pos) {
+                        global.raiseEvent('scrollend', {
+                            prevScrollPosition: prevPos,
+                            scrollPosition: pos
+                        }, iapi.chartInstance);
+                    });
+                }());
+            }
+            else {
+                vScrollBar && vScrollBar.node && vScrollBar.node.hide();
+            }
+
+            if (totalVisiblelProcessWidth < totalProcessWidth) {
+                hProcessScrollBar.draw (canvasLeft - totalVisiblelProcessWidth,
+                    canvasTop + canvasHeight,{
+                        width: totalVisiblelProcessWidth,
+                        scrollRatio: totalVisiblelProcessWidth/totalProcessWidth,
+                        roundEdges: canvasConfig.isRoundEdges,
+                        fullCanvasWidth: fullCanvasWidth,
+                        windowedCanvasWidth: windowedCanvasWidth,
+                        parentLayer: scrollBarParentGroup
+                    });
+
+                // attach the callback for raising event only for it is a new scroll node.
+                !hProcessScrollNode && (function () {
+                    var prevPos;
+                    R.eve.on('raphael.scroll.start.' + hProcessScrollBar.node.id, function (pos) {
+                        prevPos = pos;
+                        global.raiseEvent('scrollstart', {
+                            scrollPosition: pos
+                        }, iapi.chartInstance);
+                    });
+
+                    R.eve.on('raphael.scroll.end.' + hProcessScrollBar.node.id, function (pos) {
+                        global.raiseEvent('scrollend', {
+                            prevScrollPosition: prevPos,
+                            scrollPosition: pos
+                        }, iapi.chartInstance);
+                    });
+                }());
+            }
+            else {
+                hProcessScrollBar && hProcessScrollBar.node && hProcessScrollBar.node.hide();
+            }
+        },
+        _createLayers: function () {
+            var iapi = this,
+                components = iapi.components,
+                paper = components.paper,
+                config = iapi.config,
+                inCanStyle = config.style.inCanvasStyle,
+                labelStyle,
+                datasetGroup,
+                graphics;
+
+            chartapi.mscartesian._createLayers.call(iapi);
+            graphics = iapi.graphics;
+            datasetGroup = graphics.datasetGroup;
+
+            graphics.parentTaskGroup = graphics.parentTaskGroup || paper.group('parentTaskGroup', datasetGroup);
+            graphics.parentConnectorsGroup = graphics.parentConnectorsGroup ||
+                paper.group('parentConnectorsGroup', datasetGroup);
+            graphics.parentMilestoneGroup = graphics.parentMilestoneGroup ||
+                paper.group('parentMilestoneGroup', datasetGroup);
+
+            labelStyle = iapi.config.milestoneLabelStyle = {
+                fontSize: pluckNumber (config.milestonefontsize,
+                    inCanStyle.fontSize) + PX,
+                fontFamily: pluck (config.milestonefont,
+                    inCanStyle.fontFamily),
+                fontWeight: pluckNumber (config.milestonefontbold, 0) && BOLD || NORMAL,
+                fontStyle: pluckNumber (config.milestonefontitalic, 0) && ITALIC || NORMAL
+            };
+
+            setLineHeight(labelStyle);
+
+            graphics.parentMilestoneGroup.css(labelStyle);
+        },
+        _drawDataset: function () {
+            this._setClipping();
+            chartapi.mscartesian._drawDataset.call(this);
+        },
+        drawLegend: function () {
+            var iapi = this,
+                config = iapi.config,
+                components = iapi.components,
+                legend = components.legend,
+                legendConf = legend.config,
+                legendWidth = legendConf.width,
+                legendHeight = legendConf.height,
+                legendPosition = legendConf.legendPos,
+                marginLeft = config.marginLeft,
+                marginTop = config.marginTop,
+                chartWidth = config.width,
+                marginRight = config.marginRight,
+                marginBottom = config.marginBottom,
+                totalWidth = config.totalWidth + config.canvasWidth,
+                totalHeight = config.totalHeight + config.canvasHeight,
+                chartHeight = config.height,
+                spaceLeft,
+                xPos,
+                yPos;
+
+            if (legendPosition === 'right') {
+                spaceLeft = totalHeight - legendHeight;
+                xPos = chartWidth - legendWidth - marginRight;
+                yPos = marginTop + (spaceLeft < 0 ? 0 : spaceLeft) / 2;
+            }
+
+            else {
+                spaceLeft = totalWidth - legendWidth;
+                xPos = marginLeft + (spaceLeft < 0 ? 0 : spaceLeft) / 2;
+                yPos = chartHeight - legendHeight - marginBottom;
+
+            }
+
+            legend.drawLegend(xPos, yPos);
+        },
+        _setClipping: function () {
+            var chart = this,
+                config = chart.config,
+                datasetLayer = chart.graphics.datasetGroup,
+                dataLabelsLayer = chart.graphics.datalabelsGroup,
+                trackerLayer  = chart.graphics.trackerGroup,
+                viewPortConfig = config.viewPortConfig,
+                scaleX = viewPortConfig.scaleX,
+                x = viewPortConfig.x,
+                animationObj = chart.config.animationObj,
+                dummyAnimElem = animationObj.dummyObj,
+                dummyAnimObj = animationObj.animObj,
+                animType = animationObj.animType,
+                animationDuration = animationObj.transposeAnimDuration,
+                clipCanvas = chart.components.canvas.config.clip['clip-canvas'].slice(0);
+
+            if (!chart.config.clipSet) {
+                datasetLayer.attr({
+                    'clip-rect': clipCanvas
+                });
+                dataLabelsLayer.attr({
+                    'clip-rect': clipCanvas
+                });
+                trackerLayer.attr({
+                    'clip-rect': clipCanvas
+                });
+            }
+            else {
+                datasetLayer.animateWith(dummyAnimElem, dummyAnimObj, {
+                    'clip-rect': clipCanvas
+                }, animationDuration, animType);
+                dataLabelsLayer.animateWith(dummyAnimElem, dummyAnimObj, {
+                    'clip-rect': clipCanvas
+                }, animationDuration, animType);
+                trackerLayer.animateWith(dummyAnimElem, dummyAnimObj, {
+                    'clip-rect': clipCanvas
+                }, animationDuration, animType);
+            }
+
+            config.xOffset = (x * scaleX);
+            datasetLayer.attr({
+                transform: 'T' + -(x * scaleX) + ',0'
+            });
+            dataLabelsLayer.attr({
+                transform: 'T' + -(x * scaleX) + ',0'
+            });
+            trackerLayer.attr({
+                transform: 'T' + -(x * scaleX) + ',0'
+            });
+            chart.config.clipSet = true;
+        },
+        _createToolBox: function () {
+            var iapi = this,
+                components = iapi.components,
+                yAxis = components.yAxis[0],
+                _scrollBar = iapi._scrollBar,
+                chartMenuBar = components.chartMenuBar || {},
+                actionBar = components.actionBar,
+                getScrollItems = _scrollBar.get,
+                addScrollItems = _scrollBar.add,
+                tb,
+                Scroller,
+                ComponentGroup,
+                hScrollItem,
+                hScrollItem1,
+                vScrollItem,
+                toolBoxAPI;
+
+            if (chartMenuBar.drawn || actionBar && actionBar.drawn) {
+                return;
+            }
+
+            // create the export or print buttons if required.
+            chartapi.mscartesian._createToolBox.call(iapi);
+            tb = components.tb;
+            toolBoxAPI = components.toolBoxAPI;
+            Scroller = toolBoxAPI.Scroller;
+            ComponentGroup = toolBoxAPI.ComponentGroup;
+            // temp code: On update scroll items needs to be reused.
+            _scrollBar.clear();
+            // Adding the scroll items in the scroll bar.
+            addScrollItems({
+                isHorizontal: true
+            }, {
+                // Attach the callback for scroll Interaction.
+                'scroll' : (function (ref, isHorizontal) {
+                    return function () {
+                        ref.updateManager.call(ref, arguments[0], isHorizontal);
+                    };
+                })(iapi, true)
+            });
+
+            addScrollItems({
+                isHorizontal: false
+            }, {
+                // Attach the callback for scroll Interaction.
+                'scroll' : (function (ref, isHorizontal) {
+
+                    return  function () {
+                        ref.updateManager.call(ref, arguments[0], isHorizontal);
+                    };
+
+                })(iapi, false)
+            });
+
+            addScrollItems({
+                isHorizontal: true
+            }, {
+                // Attach the callback for scroll Interaction.
+                'scroll' : (function () {
+                    return function () {
+                        yAxis.manageProcessScroll(arguments[0]);
+                    };
+                })(iapi, true)
+            });
+
+            // Fetching the scroll Items.
+            hScrollItem = getScrollItems()[0];
+
+            vScrollItem = getScrollItems()[1];
+
+            hScrollItem1 = getScrollItems()[2];
+
+            // adding the scrollbar. tb.pid is the component pool id
+            components.hScrollBar = components.hScrollBar || (new Scroller(hScrollItem.conf, 1, tb.pId)
+            .attachEventHandlers(hScrollItem.handler));
+
+            components.vScrollBar = components.vScrollBar || (new Scroller(vScrollItem.conf, 2, tb.pId)
+            .attachEventHandlers(vScrollItem.handler));
+
+            components.hProcessScrollBar = components.hProcessScrollBar || (
+                new Scroller(hScrollItem1.conf, 3, tb.pId).attachEventHandlers(hScrollItem1.handler));
+
+        },
+        _preDraw : function () {
+            var iapi = this;
+            iapi._setAxisValuePadding();
+            iapi._setCategories();
+            iapi.chartMenuTools.reset(iapi.components.tb, iapi);
+        },
+
+        defaultPaletteOptions : merge (extend2 ( { }, lib.defaultGaugePaletteOptions), {
+            //Colors for gauge '339900', 'DD9B02', '943A0A',
+            paletteColors:
+                [['AFD8F8', 'F6BD0F', '8BBA00', 'FF8E46', '008E8E',
+                'D64646', '8E468E', '588526', 'B3AA00', '008ED6', '9D080D',
+                'A186BE', 'CC6600', 'FDC689', 'ABA000', 'F26D7D', 'FFF200',
+                '0054A6', 'F7941C', 'CC3300', '006600', '663300', '6DCFF6'],
+                    ['AFD8F8', 'F6BD0F', '8BBA00', 'FF8E46', '008E8E',
+                'D64646', '8E468E', '588526', 'B3AA00', '008ED6', '9D080D',
+                'A186BE', 'CC6600', 'FDC689', 'ABA000', 'F26D7D', 'FFF200',
+                '0054A6', 'F7941C', 'CC3300', '006600', '663300', '6DCFF6'],
+                    ['AFD8F8', 'F6BD0F', '8BBA00', 'FF8E46', '008E8E',
+                'D64646', '8E468E', '588526', 'B3AA00', '008ED6', '9D080D',
+                'A186BE', 'CC6600', 'FDC689', 'ABA000', 'F26D7D', 'FFF200',
+                '0054A6', 'F7941C', 'CC3300', '006600', '663300', '6DCFF6'],
+                    ['AFD8F8', 'F6BD0F', '8BBA00', 'FF8E46', '008E8E',
+                'D64646', '8E468E', '588526', 'B3AA00', '008ED6', '9D080D',
+                'A186BE', 'CC6600', 'FDC689', 'ABA000', 'F26D7D', 'FFF200',
+                '0054A6', 'F7941C', 'CC3300', '006600', '663300', '6DCFF6'],
+                    ['AFD8F8', 'F6BD0F', '8BBA00', 'FF8E46', '008E8E',
+                'D64646', '8E468E', '588526', 'B3AA00', '008ED6', '9D080D',
+                'A186BE', 'CC6600', 'FDC689', 'ABA000', 'F26D7D', 'FFF200',
+                '0054A6', 'F7941C', 'CC3300', '006600', '663300', '6DCFF6']],
+            //Store other colors
+            // ------------- For 2D Chart ---------------//
+            //We're storing 5 combinations, as we've 5 defined palettes.
+            bgColor: ['FFFFFF', 'FFFFFF', 'FFFFFF', 'FFFFFF', 'FFFFFF'],
+            bgAngle: [270, 270, 270, 270, 270],
+            bgRatio: ['100', '100', '100', '100', '100'],
+            bgAlpha: ['100', '100', '100', '100', '100'],
+            canvasBgColor: ['FFFFFF', 'FFFFFF', 'FFFFFF', 'FFFFFF', 'FFFFFF'],
+            canvasBgAngle: [0, 0, 0, 0, 0],
+            canvasBgAlpha: ['100', '100', '100', '100', '100'],
+            canvasBgRatio: ['', '', '', '', ''],
+            canvasBorderColor: ['545454', '545454', '415D6F', '845001', '68001B'],
+            canvasBorderAlpha: [100, 100, 100, 90, 100],
+            gridColor: ['DDDDDD', 'D8DCC5', '99C4CD', 'DEC49C', 'FEC1D0'],
+            gridResizeBarColor: ['999999', '545454', '415D6F', '845001', 'D55979'],
+            categoryBgColor: ['F1F1F1', 'EEF0E6', 'F2F8F9', 'F7F0E6', 'FFF4F8'],
+            dataTableBgColor: ['F1F1F1', 'EEF0E6', 'F2F8F9', 'F7F0E6', 'FFF4F8'],
+            toolTipBgColor: ['FFFFFF', 'FFFFFF', 'FFFFFF', 'FFFFFF', 'FFFFFF'],
+            toolTipBorderColor: ['545454', '545454', '415D6F', '845001', '68001B'],
+            baseFontColor: ['555555', '60634E', '025B6A', 'A15E01', '68001B'],
+            borderColor: ['767575', '545454', '415D6F', '845001', '68001B'],
+            borderAlpha: [50, 50, 50, 50, 50],
+            legendBgColor: ['ffffff', 'ffffff', 'ffffff', 'ffffff', 'ffffff'],
+            legendBorderColor: ['666666', '545454', '415D6F', '845001', 'D55979'],
+            plotBorderColor: ['999999', '8A8A8A', '6BA9B6', 'C1934D', 'FC819F'],
+            plotFillColor: ['EEEEEE', 'D8DCC5', 'BCD8DE', 'E9D8BE', 'FEDAE3'],
+            scrollBarColor: ['EEEEEE', 'D8DCC5', '99C4CD', 'DEC49C', 'FEC1D0']
+        })
+    }, chartapi.scrollbase, { // @todo: parse this attributes in chart level
+        taskbarroundradius: 0,
+        taskbarfillmix: ' { light-10 }, { dark-20 }, { light-50 }, { light-85 }',
+        taskbarfillratio: '0,8,84,8',
+        showslackasfill: 1,
+        dateintooltip: 1,
+        tasklabelsalign: 'center',
+        datepadding: 3,
+        showtasknames: 0,
+        showpercentlabel: false,
+        showhovereffect: 1,
+        slackfillcolor: 'FF5E5E',
+        connectorextension: 10,
+        tasklabelspadding: 2,
+        taskdatepadding: 3,
+        showlabels: UNDEFINED,
+        showtooltip: 1,
+        showtaskhovereffect: undefined,
+        useverticalscrolling: 1,
+        ganttpanedurationunit: undefined,
+        ganttpaneduration: undefined,
+        showtaskstartdate: undefined,
+        showtaskenddate: undefined,
+        ganttwidthpercent: undefined,
+        showshadow: 1,
+        enablemousetracking: false
+    });
+
+    // set attribute definations
+    setAttribDefs && setAttribDefs({
+        showpercentlabel: {
+            type: attrTypeBool,
+            pAttr: 'showpercentlabel'
+        },
+        fontsize: {
+            type: attrTypeNum
+        },
+        alpha: {
+            type: attrTypeNum
+        },
+        showborder: {
+            type: attrTypeBool
+        },
+        borderthickness: {
+            type: attrTypeNum
+        },
+        borderalpha: {
+            type: attrTypeNum
+        },
+        showHoverEffect: {
+            type: attrTypeNum
+        },
+        hoverFillAlpha: {
+            type: attrTypeNum
+        },
+        slackHoverFillColor: {
+            type: attrTypeNum
+        },
+        slackHoverFillAlpha: {
+            type: attrTypeBool
+        },
+        showlabels: {
+            type: attrTypeBool,
+            pAttr: 'showtasknames'
+        },
+        slackfillcolor: {
+            pAttr: 'slackfillcolor'
+        },
+        showtasklabels: {
+            type: attrTypeBool,
+            pAttr: 'showtasknames'
+        },
+        showtasknames: {
+            type: attrTypeBool,
+            pAttr: 'showlabels'
+        },
+        showconnectorhovereffect: {
+            type: attrTypeNum,
+            pAttr: 'showhovereffect'
+        },
+        connectorextension: {
+            type: attrTypeNum
+        },
+        tasklabelspadding: {
+            type: attrTypeNum
+        },
+        taskdatepadding: {
+            type: attrTypeNum
+        },
+        showstartdate: {
+            type: attrTypeNum,
+            pAttr: 'showtaskstartdate'
+        },
+        showenddate: {
+            type: attrTypeNum,
+            pAttr: 'showtaskenddate'
+        },
+        showtaskhovereffect: {
+            type: attrTypeNum,
+            pAttr: 'showhovereffect'
+        },
+        useverticalscrolling: {
+            type: attrTypeNum
+        },
+        taskbarroundradius: {
+            type: attrTypeNum
+        },
+        showshadow: {
+            type: attrTypeNum
+        },
+        showslackasfill: {
+            type: attrTypeNum
+        }
+    });
+
+
+    FusionCharts.register('component', ['dataset', 'Task',{
+        type: 'task',
+        configure: function(){
+            var dataSet = this,
+                jsonData = dataSet.JSONData,
+                chart = dataSet.chart,
+                userConfig = extend2({}, jsonData);
+            // set the default configurations
+            dataSet.__setDefaultConfig();
+            parseConfiguration(userConfig, dataSet.config, dataSet.chart && dataSet.chart.config, {task: true});
+            dataSet.yAxis = chart.components.yAxis[0];
+            dataSet._setConfigure();
+        },
+        _setConfigure: function (newDataset) {
+            var dataset = this,
+                datasetConfig = dataset.config,
+                chart = dataset.chart,
+                jsonData = chart.jsonData,
+                chartAttrs = jsonData.chart,
+                JSONData = dataset.JSONData,
+                setDataArr = newDataset || JSONData.task,
+                processes = jsonData.processes || {},
+                process = processes.process || [],
+                setDataLen = setDataArr && setDataArr.length,
+                colorM = chart.components.colorManager,
+                chartConfig = chart.get('config'),
+                numberFormatter = chart.get('components', 'numberFormatter'),
+                // taskRadius = chartConfig.taskbarroundradius,
+                taskMix = chartConfig.taskbarfillmix,
+                taskRatio = chartConfig.taskbarfillratio,
+                showSlackAsFill = chartConfig.showslackasfill,
+                dataStore = dataset.components.data,
+                percentComplete,
+                eDate,
+                sDate,
+                i,
+                FCDPID = '__FCDPID__',
+                arrColor,
+                arrAlpha,
+                arrRatio,
+                dataLabel,
+                serializeProcessId,
+                dInt = chartConfig.dateintooltip,
+                dataObj,
+                taskObj,
+                proLen = process.length,
+                alignVal = {
+                    right: 'right',
+                    left: 'left',
+                    'undefined': 'center',
+                    'center': 'center'
+                },
+                id,
+                tAlpha,
+                tBorderAlpha,
+                tBorderColor,
+                label,
+                color,
+                fillAngle,
+                showPercentLabel,
+                tasksMap = chart.components.tasksMap = {},
+                inCanStyle = chartConfig.style.inCanvasStyle,
+                toolText,
+                slHovColor,
+                slColor,
+                tColorObj,
+                tHovColor,
+                tHovBorderColor,
+                taskId,
+                numTasks = 0,
+                dataConfig,
+                dataLabelStyle = chartConfig.dataLabelStyle,
+                datasetLabelStyle,
+                setLabelStyle;
+            if (!dataStore) {
+                dataStore = dataset.components.data = [];
+            }
+            datasetConfig.showlabels = pluck(JSONData.showlabels, JSONData.showlabels, JSONData.showname,
+                chartAttrs.showtasklabels, chartAttrs.showtasknames, 0);
+
+            datasetLabelStyle = datasetConfig.labelStyle = extractLabelStyle({
+                fontSize: datasetConfig.fontSize,
+                fontFamily: datasetConfig.font
+            });
+
+            setLineHeight(datasetConfig.labelStyle);
+
+            // Tasks
+            if (setDataLen) {
+                // dmin = Infinity;
+                // dmax = -Infinity;
+                for (i = 0; i < setDataLen; i += 1) {
+                    taskObj = setDataArr[i];
+                    serializeProcessId = numTasks % proLen;
+                    id = pluck (taskObj.processid);
+                    if (id && typeof id === 'string') {
+                        id = id.toLowerCase();
+                    }
+                    taskId = taskObj.id;
+                    percentComplete = taskObj.percentcomplete;
+                    tAlpha = pluckNumber (taskObj.alpha, datasetConfig.alpha);
+                    color = pluck (taskObj.color, datasetConfig.color, colorM.getColor ('plotFillColor'));
+                    tBorderAlpha = pluckNumber (taskObj.borderalpha, datasetConfig.borderalpha, '100');
+                    tBorderColor = pluck (taskObj.bordercolor, datasetConfig.bordercolor,
+                        colorM.getColor('plotBorderColor'));
+
+                    label = getFirstValue (pluck (taskObj.label, taskObj.name), BLANK);
+                    //Parse the task color, ratio & alpha
+                    arrColor = colorM.parseColorMix (color, taskMix);
+                    arrAlpha = colorM.parseAlphaList (tAlpha.toString (), arrColor.length);
+                    arrRatio = colorM.parseRatioList (taskRatio, arrColor.length);
+                    fillAngle = pluckNumber (taskObj.angle, datasetConfig.angle);
+
+                    dataObj = dataStore[i] || (dataStore[i] = {
+                        config: {}
+                    });
+
+                    dataConfig = dataObj.config;
+                    dataConfig.index = i;
+                    dataConfig.link = taskObj.link;
+                    dataConfig.processId = pluck(taskObj.processid, FCDPID + serializeProcessId);
+                    // dataConfig.style = {
+                    //     fontSize: pluckNumber (taskObj.fontsize, datasetConfig.fontsize,
+                    //         inCanStyle.fontSize) + PX,
+                    //     fontFamily: pluck (taskObj.font, datasetConfig.font,
+                    //         inCanStyle.fontFamily)
+                    // };
+
+                    dataConfig.textColor = getFirstColor (pluck (taskObj.fontcolor,
+                            datasetConfig.fontcolor, inCanStyle.color));
+
+                    dataConfig.style = extractLabelStyle({
+                        fontSize: taskObj.fontsize,
+                        fontFamily: taskObj.font
+                    });
+
+                    setLineHeight(dataConfig.style);
+
+                    setLabelStyle = dataConfig.style;
+
+                    dataConfig.lineHeight = pluck(setLabelStyle && setLabelStyle.lineHeight, datasetLabelStyle &&
+                        datasetLabelStyle.lineHeight, dataLabelStyle && dataLabelStyle.lineHeight);
+
+                    dataConfig.startMs = numberFormatter.getDateValue (taskObj.start).ms;
+                    dataConfig.endMs = numberFormatter.getDateValue (taskObj.end).ms;
+
+                    sDate = numberFormatter.getFormattedDate (dataConfig.startMs);
+                    eDate = numberFormatter.getFormattedDate (dataConfig.endMs);
+
+                    dataConfig.tAlpha = tAlpha;
+                    dataConfig.tBorderColor = tBorderColor;
+                    dataConfig.tBorderAlpha = tBorderAlpha;
+                    dataLabel = BLANK;
+                    dataConfig.percentComplete = percentComplete =
+                        mathMin (pluckNumber (taskObj.percentcomplete, -1), 100);
+                    dataConfig.labelAlign = alignVal[[pluck (taskObj.labelalign,
+                        chartConfig.tasklabelsalign).toLowerCase ()]];
+
+                    dataConfig.showAsGroup = pluckNumber (taskObj.showasgroup, 0);
+                    showPercentLabel = dataConfig.showPercentLabel = pluckNumber (taskObj.showpercentlabel,
+                        datasetConfig.showpercentlabel);
+
+                    if (pluckNumber (taskObj.showlabel, taskObj.showname,
+                        datasetConfig.showlabels)) {
+                        dataLabel = label;
+                    }
+                    if (showPercentLabel && percentComplete !== -1) {
+                        dataLabel += ' ' + percentComplete + '%';
+                    }
+                    dataConfig.percentComplete = percentComplete;
+                    tColorObj = {
+                        FCcolor: {
+                            color: arrColor.join (),
+                            alpha: arrAlpha,
+                            ratio: arrRatio,
+                            angle: fillAngle
+                        }
+                    };
+                    slColor = colorM.parseColorMix (pluck (taskObj.slackfillcolor,
+                        datasetConfig.slackfillcolor), taskMix);
+
+                    slColor = showSlackAsFill ? {
+                        FCcolor: {
+                            color: slColor.join (),
+                            alpha: arrAlpha,
+                            ratio: arrRatio,
+                            angle: fillAngle
+                        }
+                    } : TRACKER_FILL;
+
+                    tHovColor = {
+                        FCcolor: {
+                            color: colorM.parseColorMix (pluck (taskObj.hoverfillcolor,
+                                datasetConfig.hoverfillcolor, chartConfig.taskhoverfillcolor,
+                                getDarkColor (color, 80)), taskMix).join (),
+                            alpha: colorM.parseAlphaList (pluck (taskObj.hoverfillalpha,
+                                datasetConfig.hoverfillalpha).toString (), arrColor.length),
+                            ratio: arrRatio,
+                            angle: fillAngle
+                        }
+                    };
+
+                    tHovBorderColor = convertColor (pluck (taskObj.hoverbordercolor,
+                        datasetConfig.hoverbordercolor, getDarkColor (tBorderColor, 80)),
+                        pluck (taskObj.hoverborderalpha, datasetConfig.hoverborderalpha,
+                        tBorderAlpha));
+
+                    slHovColor = showSlackAsFill ? {
+                        FCcolor: {
+                            color: colorM.parseColorMix (getDarkColor (pluck (taskObj.slackhoverfillcolor,
+                                datasetConfig.slackhoverfillcolor, chartConfig.slackfillcolor), 80), taskMix).join (),
+                            alpha: colorM.parseAlphaList (pluck (taskObj.slackhoverfillalpha,
+                                datasetConfig.slackhoverfillalpha, '100').toString (), arrColor.length),
+                            ratio: arrRatio,
+                            angle: fillAngle
+                        }
+                    } : TRACKER_FILL;
+
+                    dataConfig.color = toRaphaelColor (tColorObj),
+                    dataConfig.slackColor = toRaphaelColor (slColor),
+                    dataConfig.hoverFillColor = toRaphaelColor (tHovColor),
+                    dataConfig.hoverBorderColor = tHovBorderColor,
+                    dataConfig.slackHoverColor = toRaphaelColor (slHovColor),
+                    dataConfig.showHoverEffect = pluckNumber (taskObj.showhovereffect,
+                        datasetConfig.showhovereffect, chartConfig.showtaskhovereffect, 1);
+                    dataConfig.taskHeight = pluck(taskObj.height, '35%');
+                    dataConfig.topPadding = pluck (taskObj.toppadding, '35%');
+                    dataConfig.showPercentLabel = showPercentLabel;
+                    dataConfig.endDate = pluckNumber (taskObj.showenddate,
+                        datasetConfig.showenddate) ? eDate : UNDEF;
+                    dataConfig._endDate = eDate;
+                    dataConfig.startDate = pluckNumber (taskObj.showstartdate,
+                        datasetConfig.showstartdate) ? sDate : UNDEF;
+                    dataConfig._startDate = sDate;
+                    dataConfig.shadow = {
+                        opacity: mathMax (tAlpha, tBorderAlpha) / 100,
+                        inverted: true
+                    };
+                    dataConfig.id = id;
+                    dataConfig.taskId = taskId;
+                    dataConfig.borderColor = convertColor (tBorderColor,
+                        tBorderAlpha),
+                    dataConfig.borderThickness = pluckNumber (taskObj.showborder,
+                        datasetConfig.showborder) ? pluckNumber (taskObj.borderthickness,
+                        datasetConfig.borderthickness) : 0;
+                    toolText = getValidValue (parseUnsafeString (pluck (
+                        taskObj.tooltext, datasetConfig.hovertext, datasetConfig.plottooltext,
+                        chartAttrs.plottooltext)));
+                    if (toolText !== undefined) {
+                        toolText = lib.parseTooltext (toolText, [3,28,29,30,31], {
+                            end: eDate,
+                            start: sDate,
+                            label: label,
+                            percentComplete: percentComplete !== -1 ?
+                                numberFormatter.percentValue (percentComplete) : BLANK,
+                            processName: ''
+                        }, datasetConfig);
+                    }
+                    else {
+                        toolText = ((label !== BLANK) ?
+                            (label + (dInt ? ', ' : BLANK)) : BLANK) +
+                            (dInt ? (sDate + ' - ' + eDate) : BLANK);
+                    }
+                    dataConfig.label = dataLabel;
+                    dataConfig.toolText = toolText;
+                    typeof taskId === 'string' && (taskId = taskId.toLowerCase());
+                    if (taskId !== UNDEFINED) {
+                        tasksMap[taskId] = dataStore[i];
+                    }
+                    numTasks += 1;
+                }
+            }
+            dataset.visible = pluckNumber(JSONData.visible, 1);
+        },
+
+        getAxisValuePadding: function(){},
+
+        draw: function() {
+            var dataSet = this,
+                i,
+                visible = dataSet.visible,
+                chart = dataSet.chart,
+                jsonData = chart.jsonData,
+                chartConfig = chart.get('config'),
+                animationObj = chart.get('config', 'animationObj'),
+                animationDuration = animationObj.duration,
+                dummyAnimElem = animationObj.dummyObj,
+                dummyAnimObj = animationObj.animObj,
+                animType = animationObj.animType,
+                chartComponents = chart.components,
+                canvasTop = chartConfig.canvasTop,
+                paper = chartComponents.paper,
+                xAxis = chartComponents.xAxis[0],
+                len,
+                yAxis = dataSet.yAxis,
+                parentContainer = chart.graphics.parentTaskGroup,
+                components = dataSet.components,
+                dataStore = components.data,
+                dataObj,
+                config,
+                removeDataArr = components.removeDataArr,
+                removeDataArrLen = removeDataArr && removeDataArr.length,
+                dataLabelsLayer = chart.graphics.datalabelsGroup,
+                dataLabelContainer = dataSet.graphics.dataLabelContainer,
+                initAnimCallBack = function () {
+                    dataLabelContainer.show();
+                },
+                graphics = dataSet.graphics,
+                container = graphics.container,
+                shadowContainer = graphics.shadowContainer,
+                pool = components.pool || [],
+                endX,
+                startMs,
+                endMs,
+                setLink,
+                toolText,
+                height,
+                id,
+                pHeight,
+                width,
+                width2,
+                xPos,
+                yPos,
+                position,
+                taskBarElement,
+                perComElem,
+                slackElem,
+                borderThickness,
+                elemType,
+                isNewElem,
+                taskBarElementAttrs,
+                beforeAnimAttrs,
+                crispBox,
+                halfH,
+                txtAlign,
+                borderFill,
+                padding,
+                eventArgs,
+                incrementId,
+                showTooltip = chartConfig.showtooltip,
+                datePadding = chartConfig.datepadding,
+                taskHeight,
+                viewPortConfig = chartConfig.viewPortConfig,
+                x = viewPortConfig.x,
+                labelTextAttr,
+                endLabelTextAttr,
+                startLabelTextAttr,
+                jobList = chart.getJobList(),
+                proLen = jsonData.processes.process && jsonData.processes.process.length,
+                scaleX = viewPortConfig.scaleX,
+                taskBarRadius = chartConfig.taskbarroundradius,
+                shadow = chartConfig.showshadow,
+                cursor,
+                processDimention,
+                conf = dataSet.config,
+                lineHeight;
+
+            /*
+             * Creating a container group for the graphic element of column plots if
+             * not present and attaching it to its parent group.
+             */
+            if (!container) {
+                container = dataSet.graphics.container = paper.group('columns', parentContainer);
+                if (!visible) {
+                    container.hide();
+                }
+                else {
+                    container.show();
+                }
+            }
+
+            if (!dataLabelContainer) {
+                dataLabelContainer = dataSet.graphics.dataLabelContainer = paper.group('labels', dataLabelsLayer);
+                if (!visible) {
+                    dataLabelContainer.hide();
+                }
+                else {
+                    dataLabelContainer.show();
+                }
+                dataLabelContainer.css(conf.labelStyle);
+            }
+            else {
+                dataLabelContainer.removeCSS();
+                dataLabelContainer.css(conf.labelStyle);
+            }
+
+            /*
+             * Creating the shadow element container group for each plots if not present
+             * and attaching it its parent group.
+             */
+            if (!shadowContainer) {
+                // Always sending the shadow group to the back of the plots group.
+                shadowContainer = dataSet.graphics.shadowContainer =
+                    paper.group('shadow', parentContainer).toBack();
+
+                if (!visible) {
+                    shadowContainer.hide();
+                }
+            }
+
+            if (!showTooltip) {
+                container.trackTooltip(false);
+            }
+            else {
+                container.trackTooltip(true);
+            }
+
+            len = dataStore.length;
+            incrementId = 0;
+            // Create plot elements.
+            for (i = 0; i < len; i++) {
+                dataObj = dataStore[i];
+                config = dataObj && dataObj.config;
+                startMs = config && config.startMs;
+                endMs = config && config.endMs;
+                // Condition arises when user has removed data in real time update
+                if (dataObj === undefined || startMs === undefined || endMs === null) {
+                    continue;
+                }
+                toolText = config.toolText;
+                taskHeight = config.taskHeight;
+                setLink = config.link;
+                borderThickness = config.borderThickness;
+                id = config.id;
+                borderFill = config.color;
+                lineHeight = config.lineHeight;
+
+                isNewElem = false;
+                if (incrementId > proLen - 1) {
+                    incrementId = 0;
+                }
+                if (config.id !== undefined) {
+                    processDimention = yAxis.getProcessPositionById(id);
+
+                } else {
+                    processDimention = yAxis.getProcessPositionByIndex(incrementId);
+                }
+
+                incrementId++;
+                pHeight = processDimention.height;
+                padding = (pHeight * (isPercent (config.topPadding) &&
+                    toFloat (config.topPadding, 10) * 0.01)) ||
+                    pluckNumber (config.topPadding, pHeight);
+                height = config.height = (pHeight * (isPercent(taskHeight) &&
+                    toFloat(taskHeight, 10) * 0.01)) ||
+                    pluckNumber(taskHeight, pHeight);
+
+                position = config.id !== undefined ? yAxis.getProcessPositionById(id) : i;
+                xPos = config.xPos = xAxis.getAxisPosition(config.startMs) + (x * scaleX);
+                endX = xAxis.getAxisPosition(config.endMs) + (x * scaleX);
+                width = config.width = mathAbs (width2 = endX - xPos);
+                yPos = processDimention.bottom + canvasTop - pHeight;
+
+                yPos = config.yPos = (yPos + mathMin (padding, pHeight - height));
+                halfH = height * 0.5;
+                !dataObj.graphics && (dataObj.graphics = {});
+                crispBox = R.crispBound (xPos, yPos, width, height, borderThickness);
+                xPos = crispBox.x;
+                yPos = crispBox.y;
+                width = crispBox.width;
+                height = crispBox.height;
+
+                if (checkInvalidValue(xPos, yPos, width, height) === false) {
+                    continue;
+                }
+                taskBarElement = dataObj.graphics.element;
+                if (config.showAsGroup) {
+                    elemType = 'path';
+                    beforeAnimAttrs = {
+                        path: [M, xPos, yPos]
+                    };
+                    taskBarElementAttrs = {
+                        path: [M, xPos, yPos, v, height,
+                            L, xPos + halfH, yPos + halfH, H, xPos + width - halfH,
+                            L, xPos + width, yPos + height, v, -height, H, xPos]
+                    };
+                }
+                else {
+                    elemType = 'rect';
+                    taskBarElementAttrs = {
+                        x: crispBox.x,
+                        y: crispBox.y,
+                        width: crispBox.width || 1,
+                        height: height
+                    };
+                    if (animationDuration) {
+                        beforeAnimAttrs = {
+                            x: crispBox.x,
+                            y: crispBox.y,
+                            width: 0,
+                            height: height
+                        };
+                    }
+                    else {
+                        beforeAnimAttrs = taskBarElementAttrs;
+                    }
+                }
+
+                if (taskBarElement && (taskBarElement && taskBarElement.type !== elemType)) {
+                    taskBarElement.hide();
+                    taskBarElement = dataObj.graphics.element = null;
+                }
+                if (!taskBarElement) {
+                    elemType = config.showAsGroup ? 'path' : 'rect';
+                    if (pool.element && pool.element.length && (taskBarElement = pool.element[0]).type ===
+                        elemType) {
+                        dataObj.graphics.element = taskBarElement = pool.element.shift();
+                    }
+                    else {
+                        taskBarElement =  dataObj.graphics.element = paper[elemType](container)
+                            .attr(beforeAnimAttrs)
+                            .data('dataset', dataSet);
+
+                        isNewElem = true;
+                        dataSet.slackElemHandlers(taskBarElement, chart);
+                    }
+                }
+
+                eventArgs = config.eventArgs = {
+                    processId: config.processId,
+                    taskId: config.taskId,
+                    start: config._startDate,
+                    end: config._endDate,
+                    showAsGroup: config.showAsGroup,
+                    link: config.link,
+                    sourceType: 'task',
+                    percentComplete: config.percentComplete !== -1
+                };
+
+                if (config.percentComplete !== -1 && !config.showAsGroup) {
+                    width2 = width * config.percentComplete * 0.01;
+                    borderFill = TRACKER_FILL;
+                    perComElem = dataObj.graphics.taskFill;
+                    slackElem = dataObj.graphics.slackElem;
+
+                    // Percent complete element
+                    if (!perComElem) {
+                        if (pool.taskFill && pool.taskFill.length) {
+                            perComElem = dataObj.graphics.taskFill = pool.taskFill.shift();
+                        }
+                        else {
+                            perComElem = dataObj.graphics.taskFill = paper.rect(container);
+                            dataSet.slackElemHandlers(perComElem, chart);
+                            isNewElem = true;
+                            perComElem.attr({
+                                x: xPos,
+                                y: yPos,
+                                height: height,
+                                width: animationDuration ? 0 : width2
+                            });
+                        }
+                    }
+
+                    // Slack Element
+                    if (!slackElem) {
+                        // Reuse elemnt from pool if any
+                        if (pool.slackElem && pool.slackElem.length) {
+                            slackElem = dataObj.graphics.slackElem = pool.slackElem.shift();
+                        }
+                        else {
+                            slackElem = dataObj.graphics.slackElem = paper.rect(container);
+                            dataSet.slackElemHandlers(slackElem, chart);
+                            isNewElem = true;
+                            slackElem.attr({
+                                x: xPos,
+                                y: yPos,
+                                width: 0,
+                                height: height
+                            });
+                        }
+                    }
+
+                    perComElem.show().animateWith(dummyAnimElem, dummyAnimObj, {
+                        x: xPos,
+                        y: yPos,
+                        height: height,
+                        width: width2,
+                        r: 0
+                    }, animationDuration, animType);
+                    perComElem.attr({
+                        fill: config.color,
+                        cursor: setLink ? 'pointer' : BLANK,
+                        ishot: true,
+                        'stroke-width': 0
+                    })
+                    .data('chart', chart)
+                    .data('dataObj', dataObj)
+                    .data('dataset', dataSet)
+                    .tooltip (toolText);
+
+                    slackElem.show().animateWith(dummyAnimElem, dummyAnimObj, {
+                        x: (xPos + width2) || 1,
+                        y: yPos,
+                        width: width - width2,
+                        height: height,
+                        r: 0
+                    }, animationDuration, animType);
+
+                    slackElem.attr({
+                        fill: config.slackColor,
+                        cursor: setLink ? 'pointer' : BLANK,
+                        ishot: true,
+                        'stroke-width': 0
+                    });
+
+                    perComElem && perComElem.data ('eventArgs', eventArgs);
+
+                    slackElem && slackElem.data ('eventArgs', eventArgs)
+                        .data('dataObj', dataObj)
+                        .data('dataset', dataSet)
+                        .data('chart', chart);
+                }
+                else {
+                    // If there are slack elements then hide those
+                    dataObj.graphics.taskFill && dataObj.graphics.taskFill.hide();
+                    dataObj.graphics.slackElem && dataObj.graphics.slackElem.hide();
+                }
+                // set the attr
+                taskBarElement.show().animateWith(dummyAnimElem, dummyAnimObj, taskBarElementAttrs, animationDuration,
+                    animType)
+                .attr ({
+                    fill: borderFill,
+                    stroke: config.borderColor,
+                    cursor: setLink ? 'pointer' : BLANK,
+                    ishot: true,
+                    r: taskBarRadius,
+                    'stroke-width': borderThickness
+                })
+                .shadow({
+                    opacity: shadow
+                }, shadowContainer)
+                .tooltip (toolText)
+                .data('dataObj', dataObj)
+                .data('chart', chart)
+                .data('dataset', dataSet)
+                .data('eventArgs', eventArgs);
+
+                if (animationDuration && isNewElem) {
+                    dataLabelContainer.hide();
+                    taskBarElement.animateWith (dummyAnimElem, dummyAnimObj, {
+                            width: crispBox.width || 1
+                        }, animationDuration, animType, initAnimCallBack);
+
+                }
+
+                cursor = setLink ? 'pointer' : BLANK;
+                txtAlign = config.labelAlign;
+                labelTextAttr = config._labelTextAttr || (config._labelTextAttr = {});
+
+                labelTextAttr.x = xPos + (width * xAlign[txtAlign]) + alignGutter[txtAlign];
+                labelTextAttr.y = (yPos - (pInt (lineHeight, 10) * 0.5) - chartConfig.tasklabelspadding);
+                labelTextAttr.text = config.label;
+                labelTextAttr.direction = chartConfig.textDirection;
+                labelTextAttr['text-anchor'] = align[txtAlign];
+                labelTextAttr.cursor = cursor;
+                labelTextAttr.ishot = true;
+                labelTextAttr.fill = config.textColor;
+                labelTextAttr['line-height'] = lineHeight;
+
+                startLabelTextAttr = config._startLabelTextAttr || (config._startLabelTextAttr = {});
+
+                startLabelTextAttr.x = xPos - 2 - datePadding,
+                startLabelTextAttr.y = (yPos + (height * 0.5));
+
+                startLabelTextAttr.text = config.startDate;
+                startLabelTextAttr['text-anchor'] = 'end';
+                startLabelTextAttr.cursor = cursor;
+                startLabelTextAttr.ishot = true;
+                startLabelTextAttr.direction = chartConfig.textDirection;
+                startLabelTextAttr.fill = config.textColor;
+                startLabelTextAttr['line-height'] = lineHeight;
+
+                endLabelTextAttr = config._endLabelTextAttr || (config._endLabelTextAttr = {});
+
+                endLabelTextAttr.x = xPos  + width + 2 + datePadding;
+                endLabelTextAttr.y = (yPos + (height * 0.5));
+                endLabelTextAttr.text = config.endDate;
+                endLabelTextAttr.cursor = cursor;
+                endLabelTextAttr.ishot = true;
+                endLabelTextAttr.direction = chartConfig.textDirection;
+                endLabelTextAttr['text-anchor'] = 'start';
+                endLabelTextAttr.fill = config.textColor;
+                endLabelTextAttr['line-height'] = lineHeight;
+
+                config.cursor = cursor;
+                isNewElem = false;
+            }
+
+            dataSet.drawn ? dataSet.drawLabel() : jobList.labelDrawID.push(schedular.addJob(dataSet.drawLabel,
+                dataSet, [], lib.priorityList.label));
+            // Setting the drawn flag true to draw differently incase of real time draw.
+            dataSet.drawn = true;
+            for (i = 0; i < removeDataArrLen; i++) {
+                dataSet._removeDataVisuals(removeDataArr.shift());
+            }
+        },
+        drawLabel: function () {
+            var dataset = this,
+                chart = dataset.chart,
+                paper = chart.components.paper,
+                dataStore = dataset.components.data,
+                pool = dataset.components.pool || {},
+                valElem,
+                startValElem,
+                endValElem,
+                config,
+                animationObj = chart.get('config','animationObj'),
+                dummyAnimElem = animationObj.dummyObj,
+                dummyAnimObj = animationObj.animObj,
+                animationDuration = animationObj.duration,
+                animType = animationObj.animType,
+                dataObj,
+                eventArgs,
+                textAttr,
+                startLabelTextAttr,
+                endLabelTextAttr,
+                cursor,
+                dataLabelContainer = dataset.graphics.dataLabelContainer,
+                i,
+                len = dataStore.length;
+
+            for (i = 0; i < len; i++) {
+                dataObj = dataStore[i];
+                config = dataObj.config;
+                graphics = dataObj.graphics;
+                valElem = graphics.label;
+                startValElem = graphics.startValElem;
+                endValElem = graphics.endValElem;
+                cursor = config.cursor;
+                eventArgs = config.eventArgs;
+                if (defined (config.label) && config.label !== BLANK) {
+
+                    textAttr = config._labelTextAttr;
+
+                    valElem = graphics.label || (graphics.label = pool.valElem && pool.valElem.shift());
+                    if (!valElem) {
+                        valElem = dataObj.graphics.label = paper.text(textAttr, config.style, dataLabelContainer)
+                            .data('dataset', dataset);
+                        dataset.slackElemHandlers(valElem, chart);
+                    }
+                    else {
+                        valElem.removeCSS();
+                        valElem.show().animateWith(dummyAnimElem, dummyAnimObj, textAttr,
+                            animationDuration, animType)
+                        .css(config.style);
+                    }
+
+                    valElem.data('dataObj', dataObj)
+                        .data('dataObj', dataObj)
+                        .data('eventArgs', eventArgs);
+                }
+                else {
+                    valElem && valElem.hide();
+                }
+
+                textAttr = config._startLabelTextAttr;
+
+                // Task start date element
+                startValElem = dataObj.graphics.startLabel;
+
+                if (defined (config.startDate) && config.startDate !== BLANK) {
+
+                    startLabelTextAttr = config._startLabelTextAttr;
+
+                    startValElem = graphics.startLabel || (graphics.startLabel = pool.startValElem &&
+                        pool.startValElem.shift());
+
+                    if (!startValElem) {
+                        startValElem = dataObj.graphics.startLabel = paper.text(startLabelTextAttr, config.style,
+                            dataLabelContainer)
+                            .data('dataset', dataset);
+                        dataset.slackElemHandlers(startValElem, chart);
+                    }
+                    else {
+                        startValElem.removeCSS();
+                        startValElem.show().animateWith(dummyAnimElem, dummyAnimObj, startLabelTextAttr,
+                            animationDuration, animType).css(config.style);
+                    }
+
+                    startValElem.data('dataObj', dataObj)
+                        .data('chart', chart)
+                        .data('eventArgs', eventArgs);
+                }
+                else {
+                    startValElem && startValElem.hide();
+                }
+
+                // Task end date label drawing
+                endValElem = dataObj.graphics.endLabel;
+
+                if (defined (config.endDate) && config.endDate !== BLANK) {
+
+                    endLabelTextAttr = config._endLabelTextAttr;
+
+                    endValElem = graphics.endLabel || (graphics.endLabel = pool.endValElem && pool.endValElem.shift());
+
+                    if (!endValElem) {
+                        endValElem = dataObj.graphics.endLabel = paper.text(endLabelTextAttr, config.style,
+                            dataLabelContainer).data('dataset', dataset);
+                        dataset.slackElemHandlers(endValElem, chart);
+                    }
+                    else {
+                        endValElem.removeCSS();
+                        endValElem.show().animateWith(dummyAnimElem, dummyAnimObj, endLabelTextAttr,
+                            animationDuration, animType).css (config.style);
+                    }
+
+                    endValElem.data('dataObj', dataObj)
+                    .data('chart', chart)
+                    .data('eventArgs', eventArgs);
+                }
+                else {
+                    endValElem && endValElem.hide();
+                }
+            }
+
+        },
+        slackElemHandlers: function (ele, chart) {
+            var dataset = this;
+            ele && ele.click (function (e) {
+                var ele = this;
+                plotEventHandler.call (ele, chart, e);
+            })
+            .hover (function (data) {
+                var ele = this,
+                    dataObj = ele.data ('dataObj');
+                plotEventHandler.call (ele, chart, data, ROLLOVER);
+                dataObj.config.showHoverEffect && dataset.taskHoverHandler.call (ele, chart);
+            }, function (data) {
+                var ele = this,
+                    dataObj = ele.data ('dataObj');
+                plotEventHandler.call (ele, chart, data, ROLLOUT);
+                dataObj.config.showHoverEffect && dataset.taskHoverOutHandler.call (ele, chart);
+            });
+        },
+        taskHoverHandler: function () {
+            var ele = this,
+                dataObj = ele.data ('dataObj') || {},
+                dataset = ele.data('dataset'),
+                dataStore = dataset.components.data,
+                config = dataObj.config || {},
+                index = config.index,
+                graphics = dataStore[index] && dataStore[index].graphics,
+                attrib = {
+                    fill: config.hoverFillColor,
+                    stroke: config.hoverBorderColor
+                };
+
+            if (config.percentComplete !== -1 &&
+                    !config.showAsGroup) {
+                graphics.slackElem.attr ( {
+                    fill: config.slackHoverColor
+                });
+                graphics.taskFill.attr ( {
+                    fill: config.hoverFillColor
+                });
+                delete attrib.fill;
+            }
+            graphics.element.attr (attrib);
+        },
+        taskHoverOutHandler: function () {
+            var ele = this,
+                dataObj = ele.data ('dataObj') || {},
+                dataset = ele.data ('dataset') || {},
+                dataStore = dataset.components.data,
+                config = dataObj.config || {},
+                index = config.index,
+                graphics = dataStore[index] && dataStore[index].graphics,
+                attrib = {
+                    fill: config.color,
+                    stroke: config.borderColor,
+                    'stroke-width': config.borderThickness,
+                    'stroke-dasharray': config.dashedStyle
+                };
+
+            if (graphics) {
+                if (config.percentComplete !== -1 &&
+                    !config.showAsGroup) {
+                    graphics.slackElem.attr ( {
+                        fill: config.slackColor
+                    });
+                    graphics.taskFill.attr ( {
+                        fill: config.color
+                    });
+                    delete attrib.fill;
+                }
+                graphics.element.attr (attrib);
+            }
+
+        },
+        slackElemClickHandler: function (e) {
+            var ele = this,
+                chart = ele.data('chart');
+            plotEventHandler.call (ele, chart, e);
+        },
+        // Function to remove a data from a dataset during real time update.
+        _removeDataVisuals : function (dataObj) {
+            var dataSet = this,
+                pool = dataSet.components.pool || (dataSet.components.pool = {}),
+                elementPool,
+                ele,
+                graphics,
+                graphicsObj;
+            if (!dataObj) {
+                return;
+            }
+            graphics = dataObj.graphics;
+            for (ele in graphics) {
+                elementPool = pool[ele] || (pool[ele] = []);
+                graphicsObj = graphics[ele];
+                if (graphicsObj.hide && typeof graphicsObj.hide === 'function') {
+                    graphicsObj.attr({
+                        'text-bound': []
+                    });
+                    graphicsObj.hide();
+                    graphicsObj.transform && graphicsObj.transform('');
+                }
+                elementPool.push(graphics[ele]);
+            }
+        }
+    }, 'column', {
+
+        // configurations with defult values
+        showpercentlabel: undefined,
+        showlabels: undefined,
+        showborder: 1,
+        borderthickness: 1,
+        // inherated from parent
+        font: '',
+        fontcolor: '',
+        fontsize: '',
+        color: '',
+        alpha: '100',
+        angle: 270,
+        slackfillcolor: undefined,
+        borderalpha: '100',
+        hoverfillcolor: '',
+        hoverfillalpha: '100',
+        slackhoverfillalpha: '100',
+        showstartdate: UNDEFINED,
+        showenddate: UNDEFINED
+    }]);
+
+    FusionCharts.register('component', ['dataset', 'Milestone',{
+        type: 'Milestone',
+        configure: function(){
+            var dataSet = this,
+                config = dataSet.config,
+                jsonData = dataSet.JSONData,
+                chart = dataSet.chart,
+                userConfig = extend2({}, jsonData);
+
+            dataSet.__setDefaultConfig();
+            parseConfiguration(userConfig, config, {milestones: true});
+            dataSet.yAxis = chart.components.yAxis[0];
+            dataSet._setConfigure();
+        },
+        _setConfigure: function (newDataset) {
+            var dataset = this,
+                chart = dataset.chart,
+                JSONData = dataset.JSONData,
+                setDataArr = newDataset || JSONData.milestone,
+                setDataLen = setDataArr && setDataArr.length,
+                colorM = chart.components.colorManager,
+                chartConfig = chart.get('config'),
+                numberFormatter = chart.get('components', 'numberFormatter'),
+                dataStore = dataset.components.data,
+                style = chart.config.style,
+                inCanStyle = style.inCanvasStyle,
+                tasksMap = chart.components.tasksMap,
+                dataObj,
+                taskConfigObj,
+                dataConfig,
+                i,
+                setData,
+                sides,
+                color,
+                shape,
+                depth,
+                toolText,
+                hoverFillColor,
+                taskId,
+                labelStyle = chart.config.milestoneLabelStyle,
+                dateMs,
+                milestoneDate;
+
+            if (!dataStore) {
+                dataStore = dataset.components.data = [];
+            }
+            for (i = 0; i < setDataLen; i += 1) {
+                setData = setDataArr[i];
+                dataObj = dataStore[i];
+                if (!dataObj) {
+                    dataObj = dataStore[i] = {
+                        config: {}
+                    };
+                }
+                dataConfig = dataObj.config;
+                taskId = getFirstValue (setData.taskid, BLANK).toLowerCase ();
+                shape = pluck (setData.shape, 'polygon').toLowerCase ();
+
+                sides = pluckNumber (setData.numsides, 5);
+                //Restrict
+                //shape = (shape == 'star') ? shape : mapSymbolName (sides);
+                depth = 0;
+                if (shape === 'star') {
+                    depth = 0.4;
+                } else {
+                    shape = mapSymbolName (sides);
+                    shape = mapSymbolName (sides).split ('-')[0];
+                }
+
+                color = pluck (setData.color, colorM.getColor ('legendBorderColor'));
+
+                toolText = getValidValue (parseUnsafeString (pluck (setData.tooltext,
+                    setData.hovertext, chartConfig.milestonetooltext)));
+
+                dateMs = numberFormatter.getDateValue(setData.date).ms;
+                milestoneDate = numberFormatter.getFormattedDate(dateMs);
+
+                if (toolText !== undefined && tasksMap[taskId]) {
+                    taskConfigObj = tasksMap[taskId].config;
+                    toolText = lib.parseTooltext (toolText, [28,32,33,34,35,36], {
+                        date: milestoneDate,
+                        taskStartDate: taskConfigObj._startDate,
+                        taskEndDate: taskConfigObj._endDate,
+                        taskLabel: taskConfigObj.label,
+                        taskPercentComplete: taskConfigObj.percentComplete !== -1 ?
+                            numberFormatter.percentValue (taskConfigObj.percentComplete) : BLANK,
+                        // @todo add the process name from data table once created
+                        processName: ''
+                    }, setData);
+                }
+                else {
+                    toolText = milestoneDate;
+                }
+
+                // style = {
+                //     fontSize: pluckNumber (setData.fontsize, chartConfig.milestonefontsize,
+                //         inCanStyle.fontSize) + PX,
+                //     fontFamily: pluck (setData.font, chartConfig.milestonefont,
+                //         inCanStyle.fontFamily),
+                //     fontWeight: pluckNumber (setData.fontbold,
+                //         chartConfig.milestonefontbold, 0) && BOLD || NORMAL,
+                //     fontStyle: pluckNumber (setData.fontitalic,
+                //         chartConfig.milestonefontitalic, 0) && ITALIC || NORMAL
+                // };
+
+                style = dataConfig.style = extractLabelStyle({
+                    fontSize: setData.fontsize,
+                    fontFamily: setData.font,
+                    fontWeight: setData.fontbold,
+                    fontStyle: setData.fontitalic
+                });
+
+                dataConfig.textColor = getFirstColor (pluck (setData.fontcolor,
+                    chartConfig.milestonefontcolor, inCanStyle.color));
+
+
+                setLineHeight (style);
+
+                dataConfig.lineHeight = pluck(style && style.lineHeight, labelStyle && labelStyle.lineHeight);
+
+                dataConfig.numSides = sides,
+                dataConfig.startAngle = pluckNumber (setData.startangle, 90),
+                dataConfig.radius = setData.radius,
+                dataConfig.origDate = setData.date,
+                dataConfig.date = numberFormatter.getDateValue (setData.date),
+                dataConfig.fillColor = getFirstColor (color),
+                dataConfig.fillAlpha = pluckNumber (setData.fillalpha, setData.alpha, 100) * 0.01,
+                dataConfig.borderColor = getFirstColor (pluck (setData.bordercolor, color)),
+                dataConfig.borderAlpha = pluckNumber (setData.borderalpha, setData.alpha, 100) * 0.01,
+                dataConfig.displayValue = parseUnsafeString (setData.label),
+                dataConfig.style = style;
+                hoverFillColor = dataConfig.hoverFillColor = getFirstColor (pluck (setData.hoverfillcolor,
+                    chartConfig.milestonehoverfillcolor, getDarkColor (color, 80))),
+                dataConfig.hoverFillAlpha = pluckNumber (setData.hoverfillalpha,
+                    chartConfig.milestonehoverfillalpha, setData.fillalpha,
+                    setData.alpha, 100) * 0.01,
+                dataConfig.hoverBorderColor = getFirstColor (pluck (setData.hoverbordercolor,
+                    chartConfig.milestonehoverbordercolor,
+                    getDarkColor (pluck (setData.bordercolor, color), 80))),
+                dataConfig.hoverBorderAlpha = pluckNumber (setData.hoverborderalpha,
+                    chartConfig.milestonehoverborderalpha, setData.borderalpha,
+                    setData.alpha, 100) * 0.01,
+                dataConfig.showHoverEffect = pluckNumber (setData.showhovereffect,
+                    chartConfig.showmilestonehovereffect, chartConfig.showhovereffect, 1),
+
+                dataConfig.depth = depth,
+                dataConfig.taskId = taskId,
+                dataConfig.borderThickness = pluckNumber (setData.borderthickness, 1),
+                dataConfig.link = setData.link;
+                dataConfig.toolText = toolText;
+            }
+            dataset.visible = pluckNumber(JSONData.visible, 1);
+        },
+        draw: function () {
+            var dataset = this,
+                chart = dataset.chart,
+                chartComponents = chart.components,
+                components = dataset.components,
+                xAxis = chartComponents.xAxis[0],
+                dataStore = components.data,
+                taskMap = chartComponents.tasksMap,
+                chartConfig = chart.config,
+                animationObj = chart.get('config', 'animationObj'),
+                animationDuration = animationObj.duration,
+                container = dataset.graphics.container,
+                parentContainer = chart.graphics.parentMilestoneGroup,
+                dataLabelContainer = dataset.graphics.dataLabelContainer,
+                visible = dataset.visible,
+                paper = chartComponents.paper,
+                removeDataArr = dataset.components.removeDataArr || [],
+                removeDataArrLen = removeDataArr.length,
+                dummyAnimElem = animationObj.dummyObj,
+                dummyAnimObj = animationObj.animObj,
+                animType = animationObj.animType,
+                dataObj,
+                taskObj,
+                graphics,
+                config,
+                eventArgs,
+                taskConfigObj,
+                setElement,
+                xPos,
+                yPos,
+                polypath,
+                radius,
+                milestoneAnimate,
+                labelElement,
+                i,
+                ln,
+                labelAttrs,
+                jobList = chart.getJobList(),
+                showTooltip = chartConfig.showtooltip,
+                pool = dataset.components.pool || [];
+            if (!container) {
+                container = dataset.graphics.container = paper.group('milestone', parentContainer);
+                if (!visible) {
+                    container.hide();
+                }
+                else {
+                    container.show();
+                }
+            }
+            if (!dataLabelContainer) {
+                dataLabelContainer = dataset.graphics.dataLabelContainer = paper.group('labels', parentContainer);
+                if (!visible) {
+                    dataLabelContainer.hide();
+                }
+                else {
+                    dataLabelContainer.show();
+                }
+            }
+
+            if (!showTooltip) {
+                container.trackTooltip(false);
+            }
+            else {
+                container.trackTooltip(true);
+            }
+
+            ln = dataStore && dataStore.length;
+            for (i = 0; i < ln; i += 1) {
+                dataObj = dataStore[i];
+                if (!dataObj) {
+                    continue;
+                }
+                config = dataObj.config;
+                taskObj = taskMap[config.taskId];
+                !dataObj.graphics && (dataObj.graphics = {});
+                graphics = dataObj.graphics;
+                setElement = graphics.element;
+                labelElement = graphics.label;
+                if (taskObj) {
+                    taskConfigObj = taskObj.config;
+                    milestoneAnimate = R.animation ({
+                        'fill-opacity': config.fillAlpha,
+                        'stroke-opacity': config.borderAlpha
+                    },
+                    animationDuration, animType);
+
+                    eventArgs = config.eventArgs = {
+                        sides: config.sides,
+                        date: config.origDate,
+                        radius: config.radius,
+                        taskId: config.taskId,
+                        toolText: config.toolText,
+                        link: config.link,
+                        numSides: config.numSides
+                    };
+                    xPos = xAxis.getPixel (config.date.ms);
+                    yPos = taskConfigObj.yPos + (taskConfigObj.height * 0.5);
+                    radius = pluckNumber (config.radius, taskConfigObj.height * 0.6);
+
+                    if (checkInvalidValue(xPos, yPos, radius) === false) {
+                        continue;
+                    }
+                    polypath = [config.numSides, xPos, yPos, radius, config.startAngle, config.depth];
+                    if (!setElement) {
+                        if (pool.element && pool.element.length) {
+                            setElement = graphics.element = pool.element.shift();
+                        }
+                        else {
+                            setElement = graphics.element = paper.polypath(container)
+                                .click(dataset.clickHandler(chart))
+                                .hover (dataset.rollOverHandler(chart), dataset.rollOutHandler(chart));
+                        }
+                    }
+                    setElement.show().animateWith(dummyAnimElem, dummyAnimObj, {
+                        polypath: polypath
+                    }, animationDuration, animType).attr({
+                        fill: config.fillColor,
+                        'fill-opacity': animationDuration ? 0 : config.fillAlpha,
+                        stroke: config.borderColor,
+                        'stroke-opacity': animationDuration ? 0 : config.borderAlpha,
+                        groupId: 'gId' + i,
+                        ishot: true,
+                        cursor: config.link ? 'pointer' : BLANK,
+                        'stroke-width': config.borderThickness
+                    })
+                    .tooltip(config.toolText)
+                    .data ('eventArgs', eventArgs)
+                    .data ('dataObj', dataObj);
+
+                    if (animationDuration && milestoneAnimate && !dataset.drawn) {
+                        graphics.element.animateWith(dummyAnimElem, dummyAnimObj,
+                            milestoneAnimate.delay (animationDuration));
+                    }
+
+                    labelAttrs = config._labelAttrs || (config._labelAttrs = {});
+                    labelAttrs.x = xPos;
+                    labelAttrs.y = yPos;
+                    labelAttrs.text = config.displayValue;
+                    labelAttrs.groupId  = 'gId' + i;
+                    labelAttrs.cursor = config.link ? 'pointer' : BLANK;
+                    labelAttrs.ishot = true;
+                    labelAttrs.direction = chartConfig.textDirection;
+                    labelAttrs['text-anchor']  = 'middle';
+                    labelAttrs.fill = config.textColor;
+                }
+                else {
+                    setElement && setElement.hide();
+                    labelElement && labelElement.hide();
+                }
+            }
+
+            dataset.drawn ? dataset.drawLabel() : jobList.labelDrawID.push(schedular.addJob(dataset.drawLabel,
+                dataset, [], lib.priorityList.label));
+
+            dataset.drawn = true;
+            for (i = 0; i < removeDataArrLen; i++) {
+                dataset._removeDataVisuals(removeDataArr.shift());
+            }
+        },
+        drawLabel: function () {
+            var dataset = this,
+                chart = dataset.chart,
+                paper = chart.components.paper,
+                animationObj = chart.get('config', 'animationObj'),
+                animationDuration = animationObj.duration,
+                animType = animationObj.animType,
+                dummyAnimElem = animationObj.dummyObj,
+                dummyAnimObj = animationObj.animObj,
+                tasksMap = chart.components.tasksMap,
+                config,
+                dataLabelContainer = dataset.graphics.dataLabelContainer,
+                eventArgs,
+                dataObj,
+                i,
+                labelElement,
+                len,
+                graphics,
+                labelAttrs,
+                taskObj,
+                pool = dataset.components.pool || {},
+                dataStore = dataset.components.data,
+                style;
+
+            for (i = 0, len = dataStore.length; i < len; i++) {
+                dataObj = dataStore[i];
+                config = dataObj.config;
+                taskObj = tasksMap[config.taskId];
+                graphics = dataObj.graphics;
+                labelElement = graphics.label;
+                eventArgs = config.eventArgs;
+                labelAttrs = config._labelAttrs;
+                style = config.style;
+                if (config.displayValue !== BLANK && config.displayValue !== UNDEFINED && taskObj) {
+                    labelElement = graphics.label || (graphics.label = pool.label && pool.label.shift());
+                    // Drawing of milestone label element
+                    if (!labelElement) {
+                        labelElement = graphics.label = paper.text (labelAttrs, style, dataLabelContainer)
+                            .click (dataset.clickHandler(chart))
+                            .hover (dataset.rollOverHandler(chart), dataset.rollOutHandler(chart));
+                    }
+                    else {
+                        labelElement.removeCSS();
+                        labelElement.show().animateWith(dummyAnimElem, dummyAnimObj, labelAttrs,
+                            animationDuration, animType)
+                        .css (style);
+                    }
+
+                    labelElement.tooltip(config.toolText)
+                        .data ('eventArgs', eventArgs)
+                        .data ('dataObj', dataObj);
+                }
+                else {
+                    labelElement && labelElement.hide();
+                }
+            }
+
+        },
+        clickHandler: function (chart) {
+            return  function (event) {
+                var ele = this;
+                /**
+                 * In `Gantt` chart, milestones are an important part of the chart as they allow you to visually
+                 * depict any crucial dates on the chart.
+                 * This event is fired when a milestone is clicked
+                 *
+                 * This event is only applicable to Gantt chart.
+                 *
+                 * @event FusionCharts#milestoneClick
+                 *
+                 * @param {string} date - The date of the milestone.
+                 * @param {string} numSides - The number of sides of the milestone.
+                 * @param {string} radius - The radius of the milestone.
+                 * @param {string} taskId - The id of the task to which this milestone relates to.
+                 * @param {string} toolText - The tooltext that is displayed when hovered over the milestone
+                 * @param {number} chartX - x-coordinate of the pointer relative to the chart.
+                 * @param {number} chartY - y-coordinate of the pointer relative to the chart.
+                 * @param {number} pageX - x-coordinate of the pointer relative to the page.
+                 * @param {number} pageY - y-coordinate of the pointer relative to the page.
+                 * @see FusionCharts#event:milestoneRollOver
+                 * @see FusionCharts#event:milestoneRollOut
+                 */
+                plotEventHandler.call(ele, chart, event, 'MilestoneClick');
+            };
+
+        },
+        rollOverHandler: function (chart) {
+            return function (event) {
+                var ele = this,
+                    dataObj = ele.data('dataObj'),
+                    config = dataObj.config;
+
+                /**
+                 * In `Gantt` chart, milestones are an important part of the chart as they allow you to visually
+                 * depict any crucial dates on the chart.
+                 * This event is fired when the pointer moves over a milestone
+                 *
+                 * This event is only applicable to Gantt chart.
+                 *
+                 * @event FusionCharts#milestoneRollOver
+                 *
+                 * @param {string} date - The date of the milestone.
+                 * @param {string} numSides - The number of sides of the milestone.
+                 * @param {string} radius - The radius of the milestone.
+                 * @param {string} taskId - The id of the task to which this milestone relates to.
+                 * @param {string} toolText - The tooltext that is displayed when hovered over the milestone
+                 * @param {number} chartX - x-coordinate of the pointer relative to the chart.
+                 * @param {number} chartY - y-coordinate of the pointer relative to the chart.
+                 * @param {number} pageX - x-coordinate of the pointer relative to the page.
+                 * @param {number} pageY - y-coordinate of the pointer relative to the page.
+                 * @see FusionCharts#event:milestoneClick
+                 * @see FusionCharts#event:milestoneRollOut
+                 */
+                plotEventHandler.call(ele, chart, event, 'MilestoneRollOver');
+
+                config.showHoverEffect && dataObj.graphics.element.attr({
+                    fill: config.hoverFillColor,
+                    stroke: config.hoverBorderColor,
+                    'fill-opacity': config.hoverFillAlpha,
+                    'stroke-opacity': config.hoverBorderAlpha
+                });
+            };
+
+        },
+        rollOutHandler: function (chart) {
+            return function (event) {
+                var ele = this,
+                    dataObj = ele.data('dataObj'),
+                    config = dataObj.config;
+
+                /**
+                 * In `Gantt` chart, milestones are an important part of the chart as they allow you to visually
+                 * depict any crucial dates on the chart.
+                 * This event is fired when the pointer moves out of a milestone
+                 *
+                 * This event is only applicable to Gantt chart.
+                 *
+                 * @event FusionCharts#milestoneRollOut
+                 *
+                 * @param {string} date - The date of the milestone.
+                 * @param {string} numSides - The number of sides of the milestone.
+                 * @param {string} radius - The radius of the milestone.
+                 * @param {string} taskId - The id of the task to which this milestone relates to.
+                 * @param {string} toolText - The tooltext that is displayed when hovered over the milestone
+                 * @param {number} chartX - x-coordinate of the pointer relative to the chart.
+                 * @param {number} chartY - y-coordinate of the pointer relative to the chart.
+                 * @param {number} pageX - x-coordinate of the pointer relative to the page.
+                 * @param {number} pageY - y-coordinate of the pointer relative to the page.
+                 * @see FusionCharts#event:milestoneClick
+                 * @see FusionCharts#event:milestoneRollOver
+                 */
+                plotEventHandler.call(ele, chart, event, 'MilestoneRollOut');
+
+                config.showHoverEffect && dataObj.graphics.element.attr({
+                    fill: config.fillColor,
+                    stroke: config.borderColor,
+                    'fill-opacity': config.fillAlpha,
+                    'stroke-opacity': config.borderAlpha
+                });
+            };
+        }
+    }, 'Task', {
+
+        // configurations with defult values
+        showpercentlabel: 0,
+        showstartdate: 0,
+        showenddate: 0,
+        showlabels: undefined,
+        showborder: 1,
+        borderthickness: 1,
+        showHoverEffect: 1,
+        slackFillColor: 'FF5E5E',
+        // inherated from parent
+        font: '',
+        fontcolor: '',
+        fontsize: '',
+        color: '',
+        alpha: '100', // not found
+        bordercolor: '',// not found
+        borderalpha: '100', // not found
+        hoverFillColor: '',// not found
+        hoverFillAlpha: '100', // not found
+        slackHoverFillColor: 10, // not found
+        slackHoverFillAlpha: '100' // notfound
+
+    }]);
+
+    FusionCharts.register('component', ['dataset', 'Connectors',{
+        configure: function () {
+            var dataSet = this,
+                config = dataSet.config,
+                jsonData = dataSet.JSONData,
+                chart = dataSet.chart,
+                userConfig = extend2({}, jsonData);
+
+            dataSet.__setDefaultConfig();
+            parseConfiguration(userConfig, config, {connector: true});
+            dataSet.yAxis = chart.components.yAxis[0];
+            dataSet._setConfigure();
+        },
+
+        _setConfigure: function (newDataset) {
+            var dataset = this,
+                datasetConfig = dataset.config,
+                chart = dataset.chart,
+                JSONData = dataset.JSONData,
+                setDataArr = newDataset || JSONData.connector,
+                setDataLen = (setDataArr && setDataArr.length) || 0,
+                colorM = chart.components.colorManager,
+                chartConfig = chart.get('config'),
+                dataStore = dataset.components.data,
+                i,
+                dataObj,
+                setData,
+                config,
+                cnColor,
+                cnAlpha,
+                cnThickness,
+                cnIsDashed;
+            if (!dataStore) {
+                dataStore = dataset.components.data = [];
+            }
+            // Connectors
+            for (i = 0; i < setDataLen; i += 1) {
+                setData = setDataArr[i];
+                dataObj = dataStore[i];
+                if (!dataObj) {
+                    dataObj = dataStore[i] = {
+                        config : {}
+                    };
+                }
+                !dataObj.config && (dataObj.config = {});
+                config = dataObj.config;
+                // Extract the attributes
+                cnColor = pluck (setData.color, datasetConfig.color, colorM.getColor ('plotBorderColor'));
+                cnAlpha = pluckNumber (setData.alpha, datasetConfig.alpha, 100);
+                cnThickness = pluckNumber (setData.thickness, datasetConfig.thickness, 1);
+                cnIsDashed = pluckNumber (setData.isdashed, datasetConfig.isdashed, 1);
+
+                config.fromTaskId = getFirstValue (setData.fromtaskid, BLANK).toLowerCase ();
+                config.toTaskId = getFirstValue (setData.totaskid, BLANK).toLowerCase (),
+                config.fromTaskConnectStart = pluckNumber (setData.fromtaskconnectstart, 0),
+                config.toTaskConnectStart = pluckNumber (setData.totaskconnectstart, 1),
+                config.color = convertColor (cnColor);
+                config.alpha = cnAlpha * 0.01;
+                config.link = setData.link;
+
+                config.showHoverEffect = pluckNumber (setData.showhovereffect,
+                    datasetConfig.showhovereffect, chartConfig.showconnectorhovereffect, 1);
+
+                config.hoverColor = convertColor (pluck (setData.hovercolor,
+                    datasetConfig.hovercolor, chartConfig.connectorhovercolor,
+                    getDarkColor (cnColor, 80)),
+                    pluckNumber (setData.hoveralpha,
+                    datasetConfig.hoveralpha, chartConfig.connectorhoveralpha, cnAlpha));
+
+                config.hoverThickness = pluckNumber (setData.hoverthickness,
+                    datasetConfig.hoverthickness, chartConfig.connectorhoverthickness,
+                        cnThickness);
+
+                config.thickness = cnThickness;
+
+                config.dashedStyle = cnIsDashed ?
+                    getDashStyle (pluckNumber (setData.dashlen,
+                    datasetConfig.dashlen, 5),
+                    pluckNumber (setData.dashgap, datasetConfig.dashgap,
+                    cnThickness), cnThickness) : DASH_DEF;
+            }
+            dataset.visible = pluckNumber(JSONData.visible, 1);
+        },
+
+        draw: function () {
+            var dataset = this,
+                chart = dataset.chart,
+                chartComponents = chart.components,
+                dataStore = dataset.components.data,
+                paper = chartComponents.paper,
+                chartConfig = chart.config,
+                ln = dataStore.length,
+                taskMap = chartComponents.tasksMap,
+                cExt = chartConfig.connectorextension,
+                parentContainer = chart.graphics.parentConnectorsGroup,
+                container = dataset.graphics.container,
+                pool = dataset.components.pool || [],
+                visible = dataset.visible,
+                animationObj = chart.get('config', 'animationObj'),
+                animationDuration = animationObj.duration,
+                dummyAnimElem = animationObj.dummyObj,
+                dummyAnimObj = animationObj.animObj,
+                animType = animationObj.animType,
+                removeDataArr = dataset.components.removeDataArr || [],
+                removeDataArrLen = removeDataArr.length,
+                startTaskId,
+                endTaskId,
+                stTObj,
+                endTObj,
+                dataObj,
+                graphics,
+                isStraightLine,
+                stY,
+                etY,
+                stx1,
+                stx2,
+                etx1,
+                etx2,
+                diff,
+                cnCase,
+                config,
+                stTConfig,
+                endTConfig,
+                opacity,
+                cPath,
+                tH,
+                connector,
+                initialAnimDuration,
+                eventArgs,
+                applyFn,
+                trackerElement,
+                dashLength,
+                dashGap,
+                connectorAnimation,
+                i;
+            if (!container) {
+                container = dataset.graphics.container = paper.group('connectors', parentContainer);
+                if (!visible) {
+                    container.hide();
+                }
+                else {
+                    container.show();
+                }
+            }
+            //Iterate through each and draw it
+            for (i = 0; i <= ln; i += 1) {
+                dataObj = dataStore[i];
+                if (!dataObj) {
+                    continue;
+                }
+                config = dataObj.config;
+                !dataObj.graphics && (dataObj.graphics = {});
+                graphics = dataObj.graphics;
+                startTaskId = config.fromTaskId && config.fromTaskId.toLowerCase();
+                endTaskId = config.toTaskId && config.toTaskId.toLowerCase();
+                stTObj = taskMap[startTaskId];
+                endTObj = taskMap[endTaskId];
+                connector = graphics.connector;
+                //If the connector's from and to Id are defined, only then we draw the connector
+                if (stTObj && endTObj) {
+                    stTConfig = stTObj.config;
+                    endTConfig = endTObj.config;
+                    //Y Positions
+                    stY = stTConfig.yPos + (stTConfig.height * 0.5);
+                    etY = endTConfig.yPos + (endTConfig.height * 0.5);
+                    //Check if the to and from bars are in straight line
+                    isStraightLine = (stY == etY);
+                    //Dash properties
+                    dashLength = 3;
+                    dashGap = config.isDashed ? (config.thickness + 2) : 0;
+                    //X Positions
+                    stx1 = stTConfig.xPos;
+                    stx2 = stTConfig.xPos + stTConfig.width;
+                    etx1 = endTConfig.xPos;
+                    etx2 = endTConfig.xPos + endTConfig.width;
+                    if (checkInvalidValue(stx1, stx2, etx1, etx2) === false) {
+                        continue;
+                    }
+                    diff = 0;
+                    //There can be four cases if the two tasks are not in straight line
+                    cnCase = 0;
+                    //cnCase 1: End of StartTask to Start of EndTask
+                    if (config.fromTaskConnectStart === 0 && config.toTaskConnectStart === 1) {
+                        cnCase = 1;
+                    }
+                    //cnCase 2: End of StartTask to End of EndTask
+                    if (config.fromTaskConnectStart === 0 && config.toTaskConnectStart === 0) {
+                        cnCase = 2;
+                    }
+                    //cnCase 3: Start of StartTask to Start of EndTask
+                    if (config.fromTaskConnectStart === 1 && config.toTaskConnectStart === 1) {
+                        cnCase = 3;
+                    }
+                    //cnCase 4: Start of StartTask to End of EndTask
+                    if (config.fromTaskConnectStart === 1 && config.toTaskConnectStart === 0) {
+                        cnCase = 4;
+                    }
+
+
+                    if (isStraightLine) {
+                        tH = stTConfig.height;
+                        switch (cnCase) {
+                            case 1 :
+                                diff = (etx1 - stx2) / 10;
+                                cPath = [M, stx2, stY, stx2 + diff, stY,
+                                    L, stx2 + diff, stY, stx2 + diff, stY - tH,
+                                    L, stx2 + diff, stY - tH, etx1 - diff, stY - tH,
+                                    L, etx1 - diff, stY - tH, etx1 - diff, stY,
+                                    L, etx1 - diff, stY, etx1, etY];
+                                break;
+                            case 2 :
+                                cPath = [M, stx2, stY, stx2 + cExt, stY,
+                                    L, stx2 + cExt, stY, stx2 + cExt, stY - tH,
+                                    L, stx2 + cExt, stY - tH, etx2 + cExt, stY - tH,
+                                    L, etx2 + cExt, etY - tH, etx2 + cExt, etY,
+                                    etx2, etY];
+                                break;
+                            case 3 :
+                                cPath = [M, stx1, stY, stx1 - cExt, stY,
+                                    L, stx1 - cExt, stY, stx1 - cExt, stY - tH,
+                                    L, stx1 - cExt, stY - tH, etx1 - cExt, stY - tH,
+                                    L, etx1 - cExt, stY - tH, etx1 - cExt, stY,
+                                    L, etx1 - cExt, stY, etx1, stY];
+
+                                break;
+                            case 4 :
+                                cPath = [M, stx1, stY, stx1 - cExt, stY,
+                                    L, stx1 - cExt, stY, stx1 - cExt, stY - tH,
+                                    L, stx1 - cExt, stY - tH, etx2 + cExt, stY - tH,
+                                    L, etx2 + cExt, stY - tH, etx2 + cExt, stY,
+                                    L, etx2 + cExt, stY, etx2, stY];
+                                break;
+                        }
+                    } else {
+                        switch (cnCase) {
+                            case 1 :
+                                cPath = [M, stx2, stY, stx2 + (etx1 - stx2) / 2, stY,
+                                   L, stx2 + (etx1 - stx2) / 2, stY, stx2 + (etx1 - stx2) / 2, etY,
+                                   L, stx2 + (etx1 - stx2) / 2, etY, etx1, etY];
+
+                                if (stx2 <= etx1) {
+                                    cPath = [M, stx2, stY, stx2 + (etx1 - stx2) / 2, stY,
+                                        L, stx2 + (etx1 - stx2) / 2, stY, stx2 + (etx1 - stx2) / 2, etY,
+                                        L, stx2 + (etx1 - stx2) / 2, etY, etx1, etY];
+                                } else {
+                                    cPath = [M, stx2, stY, stx2 + cExt, stY,
+                                        L, stx2 + cExt, stY, stx2 + cExt, stY + (etY - stY) / 2,
+                                        L, stx2 + cExt, stY + (etY - stY) / 2, etx1 - cExt, stY + (etY - stY) / 2,
+                                        L, etx1 - cExt, stY + (etY - stY) / 2, etx1 - cExt, etY,
+                                        L, etx1 - cExt, etY, etx1, etY];
+                                }
+                                break;
+                            case 2 :
+                                diff = ((etx2 - stx2) < 0) ? (0) : (etx2 - stx2);
+                                cPath = [M, stx2, stY, stx2 + cExt + diff, stY,
+                                    L, stx2 + cExt + diff, stY, stx2 + cExt + diff, etY,
+                                    L, stx2 + cExt + diff, etY, etx2, etY];
+                                break;
+                            case 3 :
+                                diff = ((stx1 - etx1) < 0) ? (0) : (stx1 - etx1);
+                                cPath = [M, stx1, stY, stx1 - cExt - diff, stY,
+                                    L, stx1 - cExt - diff, stY, stx1 - cExt - diff, etY,
+                                    L, stx1 - cExt - diff, etY, etx1, etY];
+                                break;
+                            case 4 :
+                                if (stx1 > etx2) {
+                                    cPath = [M, stx1, stY, stx1 - (stx1 - etx2) / 2, stY,
+                                        L, stx1 - (stx1 - etx2) / 2, stY, stx1 - (stx1 - etx2) / 2, etY,
+                                        L, stx1 - (stx1 - etx2) / 2, etY, etx2, etY];
+                                } else {
+                                    cPath = [M, stx1, stY, stx1 - cExt, stY,
+                                        L, stx1 - cExt, stY, stx1 - cExt, stY + (etY - stY) / 2,
+                                        L, stx1 - cExt, stY + (etY - stY) / 2, etx2 + cExt, stY + (etY - stY) / 2,
+                                        L, etx2 + cExt, stY + (etY - stY) / 2, etx2 + cExt, etY,
+                                        L, etx2 + cExt, etY, etx2, etY];
+                                }
+                                break;
+                        }
+                    }
+                    if (!connector) {
+                        if (pool.connector && pool.connector.length) {
+                            connector = graphics.connector = pool.connector.shift();
+                        }
+                        else {
+                            connector = graphics.connector = paper.path(container);
+                        }
+                        if (animationDuration) {
+                            // clip-canvas animation to line chart
+                            connectorAnimation = R.animation ( {
+                                'stroke-opacity': config.alpha
+                            },
+                            animationDuration, animType);
+                            applyFn = ATTRFN;
+                            opacity = 0;
+                            initialAnimDuration = animationDuration;
+                        }
+                        else {
+                            applyFn = ATTRFN;
+                            opacity = config.alpha;
+                        }
+                    }
+
+                    connector.show().animateWith(dummyAnimElem, dummyAnimObj, {
+                        path: cPath
+                    }, animationDuration, animType)
+                    .attr({
+                        stroke: config.color,
+                        'stroke-opacity': opacity,
+                        'stroke-width': config.thickness,
+                        'stroke-dasharray': config.dashedStyle
+                    });
+
+                    if (connectorAnimation) {
+                        connector.animate(connectorAnimation.delay(initialAnimDuration || 0));
+                    }
+
+                    eventArgs = {
+                        fromTaskId: config.fromTaskId,
+                        toTaskId: config.toTaskId,
+                        fromTaskConnectStart: config.fromTaskConnectStart,
+                        toTaskConnectStart: config.toTaskConnectStart,
+                        link: config.link,
+                        sourceType: 'connector'
+                    };
+
+                    trackerElement = graphics.tracker;
+                    if (!trackerElement) {
+                        if (pool.tracker && pool.tracker.length) {
+                            trackerElement = graphics.tracker = pool.tracker.shift();
+                        }
+                        else {
+                            trackerElement = graphics.tracker = paper.path (container)
+                                .click (dataset.connectorClick(chart))
+                                .hover (dataset.rollOverHandler(chart), dataset.rollOutHandler(chart));
+                        }
+                    }
+                    trackerElement.attr ({
+                        path: cPath,
+                        stroke: TRACKER_FILL,
+                        'stroke-width': mathMax (config.thickness, 10),
+                        ishot: true,
+                        cursor: config.link ? 'pointer' : BLANK
+                    })
+                    .data ('dataObj', dataObj)
+                    .data ('eventArgs', eventArgs);
+                }
+                else {
+                    if (connector) {
+                        connector.hide();
+                    }
+                }
+            }
+            for (i = 0; i < removeDataArrLen; i++) {
+                dataset._removeDataVisuals(removeDataArr.shift());
+            }
+        },
+
+        connectorClick: function (chart) {
+
+            return function (e) {
+                var ele = this;
+                plotEventHandler.call(ele, chart, e, 'ConnectorClick');
+            };
+
+        },
+
+        rollOverHandler: function (chart) {
+
+            return function (event) {
+                var ele = this,
+                    data = ele.data('dataObj'),
+                    config = data.config,
+                    chartComponents = chart.components,
+                    taskMap = chartComponents.tasksMap,
+                    stTObj = taskMap[config.fromTaskId],
+                    endTObj = taskMap[config.toTaskId],
+                    attr = {
+                        stroke: config.hoverColor,
+                        'stroke-dasharray': config.dashedStyle,
+                        'stroke-width': config.hoverThickness
+                    },
+                    connector = data.graphics.connector;
+
+                plotEventHandler.call(ele, chart, event, 'ConnectorRollOver');
+                if (config.showHoverEffect) {
+                    each([stTObj, endTObj], function (obj) {
+                        var attrib = {
+                                fill: obj.config.hoverFillColor,
+                                stroke: obj.config.hoverBorderColor
+                            },
+                            percentComplete = obj.config.percentComplete,
+                            slackGraphic = obj.graphics.slackElem,
+                            element = obj.graphics.element,
+                            // Percent complete graphic is task fill
+                            percentCompleteGraphic = obj.graphics.taskFill;
+                        if (percentComplete &&
+                                !obj.config.showAsGroup) {
+                            slackGraphic && slackGraphic.attr({
+                                fill: obj.config.slackHoverColor
+                            });
+                            percentCompleteGraphic && percentCompleteGraphic.attr({
+                                fill: obj.config.hoverFillColor,
+                                stroke: obj.config.hoverBorderColor
+                            });
+                            delete attrib.fill;
+                        }
+                        element && element.attr(attrib);
+                    });
+                    connector && connector.attr(attr);
+                }
+            };
+
+        },
+
+        rollOutHandler: function (chart) {
+
+            return function (event) {
+                var ele = this,
+                    data = ele.data('dataObj'),
+                    config = data.config,
+                    chartComponents = chart.components,
+                    taskMap = chartComponents.tasksMap,
+                    stTObj = taskMap[config.fromTaskId],
+                    endTObj = taskMap[config.toTaskId],
+                    attr = {
+                        stroke: config.color,
+                        'stroke-width': config.thickness,
+                        'stroke-dasharray': config.dashedStyle
+                    },
+                    connector = data.graphics.connector;
+
+                plotEventHandler.call(ele, chart, event, 'ConnectorRollOut');
+
+                if (config.showHoverEffect) {
+                    each([stTObj, endTObj], function (obj) {
+                        var attrib = {
+                            fill: obj.config.color,
+                            stroke: obj.config.borderColor,
+                            'stroke-width': obj.config.borderThickness,
+                            'stroke-dasharray': obj.config.dashedStyle
+                        },
+                        percentComplete = obj.config.percentComplete,
+                        slackGraphic = obj.graphics.slackElem,
+                        element = obj.graphics.element,
+                        percentCompleteGraphic = obj.graphics.taskFill;
+                        if (percentComplete &&
+                                !obj.config.showAsGroup) {
+                            slackGraphic && slackGraphic.attr({
+                                fill: obj.config.slackColor
+                            });
+                            percentCompleteGraphic && percentCompleteGraphic.attr({
+                                fill: obj.config.color
+                            });
+                            delete attrib.fill;
+                        }
+                        element && element.attr(attrib);
+                    });
+                    connector && connector.attr(attr);
+                }
+            };
+
+        }
+    }, 'Task', {
+        isdashed: 1,
+        thickness: 1
+    }]);
+
+    FusionCharts.get ('component', ['axis', 'ganttCommon', {
+        _drawPlotLine : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                chartComponents = chart.components,
+                canvas = axisConfig.canvas,
+                chartConfig = chart.config,
+                axisPlotLineContainerBottom = axisConfig.ganttPlotLineContainer,
+                canvasBottom = canvas.canvasBottom || chartConfig.canvasBottom,
+                canvasLeft = canvas.canvasLeft || chartConfig.canvasLeft,
+                canvasRight = canvas.canvasRight || chartConfig.canvasRight,
+                canvasTop = canvas.canvasTop || chartConfig.canvasTop,
+                paper = chartComponents.paper,
+                gridArr = axisConfig.gridArr,
+                plotLine = axis.graphics.line || [],
+                animateAxis = axisConfig.animateAxis,
+                animationDuration,
+                transposeAnimDuration,
+                lineStyle,
+                lineElement,
+                counter = 0,
+                i,
+                ln,
+                path = [],
+                animObj,
+                dummyObj,
+                animType;
+
+            animationDuration = chart.get('config', 'animationObj');
+            animObj = animationDuration.animObj;
+            dummyObj = animationDuration.dummyObj;
+            transposeAnimDuration = animationDuration.transposeAnimDuration;
+            animType = animationDuration.animType;
+            lineStyle = {
+                'stroke-dasharray': axisConfig.plotLineDashStyle,
+                'stroke-width': axisConfig.plotLineThickness,
+                stroke: axisConfig.plotLineColor
+            };
+            for (i = 0, ln = gridArr.length; i < ln; i += 1) {
+                if (gridArr[i].x !== undefined) {
+                    path.push('M',gridArr[i].x,canvasTop,'L', gridArr[i].x, canvasBottom);
+                } else {
+                    path.push('M',canvasLeft,gridArr[i].y,'L', canvasRight, gridArr[i].y);
+                }
+            }
+            if (plotLine[counter]) {
+                lineElement = plotLine[counter].graphics;
+                if (transposeAnimDuration && animateAxis) {
+                    lineElement.animateWith(dummyObj, animObj, {path : path}, transposeAnimDuration, animType);
+                } else {
+                    lineElement.attr({path : path});
+                }
+                lineElement.attr(lineStyle);
+            } else {
+                lineElement = paper.path(path, axisPlotLineContainerBottom);
+                lineElement.attr(lineStyle);
+                plotLine[counter] = {};
+                plotLine[counter].graphics = lineElement;
+            }
+            counter += 1;
+            for (i = counter, ln = plotLine.length; i < ln; i += 1) {
+                plotLine[i].graphics.attr({
+                    path : 'M0,0'
+                });
+            }
+            axis.graphics.line = plotLine;
+        },
+        _drawPlotBand : function () {
+
+        },
+        translateAxis : function (x, y) {
+            var axis = this,
+                axisConfig = axis.config,
+                isVertical = axisConfig.isVertical,
+                lastTranslate = axisConfig.lastTranslate || (axisConfig.lastTranslate = {x : 0, y : 0}),
+                ganttPlotHoverBandContainer = axisConfig.ganttPlotHoverBandContainer,
+                dx,
+                dy;
+
+            dx = x !== undefined ? x - lastTranslate.x : 0;
+            dy = y !== undefined ? y - lastTranslate.y : 0;
+            lastTranslate.x = x !== undefined ? x : lastTranslate.x;
+            lastTranslate.y = y !== undefined ? y : lastTranslate.y;
+
+            axisConfig.labelContainer && axisConfig.labelContainer.translate(dx,dy);
+            axisConfig.hotContainer && axisConfig.hotContainer.translate(dx,dy);
+            axisConfig.headerContainer && axisConfig.headerContainer.translate(dx,0);
+            if (isVertical) {
+                axisConfig.ganttPlotLineContainer && axisConfig.ganttPlotLineContainer.translate(0,dy);
+                ganttPlotHoverBandContainer && ganttPlotHoverBandContainer.translate(0,dy);
+            } else {
+                axisConfig.ganttPlotLineContainer && axisConfig.ganttPlotLineContainer.translate(dx,0);
+                ganttPlotHoverBandContainer && ganttPlotHoverBandContainer.translate(dx,0);
+                axis.setAxisConfig({
+                    animateAxis : false
+                });
+                axisConfig.drawTrendLines && axis._drawTrendLine();
+                axis.setAxisConfig({
+                    animateAxis : true
+                });
+            }
+        },
+        resetTransletAxis : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                transformAttr;
+
+            transformAttr = {
+                transform : 't0,0'
+            };
+            axisConfig.lastTranslate = {x : 0, y : 0};
+            axisConfig.labelContainer && axisConfig.labelContainer.attr(transformAttr);
+            axisConfig.headerContainer && axisConfig.headerContainer.attr(transformAttr);
+            axisConfig.ganttPlotLineContainer && axisConfig.ganttPlotLineContainer.attr(transformAttr);
+            axisConfig.ganttPlotHoverBandContainer && axisConfig.ganttPlotHoverBandContainer.attr(transformAttr);
+            axisConfig.hotContainer && axisConfig.hotContainer.attr(transformAttr);
+        },
+        _drawProcessAndDataTableStyleParser : function (attrs) {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                smartLabel = chart.linkedItems.smartLabel,
+                components = chart.components,
+                colorM = components.colorManager,
+                labels = axisConfig.labels,
+                style = labels.style,
+                elem = attrs.elem || {},
+                dimension = attrs.dimension,
+                textStyle = elem._attrib || {},
+                left = dimension.left,
+                right = dimension.right,
+                top = dimension.top,
+                bottom = dimension.bottom,
+                processPadding = 2,
+                fontFamily,
+                fontSize,
+                fontWeight,
+                fontStyle,
+                bgColor,
+                xPos,
+                yPos,
+                text,
+                retAttrib,
+                smartText,
+                vAlign,
+                align,
+                color,
+                textDecoration,
+                hoverC,
+                hoverA,
+                useHover,
+                usePlotHover,
+                rollOverColor,
+                link,
+                lHeight;
+
+            switch (attrs.type) {
+                case 'category' :
+                case 'datatable' :
+                case 'process' :
+                    fontFamily = pluck(textStyle.font, style.fontFamily);
+                    fontSize = pluck(textStyle.fontsize, style.fontSize).replace(/px/i, '') + PXSTRING;
+                    fontStyle = pluck((Number(textStyle.isitalic) ? 'italic' : undefined), style.fontStyle);
+                    bgColor = convertColor(pluck (textStyle.bgcolor ? getFirstColor(textStyle.bgcolor) : undefined ,
+                        colorM.getColor ('categoryBgColor')), pluckNumber(textStyle.bgalpha, 100));
+                    color = pluck(textStyle.fontcolor ? getFirstColor(textStyle.fontcolor) : undefined, style.color),
+                    textDecoration = pluckNumber (textStyle.isunderline, 0) && UND_LINE || NONE;
+                    vAlign = (pluck(textStyle.valign, 'center')).toLowerCase();
+                    align = (pluck(textStyle.align, 'middle')).toLowerCase();
+                    text = elem.drawLabel || '';
+                    fontWeight = pluck((Number(textStyle.isbold) ? 'bold' : undefined), style.fontWeight);
+                    link = elem.link;
+                    break;
+                case 'header' :
+                    fontFamily = pluck(textStyle.headerfont, style.fontFamily);
+                    fontSize = pluck(textStyle.headerfontsize, style.fontSize).replace(/px/i, '') + PXSTRING;
+                    fontWeight = pluck((Number(textStyle.headerisbold) === 1 ? 'bold' : textStyle.headerisbold ===
+                        undefined ? 'bold' : undefined), style.fontWeight);
+                    color = pluck (textStyle.headerfontcolor ? getFirstColor(textStyle.headerfontcolor) :
+                        undefined, style.color),
+                    textDecoration = pluckNumber (textStyle.headerisunderline, 0) && UND_LINE || NONE;
+                    fontStyle = pluck((textStyle.headerisitalic ? 'italic' : undefined), style.fontStyle);
+                    bgColor = convertColor(pluck (textStyle.headerbgcolor ? getFirstColor(textStyle.headerbgcolor)
+                        : undefined , colorM.getColor ('categoryBgColor')), pluckNumber(textStyle.headerbgalpha, 100));
+                    vAlign = (pluck(textStyle.headervalign, 'center')).toLowerCase();
+                    align = (pluck(textStyle.headeralign, 'middle')).toLowerCase();
+                    text = elem.drawLabel || '';
+                    link = elem.headerlink;
+                    break;
+            }
+            switch (attrs.type) {
+                case 'category' :
+                    axisConfig.gridLinePath += 'M'+left+','+top+'L'+left+','+bottom+'L'+right+','+bottom;
+                    fontWeight = pluck((Number(textStyle.isbold) === 1 ? 'bold' : textStyle.isbold === undefined ?
+                        'bold' : undefined), style.fontWeight);
+                    break;
+                case 'datatable' :
+                case 'process' :
+                    axisConfig.gridLinePath += 'M'+left+','+bottom+'L'+right+','+bottom+'L'+right+','+top;
+                    break;
+                case 'header' :
+                    axisConfig.gridLineHeaderPath += 'M'+left+','+bottom+'L'+right+','+bottom+'L'+right+','+top;
+                    break;
+            }
+            hoverC = pluck (elem._attrib.hoverbandcolor, axisConfig.hoverColor);
+            hoverA = pluckNumber (elem._attrib.hoverbandalpha, axisConfig.hoverAlpha);
+            if (align === 'left') {
+                xPos = left + processPadding;
+                align = 'start';
+            } else if (align === 'right') {
+                xPos = left + (right - left) - processPadding;
+                align = 'end';
+            } else {
+                align = 'middle';
+                xPos = left + (right - left)/2;
+            }
+            if (vAlign === 'top') {
+                yPos = top - processPadding;
+            } else if (vAlign === 'bottom') {
+                yPos = top + (bottom - top) - processPadding;
+            } else {
+                vAlign = 'center';
+                yPos = top + (bottom - top)/2;
+            }
+            style = {
+                fontFamily: fontFamily,
+                fontSize: fontSize,
+                fontWeight: fontWeight,
+                fontStyle: fontStyle,
+                textDecoration : textDecoration
+            };
+            lHeight = setLineHeight(style);
+            lHeight = Number((lHeight.replace(/px/i, '')));
+            lHeight = bottom - top > lHeight ? bottom - top : lHeight;
+            smartLabel.useEllipsesOnOverflow(chart.config.useEllipsesWhenOverflow);
+            smartLabel.setStyle (style);
+            smartText = smartLabel.getSmartText (text, right - left, lHeight);
+            retAttrib = {
+                    textAttr : {
+                        x : xPos,
+                        y : yPos,
+                        text : smartText.text,
+                        fill: color,
+                        'text-anchor' : align,
+                        'vertical-align' : vAlign,
+                        cursor : link ? 'pointer' : 'default'
+                    },
+                    css : style,
+                    rectAttr : {
+                        x : left,
+                        y : top,
+                        width : left < right ? right - left : 0,
+                        height : top < bottom ? bottom - top : 0,
+                        fill: bgColor,
+                        'stroke-width' : 0,
+                        cursor : link ? 'pointer' : 'default'
+                    },
+                    eventArgs : {
+                        isHeader: attrs.type === 'header',
+                        label: text,
+                        vAlign: vAlign,
+                        align: align,
+                        link: link,
+                        id: elem.id
+                    },
+                    tooltext : smartText.oriText
+                };
+            if (attrs.type === 'datatable' || attrs.type === 'process' || attrs.type === 'category') {
+                rollOverColor = convertColor (hoverC, hoverA);
+                useHover = pluckNumber(elem._attrib.showhoverband, axisConfig.useHover);
+                usePlotHover = pluckNumber(elem._attrib.showganttpanehoverband, axisConfig.usePlotHover, useHover);
+                retAttrib.dataArgs = {
+                    rollOverColor: rollOverColor,
+                    useHover: useHover,
+                    usePlotHover: usePlotHover,
+                    dimension: dimension,
+                    hoverEle: elem,
+                    type : attrs.type,
+                    pos : attrs.pos,
+                    axis : axis,
+                    groupId : attrs.elemIndex
+                };
+            } else {
+                retAttrib.dataArgs = {
+                    rollOverColor: undefined,
+                    useHover: 0,
+                    usePlotHover: 0,
+                    dimension: dimension,
+                    hoverEle: elem,
+                    type : attrs.type,
+                    pos : attrs.pos,
+                    axis : axis,
+                    groupId : attrs.elemIndex
+                };
+            }
+            return retAttrib;
+        },
+        _drawProcessAndDataTableElement : function(attrs) {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                chartComponents = chart.components,
+                categoryElement = axis.components.categoryElement || [],
+                hoverElemsArr = axisConfig.hoverElemsArr || (axisConfig.hoverElemsArr = []),
+                paper = chartComponents.paper,
+                elemIndex = attrs.elemIndex,
+                labelHoverEventName = axisConfig.labelHoverEventName,
+                animateAxis = axisConfig.animateAxis,
+                animationDuration,
+                transposeAnimDuration,
+                attribs,
+                labelBackContainer,
+                labelLineContainer,
+                labelTextContainer,
+                rectElement,
+                textElement,
+                animObj,
+                dummyObj,
+                showTooltip = chart.config.showtooltip,
+                animType,
+
+                labelClickHandler = function (e) {
+                    var ele = this;
+                    /**
+                     * In `Gantt` chart, category element distributes the time line into visual divisions
+                     * This event is fired when a category is clicked.
+                     *
+                     * This event is only applicable to Gantt chart.
+                     *
+                     * @event FusionCharts#categoryClick
+                     *
+                     * @param { string } align - The alignment of the category label.
+                     * @param { string } vAlign - The vertical alignment of the category label.
+                     * @param { number } chartX - x-coordinate of the pointer relative to the chart.
+                     * @param { number } chartY - y-coordinate of the pointer relative to the chart.
+                     * @param { number } pageX - x-coordinate of the pointer relative to the page.
+                     * @param { number } pageY - y-coordinate of the pointer relative to the page.
+                     * @param { string } link - URL set for the category on mouse click.
+                     * @param { string } text - The label in the category
+                     * @see FusionCharts#event:categoryRollOver
+                     * @see FusionCharts#event:categoryRollOut
+                     */
+                    plotEventHandler.call (ele, chart, e, labelHoverEventName.click);
+                },
+                labelRollOver = function (e) {
+                    var ele = this;
+                    hoverTimeout = clearTimeout (hoverTimeout);
+                    if (!lastHoverEle || lastHoverEle.removed) {
+                        lastHoverEle = null;
+                    }
+                    lastHoverEle && axis._gridOutHandler.call (lastHoverEle);
+                    axis._gridHoverHandler.call (ele);
+                    /**
+                     * In `Gantt` chart, category element distributes the time line into visual divisions
+                     * This event is fired when the pointer moves over a category.
+                     *
+                     * This event is only applicable to Gantt chart.
+                     *
+                     * @event FusionCharts#categoryRollOver
+                     *
+                     * @param { string } align - The alignment of the category label.
+                     * @param { string } vAlign - The vertical alignment of the category label.
+                     * @param { number } chartX - x-coordinate of the pointer relative to the chart.
+                     * @param { number } chartY - y-coordinate of the pointer relative to the chart.
+                     * @param { number } pageX - x-coordinate of the pointer relative to the page.
+                     * @param { number } pageY - y-coordinate of the pointer relative to the page.
+                     * @param { string } link - URL set for the category on mouse click.
+                     * @param { string } text - The label in the category
+                     * @see FusionCharts#event:categoryClick
+                     * @see FusionCharts#event:categoryRollOut
+                     */
+
+                    plotEventHandler.call (ele, chart, e, labelHoverEventName.rollOver);
+                },
+                labelRollOut = function (e) {
+                    lastHoverEle = this;
+                    hoverTimeout = clearTimeout (hoverTimeout);
+                    hoverTimeout = setTimeout (function () {
+                        axis._gridOutHandler.call (lastHoverEle);
+                    }, 500);
+                    /**
+                     * In `Gantt` chart, category element distributes the time line into visual divisions
+                     * This event is fired when the pointer moves out of a category.
+                     *
+                     * This event is only applicable to Gantt chart.
+                     *
+                     * @event FusionCharts#categoryRollOut
+                     *
+                     * @param { string } align - The alignment of the category label.
+                     * @param { string } vAlign - The vertical alignment of the category label.
+                     * @param { number } chartX - x-coordinate of the pointer relative to the chart.
+                     * @param { number } chartY - y-coordinate of the pointer relative to the chart.
+                     * @param { number } pageX - x-coordinate of the pointer relative to the page.
+                     * @param { number } pageY - y-coordinate of the pointer relative to the page.
+                     * @param { string } link - URL set for the category on mouse click.
+                     * @param { string } text - The label in the category
+                     * @see FusionCharts#event:categoryClick
+                     * @see FusionCharts#event:categoryRollOver
+                     */
+                    plotEventHandler.call (lastHoverEle, chart, e, labelHoverEventName.rollOut);
+                };
+
+            animationDuration = chart.get('config', 'animationObj');
+            animObj = animationDuration.animObj;
+            dummyObj = animationDuration.dummyObj;
+            transposeAnimDuration = animationDuration.transposeAnimDuration;
+            animType = animationDuration.animType;
+            if (attrs.type === 'header') {
+                labelBackContainer = axisConfig.headerBackContainer;
+                labelLineContainer = axisConfig.headerLineContainer;
+                labelTextContainer = axisConfig.headerTextContainer;
+            } else {
+                labelBackContainer = axisConfig.labelBackContainer;
+                labelLineContainer = axisConfig.labelLineContainer;
+                labelTextContainer = axisConfig.labelTextContainer;
+            }
+            attribs = axis._drawProcessAndDataTableStyleParser(attrs);
+
+            if (categoryElement[elemIndex]) {
+                textElement = categoryElement[elemIndex].graphics.label;
+                rectElement = categoryElement[elemIndex].graphics.rect;
+                labelBackContainer.appendChild(rectElement);
+                labelTextContainer.appendChild(textElement);
+                if (transposeAnimDuration && animateAxis) {
+                    rectElement.animateWith(dummyObj, animObj,attribs.rectAttr, transposeAnimDuration, animType);
+                    textElement.animateWith(dummyObj, animObj,attribs.textAttr, transposeAnimDuration, animType);
+                } else {
+                    rectElement.attr(attribs.rectAttr);
+                    textElement.attr(attribs.textAttr);
+                }
+                textElement.css(attribs.css);
+            } else {
+                rectElement = paper.rect(attribs.rectAttr, labelBackContainer);
+                textElement = paper.text(attribs.textAttr, attribs.css, labelTextContainer);
+                categoryElement[elemIndex] = {};
+                categoryElement[elemIndex].graphics = {};
+                categoryElement[elemIndex].config = {};
+                categoryElement[elemIndex].graphics.label = textElement;
+                categoryElement[elemIndex].graphics.rect = rectElement;
+                rectElement.hover (labelRollOver, labelRollOut)
+                .click (labelClickHandler);
+                textElement
+                .hover (labelRollOver, labelRollOut)
+                .click (labelClickHandler);
+            }
+            if (attrs.type !== 'header') {
+                if (!hoverElemsArr[attrs.pos]) {
+                    hoverElemsArr[attrs.pos] = [];
+                }
+                hoverElemsArr[attrs.pos].push({
+                    bgElem : rectElement,
+                    bgColor : attribs.rectAttr.fill
+                });
+            }
+            rectElement
+            .data ('dataObj', attrs.elem)
+            .data ('eventArgs', attribs.eventArgs)
+            .data ('data', attribs.dataArgs);
+            textElement
+            .data ('dataObj', attrs.elem)
+            .data ('eventArgs', attribs.eventArgs)
+            .data ('data', attribs.dataArgs)
+            .tooltip(attribs.tooltext)
+            .trackTooltip(showTooltip ? true : false);
+
+            axis.components.categoryElement = categoryElement;
+        },
+        _drawGridLine : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                chartComponents = chart.components,
+                paper = chartComponents.paper,
+                gridLine = axis.graphics.gridLine || [],
+                animateAxis = axisConfig.animateAxis,
+                animationDuration,
+                transposeAnimDuration,
+                lineStyle,
+                lineElement,
+                counter = 0,
+                i = 0,
+                ln = 2,
+                path,
+                animObj,
+                dummyObj,
+                container,
+                animType;
+
+            animationDuration = chart.get('config', 'animationObj');
+            animObj = animationDuration.animObj;
+            dummyObj = animationDuration.dummyObj;
+            transposeAnimDuration = animationDuration.transposeAnimDuration;
+            animType = animationDuration.animType;
+            lineStyle = {
+                'stroke-dasharray': axisConfig.lineDashStyle,
+                'stroke-width': axisConfig.lineThickness,
+                stroke: axisConfig.lineColor
+            };
+            for (; i < ln; i += 1) {
+                if (i === 0) {
+                    path = axisConfig.gridLinePath;
+                    container = axisConfig.labelLineContainer;
+                } else {
+                    path = axisConfig.gridLineHeaderPath;
+                    container = axisConfig.headerLineContainer;
+                    if (!path) {
+                        continue;
+                    }
+                }
+                if (gridLine[counter]) {
+                    lineElement = gridLine[counter].graphics;
+                    if (transposeAnimDuration && animateAxis) {
+                        lineElement.animateWith(dummyObj, animObj, {path : path}, transposeAnimDuration, animType);
+                    } else {
+                        lineElement.attr({path : path});
+                    }
+                    lineElement.attr(lineStyle);
+                } else {
+                    lineElement = paper.path(path, container);
+                    lineElement.attr(lineStyle);
+                    gridLine[counter] = {};
+                    gridLine[counter].graphics = lineElement;
+                }
+                counter += 1;
+            }
+            for (i = counter, ln = gridLine.length; i < ln; i += 1) {
+                gridLine[i].graphics.attr({
+                    path : 'M0,0'
+                });
+            }
+            axis.graphics.gridLine = gridLine;
+        },
+        _gridHoverHandler : function () {
+            var data = this.data ('data'),
+                type = data.type,
+                dimension = data.dimension,
+                axis = data.axis,
+                chart = axis.chart,
+                chartConfig = chart.config,
+                paper = chart.components.paper,
+                axisConfig = axis.config,
+                hoverElemsArr = axisConfig.hoverElemsArr || [],
+                ganttPlotHoverBandContainer = axisConfig.ganttPlotHoverBandContainer,
+                plotHoverElement = axis.graphics.plotHoverElement || (axis.graphics.plotHoverElement = []),
+                plotHoverElementAttr,
+                i,
+                ln;
+
+            if (type === 'category') {
+                plotHoverElementAttr = {
+                    x : dimension.left,
+                    y : chartConfig.canvasTop,
+                    width : dimension.left < dimension.right ? (dimension.right - dimension.left) : 0,
+                    height : chartConfig.height,
+                    fill: data.rollOverColor,
+                    'stroke-width' : 0
+                };
+            } else {
+                plotHoverElementAttr = {
+                    y : dimension.top,
+                    x : chartConfig.canvasLeft,
+                    height : dimension.top < dimension.bottom ? (dimension.bottom - dimension.top) : 0,
+                    width : chartConfig.width,
+                    fill: data.rollOverColor,
+                    'stroke-width' : 0
+                };
+            }
+            if (data.usePlotHover) {
+                if (plotHoverElement[0]) {
+                    plotHoverElement[0].attr(plotHoverElementAttr).show();
+                } else {
+                    plotHoverElement[0] = paper.rect(plotHoverElementAttr, ganttPlotHoverBandContainer);
+                }
+            }
+            if (data.useHover && hoverElemsArr[data.pos]) {
+                for (i = 0, ln = hoverElemsArr[data.pos].length; i < ln; i += 1) {
+                    hoverElemsArr[data.pos][i].bgElem.attr({
+                        fill : data.rollOverColor
+                    });
+                }
+            }
+        },
+        _gridOutHandler : function () {
+            var data = this.data ('data'),
+                axis = data.axis,
+                axisConfig = axis.config,
+                hoverElemsArr = axisConfig.hoverElemsArr || [],
+                plotHoverElement = axis.graphics.plotHoverElement || [],
+                i,
+                ln,
+                hoverOutElem;
+
+            if (data.usePlotHover) {
+                if (plotHoverElement[0]) {
+                    plotHoverElement[0].hide();
+                }
+            }
+            if (data.useHover && hoverElemsArr[data.pos]) {
+                for (i = 0, ln = hoverElemsArr[data.pos].length; i < ln; i += 1) {
+                    hoverOutElem = hoverElemsArr[data.pos][i];
+                    hoverOutElem.bgElem.attr({
+                        fill : hoverOutElem.bgColor
+                    });
+                }
+            }
+        },
+        _disposeExtraProcessAndDataTableElement : function(index) {
+            var axis = this,
+                categoryElement = axis.components.categoryElement || [],
+                i,
+                ln;
+
+            for (i = index, ln = categoryElement.length; i < ln; i += 1) {
+                categoryElement[i].graphics.label.attr({
+                    text : ''
+                });
+                categoryElement[i].graphics.rect.attr({
+                    x : 0,
+                    y : 0,
+                    width : 0,
+                    heigth : 0
+                });
+            }
+        }
+    }, 'cartesian']);
+
+    FusionCharts.get ('component', ['axis', 'time', {
+        configure : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                axisAttr = axisConfig.rawAttr,
+                chart = axis.chart,
+                jsonData = chart.jsonData,
+                FCChartObj = jsonData.chart,
+                chartComponents = chart.components,
+                colorM = chartComponents.colorManager,
+                parent = FusionCharts.register('component', ['axis', 'cartesian']);
+
+            parent.prototype.configure.call(this);
+            //Gantt grid line properties
+            axisConfig.plotLineColor = axisConfig.lineColor = convertColor (pluck (FCChartObj.ganttlinecolor,
+                colorM.getColor ('gridColor')), pluckNumber (FCChartObj.ganttlinealpha, 100));
+            axisConfig.plotLineThickness = axisConfig.lineThickness = pluckNumber (FCChartObj.ganttlinethickness, 1);
+            axisConfig.plotLineDashStyle = axisConfig.lineDashStyle = pluckNumber (FCChartObj.ganttlinedashed, 0) ?
+                getDashStyle (pluckNumber (FCChartObj.ganttlinedashlen, 1),
+                FCChartObj.ganttlinedashgap, axisConfig.lineThickness) : DASH_DEF;
+            axisConfig.hoverColor = pluck (FCChartObj.categoryhoverbandcolor, FCChartObj.hoverbandcolor,
+                colorM.getColor ('gridColor'));
+            axisConfig.hoverAlpha = pluckNumber (FCChartObj.categoryhoverbandalpha, FCChartObj.hoverbandalpha, 30);
+            axisConfig.useHover = pluckNumber (FCChartObj.showcategoryhoverband, FCChartObj.showhoverband,
+                FCChartObj.showhovereffect, 1);
+            axisConfig.usePlotHover = pluckNumber (FCChartObj.showganttpaneverticalhoverband);
+            axisConfig.trendlinesDashLen = pluckNumber(axisAttr.trendlinesDashLen, 3);
+            axisConfig.trendlinesDashGap = pluckNumber(axisAttr.trendlinesDashGap, 3);
+
+            axisConfig.gridLineHeaderPath = '';
+            axisConfig.gridLinePath = '';
+        },
+        setCategory : function (categories) {
+            var axis = this,
+                chart = axis.chart,
+                components = chart.get('components'),
+                numberFormatter = components.numberFormatter,
+                axisConfig = axis.config,
+                axisRange = axisConfig.axisRange,
+                startPad = axisConfig.startPad || 0,
+                endPad = axisConfig.endPad || 0,
+                axisLimits,
+                catLength,
+                categoriesFinal,
+                catObj,
+                startMS,
+                endMS,
+                minTime = Infinity,
+                maxTime = -Infinity,
+                i,
+                j;
+
+            // Initialize the category object
+            axisConfig.categories = {};
+            // Set the category flag to true
+            if (categories) {
+                axisConfig.hasCategory = 1;
+            } else {
+                axisConfig.hasCategory = 0;
+                return;
+            }
+            // this will store the category
+            categoriesFinal = axisConfig.categories.category = extend2({}, categories);
+            axis._extractAttribToEnd(categoriesFinal, {});
+            for (i in categoriesFinal) {
+                if (!categoriesFinal.hasOwnProperty(i) || i === '_attrib') {
+                    continue;
+                }
+                for (j = 0, catLength = categoriesFinal[i].category.length; j < catLength; j += 1) {
+                    catObj = categoriesFinal[i].category[j];
+                    startMS = numberFormatter.getDateValue(catObj.start).ms;
+                    endMS = numberFormatter.getDateValue(catObj.end).ms;
+
+                    if (isNaN(startMS)) { /** @todo nan check without fn call */
+                        startMS = UNDEF;
+                    }
+                    if (startMS > maxTime) { maxTime = startMS; }
+                    if (startMS <= minTime) { minTime = startMS; }
+
+                    if (isNaN(endMS)) { /** @todo nan check without fn call */
+                        endMS = UNDEF;
+                    }
+                    if (endMS > maxTime) { maxTime = endMS; }
+                    if (endMS <= minTime) { minTime = endMS; }
+                }
+            }
+
+            axisLimits = {
+                Max : maxTime + endPad,
+                Min : minTime - startPad,
+                divGap : 1
+            };
+
+            axisRange.min = Number(toPrecision(axisLimits.Min,10));
+            axisRange.max = Number(toPrecision(axisLimits.Max, 10));
+            axisRange.tickInterval = Number(toPrecision(axisLimits.divGap, 10));
+        },
+        _drawComponents : function () {
+            var axis = this,
+                axisConfig = axis.config;
+
+            axis._drawCategories();
+            axisConfig.drawPlotlines && axis._drawPlotLine();
+            axisConfig.drawPlotBand && axis._drawPlotBand();
+            axisConfig.drawTrendLines && axis._drawTrendLine();
+        },
+        _drawCategories : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                axisDimention = axisConfig.axisDimention || {},
+                axisStartPosition = axisDimention.y,
+                spaceTaken = axisConfig.totalHeight || 0,
+                chart = axis.chart,
+                chartComponents = chart.components,
+                chartConfig = chart.config,
+                viewPortConfig = chartConfig.viewPortConfig,
+                paper = chartComponents.paper,
+                numberFormatter = chartComponents.numberFormatter,
+                canvas = axisConfig.canvas,
+                gridArr = axisConfig.gridArr || (axisConfig.gridArr = []),
+                canvasLeft = canvas.canvasLeft || chartConfig.canvasLeft,
+                canvasTop = canvas.canvasTop || chartConfig.canvasTop,
+                canvasHeight = canvas.canvasHeight || chartConfig.canvasHeight,
+                canvasWidth = canvas.canvasWidth || chartConfig.canvasWidth,
+                lastTranslate = axisConfig.lastTranslate || (axisConfig.lastTranslate = {x : 0, y : 0}),
+                layers = chart.graphics,
+                axisBottomGroup = layers.axisBottomGroup,
+                i,
+                categories,
+                category,
+                elemIndex = 0,
+                j,
+                args,
+                lastRightPos,
+                animationDuration,
+                animObj,
+                dummyObj,
+                transposeAnimDuration,
+                animType,
+                labelClipHeight,
+                startms,
+                endms;
+
+            animationDuration = chart.get('config', 'animationObj');
+            animObj = animationDuration.animObj;
+            dummyObj = animationDuration.dummyObj;
+            transposeAnimDuration = animationDuration.transposeAnimDuration;
+            animType = animationDuration.animType;
+            labelClipHeight = mathMin(spaceTaken, canvasTop - (axisConfig.maxTopSpaceAvailable || 0));
+            labelClipHeight = labelClipHeight > 0 ? labelClipHeight : 0;
+
+            layers.ganttPlotHoverBandContainerParent = layers.ganttPlotHoverBandContainerParent ||
+                paper.group('guntt-plot-band-container-parent', axisBottomGroup);
+
+            if (!axisConfig.ganttPlotHoverBandContainer) {
+                axisConfig.ganttPlotHoverBandContainer = paper.group('guntt-plot-band-container',
+                    layers.ganttPlotHoverBandContainerParent);
+                axisConfig.ganttPlotHoverBandContainer.attr({
+                    'clip-rect': canvasLeft +','+ canvasTop +
+                    ','+canvasWidth+ ','+canvasHeight
+                });
+            } else {
+                axisConfig.ganttPlotHoverBandContainer.animateWith(dummyObj, animObj, {
+                    'clip-rect': canvasLeft +','+ canvasTop +
+                    ','+canvasWidth+ ','+canvasHeight
+                }, transposeAnimDuration, animType);
+            }
+            if (!axisConfig.ganttPlotLineContainer) {
+                axisConfig.ganttPlotLineContainer = paper.group('guntt-plot-line-container', axisBottomGroup);
+                axisConfig.ganttPlotLineContainer.attr({
+                    'clip-rect': canvasLeft +','+ canvasTop +
+                    ','+canvasWidth+ ','+canvasHeight
+                });
+            } else {
+                axisConfig.ganttPlotLineContainer.animateWith(dummyObj, animObj, {
+                    'clip-rect': canvasLeft +','+ canvasTop +
+                    ','+canvasWidth+ ','+canvasHeight
+                }, transposeAnimDuration, animType);
+            }
+            if (!axisConfig.labelContainer) {
+                axisConfig.labelContainer = paper.group('guntt-label-container', axisBottomGroup);
+                axisConfig.labelContainer.attr({
+                    'clip-rect': canvasLeft +','+ (canvasTop - labelClipHeight) +
+                    ','+canvasWidth+ ','+labelClipHeight
+                });
+            } else {
+                axisConfig.labelContainer.animateWith(dummyObj, animObj, {
+                    'clip-rect': canvasLeft +','+ (canvasTop - labelClipHeight) +
+                    ','+canvasWidth+ ','+labelClipHeight
+                }, transposeAnimDuration, animType);
+            }
+            if (!axisConfig.labelBackContainer) {
+                axisConfig.labelBackContainer = paper.group('guntt-label-back-container', axisConfig.labelContainer);
+            }
+            if (!axisConfig.labelLineContainer) {
+                axisConfig.labelLineContainer = paper.group('guntt-label-line-container', axisConfig.labelContainer);
+            }
+            if (!axisConfig.labelTextContainer) {
+                axisConfig.labelTextContainer = paper.group('guntt-label-text-container', axisConfig.labelContainer);
+            }
+            axisConfig.gridLinePath = '';
+            axisConfig.gridLineHeaderPath = '';
+            axisConfig.hoverElemsArr = [];
+            axisConfig.labelHoverEventName = {
+                click : 'CategoryClick',
+                rollOver : 'CategoryRollOver',
+                rollOut : 'CategoryRollOut'
+            };
+
+            if (axisConfig.hasCategory) {
+                categories = axisConfig.categories.category;
+                for (i in categories) {
+                    if (!categories.hasOwnProperty(i) || i === '_attrib') {
+                        continue;
+                    }
+                    category = categories[i].category;
+                    lastRightPos = undefined;
+                    gridArr = axisConfig.gridArr = [];
+                    for (j in category) {
+                        startms = numberFormatter.getDateValue(category[j].start).ms;
+                        endms = numberFormatter.getDateValue(category[j].end).ms;
+                        if (!category.hasOwnProperty(j) || j === '_attrib' || isNaN(startms) || isNaN(endms)) {
+                            continue;
+                        }
+                        args = {
+                            elem : category[j],
+                            elemIndex : elemIndex,
+                            pos : elemIndex,
+                            dimension : {
+                                left : lastRightPos ||
+                                    axis.getPixel(startms),
+                                right : axis.getPixel(endms),
+                                top : axisStartPosition - spaceTaken + categories[i]._attrib.topPos,
+                                bottom : axisStartPosition - spaceTaken + categories[i]._attrib.bottomPos
+                            },
+                            type : 'category',
+                            isHeader : false
+                        };
+                        lastRightPos = args.dimension.right;
+                        axis._drawProcessAndDataTableElement(args);
+                        elemIndex += 1;
+                        gridArr.push({x : args.dimension.left});
+                    }
+                }
+                if (viewPortConfig.x > 0) {
+                    lastTranslate.x = -(viewPortConfig.x * viewPortConfig.scaleX);
+                } else {
+                    axisConfig.lastTranslate = {x : 0, y : 0};
+                }
+            }
+            axis._drawGridLine();
+            axis._disposeExtraProcessAndDataTableElement(elemIndex);
+        },
+        placeAxis : function (maxHeight) {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                chartConfig = chart.config,
+                components = chart.get('components'),
+                numberFormatter = components.numberFormatter,
+                smartLabel = chart.linkedItems.smartLabel,
+                labelStyle = axisConfig.labels.style,
+                vPadding = 8,
+                maxTextSize = 0,
+                spaceReturn = {
+                    top : 0,
+                    bottom : 0
+                },
+                spaceUsed = 0,
+                categories,
+                category,
+                i,
+                text,
+                smartLabelText,
+                j,
+                textStyle,
+                singleTextStyle,
+                jLen,
+                iLim,
+                maxTextDimention,
+                trendStyle = axisConfig.trend.trendStyle,
+                vtrendlines = axisConfig.vTrendLines,
+                useEllipsesWhenOverflow = axisConfig.useEllipsesWhenOverflow,
+                trendMaxHeight = 0,
+                trendSpaceUsed = 0,
+                trendObj,
+                axisSmartTrendValue,
+                trendHeight,
+                heightLeft;
+            smartLabel.useEllipsesOnOverflow(chartConfig.useEllipsesWhenOverflow);
+            smartLabel.setStyle({
+                fontSize : labelStyle.fontSize,
+                fontFamily : labelStyle.fontFamily,
+                lineHeight : labelStyle.lineHeight,
+                fontWeight : labelStyle.fontWeight
+            });
+            // Used to clip the category when chart height is very small.
+            axisConfig.maxTopSpaceAvailable = chartConfig.canvasTop;
+            if (axisConfig.hasCategory) {
+                categories = axisConfig.categories.category;
+                for (i in categories) {
+                    if (!categories.hasOwnProperty(i) || i === '_attrib') {
+                        continue;
+                    }
+                    maxTextSize = 0;
+                    category = categories[i].category;
+                    for (j in category) {
+                        if (!category.hasOwnProperty(j) || j === '_attrib') {
+                            continue;
+                        }
+                        text = category[j];
+                        text.drawLabel = parseUnsafeString(text.label || text.name);
+                        textStyle = text._attrib;
+                        singleTextStyle = {
+                            fontFamily: pluck(textStyle.fontfamily, labelStyle.fontFamily).replace(/px/i, '') +
+                                PXSTRING,
+                            fontSize: pluck(textStyle.fontsize, labelStyle.fontSize),
+                            fontWeight: pluck((Number(textStyle.isbold) === 1 ? 'bold' : textStyle.isbold ===
+                                undefined ? 'bold' : undefined), labelStyle.fontWeight),
+                            fontStyle: pluck((textStyle.isitalic ? 'italic' : undefined), labelStyle.fontStyle)
+                        };
+                        setLineHeight(singleTextStyle);
+                        smartLabel.setStyle(singleTextStyle);
+                        smartLabelText = smartLabel.getOriSize(text.drawLabel);
+
+                        if (smartLabelText.height > maxTextSize) {
+                            maxTextDimention = smartLabelText;
+                            maxTextSize = smartLabelText.height;
+                        }
+                    }
+                    categories[i]._attrib.topPos = spaceUsed;
+                    spaceUsed += maxTextDimention.height + vPadding;
+                    categories[i]._attrib.bottomPos = spaceUsed;
+                }
+            }
+            heightLeft = maxHeight - spaceUsed;
+            if (axisConfig.drawTrendLines && axisConfig.drawTrendLabels && vtrendlines && axisConfig.isActive){
+                // for trend line
+                smartLabel.setStyle({
+                    fontSize : trendStyle.fontSize,
+                    fontFamily : trendStyle.fontFamily,
+                    lineHeight : trendStyle.lineHeight,
+                    fontWeight : trendStyle.fontWeight
+                });
+                axisConfig.trendBottomPadding = -1;
+                for (j = 0, jLen = vtrendlines.length; j < jLen; j += 1) {
+                    for (i = 0, iLim = vtrendlines[j].line.length; i < iLim; i += 1) {
+                        trendObj = vtrendlines[j].line[i];
+                        text = trendObj.origText || trendObj.displayvalue || trendObj.endvalue ||
+                        trendObj.startvalue || '';
+                        text = parseUnsafeString(text);
+                        // if (text === (trendObj.endvalue || trendObj.startvalue)) {
+                        //     text = ''+ numberFormatterFn.call(chartComponents.numberFormatter, text);
+                        // }
+                        trendObj.startvalue = trendObj.start && numberFormatter.getDateValue(trendObj.start).ms;
+                        trendObj.endvalue = trendObj.end && numberFormatter.getDateValue(trendObj.end).ms;
+                        trendObj.origText = text;
+                        axisSmartTrendValue = smartLabel.getSmartText(text, chart.canvasWidth,
+                            trendStyle.lineHeight, useEllipsesWhenOverflow);
+                        trendHeight = axisSmartTrendValue.height + 2;
+                        // checking if space available for trend label value to be drawn
+                        // if not make the display value empty
+                        if (heightLeft - trendHeight < 0) {
+                            trendObj.displayvalue = '';
+                        } else {
+                            // set the display value
+                            trendObj.displayvalue = axisSmartTrendValue.text;
+                            trendMaxHeight = trendMaxHeight < axisSmartTrendValue.height ?
+                                axisSmartTrendValue.height : trendMaxHeight;
+                        }
+                        // check tooltext is available which will help to draw tooltext on hover
+                        if (axisSmartTrendValue.tooltext) {
+                            trendObj.valueToolText = axisSmartTrendValue.tooltext;
+                        } else {
+                            delete trendObj.valueToolText;
+                        }
+                    }
+                }
+            }
+            axisConfig.totalHeight = spaceUsed;
+            if (trendMaxHeight > 0) {
+                trendSpaceUsed += trendMaxHeight + mathAbs(axisConfig.trendBottomPadding || 0);
+            }
+            spaceUsed = spaceUsed > maxHeight ? maxHeight : spaceUsed;
+            spaceReturn.top += spaceUsed;
+            spaceReturn.bottom += trendSpaceUsed;
+            chartConfig.categorySpaceUsed = spaceUsed;
+            return spaceReturn;
+        }
+    }, 'ganttCommon']);
+
+    FusionCharts.get ('component', ['axis', 'process', {
+        configure : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                jsonData = chart.jsonData,
+                FCChartObj = jsonData.chart,
+                chartComponents = chart.components,
+                colorM = chartComponents.colorManager,
+                parent = FusionCharts.register('component', ['axis', 'cartesian']);
+
+            parent.prototype.configure.call(this);
+            //Grid properties
+            axisConfig.lineColor = convertColor (pluck (FCChartObj.gridbordercolor,
+                colorM.getColor ('gridColor')), pluckNumber (FCChartObj.gridborderalpha, 100));
+            axisConfig.lineThickness = pluckNumber (FCChartObj.gridborderthickness, 1);
+            axisConfig.lineDashStyle = pluckNumber (FCChartObj.gridborderdashed, 0) ?
+                getDashStyle (pluckNumber (FCChartObj.gridborderdashlen, 1),
+                FCChartObj.gridborderdashgap, axisConfig.lineThickness) : DASH_DEF;
+
+            axisConfig.plotLineColor = convertColor (pluck (FCChartObj.ganttlinecolor,
+                colorM.getColor ('gridColor')), pluckNumber (FCChartObj.ganttlinealpha, 100));
+            axisConfig.plotLineThickness = pluckNumber (FCChartObj.ganttlinethickness, 1);
+            axisConfig.plotLineDashStyle = pluckNumber (FCChartObj.ganttlinedashed, 0) ?
+                getDashStyle (pluckNumber (FCChartObj.ganttlinedashlen, 1),
+                FCChartObj.ganttlinedashgap, axisConfig.lineThickness) : DASH_DEF;
+
+            axisConfig.gridResizeBarColor = convertColor (pluck (FCChartObj.gridresizebarcolor,
+                colorM.getColor ('gridResizeBarColor')), pluckNumber (FCChartObj.gridresizebaralpha, 100));
+            axisConfig.gridResizeBarThickness = pluckNumber (FCChartObj.gridresizebarthickness, 1);
+            axisConfig.forceRowHeight = pluckNumber(FCChartObj.forcerowheight, 0);
+            axisConfig.rowHeight = pluckNumber(FCChartObj.rowheight, 0);
+
+            axisConfig.hoverColor = pluck (FCChartObj.processhoverbandcolor, FCChartObj.hoverbandcolor,
+                colorM.getColor ('gridColor'));
+            axisConfig.hoverAlpha = pluckNumber (FCChartObj.processhoverbandalpha, FCChartObj.hoverbandalpha, 30);
+            axisConfig.useHover = pluckNumber (FCChartObj.showprocesshoverband, FCChartObj.showhoverband,
+                FCChartObj.showhovereffect, 1);
+            axisConfig.usePlotHover = pluckNumber (FCChartObj.showganttpanehorizontalhoverband);
+            axisConfig.showFullDataTable = pluckNumber(FCChartObj.showfulldatatable, 1);
+
+            axisConfig.useVerticalScrolling = pluckNumber(FCChartObj.useverticalscrolling, 1);
+
+            axisConfig.gridLineHeaderPath = '';
+            axisConfig.gridLinePath = '';
+        },
+        setDataTable : function (dataTables) {
+            var axis = this,
+                axisConfig = axis.config;
+
+            // Initialize the category object
+            axisConfig.dataTables = {};
+            axisConfig.dataTables.dataTable = {};
+            if (dataTables) {
+                // Set the category flag to true
+                axisConfig.hasDataTables = 1;
+            } else {
+                axisConfig.hasDataTables = 0;
+                return;
+            }
+            // this will store only the category not the vline
+            extend2(axisConfig.dataTables.dataTable, dataTables);
+            dataTables = axisConfig.dataTables.dataTable;
+            // Set the final style property for each text inherating from its parent
+            axis._extractAttribToEnd(dataTables, {});
+        },
+        setProcess : function (processes) {
+            var axis = this,
+                axisConfig = axis.config,
+                axisRange = axisConfig.axisRange,
+                startPad = axisConfig.startPad || 0,
+                endPad = axisConfig.endPad || 0,
+                axisLimits,
+                processesLen,
+                processesFinal,
+                index,
+                ProcessIndex,
+                processMap;
+
+            // Initialize the category object
+            axisConfig.processes = {};
+            if (processes) {
+                // Set the category flag to true
+                axisConfig.hasProcess = 1;
+            } else {
+                axisConfig.hasProcess = 0;
+                return;
+            }
+            // this will store only the category not the vline
+            processesFinal = axisConfig.processes.process = extend2({}, processes);
+            axis._extractAttribToEnd(processesFinal, {});
+
+            processesLen = processesFinal.process.length;
+            processMap = axisConfig.processes.processMap = {};
+            axisConfig.processes.processHeightMap = {};
+            // Storing Process mapping
+            for (index = 0; index < processesLen; index += 1) {
+                ProcessIndex = processesFinal.process[index];
+                if (ProcessIndex.id) {
+                    processMap[ProcessIndex.id.toLowerCase()] = {
+                        catObj : ProcessIndex,
+                        index : index
+                    };
+                }
+            }
+
+            axisLimits = {
+                Max : processesLen - 1 + endPad,
+                Min : -startPad,
+                divGap : 1
+            };
+
+            axisRange.min = Number(toPrecision(axisLimits.Min,10));
+            axisRange.max = Number(toPrecision(axisLimits.Max, 10));
+            axisRange.tickInterval = Number(toPrecision(axisLimits.divGap, 10));
+        },
+        getProcessPositionById : function (processId) {
+            var axis = this,
+                axisConfig = axis.config,
+                process = axisConfig.processes && axisConfig.processes.processMap[processId],
+                processHeightMap = axisConfig.processes.processHeightMap;
+
+
+            if (process) {
+                return processHeightMap[process.index];
+            } else {
+                return false;
+            }
+        },
+        getProcessPositionByIndex : function (ind) {
+            var axis = this,
+                axisConfig = axis.config,
+                processHeightMap = axisConfig.processes.processHeightMap;
+
+
+            if (processHeightMap[ind]) {
+                return processHeightMap[ind];
+            } else {
+                return false;
+            }
+        },
+        setProcessHeight : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                chartConfig = chart.config,
+                canvasHeight = chartConfig.canvasHeight,
+                process = axisConfig.processes.process.process,
+                processHeightMap = axisConfig.processes.processHeightMap,
+                processHeight = axisConfig.processMaxHeight,
+                height = 0,
+                forceRowHeight = axisConfig.forceRowHeight,
+                rowHeight = axisConfig.rowHeight,
+                processHeightFinal,
+                processLength,
+                i;
+            if ((processHeight * process.length) < canvasHeight || axisConfig.useVerticalScrolling === 0) {
+                processHeight = canvasHeight/process.length;
+            }
+            if (forceRowHeight === 0) {
+                if (rowHeight && rowHeight > processHeight) {
+                    processHeight = rowHeight;
+                }
+            } else {
+                processHeight = rowHeight || processHeight;
+            }
+            for (i = 0, processLength = process.length; i < processLength ; i++) {
+                processHeightFinal = pluckNumber(process[i].height,processHeight);
+                processHeightMap[i] = {
+                    top : height,
+                    bottom : height + processHeightFinal,
+                    height : processHeightFinal
+                };
+                height += processHeightFinal;
+            }
+            return height;
+        },
+        _drawComponents : function () {
+            var axis = this,
+                axisConfig = axis.config;
+
+            axis._drawProcessAndDataTable();
+            axisConfig.drawPlotlines && axis._drawPlotLine();
+            axisConfig.drawPlotBand && axis._drawPlotBand();
+            axis._drawVerticalLineAndTracker();
+            axis._drawGridLine();
+        },
+        _drawProcessAndDataTable : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                axisDimention = axisConfig.axisDimention || {},
+                axisStartPosition = axisDimention.x,
+                spaceTaken = axisConfig.totalWidth || 0,
+                gridArr = axisConfig.gridArr || (axisConfig.gridArr = []),
+                canvas = axisConfig.canvas,
+                chartConfig = chart.config,
+                chartComponents = chart.components,
+                paper = chartComponents.paper,
+                canvasTop = canvas.canvasTop || chartConfig.canvasTop,
+                canvasLeft = canvas.canvasLeft || chartConfig.canvasLeft,
+                canvasHeight = canvas.canvasHeight || chartConfig.canvasHeight,
+                canvasWidth = canvas.canvasWidth || chartConfig.canvasWidth,
+                layers = chart.graphics,
+                axisBottomGroup = layers.axisBottomGroup,
+                totalVisiblelWidth = axisConfig.totalVisiblelWidth,
+                i,
+                processLength,
+                dataTables,
+                dataColumn,
+                elemIndex = 0,
+                j,
+                args,
+                topBottom,
+                translateX,
+                animationDuration,
+                animObj,
+                dummyObj,
+                transposeAnimDuration,
+                animType;
+
+            animationDuration = chart.get('config', 'animationObj');
+            animObj = animationDuration.animObj;
+            dummyObj = animationDuration.dummyObj;
+            transposeAnimDuration = animationDuration.transposeAnimDuration;
+            animType = animationDuration.animType;
+
+            layers.ganttPlotHoverBandContainerParent = layers.ganttPlotHoverBandContainerParent ||
+                paper.group('guntt-plot-band-container-parent', axisBottomGroup);
+
+            if (!axisConfig.ganttPlotHoverBandContainer) {
+                axisConfig.ganttPlotHoverBandContainer = paper.group('guntt-plot-band-container',
+                    layers.ganttPlotHoverBandContainerParent);
+                axisConfig.ganttPlotHoverBandContainer.attr({
+                    'clip-rect': canvasLeft +','+ canvasTop +
+                    ','+canvasWidth+ ','+canvasHeight
+                });
+            } else {
+                axisConfig.ganttPlotHoverBandContainer.animateWith(dummyObj, animObj, {
+                    'clip-rect': canvasLeft +','+ canvasTop +
+                    ','+canvasWidth+ ','+canvasHeight
+                }, transposeAnimDuration, animType);
+            }
+            if (!axisConfig.ganttPlotLineContainer) {
+                axisConfig.ganttPlotLineContainer = paper.group('guntt-plot-line-container', axisBottomGroup);
+                axisConfig.ganttPlotLineContainer.attr({
+                    'clip-rect': canvasLeft +','+ canvasTop +
+                    ','+canvasWidth+ ','+canvasHeight
+                });
+            } else {
+                axisConfig.ganttPlotLineContainer.animateWith(dummyObj, animObj, {
+                    'clip-rect': canvasLeft +','+ canvasTop +
+                    ','+canvasWidth+ ','+canvasHeight
+                }, transposeAnimDuration, animType);
+            }
+            if (!axisConfig.headerContainer) {
+                axisConfig.headerContainer = paper.group('guntt-header-container', axisBottomGroup);
+                axisConfig.headerContainer.attr({
+                    'clip-rect': (canvasLeft - axisConfig.totalVisiblelWidth) +','+
+                    (canvasTop - chartConfig.categorySpaceUsed) +
+                    ','+axisConfig.totalVisiblelWidth+ ','+chartConfig.categorySpaceUsed
+                });
+            } else {
+                axisConfig.headerContainer.animateWith(dummyObj, animObj, {
+                    'clip-rect': (canvasLeft - axisConfig.totalVisiblelWidth) +','+
+                    (canvasTop - chartConfig.categorySpaceUsed) +
+                    ','+axisConfig.totalVisiblelWidth+ ','+chartConfig.categorySpaceUsed
+                }, transposeAnimDuration, animType);
+            }
+            if (!axisConfig.headerBackContainer) {
+                axisConfig.headerBackContainer = paper.group('guntt-header-back-container', axisConfig.headerContainer);
+            }
+            if (!axisConfig.headerLineContainer) {
+                axisConfig.headerLineContainer = paper.group('guntt-header-line-container', axisConfig.headerContainer);
+            }
+            if (!axisConfig.headerTextContainer) {
+                axisConfig.headerTextContainer = paper.group('guntt-header-text-container', axisConfig.headerContainer);
+            }
+            if (!axisConfig.labelContainer) {
+                axisConfig.labelContainer = paper.group('guntt-label-container', axisBottomGroup);
+                axisConfig.labelContainer.attr({
+                    'clip-rect': (canvasLeft - axisConfig.totalVisiblelWidth) +','+ canvasTop +
+                    ','+axisConfig.totalVisiblelWidth+ ','+canvasHeight
+                });
+            } else {
+                axisConfig.labelContainer.animateWith(dummyObj, animObj, {
+                    'clip-rect': (canvasLeft - axisConfig.totalVisiblelWidth) +','+ canvasTop +
+                    ','+axisConfig.totalVisiblelWidth+ ','+canvasHeight
+                }, transposeAnimDuration, animType);
+            }
+            if (!axisConfig.labelBackContainer) {
+                axisConfig.labelBackContainer = paper.group('guntt-label-back-container', axisConfig.labelContainer);
+            }
+            if (!axisConfig.labelLineContainer) {
+                axisConfig.labelLineContainer = paper.group('guntt-label-line-container', axisConfig.labelContainer);
+            }
+            if (!axisConfig.labelTextContainer) {
+                axisConfig.labelTextContainer = paper.group('guntt-label-text-container', axisConfig.labelContainer);
+            }
+            if (!axisConfig.hotContainer) {
+                axisConfig.hotContainer = paper.group('guntt-hot-container', axisConfig.axisLabelGroup);
+                axisConfig.hotContainer.attr({
+                    'clip-rect': (canvasLeft - axisConfig.totalVisiblelWidth) +','+
+                    (canvasTop - chartConfig.categorySpaceUsed) +
+                    ','+axisConfig.totalVisiblelWidth+ ','+(canvasHeight + chartConfig.categorySpaceUsed)
+                });
+            } else {
+                axisConfig.hotContainer.animateWith(dummyObj, animObj, {
+                    'clip-rect': (canvasLeft - axisConfig.totalVisiblelWidth) +','+
+                    (canvasTop - chartConfig.categorySpaceUsed) +
+                    ','+axisConfig.totalVisiblelWidth+ ','+(canvasHeight + chartConfig.categorySpaceUsed)
+                }, transposeAnimDuration, animType);
+            }
+
+            axisConfig.gridLinePath = '';
+            axisConfig.gridLineHeaderPath = '';
+            axisConfig.hoverElemsArr = [];
+            axisConfig.labelHoverEventName = {
+                click : 'ProcessClick',
+                rollOver : 'ProcessRollOver',
+                rollOut : 'ProcessRollOut'
+            };
+
+            if (axisConfig.hasProcess) {
+                process = axisConfig.processes.process.process;
+                args = {
+                    elem : axisConfig.processes.process,
+                    elemIndex : elemIndex,
+                    dimension : {
+                        left : axisStartPosition - spaceTaken + process._attrib.leftPos,
+                        right : axisStartPosition - spaceTaken + process._attrib.rightPos,
+                        top : canvasTop - chartConfig.categorySpaceUsed,
+                        bottom : canvasTop
+                    },
+                    type : 'header'
+                };
+                axis._drawProcessAndDataTableElement(args);
+                elemIndex += 1;
+                gridArr = axisConfig.gridArr = [];
+                for (i = 0, processLength = process.length; i < processLength ; i++) {
+                    topBottom = axis.getProcessPositionByIndex(i);
+                    args = {
+                        elem : process[i],
+                        elemIndex : elemIndex,
+                        pos : i,
+                        dimension : {
+                            left : axisStartPosition - spaceTaken + process._attrib.leftPos,
+                            right : axisStartPosition - spaceTaken + process._attrib.rightPos,
+                            top : canvasTop + topBottom.top,
+                            bottom : canvasTop + topBottom.bottom
+                        },
+                        type : 'process'
+                    };
+                    axis._drawProcessAndDataTableElement(args);
+                    elemIndex += 1;
+                    gridArr.push({y : args.dimension.bottom});
+                }
+
+            }
+            if (axisConfig.hasDataTables) {
+                dataTables = axisConfig.dataTables.dataTable.datacolumn;
+                for (i in dataTables) {
+                    if (!dataTables.hasOwnProperty(i) || i === '_attrib') {
+                        continue;
+                    }
+                    args = {
+                        elem : dataTables[i],
+                        elemIndex : elemIndex,
+                        pos : i,
+                        dimension : {
+                            left : axisStartPosition - spaceTaken + dataTables[i]._attrib.leftPos,
+                            right : axisStartPosition - spaceTaken + dataTables[i]._attrib.rightPos,
+                            top : canvasTop - chartConfig.categorySpaceUsed,
+                            bottom : canvasTop
+                        },
+                        type : 'header'
+                    };
+                    axis._drawProcessAndDataTableElement(args);
+                    elemIndex += 1;
+                    dataColumn = dataTables[i].text;
+                    for (j in dataColumn) {
+                        if (dataColumn[j]._attrib && process[j] && process[j]._attrib) {
+                            dataColumn[j]._attrib.hoverbandcolor = process[j]._attrib.hoverbandcolor;
+                            dataColumn[j]._attrib.hoverbandalpha = process[j]._attrib.hoverbandalpha;
+                            dataColumn[j]._attrib.showhoverband = process[j]._attrib.showhoverband;
+                        }
+                        if (!dataColumn.hasOwnProperty(j) || j === '_attrib') {
+                            continue;
+                        }
+                        topBottom = axis.getProcessPositionByIndex(j);
+                        args = {
+                            elem : dataColumn[j],
+                            elemIndex : elemIndex,
+                            pos : j,
+                            dimension : {
+                                left : axisStartPosition - spaceTaken + dataTables[i]._attrib.leftPos,
+                                right : axisStartPosition - spaceTaken + dataTables[i]._attrib.rightPos,
+                                top : canvasTop + topBottom.top,
+                                bottom : canvasTop + topBottom.bottom
+                            },
+                            type : 'datatable'
+                        };
+                        axis._drawProcessAndDataTableElement(args);
+                        elemIndex += 1;
+                    }
+                }
+                if (!axisConfig.drawFromProcessVlineDrag) {
+                    if (spaceTaken > totalVisiblelWidth) {
+                        translateX = (spaceTaken - totalVisiblelWidth);
+                        axis.translateAxis(translateX, undefined);
+                    } else {
+                        axis.resetTransletAxis();
+                        axis.resetTransletAxis();
+                    }
+                } else {
+                    axisConfig.drawFromProcessVlineDrag = false;
+                }
+            }
+            axis._drawGridLine();
+            axis._disposeExtraProcessAndDataTableElement(elemIndex);
+        },
+        _drawVerticalLineAndTracker : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                chartComponents = chart.components,
+                canvas = axisConfig.canvas,
+                chartConfig = chart.config,
+                axisDimention = axisConfig.axisDimention || {},
+                axisStartPosition = axisDimention.x,
+                spaceTaken = axisConfig.totalWidth || 0,
+                canvasTop = canvas.canvasTop || chartConfig.canvasTop,
+                paper = chartComponents.paper,
+                plotLine = axis.components.processVline || (axis.components.processVline  = []),
+                processVlineArr = axisConfig.processVlineArr,
+                trackerGroup = axisConfig.hotContainer,
+                counter = 0,
+                TRACKER_W = 30,
+                i,
+                ln,
+                path,
+                hotElement,
+                elem,
+                top,
+                hoverLineStyle,
+                lineHotElemStyle,
+                xPos,
+                vHoverLine,
+                dragStart = function () {
+                    var ele = this,
+                        data = ele.data ('drag-options'),
+                        vHoverLine = data.vHoverLine;
+
+                    data.origX = data.lastX || (data.lastX = 0);
+                    vHoverLine.show ();
+
+                    chart.trackerClicked = true;
+                    data.draged = false;
+                },
+
+                dragMove = function (dx) {
+                    var ele = this,
+                        data = ele.data ('drag-options'),
+                        vHoverLine = data.vHoverLine,
+                        vLineSetting = data.vLineSetting,
+                        startX = vLineSetting.xPos + dx,
+                        leftSideLimit = vLineSetting.leftLimit,
+                        rightSideLimit = vLineSetting.rightLimit,
+                        transform;
+
+                    //bound limits
+                    if (startX < leftSideLimit) {
+                        dx = leftSideLimit - vLineSetting.xPos;
+                    }
+                    if (startX > rightSideLimit) {
+                        dx = rightSideLimit - vLineSetting.xPos;
+                    }
+
+                    transform = {
+                        transform: 't' + (data.origX + dx) + COMMA + 0
+                    };
+
+                    ele.attr (transform);
+                    vHoverLine.attr (transform);
+
+                    data.draged = true;
+                    data.lastX = dx;
+                },
+
+                dragUp = function () {
+                    var ele = this,
+                        data = ele.data ('drag-options'),
+                        vLineSetting = data.vLineSetting,
+                        vHoverLine = data.vHoverLine,
+                        vLineIndex = data.vLineIndex,
+                        transform;
+
+                    chart.trackerClicked = false;
+                    vHoverLine.hide ();
+                    // restoring state with respect to original state
+                    if (data.draged) {
+                        vLineSetting.left.rightPos += data.lastX || 0;
+                        vLineSetting.right.leftPos += data.lastX || 0;
+                        vLineSetting.xPos += data.lastX || 0;
+                        if (processVlineArr[vLineIndex - 1]) {
+                            processVlineArr[vLineIndex - 1].rightLimit += data.lastX || 0;
+                        }
+                        if (processVlineArr[vLineIndex + 1]) {
+                            processVlineArr[vLineIndex + 1].leftLimit += data.lastX || 0;
+                        }
+                        axisConfig.drawFromProcessVlineDrag = true;
+                        axis._drawProcessAndDataTable();
+                        axis._drawVerticalLineAndTracker();
+                        transform = {
+                            transform: 't0,0'
+                        };
+
+                        ele.attr (transform);
+                        vHoverLine.attr (transform);
+
+                    }
+                };
+
+            hoverLineStyle = {
+                stroke: axisConfig.gridResizeBarColor,
+                'stroke-width': axisConfig.gridResizeBarThickness,
+                visibility: 'hidden'
+            };
+            lineHotElemStyle = {
+                stroke: TRACKER_FILL,
+                ishot: true,
+                'stroke-width': TRACKER_W
+            };
+            top = canvasTop - chartConfig.categorySpaceUsed;
+            for(i = 0, ln = processVlineArr.length; i < ln; i += 1) {
+                if(processVlineArr[i].type === 'process') {
+                    elem = axisConfig.processes.process.process;
+                } else {
+                    elem = axisConfig.dataTables.dataTable.datacolumn[processVlineArr[i].ind];
+                }
+                xPos = axisStartPosition - spaceTaken + elem._attrib.rightPos;
+                path = ['M', xPos, top,'L', xPos, canvasTop + axisConfig.processTotalHeight];
+                if (plotLine[counter]) {
+                    vHoverLine = plotLine[counter].graphics.vHoverLine;
+                    vHoverLine.attr({path : path}).attr(hoverLineStyle);
+                    hotElement = plotLine[counter].graphics.hotElement;
+                    hotElement.attr({path : path}).attr(lineHotElemStyle);
+                } else {
+                    vHoverLine = paper.path(path, trackerGroup);
+                    vHoverLine.attr(hoverLineStyle);
+                    hotElement = paper.path(path, trackerGroup);
+                    hotElement.attr(lineHotElemStyle);
+                    plotLine[counter] = {};
+                    plotLine[counter].graphics = {};
+                    plotLine[counter].config = {};
+                    plotLine[counter].graphics.vHoverLine = vHoverLine;
+                    plotLine[counter].graphics.hotElement = hotElement;
+                }
+                hotElement.css ('cursor', R.svg && 'ew-resize' || 'e-resize')
+                .drag (dragMove,  dragStart, dragUp)
+                .data ('drag-options', {
+                    vHoverLine: plotLine[counter].graphics.vHoverLine,
+                    vLineSetting: processVlineArr[i],
+                    vLineIndex: i
+                });
+                counter += 1;
+            }
+            for (i = counter, ln = plotLine.length; i < ln; i += 1) {
+                plotLine[i].graphics.vHoverLine.attr({
+                    path : ['M',0,0]
+                });
+                plotLine[i].graphics.hotElement.attr({
+                    path : ['M',0,0]
+                });
+            }
+        },
+        manageProcessScroll : function (scroll) {
+            var axis = this,
+                axisConfig = axis.config,
+                spaceTaken = axisConfig.totalWidth || 0,
+                totalVisiblelWidth = axisConfig.totalVisiblelWidth,
+                translateX;
+
+            if (spaceTaken > totalVisiblelWidth) {
+                translateX = (spaceTaken - totalVisiblelWidth) * (1 - scroll);
+                axis.translateAxis(translateX, undefined);
+            }
+
+        },
+        placeAxis : function (maxWidth) {
+            var axis = this,
+                axisConfig = axis.config,
+                chart = axis.chart,
+                smartLabel = chart.linkedItems.smartLabel,
+                labelStyle = axisConfig.labels.style,
+                hPadding = 4,
+                processHeightPadding = 8,
+                maxProcessDimention = 0,
+                maxTextSize = 0,
+                spaceReturn = {
+                    left : 0,
+                    right : 0
+                },
+                spaceUsed = 0,
+                processOnRight = false,
+                processSpaceUsed = 0,
+                processMaxHeight = 0,
+                i,
+                text,
+                smartLabelText,
+                processLength,
+                singleProcess,
+                processStyle,
+                processParent,
+                singleProcessStyle,
+                dataTables,
+                dataTable,
+                dataColumn,
+                j,
+                textStyle,
+                singleTextStyle,
+                maxTextDimention,
+                preAlocateSpace = 0;
+            smartLabel.useEllipsesOnOverflow(chart.config.useEllipsesWhenOverflow);
+            smartLabel.setStyle({
+                fontSize : labelStyle.fontSize,
+                fontFamily : labelStyle.fontFamily,
+                lineHeight : labelStyle.lineHeight,
+                fontWeight : labelStyle.fontWeight
+            });
+            if (axisConfig.showFullDataTable === 0) {
+                preAlocateSpace = maxWidth / ((axisConfig.hasDataTables && axisConfig.dataTables &&
+                    axisConfig.dataTables.dataTable && axisConfig.dataTables.dataTable.datacolumn ?
+                    axisConfig.dataTables.dataTable.datacolumn.length :
+                    0) + 1);
+            }
+            if (axisConfig.hasProcess) {
+                process = axisConfig.processes.process.process;
+                processParent = axisConfig.processes.process;
+                if (processParent.positioningrid === 'right') {
+                    processOnRight = true;
+                }
+                if (processParent.headertext) {
+                    processParent.drawLabel = parseUnsafeString(processParent.headertext);
+                    processStyle = processParent._attrib;
+                    singleProcessStyle = {
+                        fontFamily: pluck(processStyle.headerfontfamily, labelStyle.fontFamily),
+                        fontSize: pluck(processStyle.headerfontsize, labelStyle.fontSize).replace(/px/i, '') + PXSTRING,
+                        fontWeight: pluck((Number(processStyle.headerisbold) === 1 ? 'bold' :
+                            processStyle.headerisbold === undefined ? 'bold' : undefined), labelStyle.fontWeight),
+                        fontStyle: pluck((processStyle.headerisitalic ? 'italic' : undefined), labelStyle.fontStyle)
+                    };
+                    singleProcessStyle.lineHeight = setLineHeight(singleProcessStyle);
+                    smartLabel.setStyle(singleProcessStyle);
+                    smartLabelText = smartLabel.getOriSize(processParent.drawLabel);
+
+                    if (smartLabelText.width > maxTextSize) {
+                        maxProcessDimention = smartLabelText;
+                        maxTextSize = smartLabelText.width;
+                    }
+                }
+                for (i = 0, processLength = process.length; i < processLength ; i++) {
+                    singleProcess = process[i];
+                    processStyle = singleProcess._attrib;
+                    singleProcess.drawLabel = parseUnsafeString(singleProcess.label || singleProcess.name);
+                    singleProcessStyle = {
+                        fontFamily: pluck(processStyle.fontfamily, labelStyle.fontFamily),
+                        fontSize: pluck(processStyle.fontsize, labelStyle.fontSize).replace(/px/i, '') + PXSTRING,
+                        fontWeight: pluck((processStyle.isbold ? 'bold' : undefined), labelStyle.fontWeight),
+                        fontStyle: pluck((processStyle.isitalic ? 'italic' : undefined), labelStyle.fontStyle)
+                    };
+                    singleProcessStyle.lineHeight = setLineHeight(singleProcessStyle);
+                    smartLabel.setStyle(singleProcessStyle);
+                    smartLabelText = smartLabel.getOriSize(singleProcess.drawLabel);
+
+                    if (smartLabelText.width > maxTextSize) {
+                        maxProcessDimention = smartLabelText;
+                        maxTextSize = smartLabelText.width;
+                    }
+                    if (smartLabelText.height > processMaxHeight) {
+                        processMaxHeight = smartLabelText.height;
+                    }
+                }
+                axisConfig.processMaxHeight = processMaxHeight + processHeightPadding;
+                //axisConfig.processTotalHeight = axis._setProcessHeight(processMaxHeight);
+                process._attrib.leftPos = spaceUsed;
+                if(!processOnRight) {
+                    spaceUsed += preAlocateSpace || maxProcessDimention.width + hPadding;
+                } else {
+                    processSpaceUsed = preAlocateSpace || maxProcessDimention.width + hPadding;
+                }
+                process._attrib.rightPos = spaceUsed;
+
+            }
+            if (axisConfig.hasDataTables) {
+                dataTables = axisConfig.dataTables.dataTable.datacolumn;
+                for (i in dataTables) {
+                    if (!dataTables.hasOwnProperty(i) || i === '_attrib') {
+                        continue;
+                    }
+                    dataTable = dataTables[i];
+                    maxTextSize = 0;
+                    if (dataTable.headertext) {
+                        processStyle = dataTable._attrib;
+                        dataTable.drawLabel = parseUnsafeString(dataTable.headertext);
+                        singleTextStyle = {
+                            fontFamily: pluck(processStyle.headerfontfamily, labelStyle.fontFamily),
+                            fontSize: pluck(processStyle.headerfontsize, labelStyle.fontSize).replace(/px/i, '') +
+                                PXSTRING,
+                            fontWeight: pluck((Number(processStyle.headerisbold) === 1 ? 'bold' :
+                                processStyle.headerisbold === undefined ? 'bold' : undefined), labelStyle.fontWeight),
+                            fontStyle: pluck((processStyle.headerisitalic ? 'italic' : undefined), labelStyle.fontStyle)
+                        };
+                        singleTextStyle.lineHeight = setLineHeight(singleTextStyle);
+                        smartLabel.setStyle(singleTextStyle);
+                        smartLabelText = smartLabel.getOriSize(dataTable.drawLabel);
+
+                        if (smartLabelText.width > maxTextSize) {
+                            maxTextDimention = smartLabelText;
+                            maxTextSize = smartLabelText.width;
+                        }
+                    }
+                    dataColumn = dataTable.text;
+                    for (j in dataColumn) {
+                        if (!dataColumn.hasOwnProperty(j) || j === '_attrib') {
+                            continue;
+                        }
+                        text = dataColumn[j];
+                        text.drawLabel = parseUnsafeString(text.label || text.name);
+                        textStyle = text._attrib;
+                        singleTextStyle = {
+                            fontFamily: pluck(textStyle.fontfamily, labelStyle.fontFamily),
+                            fontSize: pluck(textStyle.fontsize, labelStyle.fontSize).replace(/px/i, '') + PXSTRING,
+                            fontWeight: pluck((textStyle.isbold ? 'bold' : undefined), labelStyle.fontWeight),
+                            fontStyle: pluck((textStyle.isitalic ? 'italic' : undefined), labelStyle.fontStyle)
+                        };
+                        singleTextStyle.lineHeight = setLineHeight(singleTextStyle);
+                        smartLabel.setStyle(singleTextStyle);
+                        smartLabelText = smartLabel.getOriSize(text.drawLabel);
+
+                        if (smartLabelText.width > maxTextSize) {
+                            maxTextDimention = smartLabelText;
+                            maxTextSize = smartLabelText.width;
+                        }
+                    }
+                    dataTables[i]._attrib.leftPos = spaceUsed;
+                    spaceUsed += preAlocateSpace || maxTextDimention.width + hPadding;
+                    dataTables[i]._attrib.rightPos = spaceUsed;
+                }
+            }
+            if (axisConfig.hasProcess) {
+                if(processOnRight) {
+                    process._attrib.leftPos += spaceUsed;
+                    process._attrib.rightPos += spaceUsed + processSpaceUsed;
+                    spaceUsed += processSpaceUsed;
+                }
+            }
+            axisConfig.totalWidth = spaceUsed;
+            axis.adjustWidth();
+            spaceUsed = axisConfig.totalWidth > maxWidth ? maxWidth : axisConfig.totalWidth;
+            axisConfig.totalVisiblelWidth = spaceUsed;
+            spaceReturn.left += spaceUsed;
+            return spaceReturn;
+        },
+
+        adjustWidth : function () {
+            var axis = this,
+                axisConfig = axis.config,
+                totalWidth = axisConfig.totalWidth,
+                availableWidth = totalWidth,
+                spaceUsed = 0,
+                processOnRight = false,
+                dragPadding = 20,
+                processVlineArr,
+                attrib,
+                getWidth,
+                processParent,
+                newLeft,
+                dataTables,
+                dataTable,
+                i,
+                prevProcessVlineArr;
+
+            processVlineArr = axisConfig.processVlineArr = [];
+
+            availableWidth -= dragPadding * (axisConfig.hasDataTables && axisConfig.dataTables &&
+                axisConfig.dataTables.dataTable && axisConfig.dataTables.dataTable.datacolumn ?
+                axisConfig.dataTables.dataTable.datacolumn.length + 1 : 1);
+
+            getWidth = function (width) {
+                var retW;
+
+                availableWidth += dragPadding;
+                if (width.match(/%/g)) {
+                    retW = pluckNumber(((totalWidth * Number(width.replace(/%/g, '')/100))), 0);
+                } else {
+                    retW = pluckNumber(width, 0);
+                }
+                if (availableWidth < dragPadding) {
+                    retW = dragPadding;
+                } else if (retW > availableWidth) {
+                    retW = availableWidth;
+                }
+                availableWidth -= retW;
+                return retW;
+            };
+
+            if (axisConfig.hasProcess) {
+                process = axisConfig.processes.process.process;
+                processParent = axisConfig.processes.process;
+                if (processParent.positioningrid === 'right') {
+                    processOnRight = true;
+                }
+                attrib = process._attrib;
+                newLeft = spaceUsed;
+                spaceUsed += (getWidth(attrib.width || ''+(attrib.rightPos - attrib.leftPos)));
+                attrib.leftPos = newLeft;
+                attrib.rightPos = spaceUsed;
+
+                if (!processOnRight) {
+                    processVlineArr.push({
+                        type : 'process',
+                        ind : 0,
+                        xPos : attrib.rightPos,
+                        left : attrib,
+                        leftLimit : attrib.leftPos + dragPadding
+                    });
+                } else {
+                    spaceUsed = 0;
+                }
+
+            }
+            if (axisConfig.hasDataTables) {
+                dataTables = axisConfig.dataTables.dataTable.datacolumn;
+                for (i in dataTables) {
+                    if (!dataTables.hasOwnProperty(i) || i === '_attrib') {
+                        continue;
+                    }
+                    dataTable = dataTables[i];
+                    attrib = dataTable._attrib;
+                    newLeft = spaceUsed;
+                    spaceUsed += (getWidth(attrib.width || ''+(attrib.rightPos - attrib.leftPos)));
+                    attrib.leftPos = newLeft;
+                    attrib.rightPos = spaceUsed;
+                    prevProcessVlineArr = processVlineArr[processVlineArr.length - 1];
+                    if (prevProcessVlineArr) {
+                        prevProcessVlineArr.right = attrib;
+                        prevProcessVlineArr.rightLimit = attrib.rightPos - dragPadding;
+                    }
+                    processVlineArr.push({
+                        type : 'dataTable',
+                        ind : i,
+                        xPos : attrib.rightPos,
+                        left : attrib,
+                        leftLimit : attrib.leftPos + dragPadding
+                    });
+                }
+            }
+            if (axisConfig.hasProcess) {
+                if(processOnRight) {
+                    attrib = process._attrib;
+                    attrib.rightPos = spaceUsed + (attrib.rightPos - attrib.leftPos);
+                    attrib.leftPos = spaceUsed;
+                    spaceUsed += attrib.rightPos - attrib.leftPos;
+                    prevProcessVlineArr = processVlineArr[processVlineArr.length - 1];
+                    if (prevProcessVlineArr) {
+                        prevProcessVlineArr.right = attrib;
+                        prevProcessVlineArr.rightLimit = attrib.rightPos - dragPadding;
+                    }
+                } else {
+                    processVlineArr.pop();
+                }
+            }
+            axisConfig.totalWidth = spaceUsed;
+        }
+
+    }, 'ganttCommon']);
+
+}]);
+
+
+}));
diff --git a/fusioncharts.jqueryplugin.js b/fusioncharts.jqueryplugin.js
new file mode 100644
index 0000000..f40289a
--- /dev/null
+++ b/fusioncharts.jqueryplugin.js
@@ -0,0 +1,1486 @@
+
+(function (factory) {
+    if (typeof module === 'object' && typeof module.exports !== "undefined") {
+        module.exports = factory;
+    } else {
+        factory(FusionCharts);
+    }
+}(function (FusionCharts) {
+
+/**!
+ * @license FusionCharts JavaScript Library jQuery Plugin v1.0.4
+ * Copyright FusionCharts Technologies LLP
+ * License Information at 
+ *
+ * @author FusionCharts Technologies LLP
+ */
+/**
+ * HTMLTable Data Handler
+ * This module maps chart type alias with particular FusionCharts object.
+ * @private
+ *
+ * @module fusioncharts.transcoder.htmltable
+ */
+FusionCharts.register('module', ['private', 'HTMLTableDataHandler', function () {
+
+    var global = this,
+        win = global.window,
+        doc = win.document,
+        /**
+         *  Used to remove all textNodes in an array of nodes. Textnodes get created
+         *  inadvertently, when the table HTML has newline and space. Returns an
+         *  array of nodes that is not an HTMLCollection and has only the non-text
+         *  nodes in it.
+         *
+         *  @param {array} nodeArr Contains the array of nodes that have to be
+         *  sanitized.
+         */
+        sanitizeNodesArray = function (nodeArr) {
+            var l, i, sanitizedArr = [];
+            for (i = 0, l = nodeArr.length; i < l; i += 1) {
+                // if nodeType != 3 then the node is not a text node.
+                if (nodeArr[i].nodeType !== 3) {
+                    sanitizedArr.push(nodeArr[i]);
+                }
+            }
+            return sanitizedArr;
+        },
+
+
+        /**
+         * Used to merge two JSON objects. The copy is a deep copy and not a
+         * reference copy.
+         *
+         * @param: {object} srcJSON, the source json.
+         *
+         * @param: {object} targetJSON, that json that needs to be merged with the
+         * source json.
+         *
+         */
+        mergeJSON = function (srcJSON, targetJSON) {
+            var i,
+                len,
+                item;
+
+            if (targetJSON instanceof Array) {
+                for (i = 0, len = targetJSON.length; i < len; i++) {
+                    if (targetJSON[i] instanceof Array) {
+                        if (srcJSON[i] === undefined) {
+                            srcJSON[i] = [];
+                        }
+                        mergeJSON(srcJSON[i], targetJSON[i]);
+                    } else if (typeof targetJSON[i] === 'object') {
+                        if (typeof srcJSON[i] === 'undefined') {
+                            srcJSON[i] = {};
+                        }
+                        mergeJSON(srcJSON[i], targetJSON[i]);
+                    } else {
+                        srcJSON[i] = targetJSON[i];
+                    }
+                }
+            } else if (typeof targetJSON === 'object') {
+                for (item in targetJSON) {
+                    if (typeof srcJSON[item] === 'undefined') {
+                        if (targetJSON[item] instanceof Array) {
+                            srcJSON[item] = [];
+                            mergeJSON(srcJSON[item], targetJSON[item]);
+                        } else if (typeof srcJSON[item] === 'object') {
+                            srcJSON[i] = {};
+                            mergeJSON(srcJSON[i], targetJSON[i]);
+                        } else {
+                            srcJSON[i] = targetJSON[i];
+                        }
+                    }
+                }
+            }
+
+            return srcJSON;
+        },
+
+        /**
+         *  Returns the  element of the table. In order to support W3C
+         *  non-compliant HTML, wherein the table does not have a  containing
+         *  the  &  elements, the table itself is returned.
+         *
+         *  @param {object} tbl Is the table whose tbody needs to fetched.
+         *
+         */
+        getTbody = function (tbl) {
+            var tbodyArr = sanitizeNodesArray(tbl.childNodes);
+
+            // Checking if the table's childNode is a tbody or not
+            if (tbodyArr.length) {
+                if (tbodyArr[0].nodeName === 'TBODY') {
+                    return tbodyArr[0];
+                }
+                else if (tbodyArr[0].nodeName === 'THEAD' && tbodyArr[1] && tbodyArr[1].nodeName === 'TBODY') {
+                    return tbodyArr[1];
+                }
+            }
+            return tbl;
+        },
+
+        /**
+         *  Returns an array containing the  in the  tag.
+         *
+         *  @param {object} tbl Is the table whose tbody needs to fetched.
+         *
+         */
+        getThead = function (tbl) {
+            var tbodyArr = sanitizeNodesArray(tbl.childNodes);
+
+            // Checking if the table's childNode is a tbody or not
+            if (tbodyArr.length) {
+                if (tbodyArr[0].nodeName === 'THEAD' && tbodyArr[1] && tbodyArr[1].nodeName === 'TBODY') {
+                    return tbodyArr[0].childNodes;
+                }
+            }
+            return [];
+        },
+
+        /**
+         *  Used to return the text in a given Element. Needed as firefox does not
+         *  support 'innerText', which is a W3C standard and instead uses
+         *  textContent attribute to store the text.
+         *
+         *  @param {object} nodeEle The HTML element whose text is needed.
+         */
+        getTextFromNode = function (nodeEle) {
+            return (nodeEle.innerText !== undefined) ? nodeEle.innerText : nodeEle.textContent;
+        },
+
+        /**
+         *  Used to convert an array of rows into an array of corresponding columns.
+         *
+         *  @param {array} rowArr The array of table rows that has to be transposed
+         *  into an array of columns.
+         */
+        getColumnArr = function (rowArr) {
+
+            var i,
+                j,
+                l,
+                len,
+                cellArr,
+                rowSpanInc,
+                colSpan = 1,
+                columnArrIdx,
+                rowSpan = {},
+                returnObj = [];
+
+            for (i = 0, l = rowArr.length; i < l; i += 1) {
+
+                // get all the cells of the row
+                cellArr = sanitizeNodesArray(rowArr[i].childNodes);
+                colSpan = 1;
+                rowSpanInc = 0;
+                for (j = 0, len = cellArr.length; j < len; j += 1) {
+
+                    // if a previous row had a cell with a rowspan then this
+                    // rowspan needs to be taken into account while creating
+                    // column array.
+                    columnArrIdx = j + colSpan + rowSpanInc - 1;
+                    if (rowSpan[columnArrIdx] &&
+                            ((i - rowSpan[columnArrIdx].rowNum) < rowSpan[columnArrIdx].row)) {
+                        rowSpanInc += rowSpan[columnArrIdx].col;
+                        columnArrIdx += rowSpan[columnArrIdx].col;
+                    }
+
+                    if (parseInt(cellArr[j].getAttribute('rowspan'), 10) > 1) {
+                        if (!rowSpan[columnArrIdx]) {
+                            rowSpan[columnArrIdx] = {};
+                        }
+                        rowSpan[columnArrIdx].rowNum = i;
+                        rowSpan[columnArrIdx].row = parseInt(cellArr[j].getAttribute('rowspan'), 10);
+                        // If the cell has both a rowspan and a colspan then they
+                        // both need to be taken into consideration while calculating
+                        // the column of cells in the susequent rows
+                        if (parseInt(cellArr[j].getAttribute('colspan'), 10) > 1) {
+                            rowSpan[columnArrIdx].col = parseInt(cellArr[j].getAttribute('colspan'), 10);
+                        } else {
+                            rowSpan[columnArrIdx].col = 1;
+                        }
+                    }
+
+                    // The previous cells colspan, and the previous rows rowspans
+                    // also needs to be added to the current cells index to get the
+                    // proper column index.
+                    while (returnObj.length <= columnArrIdx) {
+                        returnObj.push({childNodes: []});
+                    }
+                    returnObj[columnArrIdx].childNodes.push(cellArr[j]);
+
+                    // Adding the current cells colspan for subsequent cells in the
+                    // current row.
+                    if (parseInt(cellArr[j].getAttribute('colspan'), 10) > 1) {
+                        colSpan += parseInt(cellArr[j].getAttribute('colspan'), 10) - 1;
+                    }
+                }
+            }
+
+            return returnObj;
+        },
+
+        /**
+         * Used to check if an item is present in an array or not.
+         *
+         * @param {array} arr The array which has to be checked
+         *
+         * @param {string|number|object} item The item which needs be checked if
+         * present in array arr or not.
+         */
+        arrayContains = function (arr, item) {
+            var i = arr.length;
+            // Using a decrementing while loop (optimization) since the order in which the
+            // array is traversed doesn't matter.
+            while (i) {
+                i -= 1;
+                if (arr[i] === item) {
+                    return true;
+                }
+            }
+            return false;
+        },
+
+        /**
+         * Used to check if a particular row or column has all non numeric (or blank)
+         * content. If so, then that particular row/column must be ignored.
+         *
+         * @param {array} nodeArr Is an array of all the rows/columns of the table.
+         *
+         * @param {number} index of the row/column that is not to be analysed as it
+         * has already been set aside as the label row/column.
+         *
+         * @param {number} j is the cell index at which we have to check for the
+         * presence of numeric data in all the other rows and columns.
+         */
+
+        checkData = function (nodeArr, j, index) {
+
+            var i,
+                l,
+                childArr = sanitizeNodesArray(nodeArr[j].childNodes),
+                text;
+
+            for (i = 0, l = childArr.length; i < l; i += 1) {
+                if (i !== index) {
+                    text = getTextFromNode(childArr[i]);
+                    if (parseFloat(text) === text) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        },
+
+        _blankString = '__fcBLANK__',
+        _blankNo = 0,
+        /**
+         * Used to get the table row that has the labels (categories or legend) and
+         * extract the label details from the corresponding row.
+         *
+         * @param {array} nodeArr Is an array of all the rows/columns of the table.
+         *
+         * @param {array} ignoreArr Is an array of all the indexes in the nodeArr
+         * that need to be ignored. The items of this array can be negative as well.
+         *
+         * @param {string} index If the label row/column details have been given by
+         * the user then this will contain the index which has the labels.
+         *
+         */
+        getLabels = function (nodeArr, ignoreArr, index, opts) {
+
+            var len, l, i, j, childArr, mostEmptyCellRow = null, internalLabel = [],
+                emptyCellCount = [], textCellCount = 0, temp, returnObj = {},
+                spanTotal = 0, spanLen, isRowLabel, maxIdx, spanLength, totalSpanLength = 0, tLabels;
+
+
+            if (typeof index === 'undefined') {
+            // Checking if the user has provided the index. If index has not been
+            // passed then we assume that the user does not want to give a label row
+            // or column.
+
+                // Creating custom labels for all cells in the first row/column.
+                childArr = sanitizeNodesArray(nodeArr[0].childNodes);
+                for (j = 0, len = childArr.length; j < len; j += 1) {
+                    spanLen = j + spanTotal;
+                    internalLabel[spanLen] = _blankString + (spanLen + 1);
+
+                    temp = parseInt(childArr[j].colSpan, 10);
+                    temp = (temp > 1) ? temp : parseInt(childArr[j].rowSpan, 10);
+                    if (temp > 1) {
+                        for (l = 1; l < temp; l += 1) {
+                            internalLabel[spanLen + l] = _blankString + (spanLen + l + 1);
+                        }
+                        spanTotal += (temp - 1);
+                    }
+                }
+
+                // Deleting the labels for the rows/columns that the user wants to
+                // ignore.
+                for (i = 0, l = (j + spanTotal), len = ignoreArr.length; i < len; i += 1) {
+                    if (ignoreArr[i] > 0) {
+                        delete internalLabel[ignoreArr[i] - 1];
+                    } else {
+                        delete internalLabel[l + ignoreArr[i]];
+                    }
+                }
+
+                return {'index': -1, 'labelObj': internalLabel};
+
+            } else if (index === 0) {
+                // Checking if the user has provided the index. Since we expect row/column
+                // indices starting from 1, if index is 0 then we use our internal logic
+                // to find the label array from the given nodeArr.
+                for (i = 0, l = nodeArr.length; i < l; i += 1) {
+                    childArr = sanitizeNodesArray(nodeArr[i].childNodes);
+                    emptyCellCount[i] = 0;
+                    textCellCount = 0;
+
+                    if(opts && opts._extractByHeaderTag){
+                        for (j = 0, len = childArr.length; j < len; j += 1) {
+                            if(childArr[j].nodeName.toLowerCase() != 'th'){
+                                continue;
+                            }
+                            tLabels = getLabels(nodeArr, ignoreArr, i + 1);
+                            delete tLabels.labelObj[opts._rowLabelIndex];
+                            return tLabels;
+                        }
+                    }else{
+                        for (j = 0, len = childArr.length; j < len; j += 1) {
+                            if (arrayContains(ignoreArr, (j + 1)) ||
+                                    arrayContains(ignoreArr, (j - len))) {
+                                continue;
+                            }
+                            temp = getTextFromNode(childArr[j]);
+                            // Checking if the cell is emtpy.
+                            if (temp.replace(/^\s*/, '').replace(/\s*$/, '') === '') {
+                                emptyCellCount[i] += 1;
+                                continue;
+                            }
+                            // Checking if the cell has a non-number content
+                            if (parseFloat(temp) != temp) {
+                                textCellCount += 1;
+                                // If there are at least 2 cells that have non-number
+                                // content then we assume that they contain labels and
+                                // fetch the labels from this array of nodes.
+                                if (textCellCount > 1) {
+                                    return getLabels(nodeArr, ignoreArr, i + 1);
+                                }
+                            }
+                        }
+                    }
+                    // If there are empty cells then we assume that the array with
+                    // the most number of empty cells must be the label array.
+                    if (i > 0) {
+                        if (emptyCellCount[i - 1] > emptyCellCount[i]) {
+                            mostEmptyCellRow = i - 1;
+                        } else if (emptyCellCount[i - 1] < emptyCellCount[i]) {
+                            mostEmptyCellRow = i;
+                        }
+                    }
+                }
+                if (mostEmptyCellRow !== null) {
+                    return getLabels(nodeArr, ignoreArr, mostEmptyCellRow + 1);
+                } else {
+                    return getLabels(nodeArr, ignoreArr);
+                }
+            }
+
+            // If this is a negative number then, calulate the index from the
+            // end of the table. e.g -1 would imply the last row.
+            if (index < 0) {
+                index += nodeArr.length;
+            } else if (index > 0) {
+                index -= 1;
+            }
+
+            /**
+             * Once we have the index of the row/column that contains the labels we
+             * go through only that row/column and extract the labels.
+             */
+            childArr = sanitizeNodesArray(nodeArr[index].childNodes);
+
+            isRowLabel = (nodeArr[0].nodeType !== undefined) ? true : false;
+            for (j = 0, len = childArr.length; j < len; j += 1) {
+                spanLength = 0;
+                if (isRowLabel) {
+                    if (childArr[j].colSpan !== '1') {
+                        spanLength = parseInt(childArr[j].colSpan, 10);
+                    }
+                } else if (childArr[j].rowSpan !== '1') {
+                    spanLength = parseInt(childArr[j].rowSpan, 10);
+                }
+                spanLength = (spanLength > 1) ? spanLength : 0;
+                temp = getTextFromNode(childArr[j]);
+                if (temp.replace(/^\s*/, '').replace(/\s*$/, '') !== '') {
+                    returnObj[j + totalSpanLength] = temp;
+                } else if (checkData(getColumnArr(nodeArr), j, index)) {
+                    // if the label text is missing in one of the cells of the labels
+                    // row/column we check for the presence of numeric data in other
+                    // cells of the corresponding column/row.
+
+                    returnObj[j + totalSpanLength] = _blankString + _blankNo;
+                    _blankNo += 1;
+                }
+
+                if (spanLength > 1) {
+                    // If the spanLength > 1, then we create additional labels for
+                    // rows/columns pertaining to the rowspan or colspan.
+                    temp = returnObj[j + totalSpanLength];
+                    for (i = 1; i < spanLength; i += 1) {
+                        returnObj[j + totalSpanLength + i] = temp + ' (' + i + ')';
+                    }
+
+                    // totalSpanLength is used to adjust the indices of the
+                    // subsequent cells using the rowspan/colspan of the current
+                    // cell.
+                    totalSpanLength += (spanLength - 1);
+                }
+            }
+
+            // Deleting the rows/columns that the user wants to ignore.
+            maxIdx = len + totalSpanLength;
+            for (i = 0, len = ignoreArr.length; i < len; i += 1) {
+                if (ignoreArr[i] > 0) {
+                    delete returnObj[ignoreArr[i] - 1];
+                } else {
+                    delete returnObj[maxIdx + ignoreArr[i]];
+                }
+            }
+
+            return {'labelObj': returnObj, 'index': index};
+        },
+
+        extractDataFromTable = function (tbl, opts) {
+
+            if (typeof tbl === 'string') {
+                tbl = doc.getElementById(tbl);
+            }
+
+            if ((typeof win.jQuery !== 'undefined') && (tbl instanceof win.jQuery)) { // jshint ignore: line
+                tbl = tbl.get(0);
+            }
+
+            if (!tbl) {
+                return {data: null};
+            }
+
+            if (opts.hideTable) {
+                tbl.style.display = 'none';
+            }
+
+            var i,
+                j,
+                rowCells,
+                cellText,
+                dataMap = {},
+                mapColumnIdx,
+                columnSpan,
+                len,
+                item,
+                rowSpan,
+                cellEle,
+                columnSpanObj = {},
+                rowSpanObj = {},
+                tableRows = sanitizeNodesArray(getThead(tbl)).concat(sanitizeNodesArray(getTbody(tbl).childNodes)),
+                l = tableRows.length,
+                dataRows = 0,
+                dataColumns = 0,
+                tempColumn = 0,
+                rowLabelMap,
+                m,
+                k = 0,
+                columnLabelMap,
+                isSingleSeries = false,
+                chartType = opts.chartType,
+                tempMap,
+
+                singleSeriesCharts = ['column2d', 'column3d', 'pie3d', 'pie2d',
+                                        'line', 'bar2d', 'area2d', 'doughnut2d',
+                                        'doughnut3d', 'pareto2d', 'pareto3d'];
+
+
+            if(singleSeriesCharts.indexOf(chartType) !== -1){
+                isSingleSeries = true;
+            }
+
+
+
+            // use rowLabelSource and colLabelSource to avoid confusion
+            opts.rowLabelSource = parseInt(opts.labelSource, 10);
+            opts.colLabelSource = parseInt(opts.legendSource, 10);
+            // Create the labels objects for the chart.
+
+            if (opts.major === 'column') {
+                rowLabelMap = opts.useLabels ?
+                    getLabels(tableRows, opts.ignoreCols, opts.rowLabelSource) :
+                    getLabels(tableRows, opts.ignoreCols);
+
+                columnLabelMap = opts.useLegend ?
+                    getLabels(getColumnArr(tableRows), opts.ignoreRows, opts.colLabelSource) :
+                    getLabels(getColumnArr(tableRows), opts.ignoreRows);
+            }else{
+                tempMap = getLabels(getColumnArr(tableRows), opts.ignoreRows, opts.rowLabelSource);
+                if(!opts.useLabels){
+                    rowLabelMap = getLabels(getColumnArr(tableRows), opts.ignoreRows);
+                }else{
+                    rowLabelMap = tempMap;
+                }
+
+                opts._rowLabelIndex = tempMap.index;
+                opts._extractByHeaderTag = true;
+
+                columnLabelMap = opts.useLegend ?
+                    getLabels(tableRows, opts.ignoreCols, opts.colLabelSource, opts) :
+                    getLabels(tableRows, opts.ignoreCols);
+
+                delete opts._extractByHeaderTag;
+
+                tempMap = rowLabelMap;
+                rowLabelMap = columnLabelMap;
+                columnLabelMap = tempMap;
+            }
+
+            delete rowLabelMap.labelObj[columnLabelMap.index];
+            delete columnLabelMap.labelObj[rowLabelMap.index];
+
+            // Creating the 2d map depending on whether the rows are the primary
+            // keys or the columns.
+            if (opts.major === 'row') {
+                for (item in columnLabelMap.labelObj) {
+                    dataMap[item] = {};
+                }
+            } else {
+                for (item in rowLabelMap.labelObj) {
+                    dataMap[item] = {};
+                }
+            }
+
+            // Populating the dataMap.
+            for (i = 0; i < l; i += 1) {
+                if (rowLabelMap.index === i ||
+                        (columnLabelMap.labelObj[i] === undefined)) {
+                    continue;
+                }
+
+                dataRows += 1;
+                rowCells = sanitizeNodesArray(tableRows[i].childNodes);
+
+                // columnSpanObj maintains the number of colspans in the current
+                // row.
+                // rowSpanObj maintains the number of rowspans in a rows x columns
+                // map.
+                columnSpanObj[i] = 0;
+                rowSpanObj[i] = {};
+
+                for (j = 0, len = rowCells.length; j < len; j += 1) {
+
+                    cellEle = rowCells[j];
+
+                    columnSpan = parseInt(cellEle.getAttribute('colspan'), 10);
+                    rowSpan = parseInt(cellEle.getAttribute('rowspan'), 10);
+
+                    mapColumnIdx = j + columnSpanObj[i];
+
+                    // Calculating the position of the current cell in the dataMap.
+                    while (k < i) {
+                        if (rowSpanObj[k]) {
+                            for (m in rowSpanObj[k]) {
+                                if (m > mapColumnIdx) {
+                                    break;
+                                }
+
+                                if ((i - k) <= rowSpanObj[k][m].row) {
+                                    mapColumnIdx += rowSpanObj[k][m].col;
+                                }
+                            }
+                        }
+                        k += 1;
+                    }
+
+                    if (columnSpan > 1) {
+                        columnSpanObj[i] += (columnSpan - 1);
+                    }
+
+                    if (rowSpan > 1) {
+                        if (columnSpan > 1) {
+                            rowSpanObj[i][mapColumnIdx] = {
+                                row: (rowSpan - 1),
+                                col: columnSpan
+                            };
+                        } else {
+                            rowSpanObj[i][mapColumnIdx] = {
+                                row: (rowSpan - 1),
+                                col: 1
+                            };
+                        }
+                    }
+                    if (columnLabelMap.index === mapColumnIdx ||
+                        (rowLabelMap.labelObj[mapColumnIdx] === undefined)) {
+
+                        continue;
+                    }
+
+                    tempColumn += 1;
+                    cellText = getTextFromNode(cellEle);
+                    // If the cell does not have any text then we covert it by
+                    // default to 0 or to an parameterized option set by user.
+                    if (cellText.replace(/^\s*/, '').replace(/\s*$/, '') === '') {
+                        if (opts.convertBlankTo) {
+                            cellText = opts.convertBlankTo;
+                        } else {
+                            continue;
+                        }
+                    }
+
+                    // Filling up the dataMap based on the rowspan, colspan and
+                    // position(row=i, column=mapColumnIdx) information of the
+                    // table cell.
+                    columnSpan = (columnSpan > 1) ? columnSpan : 1;
+                    rowSpan = (rowSpan > 1) ? rowSpan : 1;
+
+                    if (opts.major === 'row') {
+                        k = 0;
+                        while (k < columnSpan) {
+                            m = 0;
+                            while (m < rowSpan) {
+                                dataMap[i + m][mapColumnIdx + k] = parseFloat(cellText);
+                                m += 1;
+                            }
+                            k += 1;
+                        }
+                    }
+                    else {
+                        k = 0;
+                        while (k < columnSpan) {
+                            m = 0;
+                            while (m < rowSpan) {
+                                dataMap[mapColumnIdx + k][i + m] = parseFloat(cellText);
+                                m += 1;
+                            }
+                            k += 1;
+                        }
+                    }
+                }
+                if (tempColumn > dataColumns) {
+                    dataColumns = tempColumn;
+                }
+            }
+
+            return {
+                data: dataMap,
+                chartType: chartType ? (!isSingleSeries ? 'multi' : 'single') :
+                    ((dataRows > 1 && dataColumns > 1) ? 'multi' : 'single'),
+                labelMap: columnLabelMap,
+                legendMap: rowLabelMap
+            };
+        },
+
+        createChartFromTable = function (data, obj, config) {
+
+            // Default configuration for HTMLTable data-handler
+            var opts = {
+                chartAttributes: { },
+
+                major: 'row',
+                useLabels: true,
+                useLegend: true,
+                labelSource: 0,
+                legendSource: 0,
+                ignoreCols: [],
+                ignoreRows: [],
+                showLabels: true,
+                showLegend: true,
+                seriesColors: [],
+                convertBlankTo: '0',
+                hideTable: false,
+                chartType: obj.chartType && obj.chartType(),
+
+                // Private Variables
+                labels: [],
+                legend: [],
+                data: []
+            }, i, item1, item2, categoryArr, datasetArr, chartJSON = {},
+            datasets = {}, dataObj, dataMap, labelMap, legendMap;
+
+            global.extend(opts, config);
+
+            dataObj = extractDataFromTable(data, opts);
+            dataMap = dataObj.data;
+
+            if (opts.major !== 'row') {
+                labelMap = dataObj.legendMap,
+                legendMap = dataObj.labelMap;
+            } else {
+                labelMap = dataObj.labelMap,
+                legendMap = dataObj.legendMap;
+            }
+
+            // chartAttributes should contain the configuration attributes for the chart
+            // e.g caption, xAxisName, yAxisName etc.
+            chartJSON.chart = global.extend({}, opts.chartAttributes);
+
+            if (dataObj.chartType === 'multi') {
+                chartJSON.categories = [{'category': []}];
+                chartJSON.dataset = [];
+
+                categoryArr = chartJSON.categories[0].category;
+                datasetArr = chartJSON.dataset;
+
+                i = 0;
+                for (item1 in dataMap) {
+
+                    if (opts.showLabels === true) {
+                        // If the user has provided custom labels then those should be
+                        // shown instead of the extracted labels.
+                        categoryArr.push(global.extend({
+                            label: (labelMap.labelObj[item1].indexOf(_blankString) != -1) ?
+                                '' : labelMap.labelObj[item1]
+                        },
+                        opts.labels[i]));
+                    } else {
+                        categoryArr.push({'label': ''});
+                    }
+                    i += 1;
+                    for (item2 in dataMap[item1]) {
+                        if (typeof datasets[item2] === 'undefined') {
+                            datasets[item2] = [];
+                        }
+                        datasets[item2].push({'value': dataMap[item1][item2]});
+                    }
+                }
+
+                i = 0;
+                for (item1 in datasets) {
+                    if (opts.showLegend === true) {
+                        // If the user has provided custom labels then those should be
+                        // shown instead of the extracted labels.
+                        datasetArr.push(global.extend({
+                            'seriesname': ((legendMap.labelObj[item1].indexOf(_blankString) !== -1) ?
+                                '' : legendMap.labelObj[item1]),
+                            'data': datasets[item1]
+                        }, opts.legend[i]));
+                    } else {
+                        datasetArr.push({
+                            'seriesname': '',
+                            'data': datasets[item1]
+                        });
+                    }
+                    i += 1;
+                }
+            } else if (dataObj.chartType === 'single') {
+                chartJSON.data = [];
+                datasetArr = chartJSON.data;
+
+                i = 0;
+                if (opts.showLabels) {
+                    for (item1 in dataMap) {
+                        for (item2 in dataMap[item1]) {
+                            datasetArr.push(global.extend({
+                                    label: ((labelMap.labelObj[item1].indexOf(_blankString) !== -1) ?
+                                        '' : labelMap.labelObj[item1]),
+                                    value: dataMap[item1][item2]
+                                },
+                                opts.labels[i])
+                            );
+
+                            i += 1;
+                        }
+                    }
+                } else {
+                    for (item1 in dataMap) {
+                        for (item2 in dataMap[item1]) {
+                            datasetArr.push({'value': dataMap[item1][item2]});
+                        }
+                    }
+                }
+            }
+
+            return {
+                data: global.core.transcodeData(chartJSON, 'JSON', 'XML'),
+                error: undefined
+            };
+        };
+
+    global.addDataHandler('HTMLTable', {
+        encode: function (data, obj, config) {
+            return createChartFromTable(data, obj, config);
+        },
+        decode: function (data, obj) {
+            /**
+             * @private
+             *
+             * @typedef {RuntimeException} Error-07101734
+             * @memberOf FusionCharts.debugger
+             * @group debugger-error
+             */
+            global.raiseError(obj, '07101734', 'run', '::HTMLTableDataHandler.decode()',
+                'FusionCharts HTMLTable data-handler only supports decoding of data.');
+            throw new Error('FeatureNotSupportedException()');
+        },
+        transportable: false
+    });
+}]);
+/**
+ * @module fusioncharts.jqueryplugin
+ * @private
+ * @requires fusioncharts.transcoder.htmltable
+ *
+ * @export fusioncharts.jqueryplugin.js
+ */
+FusionCharts.register('module', ['private', 'extensions.jQueryPlugin', function () {
+
+    var global = this,
+        win = global.window,
+        lib = global.hcLib,
+        doc = win.document,
+        jQ = win.jQuery,
+        renderFusionCharts,
+        captureAllFusionChartsEvents,
+        getChartObjectsFromSelection,
+        configureLinkedCharts,
+        math = win.Math,
+        mathMin = math.min,
+        isArray = lib.isArray,
+        realtimeCommandMap = {
+            feed: 'feedData',
+            setdata: 'setData',
+            setdataforid: 'setDataForId',
+            getdata: 'getData',
+            getdataforid: 'getDataForId',
+            clear: 'clearChart',
+            stop: 'stopUpdate',
+            start: 'restartUpdate'
+        },
+        optionsParser = {
+            feedData: function (options) {
+                if (typeof options === 'string') {
+                    return [options];
+                }
+                else if (typeof options === 'object' && options.stream) {
+                    return [options.stream];
+                }
+                else {
+                    return false;
+                }
+            },
+            getData: function (options) {
+                // index is passed in case of multivalue charts.
+                if (!isNaN(options)) {
+                    return [options];
+                }
+                else if (typeof options === 'object' && options.index) {
+                    return [options.index];
+                }
+                else {
+                    return [];
+                }
+            },
+            getDataForId: function (options) {
+                // index is passed in case of multivalue charts.
+                if (typeof options === 'string') {
+                    return [options];
+                }
+                else if (typeof options === 'object' && options.id) {
+                    return [options.id];
+                }
+                else {
+                    return [];
+                }
+            },
+            setData: function (options, value, label) {
+                var arr = [];
+                if (typeof options !== 'object') {
+                    arr = [options, value, label];
+                }
+                else {
+                    options.value && arr.push(options.value);
+                    options.label && arr.push(options.label);
+                }
+
+                return arr;
+            },
+            setDataForId: function (options, value, label) {
+                var arr = [];
+                if (typeof options === 'string' || typeof value === 'string' ||
+                        typeof label === 'string') {
+                    arr = [options, value, label];
+                }
+                else if (typeof options === 'object') {
+                    options.value && arr.push(options.value);
+                    options.label && arr.push(options.label);
+                }
+
+                return arr;
+            },
+            clearChart: function (options) {
+                return [options];
+            },
+            stopUpdate: function (options) {
+                return [options];
+            },
+            restartUpdate: function (options) {
+                return [options];
+            }
+        };
+
+    // Assign FusionCharts object to global jQuery object for easy use.
+    jQ.FusionCharts = global.core;
+
+    /**
+     * Used purely for rendering the FusionCharts.
+     * Acts as a common method that is invoked by all the APIs that create a
+     * FusionChart object
+     *
+     * @param {array} elemList is a list of all the HTML elements that
+     * are selected using the jQuery selectors
+     *
+     * @param {object} chartOptions is the options that are to be passed to
+     * the FusionCharts contructor.
+     */
+
+    renderFusionCharts = function (elemList, chartOptions) {
+        var i,
+            l,
+            cO,
+            chartObj,
+            scriptElement;
+
+        if (isArray(chartOptions) || chartOptions instanceof jQ) {
+            l = mathMin(elemList.length, chartOptions.length);
+        }
+        else {
+            l = elemList.length;
+        }
+
+        for (i = 0; i < l; i += 1) {
+
+            // One-to-one mapping with the HTML elements in case of
+            // multiple option objects.
+            if (isArray(chartOptions) || chartOptions instanceof jQ) {
+                cO = chartOptions[i];
+            } else {
+                cO = chartOptions;
+            }
+
+            // check if the element is appended to the window document or not.
+            if (elemList[i].parentNode) {
+                // Adding the renderAt option to the chartOptions tells the
+                // constructor where to render the FusionCharts object.
+                global.core.render(jQ.extend({}, cO, {
+                    renderAt: elemList[i]
+                }));
+            } else {
+                chartObj = new FusionCharts(jQ.extend({}, cO, {
+                    renderAt: elemList[i]
+                }));
+
+                if (!jQ.FusionCharts.delayedRender) {
+                    jQ.FusionCharts.delayedRender = {};
+                }
+                jQ.FusionCharts.delayedRender[chartObj.id] = elemList[i];
+
+                scriptElement = doc.createElement('script');
+                scriptElement.setAttribute('type', 'text/javascript');
+
+                if (/msie/i.test(win.navigator.userAgent) && !win.opera) {
+                    scriptElement.text = 'FusionCharts.items[\'' + chartObj.id + '\'].render();';
+                } else {
+                    scriptElement.appendChild(
+                        doc.createTextNode('FusionCharts.items[\'' + chartObj.id + '\'].render()')
+                    );
+                }
+                elemList[i].appendChild(scriptElement);
+            }
+        }
+        return elemList;
+    };
+
+    /**
+     *  Using jQuery's event model for attaching handlers to FusionCharts events.
+     *  This is achieved by listening to the FusionCharts "*" event and then
+     *  triggering a jQuery event on the associated DOM element.
+     */
+    captureAllFusionChartsEvents = function (event, args) {
+        var containerElement;
+
+        // Extending our event with the jQuery event model for proper
+        // delegation and bubbling.
+        jQ.extend(event, jQ.Event('fusioncharts' + event.eventType));
+
+        // Checking if there is an associated DOM object
+        if (event.sender && event.sender.options) {
+            containerElement = event.sender.options.containerElement ||
+                event.sender.options.containerElementId;
+
+            if (typeof containerElement === 'object') {
+                jQ(containerElement).trigger(event, args);
+            }
+            else if (jQ('#' + containerElement).length) {
+                jQ('#' + containerElement).trigger(event, args);
+            }
+            else {
+                jQ(doc).trigger(event, args);
+            }
+        } else {
+            // If there is no DOM object associated with the FusionCharts object
+            // then triggering the event on the document itself for any possible
+            // global handlers that might want to capture it.
+            jQ(doc).trigger(event, args);
+        }
+    };
+
+    global.addEventListener('*', captureAllFusionChartsEvents);
+
+    /**
+     * Used to select all the HTML object/embed elements that have been created
+     * using the FusionCharts constructor
+     *
+     * @param {jQuery} obj, the selection of elements that need to be processed.
+     *
+     */
+    getChartObjectsFromSelection = function (obj) {
+
+        // The HTML object/embed may be part of the current selection or a
+        // child of the current selection. Need to take both cases into account.
+        // @note If the FusionCharts object has not been rendered yet, e.g in
+        // case the container is not appended to the document, then 'find' for
+        // that element will NOT return the corresponding FusionCharts object.
+        return obj.filter(':FusionCharts').add(obj.find(':FusionCharts'));
+    };
+
+    /**
+     *  Used to configure the links at various levels in a linked chart.
+     *
+     *  @param {jQuery} chartObjects The FusionCharts objects for which the link
+     *  has to be configured.
+     *
+     *  @param {object} linkConfigObj contains the configuration details of the
+     *  linked chart like swfUrl, height, width etc.
+     *
+     *  @param {string} level contains the level at which the user wants to
+     *  configure the link.
+     *
+     */
+    configureLinkedCharts = function (chartObjects, linkConfigObj, level) {
+
+        if (typeof linkConfigObj === 'object') {
+            chartObjects.each(function () {
+                this.configureLink(linkConfigObj, level);
+            });
+        }
+    };
+
+    /**
+     * @id: jQuery.fn.insertFusionCharts
+     * @id: $.fn.insertFusionCharts
+     *
+     * @param {object} options contains the parameters that need to be passed
+     * to the FusionCharts constructor
+     *
+     * Inserts the FusionCharts objects in the HTML elements that are selected
+     * by the jQuery selector.
+     */
+    jQ.fn.insertFusionCharts = function (options) {
+        return renderFusionCharts(this, options);
+
+    };
+
+    /**
+     * @id: jQuery.fn.appendFusionCharts
+     * @id: $.fn.appendFusionCharts
+     *
+     * @param {object} options contains that parameters that need to be passed
+     * to the FusionCharts constructor
+     *
+     * Appends the FusionCharts objects immediately after the HTML elements
+     * that are selected by the jQuery selector.
+     */
+    jQ.fn.appendFusionCharts = function (options) {
+        options.insertMode = 'append';
+        return renderFusionCharts(this, options);
+    };
+
+    /**
+     * @id: jQuery.fn.prependFusionCharts
+     * @id: $.fn.prependFusionCharts
+     *
+     * @param {object} options contains the parameters that need to be passed
+     * to the FusionCharts constructor
+     *
+     *  Prepends the FusionCharts objects before the HTML elements that are
+     *  selected by the jQuery selector.
+     */
+    jQ.fn.prependFusionCharts = function (options) {
+        options.insertMode = 'prepend';
+        return renderFusionCharts(this, options);
+    };
+
+    /**
+     * @id: jQuery.fn.attrFusionCharts
+     * @id: $.fn.attrFusionCharts
+     *
+     * @param {object|string} attr, If this is a string then it contains
+     * the FusionCharts object's attribute that needs to be set or fetched.
+     * If it is an object then, it contains the attributes along with the
+     * corresponding values that need to be set on the FusionCharts object
+     *
+     * @param {string} attrVal, To be used if attr is a string. Contains the
+     * value that needs to be set for the attribute that attr corresponds to.
+     *
+     *  Used to set or get the attribute(s) of the FusionCharts object.
+     */
+    jQ.fn.attrFusionCharts = function (attr, attrVal) {
+
+        /**
+         * @ignore
+         * @todo Remove ignore
+         *
+         * @var {jQuery} chartsObjects stores the FusionCharts objects in
+         * the selected HTML elements.
+         * @var {object} transfer Holds all atttributes to be returned to the
+         * callee Function.
+         */
+        var transfer = [],
+            chartObjects = getChartObjectsFromSelection(this);
+
+        if (attrVal !== undefined) {
+            // Set the charts attribute attr with value attrVal.
+
+            chartObjects.each(function () {
+                this.FusionCharts.setChartAttribute(attr, attrVal);
+            });
+            return this;
+        }
+        if (typeof attr === 'object') {
+             // Set the charts attributes, in the passed object's keys with
+             // the corresponding values.
+
+            chartObjects.each(function () {
+                this.FusionCharts.setChartAttribute(attr);
+            });
+            return this;
+        }
+
+        // If both the above cases fail, user is trying to, in accordance with the
+        // jQuery paradigm, get the value of the arrtibute.
+        chartObjects.each(function () {
+            transfer.push(
+                this.FusionCharts.getChartAttribute(attr)
+            );
+        });
+        return transfer;
+    };
+
+    /**
+     * @id jQuery.fn.updateFusionCharts
+     * @id $.fn.updateFusionCharts
+     *
+     * @param {object} options Contains the new options that the FusionCharts
+     * objects need to update themselves with. Currently, using this interface
+     * the dataType, data, width, height, debugMode and swfUrl can be updated.
+     */
+    jQ.fn.updateFusionCharts = function (options) {
+
+        var filterOpts = {},
+            chartObjects = getChartObjectsFromSelection(this),
+            updateOptions = [
+                ['swfUrl', false],
+                ['type', false],
+                ['height', false],
+                ['width', false],
+                ['containerBackgroundColor', true],
+                ['containerBackgroundAlpha', true],
+                ['dataFormat', false],
+                ['dataSource', false]
+            ],
+            i,
+            l,
+            fcChart,
+            renderFlag,
+            optStr,
+            newChart;
+
+        for (i = 0, l = updateOptions.length; i < l; i += 1) {
+            optStr = updateOptions[i][0];
+            filterOpts.type = filterOpts.type || filterOpts.swfUrl;
+            if (options[optStr]) {
+                if (updateOptions[i][1]) {
+                    renderFlag = true;
+                }
+                filterOpts[optStr] = options[optStr];
+            }
+        }
+
+        chartObjects.each(function () {
+            // If height and width are given then resize the chart first.
+            fcChart = this.FusionCharts;
+            if (renderFlag) {
+                newChart = fcChart.clone(filterOpts);
+                newChart.render();
+                return;
+            }
+
+            if (filterOpts.dataSource !== undefined || filterOpts.dataFormat !== undefined) {
+                if (filterOpts.dataSource === undefined) {
+                    fcChart.setChartData(fcChart.args.dataSource, filterOpts.dataFormat);
+                } else if (filterOpts.dataFormat === undefined) {
+                    fcChart.setChartData(filterOpts.dataSource, fcChart.args.dataFormat);
+                } else {
+                    fcChart.setChartData(filterOpts.dataSource, filterOpts.dataFormat);
+                }
+            }
+            if (filterOpts.width !== undefined || filterOpts.height !== undefined) {
+                fcChart.resizeTo(filterOpts.width, filterOpts.height);
+            }
+            if (filterOpts.type) {
+                fcChart.chartType(filterOpts.type);
+            }
+        });
+
+        return this;
+    };
+
+    /**
+     *  @id: jQuery.fn.cloneFusionCharts
+     *  @id: $.fn.cloneFusionCharts
+     *
+     *  @param {object} options The options object that takes the additional
+     *  parameters to be passed while cloning the FusionCharts object.
+     *
+     *  @param {function} callback The callback function that has to be called
+     *  once the FusionCharts objects have been cloned. This function will take
+     *  the new clone objects as parameter.
+     *
+     */
+    jQ.fn.cloneFusionCharts = function (callback, options) {
+
+        var transfer,
+            temp,
+            chartObjects;
+
+        // Check if the options parameter, which is not mandatory, has been
+        // passed or not. If not, that means that options is the callback function.
+        if (typeof callback !== 'function' && typeof options === 'function') {
+            temp = callback;
+            callback = options;
+            options = temp;
+        }
+
+        transfer = [];
+        chartObjects = getChartObjectsFromSelection(this);
+
+        chartObjects.each(function () {
+            transfer.push(this.FusionCharts.clone(options, {}, true));
+        });
+
+        callback.call(jQ(transfer), transfer);
+
+        return this;
+    };
+
+    /**
+     *  @id: jQuery.fn.disposeFusionCharts
+     *  @id: $.fn.disposeFusionCharts
+     *
+     */
+    jQ.fn.disposeFusionCharts = function () {
+
+        var chartObjects = getChartObjectsFromSelection(this);
+
+        chartObjects.each(function () {
+            // Execute dispose on charts.
+            this.FusionCharts.dispose();
+
+            // Remove identifier reference variable
+            delete this.FusionCharts;
+
+            // cleanup any static objects pertaining to FusionCharts.
+            if (this._fcDrillDownLevel === 0) {
+                delete this._fcDrillDownLevel;
+            }
+        });
+
+        return this;
+    };
+
+    /**
+     * @id jQuery.fn.covertToFusionCharts
+     * @id $.fn.convertToFusionCharts
+     *
+     * @param {object} chartOpts Configuration options to generate FusionCharts.
+     * See documentation to get the list.
+     *
+     * @param {object} convertOpts Configuration options to convert the table
+     * into a FusionCharts object.
+     * See documentation to get the list.
+     *
+     */
+    jQ.fn.convertToFusionCharts = function (chartOpts, convertOpts) {
+
+        var transferObj = [];
+
+        if (typeof chartOpts.dataConfiguration === 'undefined') {
+            chartOpts.dataConfiguration = {};
+        }
+
+        jQ.extend(true, chartOpts.dataConfiguration, convertOpts);
+
+        if (!chartOpts.dataSource) {
+            chartOpts.dataSource = this.get(0);
+        }
+
+        if (!chartOpts.renderAt) {
+            this.each(function () {
+                transferObj.push(jQ('
')
+                    .insertBefore(this)
+                    .insertFusionCharts(chartOpts).get(0)
+                );
+            });
+        }
+        else {
+            if (typeof chartOpts.renderAt === 'string') {
+                transferObj.push(jQ('#' + chartOpts.renderAt)
+                    .insertFusionCharts(chartOpts).get(0)
+                );
+            }
+            else if (typeof chartOpts.renderAt === 'object') {
+                transferObj.push(jQ(chartOpts.renderAt)
+                    .insertFusionCharts(chartOpts).get(0)
+                );
+            }
+        }
+
+        return jQ(transferObj);
+    };
+
+    /**
+     * @id jQuery.fn.drillDownFusionChartsTo
+     * @id $.fn.drillDownFusionChartsTo
+     *
+     * Used to set multi-level configurations of linked FusionCharts objects.
+     * The levels are iterated depending on the number of configuration objects
+     * in a single jQuery chain.
+     *
+     * To set the configuration at a specific level please refer to docs.
+     */
+    jQ.fn.drillDownFusionChartsTo = function () {
+        var chartObjects = getChartObjectsFromSelection(this),
+            j,
+            len,
+            i,
+            l,
+            configureOpts;
+
+
+        // hack to support chaining of multiple drillDowns in a single chain
+        if (typeof this._fcDrillDownLevel === 'undefined') {
+            this._fcDrillDownLevel = 0;
+        }
+
+        for (j = 0, len = arguments.length; j < len; j += 1) {
+            configureOpts = arguments[j];
+
+            if (isArray(configureOpts)) {
+                for (i = 0, l = configureOpts.length; i < l; i += 1) {
+                    configureLinkedCharts(chartObjects, configureOpts[i], this._fcDrillDownLevel);
+                    this._fcDrillDownLevel += 1;
+                }
+            } else {
+                configureLinkedCharts(chartObjects, configureOpts, this._fcDrillDownLevel);
+                this._fcDrillDownLevel += 1;
+            }
+        }
+        return this;
+    };
+
+    /**
+     * @id jQuery.fn.streamFusionChartsData
+     * @id $.fn.streamFusionChartsData
+     *
+     * @param {string} command. Contains the type of operation to be performed on
+     * the realtime charts. If not provided, by default the command would be 'feed'
+     * that invokes the feedData method of the chart and passes the options to it.
+     *
+     * @param {object} options. Contains the options that has to be parsed (if it is a js object)
+     * and passed to the chart method (corresponding to command).
+     * If not an object, it is passed as is to the chart method.
+     *
+     * @param {object} value. To make the API morph the data setter methods (setData, setDataForId),
+     * it can also be passed the same parameters as the setter functions.
+     *
+     * @param {object} label. To make the API morph the data setter methods (setData, setDataForId),
+     * it can also be passed the same parameters as the setter functions.
+    **/
+
+    jQ.fn.streamFusionChartsData = function (command, options, value, label) {
+
+        var chartObjects = getChartObjectsFromSelection(this),
+            transfer = [],
+            fcChart,
+            method,
+            params;
+
+        // Convert the command to lower case and fetch the proper chart method name.
+        method = realtimeCommandMap[command && command.toLowerCase()];
+
+        // Check if the command provided is valid or not.
+        if (method === undefined) {
+            // this means the command is not a getter. which in turn means that
+            // the command is a data stream string and has to be handled accordingly.
+            if (arguments.length === 1) {
+                params = [command];
+                method = realtimeCommandMap.feed;
+            }
+            else {
+                return this;
+            }
+        }
+        else if (arguments.length === 1) {
+            // command is to invoke a method without any parameters..
+            params = [];
+        }
+        else {
+            // optionsParser returns an array of parameters to be passed to the
+            // chart method.
+            params = optionsParser[method](options, value, label);
+        }
+
+        if (method === 'getData' || method === 'getDataForId') {
+            chartObjects.each(function () {
+                fcChart = this.FusionCharts;
+                if (typeof fcChart[method] === 'function') {
+                    transfer.push(fcChart[method].apply(fcChart, params));
+                }
+            });
+            return transfer;
+        }
+        else {
+            chartObjects.each(function () {
+                fcChart = this.FusionCharts;
+                if (typeof fcChart[method] === 'function') {
+                    fcChart[method].apply(fcChart, params);
+                }
+            });
+            return this;
+        }
+    };
+
+    jQ.extend(jQ.expr[':'], {
+        /**
+         *  Extending the jQuery selector to select all object/embed elements that
+         *  have been created using the FusionCharts constructor i.e that are an
+         *  instance of FusionCharts.
+         *
+         *  @param {object} obj, Is the HTML element that is currently being
+         *  checked.
+         */
+        FusionCharts: function (obj) {
+            return (obj.FusionCharts instanceof global.core);
+        }
+    });
+
+}]);
+
+}));
diff --git a/fusioncharts.js b/fusioncharts.js
new file mode 100644
index 0000000..f66f5f7
--- /dev/null
+++ b/fusioncharts.js
@@ -0,0 +1,89297 @@
+/*
+ FusionCharts JavaScript Library
+ Copyright FusionCharts Technologies LLP
+ License Information at 
+*/
+
+(function (env, factory) {
+    if (typeof module === 'object' && module.exports) {
+        module.exports = env.document ?
+            factory(env) : function(win) {
+                if (!win.document) {
+                    throw new Error("Window with document not present");
+                }
+                return factory(win, true);
+            };
+    } else {
+        env.FusionCharts = factory(env, true);
+    }
+}(typeof window !== 'undefined' ? window : this, function (_window, windowExists) {
+
+
+/**
+ * FusionCharts Core Framework
+ * This module contains the basic routines required by subsequent modules to
+ * extend/scale or add functionality to the FusionCharts object.
+ * @private
+ *
+ * @module fusioncharts.constructor
+ */
+ /* global FusionCharts: true, _window: true, window: false */
+
+if (typeof _window === 'undefined' && typeof window === 'object') {
+    _window = window;
+}
+
+/* exported FusionCharts */
+var FusionCharts = (function (_window) {
+
+    // In case FusionCharts object already exists, we skip this function.
+    if (_window.FusionCharts && _window.FusionCharts.version) {
+        return _window.FusionCharts;
+    }
+
+    var win = _window,
+        doc = win.document,
+        nav = win.navigator,
+
+        // The global variable would store all private methods and properties
+        // available to each module.
+        global = {
+            window: win
+        },
+
+        /**
+         * ~var {object} modules For maintaining module information.
+         */
+        modules = global.modules = {},
+        interpreters = global.interpreters = {},
+
+        objectToStringFn = Object.prototype.toString,
+
+        isIE = /msie/i.test(nav.userAgent) && !win.opera,
+        hasLoaded = /loaded|complete/,
+
+        mapLegacyDiscovered = false, // flag to keep track of legacy map script
+        notifyLibraryInit = function () {// function to notify init of library
+            var wasReady = global.ready;
+            global.ready = true;
+            if (global.raiseEvent) {
+                global.readyNotified = true;
+                /**
+                 * This event is fired when the FusionCharts library is ready to be used. By the time this event is
+                 * raised the browser's `DOM` is ready to be interacted with, which corresponds to the
+                 * `DOMContentLoaded` event of browsers. In older browsers, where `DOMContentLoaded` is not fired, the
+                 * `ready` event corresponds to the `load` event of the page. In case FusionCharts library is included
+                 * in the page when the `DOMContentLoaded` event is already fired (i.e. script is loaded asyncronously
+                 * using AJAX or by using script deferring methods,) the `ready` event is still fired to ensure
+                 * integrity of all the listeners.
+                 *
+                 * In many ways the nature of this event is similar to `jQuery(document).ready` of jQuery library and
+                 * `Ext.onReady` function of ExtJS library. One should interact with the FusionCharts framework (i.e.
+                 * create new charts, set options, etc) only after this event has been fired. This event also helps you
+                 * to neatly write your codes in separate script files and in page `` thus keeping scripts from
+                 * being part of your page ``.
+                 *
+                 * An alternate (and shorthand) to subscribing the `ready` event is to use the
+                 * {@link FusionCharts.ready} function. One advantage that {@link FusionCharts.ready} function has over
+                 * this `ready` event is that the `ready` event is fired only once during the life-cycle of a page while
+                 * functions passed  to the {@link FusionCharts.ready} function is executed even when attached after the
+                 * `ready` event has been fired.
+                 *
+                 * > This is a framework level event and as such can be only listened via
+                 * > {@link FusionCharts.addEventLsitener} on the `FusionCharts` class alone. It will not be fired if
+                 * > subscribed from individual chart instances.
+                 *
+                 * @event FusionCharts.ready
+                 * @group framework
+                 * @since  3.4.0
+                 *
+                 * @param {array} version - The FusionCharts framework version is returned in form of an array. This is
+                 * equivalent to the array {@link FusionCharts.version}
+                 * @param {boolean} now - This indicates whether this event was fired at the instant of
+                 * `window.ondomcontentloaded` event (or `window.onload` of older browsers) or whether the window was
+                 * already loaded and this event is fired just to maintain integrity.
+                 *
+                 * @example
+                 * 
+                 * 
+                 * 
+                 * 
+                 * 
+                 *     
Chart loads here...

+                 * 
+                 * 
+                 */
+                global.raiseEvent('ready', {
+                    version: global.core.version,
+                    now: !wasReady
+                }, global.core);
+            }
+            global.readyNow = !wasReady;
+        },
+
+        FUSIONCHARTS,
+
+        // recursive function that copies one object into another.
+        merge = function (obj1, obj2) {
+            var item, str;
+            //check whether obj2 is an array
+            //if array then iterate through it's index
+            //**** MOOTOOLS precution
+            if (obj2 instanceof Array) {
+                for (item = 0; item < obj2.length; item += 1) {
+                    if (typeof obj2[item] !== 'object') {
+                        obj1[item] = obj2[item];
+                    } else {
+                        if (typeof obj1[item] !== 'object') {
+                            obj1[item] = obj2[item] instanceof Array ? [] : {};
+                        }
+                        merge(obj1[item], obj2[item]);
+                    }
+                }
+            }
+            else {
+                for (item in obj2) {
+                    if (typeof obj2[item] === 'object') {
+                        str = objectToStringFn.call(obj2[item]);
+                        if (str === '[object Object]') {
+                            if (typeof obj1[item] !== 'object') {
+                                obj1[item] = {};
+                            }
+                            merge(obj1[item], obj2[item]);
+                        }
+                        else if (str === '[object Array]') {
+                            if (!(obj1[item] instanceof Array)) {
+                                obj1[item] = [];
+                            }
+                            merge(obj1[item], obj2[item]);
+                        }
+                        else {
+                            obj1[item] = obj2[item];
+                        }
+                    }
+                    else {
+                        obj1[item] = obj2[item];
+                    }
+                }
+            }
+            return obj1;
+        };
+
+    /**
+     * This method, when added to the prototype of an object,
+     * allows shallow or deep extension of the object with another
+     * object.
+     */
+    global.extend = function (sink, source, proto, deep) {
+        var item;
+        // When 'proto' is marked as true, the methods and properties
+        // of source is not added to the prototype of the sink.
+        if (proto && sink.prototype) {
+            sink = sink.prototype;
+        }
+
+        // If deep extend is specified, then we use the deep copy function
+        // 'merge'
+        if (deep === true) {
+            merge(sink, source);
+        }
+        // Copy all methods and properties of the object passed in parameter
+        // to the object to which this function is attached.
+        else {
+            for (item in source) {
+                sink[item] = source[item];
+            }
+        }
+
+        return sink;
+    };
+
+    // Function that auto-generates a unique id.
+    global.uniqueId = function () {
+        return 'chartobject-' + (global.uniqueId.lastId += 1);
+    };
+    global.uniqueId.lastId = 0;
+
+    // Define the policy to create default parameters for the swfObject.
+    // Values are in format [sourceOption, defaultValue]
+    // This helps in building the initial FusionCharts object when new instances
+    // are created from user parameters.
+    global.policies = {
+
+        /**
+         * Contains all the customizable options that are used by the library internally and has nothing to do with
+         * renderer attributes, vars or parameters.
+         * @memberOf FusionCharts
+         * @type {object}
+         * @private
+         * @enum
+         */
+        options: {
+            chartTypeSourcePath: ['typeSourcePath', ''],
+            /** @ignore **/
+            product: ['product', 'v3'],
+            /**
+             * Default insert mode of adding a FusionCharts to a container
+             */
+            insertMode: ['insertMode', 'replace'],
+            safeMode: ['safeMode', true],
+            /**
+             * Default parameters for overlay button
+             */
+            overlayButton: ['overlayButton', undefined],
+
+            containerBackgroundColor: ['containerBackgroundColor', '#ffffff'],
+            containerBackgroundOpacity: ['containerBackgroundOpacity', 1],
+            containerClassName: ['containerClassName', 'fusioncharts-container'],
+
+            /**
+             * In case you want to set a default chartType for all new instances of FusionCharts
+             */
+            chartType: ['type', undefined],
+
+            /**
+             * Default styling for chart messages
+             */
+            baseChartMessageFont: ['baseChartMessageFont', 'Verdana,sans'],
+            baseChartMessageFontSize: ['baseChartMessageFontSize', '10'],
+            baseChartMessageColor: ['baseChartMessageColor', '#666666'],
+
+            /**
+             * Default position for chart messages image
+             */
+            baseChartMessageImageHAlign: ['baseChartMessageImageHAlign', 'middle'],
+            baseChartMessageImageVAlign: ['baseChartMessageImageVAlign', 'middle'],
+            baseChartMessageImageAlpha: ['baseChartMessageImageAlpha', 100],
+            baseChartMessageImageScale: ['baseChartMessageImageScale', 100],
+
+            /**
+             * Default message for chart (data related)
+             */
+            dataLoadStartMessage: ['dataLoadStartMessage', 'Retrieving data. Please wait.'],
+            dataLoadErrorMessage: ['dataLoadErrorMessage', 'Error in loading data.'],
+            dataInvalidMessage: ['dataInvalidMessage', 'Invalid data.'],
+            dataEmptyMessage: ['dataEmptyMessage', 'No data to display.'],
+
+            /**
+             * Default message for chart (chart related)
+             */
+            typeNotSupportedMessage: ['typeNotSupportedMessage', 'Chart type not supported.'],
+            browserNotSupportedMessage: ['browserNotSupportedMessage', 'This browser is not supported.'],
+            loadMessage: ['loadMessage', 'Loading chart. Please wait.'],
+            renderErrorMessage: ['renderErrorMessage', 'Unable to render chart.']
+        },
+        /**
+         * ~var {object} attributes Contains configurations pertaining to the
+         * host (browser) environment.
+         */
+        attributes: {
+            lang: ['lang', 'EN'],
+            id: ['id', undefined]
+        },
+
+        /**
+         * ~var {array} width configuration for width of the chart.
+         * ~var {array} height configuration for height of the chart.
+         * ~var {array} src specifies chart swf url
+         */
+        width: ['width', '400'],
+        height: ['height', '300'],
+        src: ['swfUrl', '']
+    };
+
+    // Specifies the order in which the parameters of the new
+    // FusionCharts objects are interpreted and converted to options object.
+    interpreters.stat = ['swfUrl', 'id', 'width', 'height',
+            'debugMode', 'registerWithJS', 'backgroundColor', 'scaleMode',
+            'lang', 'detectFlashVersion', 'autoInstallRedirect'];
+
+    /**
+     * Allows the core to process an arguments object based on a set of policies
+     * and construct an object out of it that is mapped exactly as respective
+     * parameter policy defines. In other words, it uses an object and
+     * creates another object or updates another object with values from the
+     * original arguments object in a particular hierarchy and name that a set
+     * of rules (policies) define.
+     */
+    global.parsePolicies = function (obj, policies, options) {
+        var prop, policy, value;
+
+        // Iterate through the data policy and correspondingly create the
+        // three stacks of parameters, attributes and flashVars
+        for (policy in policies) {
+
+            // Set just the policy object in case of single-level policy.
+            if (global.policies[policy] instanceof Array) {
+                value = options[policies[policy][0]];
+                obj[policy] = value === undefined ? policies[policy][1] : value;
+
+            } else {
+
+                // Define objects that would hold parameters for swfobject. Also
+                // populate with variables from the parameters
+                if (typeof obj[policy] !== 'object') {
+                    obj[policy] = {};
+                }
+
+                // Set every sub-object for two-level policy
+                for (prop in policies[policy]) {
+                    value = options[policies[policy][prop][0]];
+                    obj[policy][prop] = value === undefined ?
+                    policies[policy][prop][1] : value;
+                }
+            }
+        }
+    };
+
+    /**
+     * Parse commands (command interpretor) based on a specified interpreter
+     * structure
+     */
+    global.parseCommands = function (obj, interpreter, args) {
+        var i,
+            l;
+
+        if (typeof interpreter === 'string') {
+            interpreter = interpreters[interpreter] || [];
+        }
+
+        // Iterate through the arguments template and add the keys to the
+        // options object while fetching corresponding values from arguments
+        // array.
+        for (i = 0, l = interpreter.length; i < l; i++) {
+            obj[interpreter[i]] = args[i];
+        }
+
+        return obj;
+    };
+
+    /**
+     * Different types of extension registrations
+     */
+    global.registrars = {
+        'module': function () {
+            return global.core.apply(global.core, arguments);
+        }
+    };
+
+    /**
+     * Create new instances of charts, gauges and maps using this function.
+     *
+     * The preferred way to draw charts, gauges and maps using FusionCharts is to pass the chart configurations and data
+     * to this constructor and call `render()` on the returned instance. You can provide all the properties, data and
+     * event bindings of charts through the parameters passed to this function.
+     *
+     * You can call methods of the {@link FusionCharts} class on the returned instance. For all practical purposes, this
+     * is the first step to creating a chart, gauges and maps using FusionCharts.
+     *
+     * __Accessing existing charts using `FusionCharts()` constructor:__
+     *
+     * The `FusionCharts` function has a dual behavior - other than creating new charts, it can also be used to access
+     * already created charts. This is done by dropping the `new` operator and passing only the chart `id` as a
+     * parameter. For example, `var salesChart = FusionCharts('sales-chart');` will return the instance of the chart
+     * with the `id` "sales-chart". The previous code snippet is equivalent to
+     * `var salesChart = FusionCharts.items['sales-chart'];`. Refer to {@link FusionCharts.items} to know more.
+     *
+     * @constructor
+     * @global
+     *
+     * @param {object} options - While creating a new instance of FusionCharts, you can pass
+     * an `options` object with all configuration parameters for that instance. All configurations passed through this
+     * object are referred to as "construction parameters". Through these parameters, you can customize the look and
+     * feel of a chart, pass data to the chart, configure its dimensions and bind to events.
+     *
+     * Each of this object's properties correspond to a configuration option.
+     *
+     * @param {!string=} [options.type] - Provide the name of the chart type to be rendered. Full list of charts is
+     * available at {@tutorial setup-list-of-charts}.
+     *
+     * This parameter controls what chart will be rendered. The data passed to the chart has to be compatible with the
+     * chart type specified here.
+     *
+     * Alternatively, you can also call {@link FusionCharts#chartType} on the chart instance to provide the chart type.
+     *
+     * @param {!string=} [options.id] - This name is used to refer to the current instance after the
+     * chart has been created. The chart instance is available under this name in {@link FusionCharts.items}. If no `id`
+     * is provided, FusionCharts automatically generates an `id` for each chart.
+     *
+     * @param {numeric=|percent=} [options.width="400"] - Set the width in pixels or percent such as `640` or
+     * `'50%'`. If width is in pixels, there is no need to provide the `px` unit suffix. You can call
+     * {@link FusionCharts#resizeTo} function on the chart instance to set the width later on.
+     *
+     * @param {numeric=|percent=} [options.height="300"] - Set the height in pixels or percent such as `640` or
+     * `'50%'`. If height is in pixels, there is no need to provide the `px` unit suffix. You can call
+     * {@link FusionCharts#resizeTo} function on the chart instance to set the height later on.
+     *
+     * @param {string=|DOMElement=} [options.renderAt] - A chart needs reference to a DOM element on the page where
+     * it will be rendered. You can provide the HTML ID of the element as a string to this option, or you can pass a
+     * reference of the DOMElement itself where the chart needs to be rendered.
+     *
+     * For example, if you have a DOMElement like `
`, you can provide
+     * the value of the `div`'s `id` attribute to this option as a string. Alternatively, you can pass direct reference
+     * to the DOMElement like: `renderAt: document.getElementByClassName("chart-1")`.
+     *
+     * Instead of providing the DOMElement here, it can also be passed as the first parameter to the
+     * {@link FusionCharts.render} function. Setting the DOMElement in {@link FusionCharts.render} function overrides
+     * the value set here.
+     *
+     * @param {FusionCharts~dataFormats=} [options.dataFormat] - This is the name of the format of data passed to the
+     * `dataSource` option below. Currently, FusionCharts accepts only JSON and XML data. The value for this option is
+     * one of the formats specified in {@link FusionCharts~dataFormats}.
+     *
+     * @param {string=|object=} [options.dataSource] - Provide the source of data and configuration of the chart.
+     * FusionCharts accepts data in the formats specified in {@link FusionCharts~dataFormats}.
+     *
+     * This is the preferred way to set data and configuration of the chart. The data and configuration can also be
+     * updated or set using the functions {@link FusionCharts#setChartData} and {@link FusionCharts#setChartDataUrl}.
+     *
+     * @param {object=} [options.events] - You can bind multiple events to this particular chart instance through
+     * this option. You need to pass an object to this option, where each key is an event name fired by FusionCharts and
+     * value for that key is a callback in the format of {@link FusionCharts~eventListener}.
+     *
+     * To bind multiple charts to the same event, you need to use {@link FusionCharts#addEventListener} function
+     * instead.
+     *
+     * @param {object=} [options.link] - Provide LinkedCharts configuration. See {@link FusionCharts#configureLink}
+     * for details.
+     *
+     * @param {boolean=} [options.showDataLoadingMessage=false] - FusionCharts shows a message while it is retrieving
+     * data from a `url` provided as `dataSource`. While displaying the message the chart is grayed out and interaction
+     * on it is blocked. This can be prevented by setting this option to `false`.
+     *
+     * @param {boolean=} [options.showChartLoadingMessage=true] - Shows `Loading chart...` message in `renderAt`
+     * container if the chart needs to load additional resource/JS files. This can be turned off by setting this option
+     * to `false`.
+     *
+     * @param {string=} [options.baseChartMessageFont='Verdana'] - Allows to set the common custom font face for all
+     * chart messages.
+     *
+     * @param {string=} [options.baseChartMessageFontSize='10'] - Allows to set the common custom font size for all
+     * chart messages.
+     *
+     * @param {hexcolor=} [options.baseChartMessageColor='#666666'] - Allows to set the common custom font color for
+     * all chart messages.
+     *
+     * @param {string=} ['baseChartMessageImageHAlign'='middle'] - Allows to set the common custom horizontal
+     * alignment for all image as chart messages.
+     *
+     * @param {string=} ['baseChartMessageImageVAlign'='middle'] - Allows to set the common custom vertical
+     * alignment for all image as chart messages.
+     *
+     * @param {string=} ['baseChartMessageImageAlpha'='100'] - Allows to set the common custom alpha
+     * for all image as chart messages.
+     *
+     * @param {string=} ['baseChartMessageImageScale'='100'] - Allows to set the common custom scaling
+     * for all image as chart messages.
+     *
+     * @param {string=} [options.dataLoadStartMessage='Retrieving data. Please wait.'] - Allows to set the message to
+     * be displayed before the chart data begins loading. Additional properties like the font face, size, and color can
+     * be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont,
+     * dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are
+     * used.
+     *
+     * @param {string=} [options.dataLoadErrorMessage='Error in loading data.'] - Allows to set the message to be
+     * displayed when there is an error loading the chart data. Additional properties like the font face, size, and
+     * color can be set by suffixing the property name with the corresponding message key, e.g.
+     * dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not
+     * specified, base cosmetics are used.
+     *
+     * @param {string=} [options.dataInvalidMessage='Invalid data.'] - Allows to set the message to be displayed when
+     * the data loaded for the chart is invalid. Additional properties like the font face, size, and color can be
+     * set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont,
+     * dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are
+     * used.
+     *
+     * @param {string=} [options.dataEmptyMessage='No data to display.'] - Allows to set the message to be displayed if
+     * data loaded for the chart is empty. Additional properties like the font face, size, and color can be
+     * set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont,
+     * dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are
+     * used.
+     *
+     * @param {string=} [options.typeNotSupportedMessage='Chart type not supported.'] - Allows to set the message to be
+     * displayed if specified chart type is not supported. Additional properties like the font face, size, and color
+     * can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont,
+     * dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are
+     * used.
+     *
+     * @param {string=} [options.loadMessage='Loading chart. Please wait.'] - Allows to set the message to be displayed
+     * when the chart begins to load. Additional properties like the font face, size, and color can be set by
+     * suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont,
+     * dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are
+     * used.
+     *
+     * @param {string=} [options.renderErrorMessage='Unable to render chart.'] - Allows to set the message to be
+     * displayed if there was an error while rendering the chart. Additional properties like the font face, size, and
+     * color can be set by suffixing the property name with the corresponding message key, e.g.
+     * dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not
+     * specified, base cosmetics are used.
+     *
+     * @param {hexcolor=} [options.containerBackgroundColor="#ffffff"] - Sets the background color of the chart's
+     * container HTML DOM element. It is not same as `bgColor` chart attribute. To see this background color, a chart's
+     * own background alpha must be set to `0` by setting `bgAlpha` attribute to `"0"` in chart attributes.
+     *
+     * @param {opacity=} [options.containerBackgroundOpacity=1] - Sets the opacity of the container element. Useful
+     * if the chart has underlying HTML elements or background image that needs to be made visible. If opacity is
+     * reduced, you need to configure the chart itself to be transparent by setting the `bgAlpha` chart attribute.
+     *
+     * @param {string=} [options.containerClassName] - Sets the CSS class that will be set on the container DOM element
+     * of the rendered chart. Default is `fusioncharts-container`.
+     *
+     * @example
+     * 
+     * 
+     * 
+     * 
+     * 
+     *     
FusionCharts will load here...

+     * 
+     * 
+     */
+    FUSIONCHARTS = function (options) {
+        // This point onwards, we must check whether this is being used as a
+        // constructor or not
+        if (!(this instanceof global.core)) {
+            // Allow private communication with modules. In case FusionCharts is
+            // not called as constructor and it is passed an array that is marked
+            // to do private communication, then share the global variable.
+            if (arguments.length === 1 &&
+                    options instanceof Array && options[0] === 'private') {
+                // Prevent overwriting and duplicate execution of modules.
+                if (modules[options[1]]) {
+                    return undefined;
+                }
+                modules[options[1]] = {};
+
+                // Check for module-specific information
+                if (options[3] instanceof Array) {
+                    global.core.version[options[1]] = options[3];
+                }
+
+                // Execute module function
+                if (typeof options[2] === 'function') {
+                    return options[2].call(global, modules[options[1]]);
+                }
+                else {
+                    return global;
+                }
+            }
+
+            // Allow using FusionCharts object to directly access its new items
+            if (arguments.length === 1 && typeof options === 'string') {
+                return global.core.items[options];
+            }
+            /**
+             * This error occurs when the `FusionCharts` constructor is called without the `new` keyword and also
+             * without passing a reference chart id as the parameter. In case you are rendering a new chart, ensure you
+             * do a `new FusionCharts({});` or in case you are using the constructor as a getter, ensure you pass the
+             * chart Id (string) as first parameter.
+             *
+             * @typedef {RuntimeException} Error-25081840
+             * @memberOf FusionCharts.debugger
+             * @group debugger-error
+             */
+            global.raiseError && global.raiseError(this, '25081840', 'run', '',
+                new SyntaxError('Use the "new" keyword while creating a new FusionCharts object'));
+        }
+
+        // Define a variable for iterative key in various loops and the
+        // object variable that stores the options.
+        var opts = {};
+
+        /**
+         * @var {object} __state maintains internal state related information.
+         * @private
+         */
+        this.__state = {};
+
+        // Check whether linear arguments are sent and convert it to object.
+        if (arguments.length === 1 && typeof arguments[0] === 'object') {
+            // If the above condition matches, then we can safely assume that
+            // the first parameter is the options object.
+            opts = arguments[0];
+        }
+        else {
+            // Parse command interpreter policies
+            global.parseCommands(opts, interpreters.stat, arguments);
+        }
+
+        // Incorporate the trailing object parameter as object-style
+        // parameter input overrides.
+        if (arguments.length > 1 && typeof arguments[arguments.length - 1] === 'object') {
+            delete opts[interpreters.stat[arguments.length - 1]];
+            global.extend(opts, arguments[arguments.length - 1]);
+        }
+
+        // Set autogenerated chart-id in case one is not specified
+        this.id = (typeof opts.id === 'undefined') ? this.id = global.uniqueId() : opts.id;
+
+        // Set dimension passed by user and subsequently validate the options.
+        // - Remove trailing 'px'
+        this.args = opts;
+
+        // If an item is created with same id, the previous item is disposed.
+        if (global.core.items[this.id] instanceof global.core) {
+            /**
+             * This error occurs when a new chart is created (instantiated) with the an `id` that has been already
+             * assigned to an existing chart. Change the chart Id or dispose the other chart with the duplicate id.
+             *
+             * @typedef {ParameterException} Error-06091847
+             * @memberOf FusionCharts.debugger
+             * @group debugger-error
+             */
+            global.raiseWarning(this, '06091847', 'param', '',
+                new Error('A FusionCharts object with the specified id \"' + this.id +
+                    '\" already exists. Renaming it to ' + (this.id = global.uniqueId())));
+        }
+
+        // Parse global policies.
+        global.parsePolicies(this, global.policies, opts);
+
+        // Copy chart id to attributes
+        this.attributes.id = this.id;
+
+        // Set initial dimension of charts
+        this.resizeTo && this.resizeTo(opts.width, opts.height, true);
+
+        // Set initial chart type of charts
+        this.chartType && this.chartType(opts.type || opts.swfUrl, true);
+
+        /**
+         * Whenever a new instance of {@link FusionCharts} is created (as in `new FusionCharts(...)`, this pre
+         * initialization event is raised. This event triggers a number of modules that needs to be setup on every
+         * instance of FusionCharts. One can listen to this event perform actions that, on similar grounds, requires
+         * to be setup upn initialization of each chart.
+         *
+         * Since this event is fired upon instantiating a new FusionCharts object, it is virtually impossible to listen
+         * to this event by adding event listener to that individual chart. That is because, by the time one's event
+         * listener is attached using {@link FusionCharts#addEventListener} on the subsequent lines post doing `new
+         * FusionCharts(...)`, this event would have been already fired. Thus, the alternate ways to listen to this
+         * event are:
+         *
+         * 1. Listen to FusionCharts global events using {@link FusionCharts.addEventListener} before even creating a
+         *    new instance. (The required instance can be identified by the `id` of the chart using
+         *    `eventObject.sender.id`.)
+         *
+         * 2. Pass the event listener as the FusionCharts constructor parameter itself.
+         *
+         * @event FusionCharts.beforeInitialize
+         * @group chart
+         *
+         * @example
+         * // Listening using global events
+         * FusionCharts.addEventListener('beforeInitialize', function (opts) {
+         *     // Prints id of the chart being rendered
+         *     console.log("Chart with id " + opts.sender.id + " is about to be initialized.");
+         *  });
+         *
+         * // Pass event listener in the FusionCharts constructor
+         * var mychart = new FusionCharts({
+         *     "type": "column2d",
+         *     "dataFormat": "json",
+         *     "dataSource": {
+         *          ...
+         *     },
+         *     // Attach event handlers
+         *     "events": {
+         *         // Attach to beforeInitialize
+         *         "beforeInitialize": function () {
+         *             console.log("Initializing mychart...");
+         *         }
+         *     }
+         * });
+         *
+         * @param {numeric|percent} height - Height of the chart in pixels or percentage.
+         * @param {numeric|percent} width - Width of the chart in pixels or percentage.
+         */
+        global.raiseEvent('beforeInitialize', opts, this);
+
+        // Add this object to the repository of objects within core object.
+        global.core.items[this.id] = this;
+
+        // Create alias for defaultOptions
+        global.core.defaultOptions = global.core.options;
+
+        /**
+         * Once a new instance of {@link FusionCharts} is created and is ready to be operated upon, this `initialized`
+         * event is fired. Note that initialization does not indicate that the chart has been rendered. It denotes that
+         * the JavaScript object instance of FusionCharts is created (as in `new FusionCharts(...)` done) and is now
+         * ready to be operated upon (like data being passed onto it, it being rendered, etc.)
+         *
+         * @event FusionCharts.initialized
+         * @group chart
+         *
+         * @param {numeric|percent} height - height of the chart in pixels or percentage .
+         * @param {numeric|percent} width - width of the chart in pixels or percentage .
+         *
+         * @example
+         * // Listening using global events
+         * FusionCharts.addEventListener('initialized', function (opts) {
+         *     // Prints id of the chart that has initialized
+         *     console.log("Chart with id " + opts.sender.id + " has been initialized.");
+         *  });
+         *
+         * // Pass event listener in the FusionCharts constructor
+         * var mychart = new FusionCharts({
+         *     "type": "column2d",
+         *     "dataFormat": "json",
+         *     "dataSource": {
+         *          ...
+         *     },
+         *     // Attach event handlers
+         *     "events": {
+         *         // Attach to beforeInitialize
+         *         "initialized": function () {
+         *             console.log("Initialized mychart...");
+         *         }
+         *     }
+         * });
+         */
+        global.raiseEvent('initialized', opts, this);
+
+        return this;
+    };
+
+    // Set FusionCharts as the primary core.
+    global.core = FUSIONCHARTS;
+
+    // Make the core extensible and reset the constructor of the object
+    // for maintaining correct prototype chain.
+    global.core.prototype = {};
+    // Reset constructor.
+    global.core.prototype.constructor = global.core;
+
+    global.extend(global.core, /** @lends FusionCharts */ {
+        id: 'FusionCharts',
+
+        /**
+         * Specifies the framework version of {@link FusionCharts}. In the format
+         * `[major, minor, revision, nature, build]`
+         * @type {array}
+         */
+        version: ['3', '12', '0'],
+
+        /**
+         * The reference to every new instance of FusionCharts is maintained in this object with the chart `ID` as the
+         * key. Upon {@link FusionCharts#dispose} of the instance, the key is removed from this. One can iterate through
+         * all instances of {@link FusionCharts} using this object.
+         *
+         * A short-hand approach to accessing a single chart by its `id` is to use {@link FusionCharts} function itself
+         * but without the `new` operator and by passing the chart id as the first parameter.
+         * @type {object}
+         *
+         * @group framework
+         *
+         * @example
+         * // Assuming a page has many instances of {@link FusionCharts}, but
+         * // none of them are rendered, we are going to iterate through all and
+         * // render them.
+         * for (var item in FusionCharts.items) {
+         *     FusionCharts.items[item].render();
+         * }
+         *
+         * @example
+         * // Alternate method to access the charts using FusionCharts function to retrieve the chart from its id.
+         * for (var item in FusionCharts.items) {
+         *     FusionCharts(item).render();
+         * }
+         */
+        items: {},
+
+        // Add an object to store options
+        options: {},
+
+        /**
+         * The function returns the `DOMElement` that is created inside chart container by FusionCharts. The returned
+         * element is the same as accessing the {@link FusionCharts#ref} property. Note that this is the ``
+         * element created by FusionCharts to render the chart. It is not the container element that was specified
+         * during rendering the chart as the `renderAt` parameter.
+         *
+         * @param {string} id - The ID of the chart, whose `DOMElement` is to be referenced.
+         *
+         * @group framework
+         * @since 3.1.1
+         * @deprecated 3.2.0 - This method has been deprecated as direct access to `DOMElement` of the chart has become
+         * redundant. {@link FusionCharts#ref} property can be used in the rare case where such access to the
+         * `DOMElement` of a chart is required.
+         *
+         * @returns {DOMElement}
+         *
+         * @example
+         * // Iterate on all charts rendered on a page and move them to a common location
+         * var sidebar = document.getElementById('sidebar-html-div'), // assuming that your common container is this
+         *     chart;
+         *
+         * for (chart in FusionCharts.items) {
+         *     sidebar.appendChild(FusionCharts.getObjectReference(chart).parentNode);
+         * }
+         *
+         * // The above can be done without using this deprecated getObjectReference method.
+         * for (chart in FusionCharts.items) {
+         *     chart = FusionCharts.items[chart];
+         *     chart.ref && sidebar.appendChild(chart.ref.parentNode);
+         * }
+         */
+        getObjectReference: function (id) {
+            return global.core.items[id].ref;
+        },
+
+        /**
+         * Extend FusionCharts functionalities by adding modules and other items.
+         * @private
+         *
+         * @param {string} what - The type of extension that can be done. The possible values can be `"module"`,
+         * `"theme"`, etc.
+         * @param {...*} args - Depending upon what you want to register, supply the relevant registration items.
+         */
+        register: function (what) {
+            return global.registrars[(what = (what && what.toString && what.toString().toLowerCase()))] &&
+                global.registrars[what].apply(global.core, Array.prototype.slice.call(arguments, 1));
+        },
+
+        /**
+         * Get the definations of previously registered components
+         * @private
+         *
+         * @param {string} what - The type of extension that can be done. The possible values can be `"component"`,
+         * `"theme"`, etc.
+         * @param {...*} args - Depending upon what you want to retirvr, supply the relevant names of sub-items.
+         * @todo change the defination of get so that user can't do registration using this
+         */
+        get: function (what) {
+            return global.registrars[(what = (what && what.toString && what.toString().toLowerCase()))] &&
+                global.registrars[what].apply(global.core, Array.prototype.slice.call(arguments, 1));
+        }
+
+    });
+
+    // Expose the core to the global scope.
+    win.FusionCharts = global.core;
+
+    // Check whether legacy FusionMaps already exists at this point in execution
+    // time. If yes, then we need to perform routines to assimilate it.
+    if (win.FusionMaps && win.FusionMaps.legacy) {
+        global.core(['private', 'modules.core.geo',
+            win.FusionMaps.legacy, win.FusionMaps.version]);
+        mapLegacyDiscovered = true;
+    }
+    // If FusionMaps legacy was not discovered, we give it another shot after
+    // the page has loaded.
+    if (!(hasLoaded.test(doc.readyState) || doc.loaded)) {
+        (function () {
+
+            var _timer,
+                script,
+                done;
+
+            function init() {
+                /* jshint noarg: false */
+                // quit if this function has already been called
+                if (done){return;}
+
+                // flag this function so we don't do the same thing twice
+                done = true;
+
+                // kill the timer
+                if (_timer){clearTimeout(_timer);}
+
+                if (!mapLegacyDiscovered) {
+                    if (win.FusionMaps && win.FusionMaps.legacy) {
+                        global.core(['private', 'modules.core.geo',
+                            win.FusionMaps.legacy, win.FusionMaps.version]);
+                    }
+                    win.FusionMaps = global.core;
+                }
+
+                // Notify that library is ready for consumption.
+                setTimeout(notifyLibraryInit, 1);
+            }
+
+            function checkInit () {
+                if (hasLoaded.test(doc.readyState)) {
+                    init(); // call the onload handler
+                }
+                else {
+                    _timer = setTimeout(checkInit, 10);
+                }
+            }
+
+            if (doc.addEventListener) {
+                doc.addEventListener('DOMContentLoaded', init, false);
+            }
+            else if (doc.attachEvent) {
+                win.attachEvent('onLoad', init);
+            }
+
+            if (isIE) {
+                try {
+                    if (win.location.protocol === 'https:') {
+                        doc.write('
+             * 
+             *
+             * 
+             * 
+             * 
+             * 
+             *     
+             *     

+             *     

+             *  
+             *  
+             */
+            outputTo: function (debuggerCallback) {
+                // Check whether the logger is a function or not. If it is a
+                // function, we set a reference to it to be used later as the
+                // logger function.
+                if (typeof debuggerCallback === 'function') {
+                    /**
+                     * The parameters passed on to the debugger callback function is in line with the value of
+                     * {@link FusionCharts.debugger~outputFormats} specified via {@link FusionCharts.debugger.outputTo}.
+                     * @callback FusionCharts.debugger~debuggerCallback
+                     *
+                     * @param {...*} outputFormatParameters - The parameters passed to the callback depend upon the
+                     * debugger output format set. The details regarding the different variants of parameter is at
+                     * {@link FusionCharts.debugger~outFormats}.
+                     */
+                    logger.outputTo = debuggerCallback;
+                }
+
+                // In case user sends 'null' as the value of the logger function,
+                // we can assume that user wants not to log any output.
+                else if (debuggerCallback === null) {
+                    global.core[DEBUGGER].enable(false);
+                    delete logger.outputTo;
+                }
+            },
+
+            /**
+             * The FusionCharts debugger is not enabled by default. This method allows us to enable the debugger and
+             * also optionally provide basic debugger configuration.
+             *
+             * The debugger works in conjunction with the browser's JavaScript console or any other special console-like
+             * implementation that you may have. To enable the debugger, call this function and pass a callback that
+             * outputs the message to the JavaScript console. The code would log the activities of every chart and the
+             * entire framework.
+             *
+             * ```
+             * FusionCharts['debugger'].enable(true, function (message) {
+             *     console.log(message);
+             * });
+             * ```
+             *
+             * If you have added this code right after including the `fusioncharts.js` script in a page that renders a
+             * single chart with id "myChart", your output would look somewhat like:
+             *
+             * ```
+             * #1 [FusionCharts] fired "ready" event.
+             * #2 [myChart] fired "beforeinitialize" event.
+             * #3 [myChart] fired "beforedataupdate" event.
+             * #4 [myChart] fired "dataupdated" event.
+             * #5 [myChart] fired "initialized" event.
+             * #6 [myChart] fired "beforerender" event.
+             * #7 [myChart] fired "internal.loaded" event.
+             * #8 [myChart] fired "internal.drawstart" event.
+             * #9 [myChart] fired "dataloaded" event.
+             * #10 [myChart] fired "internal.domelementcreated" event.
+             * #11 [myChart] fired "loaded" event.
+             * #12 [myChart] fired "drawcomplete" event.
+             * #13 [myChart] fired "rendercomplete" event.
+             * ```
+             *
+             * The output clearly shows that FusionCharts declared itself as `ready` and then the chart followed the
+             * routine of initialising itself, loading data, loading dependencies and then completing the rendering
+             * process. Had there been any error, it would have reflected in the output.
+             *
+             * > The debugger is not intended to be kept enabled on a production server since it has performance and
+             * > memory requirement overhead. It is meant for pre-production debugging only.
+             *
+             * @param {boolean} state - Specifies whether to enable logging of debug information.
+             *
+             * @param {FusionCharts.debugger~debuggerCallback=} [outputTo] - The function to which the debugger output
+             * will be passed on.
+             *
+             * @param {FusionCharts.debugger~outputFormats=} [outputFormat="text"] - Can be one of the accepted format
+             * names such as "text", "verbose", "event".
+             *
+             * @returns {boolean} The current 'enable' state of the debugger.
+             */
+            enable: function (state, outputTo, outputFormat) {
+
+                // Allow object to be sent as configuration parameter.
+                var config;
+                // In case the first parameter is object and the only parameter,
+                // we copy its contents to various linear parameters and save
+                // a copy of the object for later use.
+                if (typeof state === 'object' && arguments.length === 1) {
+                    config = state;
+                    state = config.state;
+                    outputTo = config.outputTo;
+                    outputFormat = config.outputFormat;
+                }
+
+                // In case user send in only one parameter and that too a
+                // function, we can assume that he wants to use it as a logger
+                // function and also enable logging.
+                if (typeof state === 'function') {
+                    if (typeof outputTo === 'string' && (arguments.length === 2 || config)) {
+                        outputFormat = outputTo;
+                    }
+                    outputTo = state;
+                    state = true;
+                }
+
+                // In case user sends in a valid parameter to change the current
+                // state of the debugger, we update the debugger state.
+                if (typeof state === 'boolean' && state !== logger.enabled) {
+                    global.core[(logger.enabled = state) ? 'addEventListener'
+                        : 'removeEventListener']('*', logger.outputHandler);
+                }
+
+                // If user sends in a parameter for the logger parameter, we
+                // set it to the logger function reference.
+                if (typeof outputTo === 'function') {
+                    logger.outputTo = outputTo;
+                }
+
+                // Set output format if needed.
+                global.core[DEBUGGER].outputFormat(outputFormat);
+
+                // Finally send the current debugger state to the user.
+                return logger.enabled;
+            },
+
+            /**
+             * *(experimental)* This method fetches FirebugLite component's code and adds it to current page.
+             * Subsequently, on load of the script it enables advanced console logging to it. This is very useful for
+             * debugging on older Internet Explorer browsers and on mobile device browsers that do not have a JavaScript
+             * debugging console.
+             *
+             * Visit http://getfirebug.com/firebuglite for more information on this very popular component. This
+             * function fetches the script from their latest stable release channel as mentioned in
+             * http://getfirebug.com/firebuglite#Stable
+             */
+            enableFirebugLite: function () {
+                var htmlTags;
+
+                // Check whether firebug already exists.
+                /*jslint devel:true */
+                if (win.console && win.console.firebug) {
+                    // If firebug already exists, we do not need to include any
+                    // script for firebu-lite and we simply enable logging to
+                    //console.
+                    global.core[DEBUGGER].enable(win.console.log, 'verbose');
+                    return;
+                }
+                /*jslint devel:false */
+
+                // Install firebug-lite within page by creating new 'script' element and appending to page head.
+                htmlTags = win.document.getElementsByTagName('html');
+                htmlTags && htmlTags[0].setAttribute('debug', 'true');
+                global.loadScript('https://getfirebug.com/firebug-lite.js#overrideConsole=false,startOpened=true',
+                        function () {
+                    global.core[DEBUGGER].enable(win.console.log, 'verbose');
+                }, '{ startOpened: true }', true, true);
+
+            }
+        },
+
+        /**
+         * @deprecated 3.4.0 - Please use FusionCharts.debugger.enable instead
+         * @private
+         */
+        debugMode: {
+            enabled: function () {
+                win.setTimeout(function () {
+                    throw new Error('Deprecated! Please use FusionCharts.debugger.enable instead.');
+                }, 0);
+                return global.core[DEBUGGER].enable.apply(global.core[DEBUGGER], arguments);
+            }
+        }
+    }, false);
+}]);
+
+/**
+ * This module allows FusionCharts to work with W3C Level 2 style events for
+ * allowing multiple handlers per event and also to do event driven development
+ * on a global or per-chart basis.
+ * @private
+ *
+ * @module fusioncharts.events
+ * @requires fusioncharts.constructor
+ * @requires fusioncharts.debugger
+ */
+FusionCharts.register('module', ['private', 'modules.mantle.eventmanager', function () {
+
+    var global = this,
+        win = global.window,
+        core = global.core,
+
+        objectProtoToString = Object.prototype.toString,
+        arrayToStringIdentifier = objectProtoToString.call([]),
+        isArray = function (obj) {
+            return objectProtoToString.call(obj) === arrayToStringIdentifier;
+        },
+
+        // A function to create an abstraction layer so that the try-catch /
+        // error suppression of flash can be avoided while raising events.
+        managedFnCall = function (item, scope, event, args) {
+            // We change the scope of the function with respect to the
+            // object that raised the event.
+            try {
+                item[0].call(scope, event, args || {});
+            }
+            catch (e) {
+                // Call error in a separate thread to avoid stopping
+                // of chart load.
+                setTimeout(function () {
+                    throw e;
+                }, 0);
+            }
+        },
+
+        // Function that executes all functions that are to be invoked upon trigger
+        // of an event.
+        slotLoader = function (slot, event, args) {
+            // If slot does not have a queue, we assume that the listener
+            // was never added and halt method.
+            if (!(slot instanceof Array)) {
+                // Statutory W3C NOT preventDefault flag
+                return;
+            }
+
+            // Initialize variables.
+            var i = 0, scope;
+
+            // Iterate through the slot and look for match with respect to
+            // type and binding.
+            for (; i < slot.length; i += 1) {
+
+                // If there is a match found w.r.t. type and bind, we fire it.
+                if (slot[i][1] === event.sender || slot[i][1] === undefined) {
+
+                    // Determine the sender of the event for global events.
+                    // The choice of scope differes depending on whether a
+                    // global or a local event is being raised.
+                    scope = slot[i][1] === event.sender ?
+                        event.sender : global.core;
+
+                    managedFnCall(slot[i], scope, event, args);
+
+                    // Check if the user wanted to detach the event
+                    if (event.detached === true) {
+                        slot.splice(i, 1);
+                        i -= 1;
+                        event.detached = false;
+                    }
+                }
+
+                // Check whether propagation flag is set to false and discontnue
+                // iteration if needed.
+                if (event.cancelled === true) {
+                    break;
+                }
+            }
+        },
+
+        EventTarget = {
+
+            unpropagator: function () {
+                return (this.cancelled = true) === false;
+            },
+            detacher: function () {
+                return (this.detached = true) === false;
+            },
+            undefaulter: function () {
+                return (this.prevented = true) === false;
+            },
+
+            // Entire collection of listeners.
+            listeners: {},
+
+            // The last raised event id. Allows to calculate the next event id.
+            lastEventId: 0,
+
+            addListener: function (type, listener, bind) {
+
+                var recurseReturn,
+                    i;
+                // In case type is sent as array, we recurse this function.
+                if (isArray(type)) {
+                    recurseReturn = [];
+                    // We look into each item of the 'type' parameter and send it,
+                    // along with other parameters to a recursed addListener
+                    // method.
+                    for (i = 0; i < type.length; i += 1) {
+                        recurseReturn.push(EventTarget.addListener(type[i], listener, bind));
+                    }
+                    return recurseReturn;
+                }
+
+                // Validate the type parameter. Listener cannot be added without
+                // valid type.
+                if (typeof type !== 'string') {
+                    /**
+                     * The event name has not been provided while adding an event listener. Ensure that you pass a
+                     * `string` to the first parameter of {@link FusionCharts.addEventListener}.
+                     *
+                     * @typedef {ParameterException} Error-03091549
+                     * @memberOf FusionCharts.debugger
+                     * @group debugger-error
+                     */
+                    global.raiseError(bind || global.core, '03091549', 'param', '::EventTarget.addListener',
+                        new Error('Unspecified Event Type'));
+                    return;
+                }
+
+                // Listener must be a function. It will not eval a string.
+                if (typeof listener !== 'function') {
+                    /**
+                     * The event listener passed to {@link FusionCharts.addEventListener} needs to be a function.
+                     *
+                     * @typedef {ParameterException} Error-03091550
+                     * @memberOf FusionCharts.debugger
+                     * @group debugger-error
+                     */
+                    global.raiseError(bind || global.core, '03091550', 'param', '::EventTarget.addListener',
+                        new Error('Invalid Event Listener'));
+                    return;
+                }
+
+                // Desensitize the type case for user accessability.
+                type = type.toLowerCase();
+
+                // If the insertion position does not have a queue, then create one.
+                if (!(EventTarget.listeners[type] instanceof Array)) {
+                    EventTarget.listeners[type] = [];
+                }
+
+                // Add the listener to the queue.
+                EventTarget.listeners[type].push([listener, bind]);
+
+                return listener;
+            },
+
+            removeListener: function (type, listener, bind) {
+
+                var slot,
+                    i;
+
+                // Listener must be a function. Else we have nothing to remove!
+                if (typeof listener !== 'function') {
+                    /**
+                     * The event listener passed to {@link FusionCharts.removeEventListener} needs to be a function.
+                     * Otherwise, the event listener function has no way to know which function is to be removed.
+                     *
+                     * @typedef {ParameterException} Error-03091560
+                     * @memberOf FusionCharts.debugger
+                     * @group debugger-error
+                     */
+                    global.raiseError(bind || global.core, '03091560', 'param', '::EventTarget.removeListener',
+                        new Error('Invalid Event Listener'));
+                    return;
+                }
+
+                // In case type is sent as array, we recurse this function.
+                if (type instanceof Array) {
+                    // We look into each item of the 'type' parameter and send it,
+                    // along with other parameters to a recursed addListener
+                    // method.
+                    for (i = 0; i < type.length; i += 1) {
+                        EventTarget.removeListener(type[i], listener, bind);
+                    }
+                    return;
+                }
+
+                // Validate the type parameter. Listener cannot be removed without
+                // valid type.
+                if (typeof type !== 'string') {
+                    /**
+                     * The event name passed to {@link FusionCharts.removeEventListener} needs to be a string.
+                     *
+                     * @typedef {ParameterException} Error-03091559
+                     * @memberOf FusionCharts.debugger
+                     * @group debugger-error
+                     */
+                    global.raiseError(bind || global.core, '03091559', 'param', '::EventTarget.removeListener',
+                        new Error('Unspecified Event Type'));
+                    return;
+                }
+
+                // Desensitize the type case for user accessability.
+                type = type.toLowerCase();
+
+                // Create a reference to the slot for easy lookup in this method.
+                slot = EventTarget.listeners[type];
+
+                // If slot does not have a queue, we assume that the listener
+                // was never added and halt method.
+                if (!(slot instanceof Array)) {
+                    return;
+                }
+
+                // Iterate through the slot and remove every instance of the
+                // event handler.
+                for (i = 0; i < slot.length; i += 1) {
+                    // Remove all instances of the listener found in the queue.
+                    if (slot[i][0] === listener && slot[i][1] === bind) {
+                        slot.splice(i, 1);
+                        i -= 1;
+                    }
+                }
+            },
+
+            // opts can have { async:true, omni:true }
+            triggerEvent: function (type, sender, args, eventScope, defaultFn, cancelFn) {
+
+                // In case, event type is missing, dispatch cannot proceed.
+                if (typeof type !== 'string') {
+                    /**
+                     * The event name passed to {@link FusionCharts.removeEventListener} needs to be a string.
+                     * @private
+                     *
+                     * @typedef {ParameterException} Error-03091602
+                     * @memberOf FusionCharts.debugger
+                     * @group debugger-error
+                     */
+                    global.raiseError(sender, '03091602', 'param', '::EventTarget.dispatchEvent',
+                        new Error('Invalid Event Type'));
+                    return undefined;
+                }
+
+                // Desensitize the type case for user accessability.
+                type = type.toLowerCase();
+
+                // Model the event as per W3C standards. Add the function to cancel
+                // event propagation by user handlers. Also append an incremental
+                // event id.
+                var eventObject = {
+                    eventType: type,
+                    eventId: (EventTarget.lastEventId += 1),
+                    sender: sender || new Error('Orphan Event'),
+                    cancelled: false,
+                    stopPropagation: this.unpropagator,
+                    prevented: false,
+                    preventDefault: this.undefaulter,
+                    detached: false,
+                    detachHandler: this.detacher
+                };
+
+                /**
+                 * Event listeners are used to tap into different stages of creating, updating, rendering or removing
+                 * charts. A FusionCharts instance fires specific events based on what stage it is in. For example, the
+                 * `renderComplete` event is fired each time a chart has finished rendering. You can listen to any such
+                 * event using {@link FusionCharts.addEventListener} or {@link FusionCharts#addEventListener} and bind
+                 * your own functions to that event.
+                 *
+                 * These functions are known as "listeners" and are passed on to the second argument (`listener`) of the
+                 * {@link FusionCharts.addEventListener} and {@link FusionCharts#addEventListener} functions.
+                 *
+                 * @callback FusionCharts~eventListener
+                 * @see FusionCharts.addEventListener
+                 * @see FusionCharts.removeEventListener
+                 *
+                 * @param {object} eventObject - The first parameter passed to the listener function is an event object
+                 * that contains all information pertaining to a particular event.
+                 *
+                 * @param {string} eventObject.type - The name of the event.
+                 *
+                 * @param {number} eventObject.eventId - A unique ID associated with the event. Internally it is an
+                 * incrementing counter and as such can be indirectly used to verify the order in which  the event was
+                 * fired.
+                 *
+                 * @param {FusionCharts} eventObject.sender - The instance of FusionCharts object that fired this event.
+                 * Occassionally, for events that are not fired by individual charts, but are fired by the framework,
+                 * will have the framework as this property.
+                 *
+                 * @param {boolean} eventObject.cancelled - Shows whether an  event's propagation was cancelled or not.
+                 * It is set to `true` when `.stopPropagation()` is called.
+                 *
+                 * @param {function} eventObject.stopPropagation - Call this function from within a listener to prevent
+                 * subsequent listeners from being executed.
+                 *
+                 * @param {boolean} eventObject.prevented - Shows whether the default action of this event has been
+                 * prevented. It is set to `true` when `.preventDefault()` is called.
+                 *
+                 * @param {function} eventObject.preventDefault - Call this function to prevent the default action of an
+                 * event. For example, for the event {@link FusionCharts#event:beforeResize}, if you do
+                 * `.preventDefault()`, the resize will never take place and instead
+                 * {@link FusionCharts#event:resizeCancelled} will be fired.
+                 *
+                 * @param {boolean} eventObject.detached - Denotes whether a listener has been detached and no longer
+                 * gets executed for any subsequent event of this particular `type`.
+                 *
+                 * @param {function} eventObject.detachHandler - Allows the listener to remove itself rather than being
+                 * called externally by {@link FusionCharts.removeEventListener}. This is very useful for one-time event
+                 * listening or for special situations when the event is no longer required to be listened when the
+                 * event has been fired with a specific condition.
+                 *
+                 * @param {object} eventArgs - Every event has an argument object as second parameter that contains
+                 * information relevant to that particular event.
+                 */
+                slotLoader(EventTarget.listeners[type], eventObject, args);
+
+                // Facilitate the call of a global event listener.
+                slotLoader(EventTarget.listeners['*'], eventObject, args);
+
+                // Execute default action
+                switch (eventObject.prevented) {
+                    case true:
+                        if (typeof cancelFn === 'function') {
+                            try {
+                                cancelFn.call(eventScope || sender || win, eventObject,
+                                    args || {});
+                            }
+                            catch (err) {
+                                // Call error in a separate thread to avoid stopping
+                                // of chart load.
+                                setTimeout(function () {
+                                    throw err;
+                                }, 0);
+                            }
+                        }
+                        break;
+                    default:
+                        if (typeof defaultFn === 'function') {
+                            try {
+                                defaultFn.call(eventScope || sender || win, eventObject,
+                                    args || {});
+                            }
+                            catch (err) {
+                                // Call error in a separate thread to avoid stopping
+                                // of chart load.
+                                setTimeout(function () {
+                                    throw err;
+                                }, 0);
+                            }
+                        }
+                }
+
+                // Statutory W3C NOT preventDefault flag
+                return true;
+            }
+        },
+
+        // Facilitate for raising events internally.
+        raiseEvent = global.raiseEvent = function (type, args, obj, eventScope,
+                defaultFn, cancelledFn) {
+            return EventTarget.triggerEvent(type, obj, args, eventScope,
+                defaultFn, cancelledFn);
+        },
+
+        /**
+         * List of events that has an equivalent legacy event. Used by the
+         * raiseEvent method to check whether a particular event raised
+         * has any corresponding legacy event.
+         *
+         * @type object
+         */
+        legacyEventList = global.legacyEventList = {},
+
+        /**
+         * Maintains a list of recently raised conditional events
+         * @type object
+         */
+        conditionChecks = {};
+
+    global.disposeEvents = function (target) {
+        var type, i;
+        // Iterate through all events in the collection of listeners
+        for (type in EventTarget.listeners) {
+            for (i = 0; i < EventTarget.listeners[type].length; i += 1) {
+                // When a match is found, delete the listener from the
+                // collection.
+                if (EventTarget.listeners[type][i][1] === target) {
+                    EventTarget.listeners[type].splice(i, 1);
+                }
+            }
+        }
+    };
+    /**
+     * This method allows to uniformly raise events of FusionCharts
+     * Framework.
+     *
+     * @param {string} name specifies the name of the event to be raised.
+     * @param {object} args allows to provide an arguments object to be
+     * passed on to the event listeners.
+     * @param {core} obj is the FusionCharts instance object on
+     * behalf of which the event would be raised.
+     * @param {array} legacyArgs is an array of arguments to be passed on
+     * to the equivalent legacy event.
+     * @param {Event} source
+     * @param {function} defaultFn
+     * @param {function} cancelFn
+     *
+     * @type undefined
+     */
+    global.raiseEventWithLegacy = function (name, args, obj, legacyArgs,
+            eventScope, defaultFn, cancelledFn) {
+        var legacy = legacyEventList[name];
+        raiseEvent(name, args, obj, eventScope, defaultFn, cancelledFn);
+        if (legacy && typeof win[legacy] === 'function') {
+            setTimeout(function () {
+                win[legacy].apply(eventScope || win, legacyArgs);
+            }, 0);
+        }
+    };
+
+    /**
+     * This allows one to raise related events that are grouped together and
+     * raised by multiple sources. Usually this is used where a congregation
+     * of successive events need to cancel out each other and behave like a
+     * unified entity.
+     *
+     * @param {string} check is used to identify event groups. Provide same value
+     * for all events that you want to group together from multiple sources.
+     * @param {string} name specifies the name of the event to be raised.
+     * @param {object} args allows to provide an arguments object to be
+     * passed on to the event listeners.
+     * @param {core} obj is the FusionCharts instance object on
+     * behalf of which the event would be raised.
+     * @param {object} eventScope
+     * @param {function} defaultFn
+     * @param {function} cancelledFn
+     *
+     * @returns {undefined}
+     */
+    global.raiseEventGroup = function (check, name, args, obj, eventScope,
+            defaultFn, cancelledFn) {
+        var id = obj.id,
+            hash = check + id;
+
+        if (conditionChecks[hash]) {
+            clearTimeout(conditionChecks[hash]);
+            delete conditionChecks[hash];
+        }
+        else {
+            if (id && hash) {
+                conditionChecks[hash] = setTimeout(function () {
+                    raiseEvent(name, args, obj, eventScope, defaultFn, cancelledFn);
+                    delete conditionChecks[hash];
+                }, 0);
+            }
+            else {
+                raiseEvent(name, args, obj, eventScope, defaultFn, cancelledFn);
+            }
+        }
+    };
+
+    // Extend the eventlisteners to internal global.
+    global.addEventListener = function (type, listener) {
+        return EventTarget.addListener(type, listener);
+    };
+    global.removeEventListener = function (type, listener) {
+        return EventTarget.removeListener(type, listener);
+    };
+
+    global.extend(core, /** @lends FusionCharts */ {
+        /**
+         * Bind callbacks to events fired throughout FusionCharts. This method can be used to listen to events across
+         * all FusionCharts instances on a page.
+         *
+         * An event listener is used to execute custom functions when an event is fired. FusionCharts fires events at
+         * all stages of creating, updating, rendering or removing a chart. This function lets you tap into any of these
+         * events and provide your own functions which will be called when those events are triggered.
+         *
+         * An alternative to this function is to use {@link FusionCharts#addEventListener} method on a chart instance to
+         * bind to an event fired by a specific chart.
+         *
+         * @param {string|array} type - The event name to listen to. The event name is not case sensitive. In case you
+         * want to register an event to multiple events in the same registration call, provide them as an array of event
+         * names.
+         * @param {FusionCharts~eventListener} listener - Pass the function that is to be executed when the event is
+         * fired. Upon an event, the listeners for that event are executed sequentially with arguments that are specific
+         * to that event. See {@link FusionCharts~eventListener} for more details on the arguments.
+         *
+         * @group event-handling:add
+         * @example
+         * // Show a message when a number of charts have been rendered on a page.
+         * FusionCharts.ready(function {
+         *     var counter = 0,
+         *         threshold = 3;
+         *
+         *     FusionCharts.addEventListener("rendered", function (eventObject) {
+         *         counter++;
+         *         if (counter > threshold) {
+         *             alert("More than " + threshold + "charts rendered!");
+         *         }
+         *     });
+         * });
+         */
+        addEventListener: function (type, listener) {
+            return EventTarget.addListener(type, listener);
+        },
+        /**
+         * Removes an event that was originally added using {@link FusionCharts.addEventListener}.
+         * @param {string} type - The event name whose listener needs to be removed/detached.
+         * @param {function} listener - The listener function that needs to be removed.
+         *
+         * @group event-handling:remove
+         */
+        removeEventListener: function (type, listener) {
+            return EventTarget.removeListener(type, listener);
+        },
+
+        /**
+         * This function allows to register callback functions to be executed when FusionCharts library is ready to be
+         * used. In general, the framework is ready after `DOMContentLoaded` browser event has been fired and all the
+         * initial dependent files/modules are available. One can attach multiple callbacks by calling this function any
+         * number of time.
+         *
+         * The callback function is executed even when attached after FusionCharts is already ready! Thus, it is
+         * recommended that all entry-point and initialization codes are written within this block. This also helps in
+         * neatly organizing all codes within a script file or the page `` and as such contextually separating
+         * code from HTML blocks.
+         *
+         * @param {FusionCharts~readyCallback} readyCallback - Pass a function that would be executed as callback when
+         * FusionCharts framework is ready.
+         * @param {*} [args={@link FusionCharts}] - Argument to be passed on to the callback function.
+         * @param {function=} [context={@link FusionCharts}] - In the situation where the function passed via `fn`
+         * parameter needs to be executed in a different scope than the default {@link FusionCharts} scope, pass the
+         * appropriate class object here.
+         *
+         * @example
+         * // Render a chart within a chart container `div` element.
+         * FusionCharts.ready(function (FusionCharts) {
+         *     var chart = new FusionCharts({
+         *         type: "column2d",
+         *         renderAt: "chart-container-div",
+         *         dataSource: "my-chart-data.json",
+         *         dataFormat: "jsonurl"
+         *     });
+         *     // Since we are in the `ready` block, the `chart-container-div`
+         *     // element should be available by now.
+         *     chart.render();
+         * });
+         */
+        ready: function (readyCallback, args, context) {
+            // Check if core is already ready or not. If not ready then we need  to attach the function to the ready
+            // event listener.
+            if (global.ready) {
+                // If it is already ready, we do not need to check for readiness subsequently as this state cannot ever
+                // rollback. Thus we redefine the function for performant consumption post readiness.
+                core.ready = function (readyCallback, context) {
+                    (typeof readyCallback === 'function') && setTimeout(function () {
+                        /**
+                         * The function passed as ready callback is executed when FusionCharts library is ready. Use
+                         * {@link FusionCharts.ready} to request executing of your callback function.
+                         * @callback FusionCharts~readyCallback
+                         * @param {FusionCharts|*} args - By default, the parameter passed to the callback function is
+                         * the FusionCharts library class unless specified otherwise in the `args` parameter of
+                         * {@link FusionCharts.ready}
+                         */
+                        readyCallback.call(context || core, args || core);
+                    }, 0);
+                };
+                core.ready(readyCallback, context);
+            }
+            else if (typeof readyCallback === 'function') {
+                core.addEventListener('ready', function () {
+                    core.ready(readyCallback, args, context);
+                });
+            }
+
+            return this;
+        }
+    });
+    core.on = core.addEventListener; // alias
+
+    // Add eventListener extensibility to FusionCharts prototype so that individual FusionCharts objects can use
+    // per-chart events.
+    global.extend(core.prototype, /** @lends FusionCharts# */ {
+        /**
+         * Listen to events fired by an individual chart. For more information on the available events, refer to the
+         * events section.
+         *
+         * @param {string|string[]} type - The event name that needs to be listened to. The event name is not case
+         * sensitive. In case you want to register an event to multiple events in the same registration call, provide
+         * them as an array of event names.
+         * @param {FusionCharts~eventListener} listener - Pass the function that is to be executed when the event is
+         * fired. Upon an event, the listeners for that event are executed sequentially with arguments that are
+         * specific to that event. See {@link FusionCharts~eventListener} for more details on the arguments.
+         *
+         * @group event-handling:add
+         */
+        addEventListener: function (type, listener) {
+            return EventTarget.addListener(type, listener, this);
+        },
+        /**
+         * Removes an event that was originally added using {@link FusionCharts#addEventListener}.
+         * @param {string} type - The event name whose listener needs to be removed/detached.
+         * @param {function} listener - The listener function that needs to be removed.
+         *
+         * @group event-handling:remove
+         */
+        removeEventListener: function (type, listener) {
+            return EventTarget.removeListener(type, listener, this);
+        }
+    });
+    core.prototype.on = core.prototype.addEventListener; // alias
+
+    // Add ability to parse events sent via core constructor.
+    global.policies.options.events = ['events', {}];
+
+    global.addEventListener('beforeInitialize', function (e) {
+        var chart = e.sender,
+            events = chart.options.events,
+            key;
+
+        if (events) {
+            for (key in events) {
+                if (typeof events[key] === 'function') {
+                    chart.addEventListener(key, events[key]);
+                }
+            }
+        }
+
+    });
+
+    // Raise library initialization event, if not already done.
+
+    if (global.ready && !global.readyNotified) {
+        global.readyNotified = true;
+        /**
+         * @fires FusionCharts#ready
+         */
+        global.raiseEvent('ready', {
+            version: global.core.version,
+            now: global.readyNow
+        }, global.core);
+    }
+
+}]);
+
+/**
+ * This module handles all XMLHttpRequests by exposing a managed AJAX module.
+ * @private
+ *
+ * @module fusioncharts.ajax
+ * @requires fusioncharts.constructor
+ */
+FusionCharts.register('module', ['private', 'modules.mantle.ajax', function () {
+
+    var global = this,
+        // define constants for future use.
+        FUNCTION = 'function',
+        MSXMLHTTP = 'Microsoft.XMLHTTP',
+        MSXMLHTTP2 = 'Msxml2.XMLHTTP',
+        GET = 'GET',
+        POST = 'POST',
+        XHREQERROR = 'XmlHttprequest Error',
+        RUN = 'run',
+        ERRNO = '1110111515A',
+        win = global.window, // keep a local reference of window scope
+
+        // Probe IE version
+        version = parseFloat(win.navigator.appVersion.split('MSIE')[1]),
+        ielt8 = (version >= 5.5 && version <= 7) ? true : false,
+        firefox = /mozilla/i.test(win.navigator.userAgent),
+        //
+        // Calculate flags.
+        // Check whether the page is on file protocol.
+        fileProtocol = win.location.protocol === 'file:',
+        AXObject = win.ActiveXObject,
+
+        // Check if native xhr is present
+        XHRNative = (!AXObject || !fileProtocol) && win.XMLHttpRequest,
+
+        // stats
+        /**
+         * These counters keep a track of various http requests sent by FusionCharts. These can be retrieved using
+         * {@link FusionCharts.ajax.stats}
+         * @memberOf FusionCharts.ajax~
+         *
+         * @property {number} objects - The number of internal `Ajax` objects created by FusionCharts. This is not same
+         * as `XMLHttpRequest` object since one `Ajax` object can have a number of `XMLHttpRequest` objects.
+         * @property {number} xhr - A count of all `XMLHttpRequest` objects created.
+         * @property {number} requests - Sum of all requests sent to server (both GET and POST.)
+         * @property {number} success - The total number of requests that had a successful return from server.
+         * @property {number} failure - The total number of requests that failed to communicate with server due to
+         * various factors.
+         * @property {number} idle - `XMLHttpRequest` objects that are idle for later use or has not been disposed yet.
+         */
+        counters = {
+            objects: 0,
+            xhr: 0,
+            requests: 0,
+            success: 0,
+            failure: 0,
+            idle: 0
+        },
+
+        // Prepare function to retrieve compatible xmlhttprequest.
+        newXmlHttpRequest = function () {
+            var xmlhttp;
+
+            // if xmlhttprequest is present as native, use it.
+            if (XHRNative) {
+                newXmlHttpRequest = function () {
+                    counters.xhr++;
+                    return new XHRNative();
+                };
+                return newXmlHttpRequest();
+            }
+
+            // Use activeX for IE
+            try {
+                xmlhttp = new AXObject(MSXMLHTTP2);
+                newXmlHttpRequest = function () {
+                    counters.xhr++;
+                    return new AXObject(MSXMLHTTP2);
+                };
+            }
+            catch (e) {
+                try {
+                    xmlhttp = new AXObject(MSXMLHTTP);
+                    newXmlHttpRequest = function () {
+                        counters.xhr++;
+                        return new AXObject(MSXMLHTTP);
+                    };
+                }
+                catch (e) {
+                    xmlhttp = false;
+                }
+            }
+            return xmlhttp;
+        },
+
+        // Ajax class.
+        Ajax;
+
+    /**
+     * @namespace FusionCharts.ajax
+     */
+    global.core.ajax = /** @lends FusionCharts.ajax */ {
+        /**
+         * Returns the statistics of AJAX requests sent by FusionCharts.
+         *
+         * @param {string} [type] - Optionally, one can request a specific type of statistic by providing the type as
+         * one of the property-name of {@link FusionCharts.ajax~counters}.
+         *
+         * @returns {FusionCharts.ajax~counters} If no specific nature of statistics is passed to the `type`
+         * parameter, this function would return an object containing all counters, otherwise it returns a specific
+         * counter as in {@link FusionCharts.ajax~counters}.
+         */
+        stats: function (type) {
+            return type ? counters[type] : global.extend({}, counters);
+        },
+
+        /**
+         * The default `http-headers` that are sent with every AJAX request to the server. More can be added
+         * and existing items can be modified.
+         * @enum
+         * @group framework
+         */
+        headers: {
+            /**
+             * Prevents cacheing of AJAX requests.
+             * @type {string}
+             */
+            'If-Modified-Since': 'Sat, 29 Oct 1994 19:43:31 GMT',
+            /**
+             * Lets the server know that this is an AJAX request.
+             * @type {string}
+             */
+            'X-Requested-With': 'XMLHttpRequest',
+            /**
+             * Lets server know which web application is sending requests.
+             * @type {string}
+             */
+            'X-Requested-By': 'FusionCharts',
+            /**
+             * Mentions content-types that are acceptable for the response. Some servers require this for Ajax
+             * communication.
+             * @type {string}
+             */
+            'Accept': 'text/plain, */*',
+            /**
+             * The MIME type of the body of the request along with its charset.
+             * @type {string}
+             */
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+        }
+    };
+
+    Ajax = global.ajax = function (success, error) {
+        this.onSuccess = success;
+        this.onError = error;
+        this.open = false;
+        counters.objects++;
+        counters.idle++;
+    };
+
+    global.extend(Ajax.prototype, {
+        headers: global.core.ajax.headers,
+
+        transact: function (method, url, data, callbackArgs) {
+            var wrapper = this,
+                xmlhttp = wrapper.xmlhttp,
+                headers = wrapper.headers,
+                errorCallback = wrapper.onError,
+                successCallback = wrapper.onSuccess,
+                isPost = (method === POST),
+                postData,
+                xRequestedBy = 'X-Requested-By',
+                hasOwn = Object.prototype.hasOwnProperty,
+                i;
+
+            // X-Requested-By is removed from header during cross domain ajax call
+            if (url.search(/^(http:\/\/|https:\/\/)/) !== -1 &&
+                    win.location.hostname !== /(http:\/\/|https:\/\/)([^\/\:]*)/.exec(url)[2]) {
+                // If the url does not contain http or https, then its a same domain call. No need to use regex to get
+                // domain. If it contains then checks domain.
+                delete headers[xRequestedBy];
+            }
+            else {
+                !hasOwn.call(headers, xRequestedBy) && (headers[xRequestedBy] = 'FusionCharts');
+            }
+
+            if (!xmlhttp || ielt8 || firefox) {
+                xmlhttp = newXmlHttpRequest();
+                wrapper.xmlhttp = xmlhttp;
+            }
+
+            xmlhttp.onreadystatechange = function () {
+                try {
+                    if (xmlhttp.readyState === 4) {
+                        if ((!xmlhttp.status && fileProtocol) || (xmlhttp.status >= 200 &&
+                                xmlhttp.status < 300) || xmlhttp.status === 304 ||
+                                xmlhttp.status === 1223 || xmlhttp.status === 0) {
+                            successCallback &&
+                                successCallback(xmlhttp.responseText, wrapper,
+                                callbackArgs, url);
+                            counters.success++;
+                        }
+                        else if (errorCallback) {
+                            errorCallback(new Error(XHREQERROR), wrapper, callbackArgs, url);
+                            counters.failure++;
+                        }
+                        counters.idle--;
+                        wrapper.open = false;
+                    }
+                }
+                catch (error) {
+                    if (errorCallback) {
+                        errorCallback(error, wrapper, callbackArgs, url);
+                    }
+                    if (win.FC_DEV_ENVIRONMENT) {
+                        setTimeout(function () {
+                            throw error;
+                        }, 0);
+                    }
+                    counters.failure++;
+                }
+            };
+
+            try {
+                xmlhttp.open((isPost ? POST : GET), url, true);
+
+                if (xmlhttp.overrideMimeType) {
+                    xmlhttp.overrideMimeType('text/plain');
+                }
+
+                if (isPost) {
+                    if (typeof data === 'string') {
+                        postData = data;
+                    }
+                    else {
+                        postData = [];
+                        for (i in data) {
+                            postData.push(i + '=' + (data[i] + '')
+                                    .replace(/\=/g, '%3D').replace(/\&/g, '%26'));
+                        }
+                        postData = postData.join('&');
+                    }
+                }
+                else {
+                    postData = null;
+                }
+                for (i in headers) {
+                    xmlhttp.setRequestHeader(i, headers[i]);
+                }
+
+                xmlhttp.send(postData);
+                counters.requests++;
+                counters.idle++;
+                wrapper.open = true;
+            }
+            catch (e) {
+                /**
+                 * AJAX runtime error. Raised when AJAX transactions raise error (security or others). The error
+                 * message describes the nature of the error.
+                 *
+                 * @typedef {RuntimeException} Error-1110111515A
+                 * @memberOf FusionCharts.debugger
+                 * @group debugger-error
+                 */
+                global.raiseError(global.core, ERRNO, RUN, XHREQERROR, e.message);
+            }
+
+            return xmlhttp;
+        },
+
+        get: function (url, callbackArgs) {
+            return this.transact(GET, url, undefined, callbackArgs);
+        },
+
+        post: function (url, data, callbackArgs) {
+            return this.transact(POST, url, data, callbackArgs);
+        },
+
+        abort: function () {
+            var instance = this,
+                xmlhttp = instance.xmlhttp;
+
+            instance.open = false;
+            return xmlhttp && typeof xmlhttp.abort === FUNCTION && xmlhttp.readyState &&
+                    xmlhttp.readyState !== 0 && xmlhttp.abort();
+        },
+
+        dispose: function () {
+            var instance = this;
+            instance.open && instance.abort();
+
+            delete instance.onError;
+            delete instance.onSuccess;
+            delete instance.xmlhttp;
+            delete instance.open;
+
+            counters.objects--;
+            return (instance = null);
+        }
+    });
+
+}]);
+
+/**
+ * Generic Runtime Module
+ * @private
+ *
+ * @module fusioncharts.runtime
+ * @requires fusioncharts.constructor
+ * @requires fusioncharts.events
+ * @requires fusioncharts.debugger
+ */
+FusionCharts.register('module', ['private', 'modules.mantle.runtime;1.1', function () {
+
+
+    var global = this,
+        win = global.window,
+
+        // Set the FusionCharts filename possibilities as regular expression.
+        SCRIPT_NAME_REGEX = /(^|[\/\\])(fusioncharts\.js)([\?#].*)?$/ig, // jshint ignore:line
+        BLOCK_EXTERNAL_SCRIPT_LOADING = false,
+        DISALLOW_CROSSDOMAIN_RESOURCE = false,
+        SCRIPT_LOAD_TIMEOUTMS = 15000,
+
+        checkBadChars = /[\\\"<>;&]/,
+        hasProtocolDef = /^[^\S]*?(sf|f|ht)(tp|tps):\/\//i,
+        FUNCTION = 'function',
+
+        /**
+         * Regular Expressions that helps to check XSS security loops.
+         */
+        LOAD_EVENTNAME = 'externalresourceload',
+
+        /**
+         * To keep a track of scripts requested.
+         * @type Object
+         */
+        scriptsRequested = {},
+
+        /**
+         * To keep a track of loaded script tags
+         */
+        scriptTags = {},
+
+        /**
+         * To keep a track of scripts loaded.
+         * @type Object
+         */
+        scriptsLoaded = {},
+
+        /**
+         * Keep a track of load failure check
+         * @type object
+         */
+        scriptLoadFailureTimeout = {},
+
+        /**
+         * Function that safely deletes all items in a DOM element.
+         */
+        purgeDOM = global.purgeDOM = function (d) {
+            var a = d.attributes, i, l, n;
+            if (a) {
+                for (i = a.length - 1; i >= 0; i -= 1) {
+                    n = a[i].name;
+                    if (typeof d[n] === 'function') {
+                        d[n] = null;
+                    }
+                }
+            }
+            a = d.childNodes;
+            if (a) {
+                l = a.length;
+                for (i = 0; i < l; i += 1) {
+                    purgeDOM(d.childNodes[i]);
+                }
+            }
+        },
+
+        // Deconstruct policies.
+        // Update the arguments with latest copy of all variables by
+        // reverse engineering the policies.
+        deconstructPolicySet = function (policies, options, obj) {
+            var policy,
+                prop;
+
+            for (policy in policies) {
+
+                // Set just the policy object in case of single-level policy.
+                if (policies[policy] instanceof Array) {
+                    options[policies[policy][0]] = obj[policy];
+                } else {
+                    // Copy the source of multi-level policies
+                    for (prop in policies[policy]) {
+                        options[policies[policy][prop][0]] = obj[policy][prop];
+                    }
+                }
+            }
+        },
+        signatureMatchRegex = /^(FusionCharts|FusionWidgets|FusionMaps)/;
+
+    /**
+     * Function to determine the script base uri for a script name
+     */
+    global.getScriptBaseUri = function (scriptNameRegex) {
+        // Get a collection of all script nodes.
+        var scripts = win.document.getElementsByTagName('script'),
+        l = scripts.length,
+        src,
+        i;
+
+        // Iterate through the script node collection and match whether its
+        // 'src' attribute contains fusioncharts file name.
+        for (i = 0; i < l; i += 1) {
+            src = scripts[i].getAttribute('src');
+            if (!(src === undefined || src === null ||
+                src.match(scriptNameRegex) === null)) {
+                return src.replace(scriptNameRegex, '$1');
+            }
+        }
+        return undefined;
+    };
+
+    // Get the script base uri. (Regexp has been updated)
+    global.core.options.scriptBaseUri = (function () {
+        var baseUri = global.getScriptBaseUri(SCRIPT_NAME_REGEX);
+
+        if (baseUri === undefined) {
+            /**
+             * FusionCharts JavaScript Library automatically determines the location where it was loaded from within
+             * the server. This it does by probing the `
+