mirror of
https://github.com/bendtherules/line_chart_demo.git
synced 2026-08-18 13:52:30 +00:00
Add fc files and change to export mode
This commit is contained in:
Abhas
+11129
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+89297
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,916 @@
|
|||||||
|
|
||||||
|
(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 <http://www.fusioncharts.com/license>
|
||||||
|
*
|
||||||
|
* @version 3.12.0
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @module fusioncharts.renderer.javascript.msstepline
|
||||||
|
*/
|
||||||
|
FusionCharts.register('module', ['private', 'modules.renderer.js-msstepline', function() {
|
||||||
|
var global = this,
|
||||||
|
lib = global.hcLib,
|
||||||
|
win = global.window,
|
||||||
|
creditLabel = false && !lib.CREDIT_REGEX.test(win.location.hostname),
|
||||||
|
COMPONENT = 'component',
|
||||||
|
DATASET = 'dataset',
|
||||||
|
chartAPI = lib.chartAPI,
|
||||||
|
pluckNumber = lib.pluckNumber,
|
||||||
|
pluck = lib.pluck,
|
||||||
|
Image = win.Image,
|
||||||
|
preDefStr = lib.preDefStr,
|
||||||
|
schedular = lib.schedular,
|
||||||
|
LINE = preDefStr.line,
|
||||||
|
toRaphaelColor = lib.toRaphaelColor,
|
||||||
|
getFirstValue = lib.getFirstValue,
|
||||||
|
configStr = preDefStr.configStr,
|
||||||
|
animationObjStr = preDefStr.animationObjStr,
|
||||||
|
dataLabelStr = preDefStr.dataLabelStr,
|
||||||
|
BLANKSTRING = lib.BLANKSTRING,
|
||||||
|
hiddenStr = preDefStr.hiddenStr,
|
||||||
|
SETROLLOVERATTR = 'setRolloverAttr',
|
||||||
|
SETROLLOUTATTR = 'setRolloutAttr',
|
||||||
|
math = Math,
|
||||||
|
mathMax = math.max,
|
||||||
|
hasTouch = lib.hasTouch,
|
||||||
|
TOUCH_THRESHOLD_PIXELS = lib.TOUCH_THRESHOLD_PIXELS,
|
||||||
|
CLICK_THRESHOLD_PIXELS = lib.CLICK_THRESHOLD_PIXELS,
|
||||||
|
HTP = hasTouch ? TOUCH_THRESHOLD_PIXELS : CLICK_THRESHOLD_PIXELS,
|
||||||
|
M = 'M',
|
||||||
|
H = 'H',
|
||||||
|
V = 'V',
|
||||||
|
ROUND = preDefStr.ROUND,
|
||||||
|
miterStr = preDefStr.miterStr,
|
||||||
|
UNDEFINED,
|
||||||
|
NORMALSTRING = 'normal';
|
||||||
|
|
||||||
|
chartAPI('msstepline', {
|
||||||
|
friendlyName: 'Multi-series Step Line Chart',
|
||||||
|
standaloneInit: true,
|
||||||
|
creditLabel: creditLabel,
|
||||||
|
defaultDatasetType: 'msstepline',
|
||||||
|
defaultPlotShadow: 1,
|
||||||
|
applicableDSList: {'msstepline': true}
|
||||||
|
}, chartAPI.mscartesian, {
|
||||||
|
drawverticaljoins: 1,
|
||||||
|
useforwardsteps: 1,
|
||||||
|
zeroplanethickness: 1,
|
||||||
|
zeroplanealpha: 40,
|
||||||
|
showzeroplaneontop: 0,
|
||||||
|
enablemousetracking: true
|
||||||
|
}, chartAPI.areabase);
|
||||||
|
|
||||||
|
FusionCharts.register('module', ['private', 'modules.renderer.js-dataset-group-msstepline',
|
||||||
|
function () {
|
||||||
|
var COMPONENT = 'component',
|
||||||
|
DATASET_GROUP = 'datasetGroup';
|
||||||
|
|
||||||
|
FusionCharts.register(COMPONENT, [DATASET_GROUP, 'msstepline', {
|
||||||
|
},'line']);
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
FusionCharts.register(COMPONENT, [DATASET, 'MSStepLine', {
|
||||||
|
type: 'msstepline',
|
||||||
|
_addLegend: function () {
|
||||||
|
var dataset = this,
|
||||||
|
chart = dataset.chart,
|
||||||
|
conf = dataset.config,
|
||||||
|
legend = chart.components.legend,
|
||||||
|
drawAnchors = pluckNumber(conf.drawanchors, 1),
|
||||||
|
config = {
|
||||||
|
enabled: conf.includeinlegend,
|
||||||
|
type : LINE,
|
||||||
|
/* In case of scatter (a child chartAPI of line),
|
||||||
|
line is drawn in legend only when drawLine is set
|
||||||
|
to true. */
|
||||||
|
drawLine: pluck(conf.drawLine, true),
|
||||||
|
fillColor : toRaphaelColor({
|
||||||
|
color: conf.anchorbgcolor,
|
||||||
|
alpha: conf.anchorbgalpha
|
||||||
|
}),
|
||||||
|
strokeColor: toRaphaelColor({
|
||||||
|
color: conf.anchorbordercolor,
|
||||||
|
alpha: '100'
|
||||||
|
}),
|
||||||
|
rawFillColor: conf.anchorbgcolor,
|
||||||
|
rawStrokeColor: conf.anchorbordercolor,
|
||||||
|
anchorSide: drawAnchors ? conf.anchorsides : 0,
|
||||||
|
strokeWidth: conf.anchorborderthickness,
|
||||||
|
label : getFirstValue(dataset.JSONData.seriesname),
|
||||||
|
lineWidth: conf.linethickness
|
||||||
|
};
|
||||||
|
dataset.legendItemId = legend.addItems(dataset, dataset.legendInteractivity, config);
|
||||||
|
},
|
||||||
|
draw: function () {// retrive requitrd objects
|
||||||
|
var dataSet = this,
|
||||||
|
JSONData = dataSet.JSONData,
|
||||||
|
chart = dataSet.chart,
|
||||||
|
jobList = chart.getJobList(),
|
||||||
|
chartComponents = chart.components,
|
||||||
|
conf = dataSet.config,
|
||||||
|
datasetIndex = dataSet.index || dataSet.positionIndex,
|
||||||
|
chartConfig = chart.config,
|
||||||
|
len,
|
||||||
|
i,
|
||||||
|
paper = chartComponents.paper,
|
||||||
|
xAxis = chartComponents.xAxis[0],
|
||||||
|
yAxis = dataSet.yAxis,
|
||||||
|
xPos,
|
||||||
|
yPos,
|
||||||
|
layers = chart.graphics,
|
||||||
|
dataLabelsLayer = layers.datalabelsGroup,
|
||||||
|
toolText,
|
||||||
|
label,
|
||||||
|
setElement,
|
||||||
|
hotElement,
|
||||||
|
setLink,
|
||||||
|
setValue,
|
||||||
|
eventArgs,
|
||||||
|
displayValue,
|
||||||
|
dataStore = dataSet.components.data,
|
||||||
|
dataObj,
|
||||||
|
setRolloutAttr,
|
||||||
|
setRolloverAttr,
|
||||||
|
removeDataArr = dataSet.components.removeDataArr || [],
|
||||||
|
removeDataArrLen = removeDataArr.length,
|
||||||
|
lineThickness = conf.linethickness,
|
||||||
|
container = dataSet.graphics.container,
|
||||||
|
connectNullData = chartConfig.connectnulldata,
|
||||||
|
group = layers.datasetGroup,
|
||||||
|
hoverEffects,
|
||||||
|
shadow = conf.shadow,
|
||||||
|
anchorShadow,
|
||||||
|
dataLabelContainer = dataSet.graphics.dataLabelContainer,
|
||||||
|
anchorProps = {},
|
||||||
|
imgRef,
|
||||||
|
symbol,
|
||||||
|
config,
|
||||||
|
animationObj = chart.get(configStr, animationObjStr),
|
||||||
|
dummyAnimElem = animationObj.dummyObj,
|
||||||
|
dummyAnimObj = animationObj.animObj,
|
||||||
|
animationDuration = animationObj.duration,
|
||||||
|
pool = dataSet.components.pool || [],
|
||||||
|
showValue,
|
||||||
|
pathAttr,
|
||||||
|
EVENTARGS = 'eventArgs',
|
||||||
|
/*
|
||||||
|
Called when transpose animation is completed
|
||||||
|
for hiding the dataset
|
||||||
|
*/
|
||||||
|
animCallBack = function() {
|
||||||
|
if (dataSet.visible === false && (dataSet._conatinerHidden === false ||
|
||||||
|
dataSet._conatinerHidden=== undefined)) {
|
||||||
|
container.lineGroup.hide();
|
||||||
|
container.lineShadowGroup.hide();
|
||||||
|
container.anchorShadowGroup.hide();
|
||||||
|
container.anchorGroup.hide();
|
||||||
|
dataLabelContainer && dataLabelContainer.hide();
|
||||||
|
dataSet._conatinerHidden = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
Called when the initial animation compeletes
|
||||||
|
for showing the dataset
|
||||||
|
*/
|
||||||
|
initAnimCallBack = function () {
|
||||||
|
group.lineConnector.attr({
|
||||||
|
'clip-rect': null
|
||||||
|
});
|
||||||
|
// fix for ie11
|
||||||
|
group.lineConnector.node && group.lineConnector.node.removeAttribute('clip-path');
|
||||||
|
if (dataSet.visible !== false) {
|
||||||
|
container.lineShadowGroup.show();
|
||||||
|
container.anchorShadowGroup.show();
|
||||||
|
container.anchorGroup.show();
|
||||||
|
dataLabelContainer && dataLabelContainer.show();
|
||||||
|
}
|
||||||
|
// animCompleteFn();
|
||||||
|
},
|
||||||
|
animFlag = true,
|
||||||
|
setTooltext,
|
||||||
|
connector,
|
||||||
|
dashStyle,
|
||||||
|
yBase = yAxis.getAxisBase(),
|
||||||
|
yBasePos = yAxis.yBasePos = yAxis.getAxisPosition(yBase),
|
||||||
|
clipConf = chartComponents.canvas.config.clip,
|
||||||
|
clipCanvasInit = clipConf['clip-canvas-init'].slice(0),
|
||||||
|
clipCanvas = clipConf['clip-canvas'].slice(0),
|
||||||
|
lineDashStyle = conf.lineDashStyle,
|
||||||
|
lineColorObj = {
|
||||||
|
color: conf.linecolor,
|
||||||
|
alpha: conf.alpha
|
||||||
|
},
|
||||||
|
setColor,
|
||||||
|
setDashStyle,
|
||||||
|
lineSegmentChange,
|
||||||
|
colorObj,
|
||||||
|
linePath = [],
|
||||||
|
lscthash,
|
||||||
|
lineDrawing = 0,
|
||||||
|
mainLinePath = [],
|
||||||
|
lastYPos = null,
|
||||||
|
lastXPos,
|
||||||
|
lastMoveCommand = [],
|
||||||
|
initialAnimation = false,
|
||||||
|
connectorShadow,
|
||||||
|
MAX_MITER_LINEJOIN = 2,
|
||||||
|
cosmeticAttrs,
|
||||||
|
lineElement = dataSet.graphics.lineElement,
|
||||||
|
visible = dataSet.visible,
|
||||||
|
drawVerticalJoins = conf.drawverticaljoins,
|
||||||
|
useForwardSteps = conf.useforwardsteps,
|
||||||
|
labelElement,
|
||||||
|
imageElement,
|
||||||
|
polypath,
|
||||||
|
animType = animationObj.animType,
|
||||||
|
isNewElem,
|
||||||
|
noOfImages = 0,
|
||||||
|
catLabel,
|
||||||
|
halfStep = chart.config.stepatmiddle ? xAxis.getPVR() * 0.5 : 0,
|
||||||
|
radius,
|
||||||
|
borderThickness,
|
||||||
|
topAnchorPos,
|
||||||
|
bottomAnchorPos,
|
||||||
|
canvasTop = chartConfig.canvasTop,
|
||||||
|
canvasBottom = chartConfig.canvasBottom;
|
||||||
|
|
||||||
|
conf.imagesLoaded = 0;
|
||||||
|
/*
|
||||||
|
* 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.lineConnector),
|
||||||
|
anchorShadowGroup: paper.group('anchor-shadow', group.lineConnector),
|
||||||
|
lineGroup: paper.group(LINE, group.lineConnector),
|
||||||
|
anchorGroup: paper.group('anchors', group.lineConnector)
|
||||||
|
};
|
||||||
|
if (!visible) {
|
||||||
|
container.lineShadowGroup.hide();
|
||||||
|
container.anchorShadowGroup.hide();
|
||||||
|
container.lineGroup.hide();
|
||||||
|
container.anchorGroup.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!dataStore) {
|
||||||
|
dataStore = dataSet.components.data = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!dataLabelContainer) {
|
||||||
|
dataLabelContainer = dataSet.graphics.dataLabelContainer = dataSet.graphics.dataLabelContainer ||
|
||||||
|
paper.group(dataLabelStr, dataLabelsLayer);
|
||||||
|
if (!visible) {
|
||||||
|
dataLabelContainer.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (visible) {
|
||||||
|
container.lineShadowGroup.show();
|
||||||
|
container.anchorShadowGroup.show();
|
||||||
|
container.lineGroup.show();
|
||||||
|
container.anchorGroup.show();
|
||||||
|
dataLabelContainer.show();
|
||||||
|
}
|
||||||
|
len = xAxis.getCategoryLen();
|
||||||
|
//create plot elements
|
||||||
|
for (i=0; i<len; i++) {
|
||||||
|
dataObj = dataStore[i];
|
||||||
|
if (!dataObj) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
config = dataObj.config;
|
||||||
|
setValue = config.setValue;
|
||||||
|
setLink = config.setLink;
|
||||||
|
setTooltext = config.setLevelTooltext;
|
||||||
|
showValue = config.showValue;
|
||||||
|
anchorProps = config.anchorProps;
|
||||||
|
symbol = anchorProps.symbol;
|
||||||
|
anchorShadow = anchorProps.shadow;
|
||||||
|
displayValue = config.displayValue;
|
||||||
|
setElement = dataObj.graphics.element;
|
||||||
|
imageElement = dataObj.graphics.image;
|
||||||
|
hotElement = dataObj.graphics.hotElement;
|
||||||
|
labelElement = dataObj.graphics.label;
|
||||||
|
// Creating the data object if not created
|
||||||
|
if (!dataObj) {
|
||||||
|
dataObj = dataStore[i] = {
|
||||||
|
graphics : {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// If value is null
|
||||||
|
if (setValue === null) {
|
||||||
|
lastMoveCommand.length = 0;
|
||||||
|
if (!connectNullData) {
|
||||||
|
lastYPos = null;
|
||||||
|
}
|
||||||
|
setElement && setElement.hide();
|
||||||
|
imageElement && imageElement.hide();
|
||||||
|
labelElement && labelElement.hide();
|
||||||
|
hotElement && hotElement.hide();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Storing the color Object of this data
|
||||||
|
colorObj = {
|
||||||
|
color: config.color,
|
||||||
|
alpha: config.alpha
|
||||||
|
};
|
||||||
|
dashStyle = config.dashStyle;
|
||||||
|
xPos = xAxis.getAxisPosition(i);
|
||||||
|
// On hiding a dataset the y position of the hidden dataset is set to yBasePos
|
||||||
|
if (!dataSet.visible && animationDuration) {
|
||||||
|
yPos = yBasePos;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
yPos = yAxis.getAxisPosition(setValue);
|
||||||
|
}
|
||||||
|
hoverEffects = config.hoverEffects;
|
||||||
|
anchorProps.isAnchorHoverRadius = hoverEffects.anchorRadius;
|
||||||
|
|
||||||
|
radius = anchorProps.radius;
|
||||||
|
borderThickness = anchorProps.borderThickness;
|
||||||
|
|
||||||
|
topAnchorPos = yPos - radius - (borderThickness / 2);
|
||||||
|
bottomAnchorPos = yPos + radius + (borderThickness / 2);
|
||||||
|
|
||||||
|
topAnchorPos < canvasTop && (chartConfig.toleranceTop = mathMax(chartConfig.toleranceTop || 0,
|
||||||
|
canvasTop - topAnchorPos));
|
||||||
|
bottomAnchorPos > canvasBottom && (chartConfig.toleranceBottom = mathMax(
|
||||||
|
chartConfig.toleranceBottom || 0, bottomAnchorPos - canvasBottom));
|
||||||
|
|
||||||
|
label = config.label;
|
||||||
|
catLabel = xAxis.getLabel(i);
|
||||||
|
|
||||||
|
if (!chartConfig.showtooltip) {
|
||||||
|
toolText = BLANKSTRING;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
toolText = config.toolText + (setTooltext ? BLANKSTRING : config.toolTipValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
config.finalTooltext = toolText;
|
||||||
|
|
||||||
|
eventArgs = config.eventArgs || (config.eventArgs = {});
|
||||||
|
// Storing the event arguments
|
||||||
|
eventArgs.index = i;
|
||||||
|
eventArgs.link = setLink;
|
||||||
|
eventArgs.value = setValue;
|
||||||
|
eventArgs.displayValue = displayValue;
|
||||||
|
eventArgs.categoryLabel = catLabel;
|
||||||
|
eventArgs.toolText = toolText;
|
||||||
|
eventArgs.id = conf.userID;
|
||||||
|
eventArgs.datasetIndex = datasetIndex;
|
||||||
|
eventArgs.datasetName = JSONData.seriesname;
|
||||||
|
eventArgs.visible = visible;
|
||||||
|
|
||||||
|
isNewElem = false;
|
||||||
|
// If imageurl is present
|
||||||
|
if (anchorProps.imageUrl) {
|
||||||
|
config.anchorImageLoaded = false;
|
||||||
|
dataObj._xPos = xPos;
|
||||||
|
dataObj._yPos = yPos;
|
||||||
|
imgRef = new Image();
|
||||||
|
imgRef.onload = this._onAnchorImageLoad(dataSet, i, eventArgs, xPos, yPos);
|
||||||
|
imgRef.onerror = this._onErrorSetter(dataSet, i);
|
||||||
|
imgRef.src = anchorProps.imageUrl;
|
||||||
|
noOfImages++;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
imageElement && imageElement.hide();
|
||||||
|
polypath = [symbol[1] || 2, xPos, yPos,
|
||||||
|
anchorProps.radius, anchorProps.startAngle, anchorProps.dip];
|
||||||
|
cosmeticAttrs = {
|
||||||
|
fill: toRaphaelColor({
|
||||||
|
color: anchorProps.bgColor,
|
||||||
|
alpha: anchorProps.bgAlpha
|
||||||
|
}),
|
||||||
|
stroke: toRaphaelColor({
|
||||||
|
color: anchorProps.borderColor,
|
||||||
|
alpha: anchorProps.borderAlpha
|
||||||
|
}),
|
||||||
|
'stroke-width': anchorProps.borderThickness,
|
||||||
|
visibility: !anchorProps.radius ? hiddenStr : visible
|
||||||
|
};
|
||||||
|
// Create anchor element if not created
|
||||||
|
if (!setElement) {
|
||||||
|
if (pool.element && pool.element.length) {
|
||||||
|
setElement = dataObj.graphics.element = pool.element.shift();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
isNewElem = true;
|
||||||
|
setElement = dataObj.graphics.element = paper.polypath(container.anchorGroup);
|
||||||
|
setElement.attr({
|
||||||
|
polypath: polypath
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setElement.show().animateWith(dummyAnimElem, dummyAnimObj, {
|
||||||
|
polypath: polypath
|
||||||
|
}, animationDuration, animType, animFlag && animCallBack);
|
||||||
|
|
||||||
|
setElement.attr(cosmeticAttrs)
|
||||||
|
.shadow(anchorShadow, container.anchorShadowGroup)
|
||||||
|
.data('hoverEnabled', hoverEffects.enabled)
|
||||||
|
.data(EVENTARGS,eventArgs);
|
||||||
|
animFlag = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
connector = dataObj.graphics.connector;
|
||||||
|
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, 0
|
||||||
|
],
|
||||||
|
fill: toRaphaelColor({
|
||||||
|
color: anchorProps.bgColor,
|
||||||
|
alpha: anchorProps.bgAlpha
|
||||||
|
}),
|
||||||
|
stroke: toRaphaelColor({
|
||||||
|
color: anchorProps.borderColor,
|
||||||
|
alpha: anchorProps.borderAlpha
|
||||||
|
}),
|
||||||
|
'stroke-width': anchorProps.borderThickness
|
||||||
|
};
|
||||||
|
setElement && setElement
|
||||||
|
.data('anchorRadius', anchorProps.radius)
|
||||||
|
.data('anchorHoverRadius', hoverEffects.anchorRadius)
|
||||||
|
.data('hoverEnabled', hoverEffects.enabled)
|
||||||
|
.data(SETROLLOVERATTR, setRolloverAttr)
|
||||||
|
.data(SETROLLOUTATTR, setRolloutAttr)
|
||||||
|
.data(EVENTARGS,eventArgs);
|
||||||
|
}
|
||||||
|
|
||||||
|
config.trackerConfig || (config.trackerConfig = {});
|
||||||
|
|
||||||
|
config.trackerConfig.trackerRadius = mathMax(anchorProps.radius,
|
||||||
|
hoverEffects && hoverEffects.anchorRadius || 0, HTP) +
|
||||||
|
((anchorProps.borderThickness || 0) / 2);
|
||||||
|
// // anchor Radius of hot element is set to maximum of hover radius and anchor radius
|
||||||
|
// anchorRadius = mathMax(anchorProps.radius,
|
||||||
|
// hoverEffects &&
|
||||||
|
// hoverEffects.anchorRadius || 0, HTP);
|
||||||
|
|
||||||
|
/*
|
||||||
|
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(':'));
|
||||||
|
// If the y position of the last value is not null
|
||||||
|
if (lastYPos !== null) {
|
||||||
|
if (lastMoveCommand.length) {
|
||||||
|
linePath = linePath.concat(lastMoveCommand);
|
||||||
|
lastMoveCommand.length = 0;
|
||||||
|
}
|
||||||
|
// move to the starting position of the line segment
|
||||||
|
if (!linePath.join(BLANKSTRING)) {
|
||||||
|
linePath.push(M, lastXPos, lastYPos);
|
||||||
|
}
|
||||||
|
if (useForwardSteps) {
|
||||||
|
linePath.push(H, xPos - halfStep);
|
||||||
|
if (drawVerticalJoins) {
|
||||||
|
linePath.push(V, yPos);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
linePath.push(M, xPos - halfStep, yPos);
|
||||||
|
}
|
||||||
|
if (halfStep) {
|
||||||
|
linePath.push(H, xPos);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (drawVerticalJoins) {
|
||||||
|
linePath.push(V, yPos);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
linePath.push(M, lastXPos, yPos);
|
||||||
|
}
|
||||||
|
linePath.push(H, xPos);
|
||||||
|
}
|
||||||
|
// If a new line segment is to be created
|
||||||
|
if (lineSegmentChange) {
|
||||||
|
// If a connector path is to drawn
|
||||||
|
if (!lineDrawing) {
|
||||||
|
if (!connector) {
|
||||||
|
connector = dataObj.graphics.connector = paper.path(linePath,
|
||||||
|
container.lineGroup);
|
||||||
|
initialAnimation = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
connector.animateWith(dummyAnimElem, dummyAnimObj, {
|
||||||
|
path: linePath
|
||||||
|
}, animationDuration, animType, animFlag && animCallBack);
|
||||||
|
|
||||||
|
connector.attr({
|
||||||
|
'stroke-dasharray': setDashStyle,
|
||||||
|
'stroke-width': lineThickness,
|
||||||
|
'stroke': setColor,
|
||||||
|
'stroke-linecap': ROUND,
|
||||||
|
'stroke-linejoin': lineThickness >
|
||||||
|
MAX_MITER_LINEJOIN ? ROUND : miterStr
|
||||||
|
})
|
||||||
|
.shadow(connectorShadow, container.lineShadowGroup);
|
||||||
|
animFlag = false;
|
||||||
|
|
||||||
|
}
|
||||||
|
// Else appending the path to main Line path
|
||||||
|
else {
|
||||||
|
mainLinePath = mainLinePath.concat(linePath);
|
||||||
|
}
|
||||||
|
linePath = [];
|
||||||
|
}
|
||||||
|
// Hide the unused disjoint lines and push it to pool for reusing it next time when new
|
||||||
|
// disjoint lines will be drawn
|
||||||
|
if (!lineSegmentChange) {
|
||||||
|
if (connector) {
|
||||||
|
connector.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Pushing the x y position of move command to lastMoveCommand array
|
||||||
|
lastMoveCommand.push(M, xPos, yPos);
|
||||||
|
}
|
||||||
|
// Storing the xPos and yPos of this data for next iterations
|
||||||
|
lastXPos = xPos;
|
||||||
|
lastYPos = yPos;
|
||||||
|
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.color, config.alpha, config.dashed) === 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
|
||||||
|
*/
|
||||||
|
dataObj._xPos = xPos;
|
||||||
|
dataObj._yPos = yPos;
|
||||||
|
|
||||||
|
!anchorProps.imageUrl && this.drawLabel(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
conf.noOfImages = conf.totalImages = noOfImages;
|
||||||
|
|
||||||
|
if (noOfImages === 0) {
|
||||||
|
jobList.labelDrawID.push(schedular.addJob(dataSet.drawLabel, dataSet, [],
|
||||||
|
lib.priorityList.label));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (linePath.length) {
|
||||||
|
mainLinePath = mainLinePath.concat(linePath);
|
||||||
|
}
|
||||||
|
pathAttr = {
|
||||||
|
path: mainLinePath
|
||||||
|
};
|
||||||
|
cosmeticAttrs = {
|
||||||
|
'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 : miterStr
|
||||||
|
};
|
||||||
|
if (!lineElement) {
|
||||||
|
lineElement = dataSet.graphics.lineElement = paper.path({
|
||||||
|
path: mainLinePath
|
||||||
|
}, container.lineGroup);
|
||||||
|
initialAnimation = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
lineElement.show().animateWith(dummyAnimElem, dummyAnimObj,
|
||||||
|
pathAttr, animationDuration, animType, animFlag && animCallBack);
|
||||||
|
|
||||||
|
lineElement.attr(cosmeticAttrs)
|
||||||
|
.shadow(shadow, container.lineShadowGroup);
|
||||||
|
animFlag = false;
|
||||||
|
|
||||||
|
if (animationDuration && visible && initialAnimation) {
|
||||||
|
container.anchorGroup.hide();
|
||||||
|
container.lineShadowGroup.hide();
|
||||||
|
container.anchorShadowGroup.hide();
|
||||||
|
dataLabelContainer.hide();
|
||||||
|
group.lineConnector.attr({
|
||||||
|
'clip-rect': clipCanvasInit
|
||||||
|
})
|
||||||
|
.animateWith(dummyAnimElem, dummyAnimObj, {
|
||||||
|
'clip-rect': clipCanvas
|
||||||
|
}, animationDuration, NORMALSTRING, initAnimCallBack);
|
||||||
|
}
|
||||||
|
for (i = 0; i < removeDataArrLen; i++) {
|
||||||
|
dataSet._removeDataVisuals(removeDataArr.shift());
|
||||||
|
}
|
||||||
|
dataSet.drawn = true;
|
||||||
|
}
|
||||||
|
}, LINE, {
|
||||||
|
drawverticaljoins : undefined,
|
||||||
|
useforwardsteps : undefined
|
||||||
|
}]);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
/**!
|
||||||
|
* @license FusionCharts JavaScript Library MSStackedCombiDY2D Chart
|
||||||
|
* Copyright FusionCharts Technologies LLP
|
||||||
|
* License Information at <http://www.fusioncharts.com/license>
|
||||||
|
*
|
||||||
|
* @version 3.12.0
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* @module fusioncharts.renderer.javascript.msstackedcombidy2d
|
||||||
|
* @requires fusioncharts.renderer.javascript.msstepline
|
||||||
|
* @export fusioncharts.msstackedcombidy2d.js
|
||||||
|
*/
|
||||||
|
FusionCharts.register('module', ['private', 'modules.renderer.js-msstackedcombidy2d', function () {
|
||||||
|
|
||||||
|
// Register the module with FusionCharts and als oget access to a global
|
||||||
|
// variable within the core's scope.
|
||||||
|
var global = this,
|
||||||
|
win = global.window,
|
||||||
|
CHARTS = 'charts',
|
||||||
|
lib = global.hcLib,
|
||||||
|
chartAPI = lib.chartAPI,
|
||||||
|
moduleCmdQueue = lib.moduleCmdQueue,
|
||||||
|
injectModule = lib.injectModuleDependency, // access module dependency
|
||||||
|
pluck = lib.pluck,
|
||||||
|
UNDEFINED,
|
||||||
|
creditLabel = false && !lib.CREDIT_REGEX.test(win.location.hostname),
|
||||||
|
chartAPIConf,
|
||||||
|
msscdy2dlogic; // store logic as object to be defined later
|
||||||
|
|
||||||
|
msscdy2dlogic = {
|
||||||
|
friendlyName: 'Multi-series Dual Y-Axis Stacked Combination Chart',
|
||||||
|
creditLabel: creditLabel,
|
||||||
|
defaultDatasetType: 'column',
|
||||||
|
applicableDSList: { 'line': true, 'area': true, 'column': true, 'column3d' : true, 'msstepline' : 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,
|
||||||
|
groupManagerName,
|
||||||
|
parentyaxis,
|
||||||
|
prevDataLength,
|
||||||
|
currDataLength,
|
||||||
|
groupManagers = [],
|
||||||
|
dsCount = { },
|
||||||
|
config = iapi.config,
|
||||||
|
diff,
|
||||||
|
catLen = iapi.config.catLen,
|
||||||
|
currCatLen,
|
||||||
|
dataDiff,
|
||||||
|
catDiff,
|
||||||
|
prevData,
|
||||||
|
diffObj,
|
||||||
|
innerLength,
|
||||||
|
startIndex,
|
||||||
|
loopLength,
|
||||||
|
datasetIndex = 0,
|
||||||
|
// map,line,area,column, stores the index of the various dataplots in combinational charts.
|
||||||
|
datasetMap = config.datasetMap || (config.datasetMap = {
|
||||||
|
line : [],
|
||||||
|
area : [],
|
||||||
|
column : [],
|
||||||
|
column3d: [],
|
||||||
|
msstepline : []
|
||||||
|
}),
|
||||||
|
dsTypeRef,
|
||||||
|
tempMap = {
|
||||||
|
line : [],
|
||||||
|
area : [],
|
||||||
|
column : [],
|
||||||
|
column3d: [],
|
||||||
|
msstepline : []
|
||||||
|
},
|
||||||
|
inited = {},
|
||||||
|
parentDataset;
|
||||||
|
|
||||||
|
if (!dataset) {
|
||||||
|
iapi.setChartMessage();
|
||||||
|
}
|
||||||
|
|
||||||
|
iapi.config.categories = dataObj.categories && dataObj.categories[0].category;
|
||||||
|
datasetStore = components.dataset = [];
|
||||||
|
for (i=0; i<length; i++) {
|
||||||
|
parentDataset = dataset[i];
|
||||||
|
|
||||||
|
parentyaxis = parentDataset.parentyaxis || '';
|
||||||
|
|
||||||
|
dsType = pluck (parentDataset.renderas, defaultSeriesType);
|
||||||
|
dsType = dsType && dsType.toLowerCase ();
|
||||||
|
if (dsType === 'stepline' || (dsType === 'line' && Number(parentDataset.drawinstepmode))) {
|
||||||
|
dsType = 'msstepline';
|
||||||
|
}
|
||||||
|
else if (dsType === 'spline') {
|
||||||
|
dsType = 'line';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!applicableDSList[dsType]) {
|
||||||
|
dsType = defaultSeriesType;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// get the DsClass
|
||||||
|
DsClass = FusionCharts.get('component', ['dataset', dsType]);
|
||||||
|
innerLength = (parentDataset.dataset && parentDataset.dataset.length);
|
||||||
|
if (dsCount[dsType] === UNDEFINED) {
|
||||||
|
dsCount[dsType] = 0;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
dsCount[dsType]++;
|
||||||
|
}
|
||||||
|
groupManagerName = 'datasetGroup_' + dsType;
|
||||||
|
// get the ds group class
|
||||||
|
DsGroupClass = FusionCharts.register('component', ['datasetGroup', dsType]);
|
||||||
|
GroupManager = components[groupManagerName];
|
||||||
|
GroupManager && groupManagers.push(GroupManager);
|
||||||
|
dsTypeRef = datasetMap[dsType];
|
||||||
|
if (DsGroupClass && !GroupManager) {
|
||||||
|
GroupManager = components[groupManagerName] = new DsGroupClass ();
|
||||||
|
GroupManager.chart = iapi;
|
||||||
|
GroupManager.init ();
|
||||||
|
}
|
||||||
|
// Resetting the groupManager object if it is an update.
|
||||||
|
else if (GroupManager && !inited[dsType]) {
|
||||||
|
GroupManager.init ();
|
||||||
|
}
|
||||||
|
inited[dsType] = true;
|
||||||
|
for (j = 0, loopLength = innerLength || 1; j < loopLength; j++) {
|
||||||
|
datasetObj = dsTypeRef[0];
|
||||||
|
if (innerLength) {
|
||||||
|
datasetJSON = parentDataset.dataset[j];
|
||||||
|
datasetJSON.parentyaxis = parentDataset.parentyaxis;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
datasetJSON = parentDataset;
|
||||||
|
}
|
||||||
|
if (DsClass) {
|
||||||
|
// If the dataset does not exists.
|
||||||
|
if (!datasetObj) {
|
||||||
|
// create the dataset Object
|
||||||
|
datasetObj = new DsClass ();
|
||||||
|
datasetObj.chart = iapi;
|
||||||
|
datasetObj.index = datasetIndex;
|
||||||
|
datasetObj.init (datasetJSON);
|
||||||
|
}
|
||||||
|
// If the dataset exists incase the chart is updated using setChartData() method.
|
||||||
|
else {
|
||||||
|
currCatLen = xAxis.getCategoryLen();
|
||||||
|
catDiff = catLen - currCatLen;
|
||||||
|
prevData = datasetObj.JSONData;
|
||||||
|
prevDataLength = prevData.data && prevData.data.length;
|
||||||
|
currDataLength = (datasetJSON.data && datasetJSON.data.length) || 0;
|
||||||
|
|
||||||
|
dataDiff = prevDataLength - currDataLength;
|
||||||
|
|
||||||
|
diffObj = iapi._getDiff(dataDiff, currDataLength, catDiff, currCatLen);
|
||||||
|
diff = diffObj.diff;
|
||||||
|
startIndex = diffObj.startIndex;
|
||||||
|
|
||||||
|
// Removing data plots if the number of current data plots/categories
|
||||||
|
// is more than the existing ones.
|
||||||
|
if (diff > 0) {
|
||||||
|
datasetObj.removeData(startIndex, diff, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
datasetObj.JSONData = datasetJSON;
|
||||||
|
datasetObj.index = datasetIndex;
|
||||||
|
datasetObj.configure();
|
||||||
|
dsTypeRef.splice(0, 1);
|
||||||
|
}
|
||||||
|
// add to group manager
|
||||||
|
GroupManager && GroupManager.addDataSet (datasetObj, dsCount[dsType], j);
|
||||||
|
// Push new dataset object into both tempmap array and datastore array
|
||||||
|
tempMap[dsType].push(datasetObj);
|
||||||
|
datasetStore.push (datasetObj);
|
||||||
|
datasetIndex++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
iapi._setDatasetOrder();
|
||||||
|
// Removing unused datasets if any
|
||||||
|
for (dataset in datasetMap) {
|
||||||
|
dsTypeRef = datasetMap[dataset];
|
||||||
|
length = dsTypeRef.length;
|
||||||
|
for (j = 0; j < length; j++) {
|
||||||
|
legend.removeItem(dsTypeRef[j].legendItemId);
|
||||||
|
lib.componentDispose.call(dsTypeRef[j]);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
config.datasetMap = tempMap;
|
||||||
|
iapi.config.catLen = xAxis.getCategoryLen();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
chartAPIConf = {
|
||||||
|
hasLineSet : 0,
|
||||||
|
isstacked : true,
|
||||||
|
isdual : true,
|
||||||
|
drawverticaljoins: 1,
|
||||||
|
useforwardsteps: 1,
|
||||||
|
zeroplanethickness: 1,
|
||||||
|
zeroplanealpha: 40,
|
||||||
|
showzeroplaneontop: 0,
|
||||||
|
stepatmiddle: 1,
|
||||||
|
enablemousetracking: true
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the definition to chart structure.
|
||||||
|
if (chartAPI.msdybasecartesian) {
|
||||||
|
chartAPI('msstackedcombidy2d', msscdy2dlogic, chartAPI.msdybasecartesian, chartAPIConf, chartAPI.areabase);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
injectModule(CHARTS, 'msstackedcombidy2d', 1); // add charts dependency
|
||||||
|
|
||||||
|
// enqueue definition
|
||||||
|
moduleCmdQueue[CHARTS].unshift({
|
||||||
|
cmd: '_call',
|
||||||
|
obj: win,
|
||||||
|
args: [function () {
|
||||||
|
if (!chartAPI.msdybasecartesian) {
|
||||||
|
global.raiseError(global.core, '12052314141', 'run',
|
||||||
|
'JavaScriptRenderer~MSStackedCombiDY2D._call()',
|
||||||
|
new Error('FusionCharts.HC.Charts.js is required in order to define vizualization'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
chartAPI('msstackedcombidy2d', msscdy2dlogic, chartAPI.msdybasecartesian, chartAPIConf,
|
||||||
|
chartAPI.areabase);
|
||||||
|
|
||||||
|
}, [], win]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}]);
|
||||||
|
|
||||||
|
|
||||||
|
}));
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,822 @@
|
|||||||
|
|
||||||
|
(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 <http://www.fusioncharts.com/license>
|
||||||
|
*
|
||||||
|
* @version 3.12.0
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*
|
||||||
|
* @module fusioncharts.renderer.javascript.ssgrid
|
||||||
|
* @export fusioncharts.ssgrid.js
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
FusionCharts.register('module', ['private', 'modules.renderer.js-ssgrid', function () {
|
||||||
|
|
||||||
|
var global = this,
|
||||||
|
lib = global.hcLib,
|
||||||
|
BLANKSTRING = lib.BLANKSTRING,
|
||||||
|
pluck = lib.pluck,
|
||||||
|
pluckNumber = lib.pluckNumber,
|
||||||
|
chartAPI = lib.chartAPI,
|
||||||
|
convertColor = lib.graphics.convertColor,
|
||||||
|
getFirstColor = lib.getFirstColor,
|
||||||
|
setLineHeight = lib.setLineHeight,
|
||||||
|
win = global.window,
|
||||||
|
math = Math,
|
||||||
|
mathMin = math.min,
|
||||||
|
mathMax = math.max,
|
||||||
|
mathCeil = math.ceil,
|
||||||
|
mathRound = math.round,
|
||||||
|
toRaphaelColor = lib.toRaphaelColor,
|
||||||
|
PXSTRING = 'px',
|
||||||
|
M = 'M',
|
||||||
|
L = 'L',
|
||||||
|
UNDEFINED,
|
||||||
|
POSITION_START = lib.POSITION_START,
|
||||||
|
HUNDREDSTRING = lib.HUNDREDSTRING,
|
||||||
|
COLOR_TRANSPARENT = lib.COLOR_TRANSPARENT,
|
||||||
|
creditLabel = false && !lib.CREDIT_REGEX.test(win.location.hostname);
|
||||||
|
|
||||||
|
chartAPI('ssgrid', {
|
||||||
|
standaloneInit: true,
|
||||||
|
creditLabel: creditLabel,
|
||||||
|
friendlyName: 'ssgrid Chart',
|
||||||
|
defaultDatasetType: 'ssgrid',
|
||||||
|
canvasBorderThickness: 1,
|
||||||
|
singleseries: true,
|
||||||
|
bgColor: '#FFFFFF',
|
||||||
|
bgAlpha: 100,
|
||||||
|
|
||||||
|
_drawCaption: function () {
|
||||||
|
},
|
||||||
|
_drawCanvas: function () {
|
||||||
|
},
|
||||||
|
_createAxes: function () {
|
||||||
|
// Empty stub because subset of guages (pyramid, funnel) dont use axis.
|
||||||
|
},
|
||||||
|
_feedAxesRawData: function () {
|
||||||
|
// Empty stub because subset of guages (pyramid, funnel) dont use axis.
|
||||||
|
},
|
||||||
|
_setCategories: function () {
|
||||||
|
// Empty stub because subset of guages category.
|
||||||
|
},
|
||||||
|
_setAxisLimits: function () {
|
||||||
|
// Empty stub because subset of guages axis.
|
||||||
|
},
|
||||||
|
_spaceManager: function () {
|
||||||
|
var dataset = this.components.dataset[0];
|
||||||
|
|
||||||
|
dataset._manageSpace && this._allocateSpace(dataset._manageSpace());
|
||||||
|
}
|
||||||
|
}, chartAPI.sscartesian);
|
||||||
|
|
||||||
|
|
||||||
|
FusionCharts.register('component', ['dataset', 'ssgrid', {
|
||||||
|
init: function (datasetJSON) {
|
||||||
|
var dataSet = this,
|
||||||
|
chart = dataSet.chart,
|
||||||
|
visible;
|
||||||
|
|
||||||
|
if (!datasetJSON) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
dataSet.JSONData = datasetJSON;
|
||||||
|
dataSet.chartGraphics = chart.chartGraphics;
|
||||||
|
dataSet.components = {
|
||||||
|
};
|
||||||
|
|
||||||
|
dataSet.config = {
|
||||||
|
};
|
||||||
|
|
||||||
|
dataSet.graphics = {
|
||||||
|
};
|
||||||
|
|
||||||
|
dataSet.visible = visible = pluckNumber(dataSet.JSONData.visible,
|
||||||
|
!Number(dataSet.JSONData.initiallyhidden), 1) === 1;
|
||||||
|
dataSet.configure();
|
||||||
|
},
|
||||||
|
|
||||||
|
configure: function () {
|
||||||
|
var dataSet = this,
|
||||||
|
chart = dataSet.chart,
|
||||||
|
conf = dataSet.config,
|
||||||
|
chartAttr = chart.jsonData.chart || {},
|
||||||
|
colorM = chart.components.colorManager,
|
||||||
|
isBar = chart.isBar;
|
||||||
|
|
||||||
|
// Fill color
|
||||||
|
conf.plotFillAngle = pluckNumber(360 - chartAttr.plotfillangle, (isBar ? 180 : 90));
|
||||||
|
conf.plotFillAlpha = pluck(chartAttr.plotfillalpha, HUNDREDSTRING);
|
||||||
|
// Border
|
||||||
|
conf.plotBorderAlpha = pluck(chartAttr.plotborderalpha, HUNDREDSTRING);
|
||||||
|
conf.plotBorderColor = pluck(chartAttr.plotbordercolor, colorM.getColor('plotBorderColor'));
|
||||||
|
conf.plotDashLen = pluckNumber(chartAttr.plotborderdashlen, 5);
|
||||||
|
conf.plotDashGap = pluckNumber(chartAttr.plotborderdashgap, 4);
|
||||||
|
|
||||||
|
//Now, store all parameters
|
||||||
|
//Whether to show percent values?
|
||||||
|
conf.showPercentValues = pluckNumber(chartAttr.showpercentvalues, 0);
|
||||||
|
//Number of items per page
|
||||||
|
conf.numberItemsPerPage = pluckNumber(chartAttr.numberitemsperpage) || UNDEFINED;
|
||||||
|
//Whether to show shadow
|
||||||
|
conf.showShadow = pluckNumber(chartAttr.showshadow, 0);
|
||||||
|
//Font Properties
|
||||||
|
conf.baseFont = pluck(chartAttr.basefont, 'Verdana,sans');
|
||||||
|
conf.baseFontSize = pluck(chartAttr.basefontsize, 10) + PXSTRING;
|
||||||
|
conf.baseFontColor = getFirstColor(pluck(chartAttr.basefontcolor,
|
||||||
|
colorM.getColor('baseFontColor')));
|
||||||
|
|
||||||
|
//Alternate Row Color
|
||||||
|
conf.alternateRowBgColor = getFirstColor(pluck(chartAttr.alternaterowbgcolor,
|
||||||
|
colorM.getColor('altHGridColor')));
|
||||||
|
conf.alternateRowBgAlpha = pluck(chartAttr.alternaterowbgalpha,
|
||||||
|
colorM.getColor('altHGridAlpha')) + BLANKSTRING;
|
||||||
|
|
||||||
|
//List divider properties
|
||||||
|
conf.listRowDividerThickness = pluckNumber(chartAttr.listrowdividerthickness, 1);
|
||||||
|
conf.listRowDividerColor = getFirstColor(pluck(chartAttr.listrowdividercolor,
|
||||||
|
colorM.getColor('borderColor')));
|
||||||
|
conf.listRowDividerAlpha = pluckNumber(pluckNumber(chartAttr.listrowdivideralpha,
|
||||||
|
colorM.getColor('altHGridAlpha') + 15)) + BLANKSTRING;
|
||||||
|
|
||||||
|
//Color box properties
|
||||||
|
conf.colorBoxWidth = pluckNumber(chartAttr.colorboxwidth, 8);
|
||||||
|
conf.colorBoxHeight = pluckNumber(chartAttr.colorboxheight, 8);
|
||||||
|
//Navigation Properties
|
||||||
|
conf.navButtonRadius = pluckNumber(chartAttr.navbuttonradius, 7);
|
||||||
|
conf.navButtonColor = getFirstColor(pluck(chartAttr.navbuttoncolor,
|
||||||
|
colorM.getColor('canvasBorderColor')));
|
||||||
|
conf.navButtonHoverColor = getFirstColor(pluck(chartAttr.navbuttonhovercolor,
|
||||||
|
colorM.getColor('altHGridColor')));
|
||||||
|
|
||||||
|
//Paddings
|
||||||
|
conf.textVerticalPadding = pluckNumber(chartAttr.textverticalpadding, 3);
|
||||||
|
conf.navButtonPadding = pluckNumber(chartAttr.navbuttonpadding, 5);
|
||||||
|
conf.colorBoxPadding = pluckNumber(chartAttr.colorboxpadding, 10);
|
||||||
|
conf.valueColumnPadding = pluckNumber(chartAttr.valuecolumnpadding, 10);
|
||||||
|
conf.nameColumnPadding = pluckNumber(chartAttr.namecolumnpadding, 5);
|
||||||
|
|
||||||
|
// Shadow
|
||||||
|
conf.shadow = pluckNumber(chartAttr.showshadow, 0) ? {
|
||||||
|
enabled: true,
|
||||||
|
opacity: conf.plotFillAlpha / 100
|
||||||
|
} : false;
|
||||||
|
|
||||||
|
// Reset the pageIndex while data is updated.
|
||||||
|
dataSet.currentPage = 0;
|
||||||
|
|
||||||
|
dataSet._setConfigure();
|
||||||
|
},
|
||||||
|
|
||||||
|
_setConfigure: function () {
|
||||||
|
var dataSet = this,
|
||||||
|
chart = dataSet.chart,
|
||||||
|
conf = dataSet.config,
|
||||||
|
JSONData = dataSet.JSONData,
|
||||||
|
setDataArr = chart.jsonData && chart.jsonData.data,
|
||||||
|
setDataLen = setDataArr && setDataArr.length || 0,
|
||||||
|
prevDataLen = JSONData && JSONData.data && JSONData.data.length || 0,
|
||||||
|
len = mathMax(setDataLen, prevDataLen),
|
||||||
|
components = chart.components,
|
||||||
|
colorM = components.colorManager,
|
||||||
|
NumberFormatter = components.numberFormatter,
|
||||||
|
index = dataSet.index || dataSet.positionIndex,
|
||||||
|
plotColor = conf.plotColor = colorM.getPlotColor(index),
|
||||||
|
parseUnsafeString = lib.parseUnsafeString,
|
||||||
|
formatedVal,
|
||||||
|
plotDashLen,
|
||||||
|
plotDashGap,
|
||||||
|
plotBorderThickness = conf.plotBorderThickness,
|
||||||
|
plotFillRatio,
|
||||||
|
plotBorderDashStyle,
|
||||||
|
initailPlotBorderDashStyle = conf.plotBorderDashStyle,
|
||||||
|
setData,
|
||||||
|
setValue,
|
||||||
|
dataObj,
|
||||||
|
config,
|
||||||
|
getDashStyle = lib.getDashStyle,
|
||||||
|
dataStore = dataSet.components.data,
|
||||||
|
plotFillAlpha,
|
||||||
|
dataLabel,
|
||||||
|
toolTipValue,
|
||||||
|
setDisplayValue,
|
||||||
|
setDataDashed,
|
||||||
|
setDataPlotDashLen,
|
||||||
|
setDataPlotDashGap,
|
||||||
|
i,
|
||||||
|
actualDataLen = 0,
|
||||||
|
sumOfValues = 0,
|
||||||
|
textStyle,
|
||||||
|
tempIndex;
|
||||||
|
|
||||||
|
if (!dataStore) {
|
||||||
|
dataStore = dataSet.components.data = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parsing the attributes and values at set level.
|
||||||
|
for (i = 0; i < len && setDataArr; i++) {
|
||||||
|
|
||||||
|
setData = setDataArr[i];
|
||||||
|
// If setData is not defined, remove the previously stored data from dataStore.
|
||||||
|
if (!setData) {
|
||||||
|
// dataStore[i] && dataStore.splice(i, len);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
setValue = NumberFormatter.getCleanValue(setData.value);
|
||||||
|
dataLabel = parseUnsafeString(pluck(setData.label, setData.name));
|
||||||
|
|
||||||
|
dataObj = config = UNDEFINED;
|
||||||
|
|
||||||
|
if (setValue == null && dataLabel == BLANKSTRING) {
|
||||||
|
continue;
|
||||||
|
} else {
|
||||||
|
dataObj = dataStore[actualDataLen] || (dataStore[actualDataLen] = { 'config': {} });
|
||||||
|
config = dataObj.config;
|
||||||
|
}
|
||||||
|
|
||||||
|
config.tooltext = setData.tooltext;
|
||||||
|
config.showValue = pluckNumber(setData.showvalue, conf.showValues);
|
||||||
|
config.setValue = setValue = NumberFormatter.getCleanValue(setData.value);
|
||||||
|
config.setLink = pluck(setData.link);
|
||||||
|
config.toolTipValue = toolTipValue = NumberFormatter.dataLabels(setValue);
|
||||||
|
config.setDisplayValue = setDisplayValue = parseUnsafeString(setData.displayvalue);
|
||||||
|
// display value and label
|
||||||
|
config.displayValue = NumberFormatter.dataLabels(setValue) || BLANKSTRING;
|
||||||
|
config.dataLabel = parseUnsafeString(pluck(setData.label, setData.name)) || BLANKSTRING;
|
||||||
|
|
||||||
|
setDataDashed = pluckNumber(setData.dashed);
|
||||||
|
setDataPlotDashLen = pluckNumber(setData.dashlen, plotDashLen);
|
||||||
|
setDataPlotDashGap = plotDashGap = pluckNumber(setData.dashgap, conf.plotDashGap);
|
||||||
|
|
||||||
|
sumOfValues = sumOfValues + setValue;
|
||||||
|
actualDataLen += 1;
|
||||||
|
|
||||||
|
config.plotBorderDashStyle = plotBorderDashStyle = setDataDashed === 1 ?
|
||||||
|
getDashStyle(setDataPlotDashLen, setDataPlotDashGap, plotBorderThickness) :
|
||||||
|
(setDataDashed === 0 ? 'none' : initailPlotBorderDashStyle);
|
||||||
|
|
||||||
|
plotColor = pluck(setData.color, colorM.getPlotColor(pluckNumber((tempIndex - len), i)));
|
||||||
|
|
||||||
|
plotFillRatio = pluck(setData.ratio, conf.plotFillRatio);
|
||||||
|
|
||||||
|
|
||||||
|
plotFillAlpha = pluck(setData.alpha, conf.plotFillAlpha);
|
||||||
|
// config.colorArr = colorArr = lib.graphics.getColumnColor();
|
||||||
|
config.color = convertColor(plotColor, plotFillAlpha);
|
||||||
|
config.borderColor = convertColor(conf.plotBorderColor,
|
||||||
|
pluck(setData.alpha, conf.plotBorderAlpha).toString());
|
||||||
|
|
||||||
|
formatedVal = config.toolTipValue;
|
||||||
|
|
||||||
|
tempIndex++;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Creating the text style for SSGrid
|
||||||
|
textStyle = {
|
||||||
|
fontFamily: conf.baseFont,
|
||||||
|
fontSize: conf.baseFontSize,
|
||||||
|
color: conf.baseFontColor
|
||||||
|
};
|
||||||
|
setLineHeight(textStyle);
|
||||||
|
conf.textStyle = textStyle;
|
||||||
|
conf.actualDataLen = actualDataLen;
|
||||||
|
conf.sumOfValues = sumOfValues;
|
||||||
|
},
|
||||||
|
|
||||||
|
_manageSpace: function () {
|
||||||
|
var dataSet = this,
|
||||||
|
chart = dataSet.chart,
|
||||||
|
conf = dataSet.config,
|
||||||
|
smartLabel = chart.linkedItems.smartLabel,
|
||||||
|
dataStore = dataSet.components.data,
|
||||||
|
chartConfig = chart.config,
|
||||||
|
chartAttr = chart.jsonData.chart || {},
|
||||||
|
borderThickness = chartConfig.borderThickness = pluckNumber(chartAttr.showborder, 1) ?
|
||||||
|
pluckNumber(chartAttr.borderthickness, 1) : 0,
|
||||||
|
chartHeight = chartConfig.height - (borderThickness * 2),
|
||||||
|
chartWidth = chartConfig.width - (borderThickness * 2),
|
||||||
|
textStyle = conf.textStyle,
|
||||||
|
actualDataLen = conf.actualDataLen,
|
||||||
|
sumOfValues = conf.sumOfValues,
|
||||||
|
components = chart.components,
|
||||||
|
NumberFormatter = components.numberFormatter,
|
||||||
|
maxValWidth = 0,
|
||||||
|
i,
|
||||||
|
config,
|
||||||
|
rowHeight,
|
||||||
|
itemsPerPage,
|
||||||
|
cHeight,
|
||||||
|
maxHeight,
|
||||||
|
numItems,
|
||||||
|
maxLabelWidth,
|
||||||
|
dataObj,
|
||||||
|
textSizeObj,
|
||||||
|
len;
|
||||||
|
|
||||||
|
// setting the style to LabelManagement
|
||||||
|
smartLabel.useEllipsesOnOverflow(chartConfig.useEllipsesWhenOverflow);
|
||||||
|
smartLabel.setStyle (textStyle);
|
||||||
|
len = dataStore.length;
|
||||||
|
|
||||||
|
for (i = 0; i < len; i++) {
|
||||||
|
dataObj = dataStore[i];
|
||||||
|
if (!dataObj) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
config = dataObj && dataObj.config;
|
||||||
|
// If show values as percent
|
||||||
|
conf.showPercentValues && (config.displayValue =
|
||||||
|
NumberFormatter.percentValue(config.setValue / sumOfValues * 100));
|
||||||
|
|
||||||
|
//Now, we need to iterate through the value fields to get the max width
|
||||||
|
//Simulate
|
||||||
|
textSizeObj = smartLabel.getOriSize(config.displayValue);
|
||||||
|
//Store maximum width
|
||||||
|
maxValWidth = mathMax(maxValWidth, (textSizeObj.width + conf.valueColumnPadding));
|
||||||
|
}
|
||||||
|
|
||||||
|
//Get the max of two
|
||||||
|
maxHeight = parseInt(textStyle.lineHeight, 10);
|
||||||
|
//Add text vertical padding (for both top and bottom)
|
||||||
|
maxHeight = maxHeight + 2 * conf.textVerticalPadding;
|
||||||
|
//Also compare with color box height - as that's also an integral part
|
||||||
|
maxHeight = mathMax(maxHeight, (conf.colorBoxHeight + conf.listRowDividerThickness));
|
||||||
|
//Now that we have the max possible height, we need to calculate the page length.
|
||||||
|
//First check if we can fit all items in a single page
|
||||||
|
numItems = chartHeight / maxHeight;
|
||||||
|
|
||||||
|
//Now, there are two different flows from here on w.r.t calculation of height
|
||||||
|
//Case 1: If the user has specified his own number of items per page
|
||||||
|
if (conf.numberItemsPerPage && numItems >= conf.numberItemsPerPage) {
|
||||||
|
//In this case, we simply divide the page into the segments chosen by user
|
||||||
|
//If all items are able to fit in this single page
|
||||||
|
if (conf.numberItemsPerPage >= actualDataLen) {
|
||||||
|
//This height is perfectly alright and we can fit all
|
||||||
|
//items in a single page
|
||||||
|
//Set number items per page to total items.
|
||||||
|
conf.numberItemsPerPage = actualDataLen;
|
||||||
|
//So, NO need to show the navigation buttons
|
||||||
|
rowHeight = chartHeight / conf.numberItemsPerPage;
|
||||||
|
//End Index
|
||||||
|
itemsPerPage = actualDataLen;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//We need to allot space for the navigation buttons
|
||||||
|
cHeight = chartHeight;
|
||||||
|
//Deduct the radius and padding of navigation buttons from height
|
||||||
|
cHeight = cHeight - 2 * (conf.navButtonPadding + conf.navButtonRadius);
|
||||||
|
//Now, get the maximum possible number of items that we can fit in each page
|
||||||
|
itemsPerPage = conf.numberItemsPerPage;
|
||||||
|
//Height for each row
|
||||||
|
rowHeight = cHeight / itemsPerPage;
|
||||||
|
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//Case 2: If we've to calculate best fit. We already have the maximum height
|
||||||
|
//required by each row of data.
|
||||||
|
//Storage for maximum height
|
||||||
|
//Now, get the height required for any single text field
|
||||||
|
//We do not consider wrapping.
|
||||||
|
if (numItems >= actualDataLen) {
|
||||||
|
//We can fit all items in one page
|
||||||
|
rowHeight = (chartHeight / actualDataLen);
|
||||||
|
//Navigation buttons are not required.
|
||||||
|
//End Index
|
||||||
|
itemsPerPage = actualDataLen;
|
||||||
|
} else {
|
||||||
|
//We cannot fit all items in same page. So, need to show
|
||||||
|
//navigation buttons. Reserve space for them.
|
||||||
|
//We need to allot space for the navigation buttons
|
||||||
|
cHeight = chartHeight;
|
||||||
|
//Deduct the radius and padding of navigation buttons from height
|
||||||
|
cHeight = cHeight - 2 * (conf.navButtonPadding + conf.navButtonRadius);
|
||||||
|
//Now, get the maximum possible number of items that we can fit in each page
|
||||||
|
itemsPerPage = Math.floor (cHeight / maxHeight);
|
||||||
|
//Height for each row
|
||||||
|
rowHeight = cHeight / itemsPerPage;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Now, we calculate the maximum avaiable width for data label column
|
||||||
|
maxLabelWidth = chartWidth - conf.colorBoxPadding -
|
||||||
|
conf.colorBoxWidth - conf.nameColumnPadding -
|
||||||
|
maxValWidth - conf.valueColumnPadding;
|
||||||
|
|
||||||
|
conf.labelX = conf.colorBoxPadding + conf.colorBoxWidth + conf.nameColumnPadding;
|
||||||
|
|
||||||
|
conf.valueX = conf.colorBoxPadding + conf.colorBoxWidth +
|
||||||
|
conf.nameColumnPadding + maxLabelWidth + conf.valueColumnPadding;
|
||||||
|
conf.valueColumnPadding = conf.valueColumnPadding;
|
||||||
|
conf.rowHeight = rowHeight;
|
||||||
|
conf.itemsPerPage = itemsPerPage;
|
||||||
|
|
||||||
|
conf.listRowDividerAttr = {
|
||||||
|
'stroke-width': conf.listRowDividerThickness,
|
||||||
|
stroke: convertColor(conf.listRowDividerColor,
|
||||||
|
conf.listRowDividerAlpha)
|
||||||
|
};
|
||||||
|
|
||||||
|
conf.alternateRowColor = convertColor(conf.alternateRowBgColor,
|
||||||
|
conf.alternateRowBgAlpha);
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: 0,
|
||||||
|
bottom: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
draw: function () {
|
||||||
|
var dataSet = this,
|
||||||
|
conf = dataSet.config,
|
||||||
|
// visible = dataSet.visible,
|
||||||
|
chart = dataSet.chart,
|
||||||
|
chartComponents = chart.components,
|
||||||
|
smartLabel = chart.linkedItems.smartLabel,
|
||||||
|
paper = chartComponents.paper,
|
||||||
|
layers = chart.graphics,
|
||||||
|
datasetGroup = layers.datasetGroup,
|
||||||
|
components = dataSet.components,
|
||||||
|
dataStore = components.data,
|
||||||
|
prevDataLen = dataStore.length,
|
||||||
|
setDataArr = chart.jsonData && chart.jsonData.data,
|
||||||
|
setDataLen = setDataArr && setDataArr.length || 0,
|
||||||
|
len = mathMax(setDataLen, prevDataLen),
|
||||||
|
graphics = dataSet.graphics,
|
||||||
|
container,
|
||||||
|
chartConfig = chart.config,
|
||||||
|
borderThickness = chartConfig.borderThickness,
|
||||||
|
xPos = borderThickness,
|
||||||
|
yPos = borderThickness,
|
||||||
|
width = chart.config.width - chartConfig.borderThickness,
|
||||||
|
alternateRowColor = toRaphaelColor(conf.alternateRowColor),
|
||||||
|
rowHeight = conf.rowHeight,
|
||||||
|
listRowDividerAttr = conf.listRowDividerAttr,
|
||||||
|
listRowDividerWidth = listRowDividerAttr['stroke-width'],
|
||||||
|
halfW = (listRowDividerWidth % 2 / 2),
|
||||||
|
colorBoxX = conf.colorBoxPadding + borderThickness,
|
||||||
|
colorBoxHeight = conf.colorBoxHeight,
|
||||||
|
colorBoxWidth = conf.colorBoxWidth,
|
||||||
|
labelX = conf.labelX + borderThickness,
|
||||||
|
valueX = conf.valueX + borderThickness,
|
||||||
|
textStyle = conf.textStyle,
|
||||||
|
// actualDataLen = conf.actualDataLen,
|
||||||
|
itemsPerPage = conf.itemsPerPage,
|
||||||
|
pageIndex = 0,
|
||||||
|
currentPage = dataSet.currentPage || (dataSet.currentPage = 0),
|
||||||
|
eventArgs = {},
|
||||||
|
displayValueWidth,
|
||||||
|
i,
|
||||||
|
dataObj,
|
||||||
|
config,
|
||||||
|
setValue,
|
||||||
|
alternateRowElem,
|
||||||
|
crispY,
|
||||||
|
listRowDivideElem,
|
||||||
|
colorBoxElem,
|
||||||
|
labelTextEle,
|
||||||
|
valueTextEle;
|
||||||
|
/*
|
||||||
|
* Creating a container group for the graphic element of column plots if
|
||||||
|
* not present and attaching it to its parent group.
|
||||||
|
*/
|
||||||
|
if (!dataSet.graphics.container) {
|
||||||
|
dataSet.graphics.container = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
dataSet.currentPage = currentPage = mathMin(mathCeil(len / itemsPerPage) - 1, currentPage);
|
||||||
|
|
||||||
|
// Create plot elements.
|
||||||
|
for (i = 0; i < len; i++) {
|
||||||
|
|
||||||
|
// Create individual group to store graphics elements page wise.
|
||||||
|
if ((i + 1) % itemsPerPage == 1 || itemsPerPage == 1 || !container) {
|
||||||
|
yPos = borderThickness;
|
||||||
|
container = dataSet.graphics.container[pageIndex];
|
||||||
|
if (!container) {
|
||||||
|
container = dataSet.graphics.container[pageIndex] =
|
||||||
|
paper.group('grid-' + pageIndex, datasetGroup);
|
||||||
|
}
|
||||||
|
(pageIndex !== currentPage) ? container.hide() : container.show();
|
||||||
|
pageIndex += 1;
|
||||||
|
eventArgs = {
|
||||||
|
pageId: pageIndex,
|
||||||
|
data: []
|
||||||
|
};
|
||||||
|
|
||||||
|
container.data('eventArgs', eventArgs);
|
||||||
|
}
|
||||||
|
|
||||||
|
dataObj = dataStore[i];
|
||||||
|
if (!dataObj) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
config = dataObj && dataObj.config;
|
||||||
|
setValue = config && config.setValue;
|
||||||
|
graphics = dataObj && (dataObj.graphics || (dataObj.graphics = {}));
|
||||||
|
|
||||||
|
if (i >= setDataLen) {
|
||||||
|
graphics.alternateRow && graphics.alternateRow.remove();
|
||||||
|
graphics.alternateRow = UNDEFINED;
|
||||||
|
graphics.listRowDivideElem && graphics.listRowDivideElem.remove();
|
||||||
|
graphics.listRowDivideElem = UNDEFINED;
|
||||||
|
graphics.element && graphics.element.remove();
|
||||||
|
graphics.element = UNDEFINED;
|
||||||
|
graphics.label && graphics.label.remove();
|
||||||
|
graphics.label = UNDEFINED;
|
||||||
|
graphics.displayValue && graphics.displayValue.remove();
|
||||||
|
graphics.displayValue = UNDEFINED;
|
||||||
|
graphics.listRowDivideElem && graphics.listRowDivideElem.remove();
|
||||||
|
graphics.listRowDivideElem = UNDEFINED;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (i % 2 === 0) {
|
||||||
|
if (!graphics.alternateRow) {
|
||||||
|
alternateRowElem = graphics.alternateRow = paper.rect();
|
||||||
|
}
|
||||||
|
container.appendChild(graphics.alternateRow);
|
||||||
|
graphics.alternateRow.attr({
|
||||||
|
x: xPos,
|
||||||
|
y: yPos + (conf.listRowDividerThickness * 0.5),
|
||||||
|
width: width - borderThickness,
|
||||||
|
height: rowHeight,
|
||||||
|
// r: 0,
|
||||||
|
fill: alternateRowColor,
|
||||||
|
'stroke-width': 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw the color BOX
|
||||||
|
if (!graphics.element) {
|
||||||
|
colorBoxElem = graphics.element = paper.rect();
|
||||||
|
}
|
||||||
|
container.appendChild(graphics.element);
|
||||||
|
graphics.element.attr({
|
||||||
|
x: colorBoxX,
|
||||||
|
y: yPos + (rowHeight / 2) - (colorBoxHeight /
|
||||||
|
2),
|
||||||
|
width: colorBoxWidth,
|
||||||
|
height: colorBoxHeight,
|
||||||
|
// r: 0,
|
||||||
|
fill : config.color,
|
||||||
|
'stroke-width': 0,
|
||||||
|
stroke: '#000000'
|
||||||
|
})
|
||||||
|
.shadow(conf.shadow);
|
||||||
|
|
||||||
|
// Draw value text
|
||||||
|
displayValueWidth = smartLabel.getSmartText(config.displayValue).width || 0;
|
||||||
|
if (!graphics.displayValue) {
|
||||||
|
valueTextEle = graphics.displayValue = paper.text();
|
||||||
|
}
|
||||||
|
container.appendChild(graphics.displayValue);
|
||||||
|
graphics.displayValue.attr({
|
||||||
|
text: config.displayValue,
|
||||||
|
// title: (set.originalText || ''),
|
||||||
|
x: valueX,
|
||||||
|
y: (yPos + (rowHeight / 2)),
|
||||||
|
fill: textStyle.color,
|
||||||
|
direction: conf.textDirection,
|
||||||
|
'text-anchor': POSITION_START
|
||||||
|
})
|
||||||
|
.css (textStyle);
|
||||||
|
|
||||||
|
// Draw label text
|
||||||
|
if (!graphics.label) {
|
||||||
|
labelTextEle = graphics.label = paper.text();
|
||||||
|
}
|
||||||
|
config.label = smartLabel.getSmartText(config.dataLabel, width -
|
||||||
|
(displayValueWidth + colorBoxWidth + colorBoxX), rowHeight);
|
||||||
|
container.appendChild(graphics.label);
|
||||||
|
graphics.label.attr({
|
||||||
|
text: config.label.text,
|
||||||
|
// title: (set.originalText || ''),
|
||||||
|
x: labelX,
|
||||||
|
y: (yPos + (rowHeight / 2)),
|
||||||
|
fill: textStyle.color,
|
||||||
|
direction: conf.textDirection,
|
||||||
|
'text-anchor': POSITION_START
|
||||||
|
})
|
||||||
|
.css(textStyle);
|
||||||
|
|
||||||
|
// Store data point configuration in container
|
||||||
|
eventArgs.data.push({
|
||||||
|
color: config.color,
|
||||||
|
displayValue: config.displayValue,
|
||||||
|
label: config.dataLabel,
|
||||||
|
originalText: config.label.text,
|
||||||
|
y: (yPos + (rowHeight / 2))
|
||||||
|
});
|
||||||
|
|
||||||
|
yPos += rowHeight;
|
||||||
|
|
||||||
|
crispY = mathRound(yPos) + halfW;
|
||||||
|
if (!graphics.listRowDivideElem) {
|
||||||
|
listRowDivideElem = graphics.listRowDivideElem = paper.path();
|
||||||
|
}
|
||||||
|
container.appendChild(graphics.listRowDivideElem);
|
||||||
|
graphics.listRowDivideElem.attr('path', [M, xPos, crispY, L, width, crispY])
|
||||||
|
.attr(listRowDividerAttr);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset extra pages
|
||||||
|
for (len = dataSet.graphics.container.length - 1; len >= pageIndex; len -= 1) {
|
||||||
|
container = dataSet.graphics.container;
|
||||||
|
container[len].remove();
|
||||||
|
container.splice(len, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._drawSSGridNavButton();
|
||||||
|
},
|
||||||
|
|
||||||
|
_drawSSGridNavButton: function () {
|
||||||
|
var dataSet = this,
|
||||||
|
chart = dataSet.chart,
|
||||||
|
conf = dataSet.config,
|
||||||
|
actualDataLen = conf.actualDataLen,
|
||||||
|
itemsPerPage = conf.itemsPerPage,
|
||||||
|
graphics = dataSet.graphics,
|
||||||
|
paper = chart.components.paper,
|
||||||
|
width = chart.config.width,
|
||||||
|
borderThickness = chart.config.borderThickness,
|
||||||
|
|
||||||
|
// Navigation button drawing properties
|
||||||
|
navButtonColor = conf.navButtonColor,
|
||||||
|
navButtonHoverColor = conf.navButtonHoverColor,
|
||||||
|
navButtonPadding = conf.navButtonPadding,
|
||||||
|
radius = conf.navButtonRadius,
|
||||||
|
radiusFregment = radius * 0.67,
|
||||||
|
pageHeight = conf.itemsPerPage * conf.rowHeight,
|
||||||
|
y = borderThickness + navButtonPadding + radiusFregment + pageHeight + radius * 0.5,
|
||||||
|
x = 20 + borderThickness,
|
||||||
|
nextEleX = width - x,
|
||||||
|
layers = chart.graphics,
|
||||||
|
trackerLayer = layers.trackerGroup,
|
||||||
|
pageNavigationLayer = layers.pageNavigationLayer,
|
||||||
|
pagePreNavigationLayer = layers.pagePreNavigationLayer,
|
||||||
|
pageNextNavigationLayer = layers.pageNextNavigationLayer,
|
||||||
|
len = graphics.container.length,
|
||||||
|
currentPage = dataSet.currentPage,
|
||||||
|
navElePrv,
|
||||||
|
navTrackerPrv,
|
||||||
|
navEleNxt,
|
||||||
|
navTrackerNxt;
|
||||||
|
|
||||||
|
if (!pageNavigationLayer) {
|
||||||
|
pageNavigationLayer = layers.pageNavigationLayer = paper.group('page-nav', trackerLayer);
|
||||||
|
}
|
||||||
|
if (!pagePreNavigationLayer) {
|
||||||
|
pagePreNavigationLayer = layers.pagePreNavigationLayer =
|
||||||
|
paper.group('page-prev-nav', pageNavigationLayer);
|
||||||
|
}
|
||||||
|
if (!pageNextNavigationLayer) {
|
||||||
|
pageNextNavigationLayer = layers.pageNextNavigationLayer =
|
||||||
|
paper.group('page-next-nav', pageNavigationLayer);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (actualDataLen > itemsPerPage) {
|
||||||
|
pageNavigationLayer.show();
|
||||||
|
// Draw the previous arrow icon
|
||||||
|
if (!graphics.navElePrv) {
|
||||||
|
graphics.navElePrv = paper.path(pagePreNavigationLayer);
|
||||||
|
}
|
||||||
|
navElePrv = graphics.navElePrv.attr({
|
||||||
|
'path': [
|
||||||
|
M, x, y,
|
||||||
|
L, x + radius + radiusFregment, y - radiusFregment,
|
||||||
|
x + radius, y,
|
||||||
|
x + radius + radiusFregment, y + radiusFregment, 'Z'
|
||||||
|
],
|
||||||
|
'fill': navButtonColor,
|
||||||
|
'stroke-width': 0,
|
||||||
|
'cursor': 'pointer'
|
||||||
|
});
|
||||||
|
// Draw the previous tracker circle
|
||||||
|
if (!graphics.navTrackerPrv) {
|
||||||
|
navTrackerPrv = graphics.navTrackerPrv = paper.circle(pagePreNavigationLayer)
|
||||||
|
.mouseover (function () {
|
||||||
|
navElePrv.attr ({
|
||||||
|
fill: navButtonHoverColor,
|
||||||
|
cursor: 'pointer'
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.mouseout (function () {
|
||||||
|
navElePrv.attr ({
|
||||||
|
fill: navButtonColor
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.click (function () {
|
||||||
|
dataSet._nenagitePage(-1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
navTrackerPrv = graphics.navTrackerPrv.attr({
|
||||||
|
cx: x + radius,
|
||||||
|
cy: y,
|
||||||
|
r: radius,
|
||||||
|
fill: COLOR_TRANSPARENT,
|
||||||
|
'stroke-width': 0,
|
||||||
|
cursor: 'pointer'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw the next arrow icon
|
||||||
|
if (!graphics.navEleNxt) {
|
||||||
|
navEleNxt = graphics.navEleNxt = paper.path(pageNextNavigationLayer);
|
||||||
|
}
|
||||||
|
navEleNxt = graphics.navEleNxt.attr({
|
||||||
|
'path': [M, nextEleX, y, L, nextEleX - radius - radiusFregment, y - radiusFregment,
|
||||||
|
nextEleX - radius, y,
|
||||||
|
nextEleX - radius - radiusFregment, y + radiusFregment, 'Z'
|
||||||
|
],
|
||||||
|
fill: navButtonColor,
|
||||||
|
'stroke-width': 0,
|
||||||
|
cursor: 'pointer'
|
||||||
|
});
|
||||||
|
// Draw the next tracker circle
|
||||||
|
if (!graphics.navTrackerNxt) {
|
||||||
|
navTrackerNxt = graphics.navTrackerNxt = paper.circle(pageNextNavigationLayer)
|
||||||
|
.mouseover(function () {
|
||||||
|
navEleNxt.attr({
|
||||||
|
fill: navButtonHoverColor
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.mouseout(function () {
|
||||||
|
navEleNxt.attr({
|
||||||
|
fill: navButtonColor
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.click(function () {
|
||||||
|
dataSet._nenagitePage(1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
navTrackerNxt = graphics.navTrackerNxt.attr({
|
||||||
|
cx: nextEleX - radius,
|
||||||
|
cy: y,
|
||||||
|
r: radius,
|
||||||
|
fill: COLOR_TRANSPARENT,
|
||||||
|
'stroke-width': 0,
|
||||||
|
cursor: 'pointer'
|
||||||
|
});
|
||||||
|
(currentPage === 0) ? pagePreNavigationLayer.hide() : pagePreNavigationLayer.show();
|
||||||
|
(currentPage === len - 1) ? pageNextNavigationLayer.hide() : pageNextNavigationLayer.show();
|
||||||
|
} else {
|
||||||
|
pageNavigationLayer.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_nenagitePage: function (page) {
|
||||||
|
var dataSet = this,
|
||||||
|
chart = dataSet.chart,
|
||||||
|
container = dataSet.graphics.container,
|
||||||
|
currentPage = dataSet.currentPage,
|
||||||
|
layers = chart.graphics,
|
||||||
|
pagePreNavigationLayer = layers.pagePreNavigationLayer,
|
||||||
|
pageNextNavigationLayer = layers.pageNextNavigationLayer,
|
||||||
|
len = container.length,
|
||||||
|
eventArgs;
|
||||||
|
|
||||||
|
// Show/hide the page buttons
|
||||||
|
if (container[currentPage + page]) {
|
||||||
|
container[currentPage].hide();
|
||||||
|
container[currentPage + page].show();
|
||||||
|
currentPage = dataSet.currentPage += page;
|
||||||
|
}
|
||||||
|
eventArgs = container[currentPage].data('eventArgs');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This event is fired on page change in SSGrid chart.
|
||||||
|
*
|
||||||
|
* @event FusionCharts#pageNavigated
|
||||||
|
* @group chart
|
||||||
|
*
|
||||||
|
* @param {object} data - Contains data of the sought page, with color, displayValue, originalText,
|
||||||
|
* value and y position for each data points.
|
||||||
|
* @param {number} pageId - Tells the index of the sought page.
|
||||||
|
*/
|
||||||
|
global.raiseEvent('pageNavigated', {
|
||||||
|
pageId: currentPage,
|
||||||
|
data: eventArgs.data
|
||||||
|
}, chart.chartInstance);
|
||||||
|
|
||||||
|
// Show/hide the navigation buttons
|
||||||
|
(currentPage === 0) ? pagePreNavigationLayer.hide() : pagePreNavigationLayer.show();
|
||||||
|
(currentPage === len - 1) ? pageNextNavigationLayer.hide() : pageNextNavigationLayer.show();
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
}, [3, 2, 0, 'sr2']]);
|
||||||
|
|
||||||
|
|
||||||
|
}));
|
||||||
File diff suppressed because it is too large
Load Diff
+20537
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+3
-1
@@ -1,7 +1,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>My first chart using FusionCharts Suite XT</title>
|
<title>My first chart using FusionCharts Suite XT</title>
|
||||||
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
|
<script type="text/javascript" src="/fusioncharts.js"></script>
|
||||||
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
|
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
FusionCharts.ready(function(){
|
FusionCharts.ready(function(){
|
||||||
@@ -20,6 +20,8 @@
|
|||||||
"numberPrefix": "$",
|
"numberPrefix": "$",
|
||||||
"theme": "fint",
|
"theme": "fint",
|
||||||
"exportEnabled": "1",
|
"exportEnabled": "1",
|
||||||
|
"exportAtClient": "0",
|
||||||
|
"exportHandler": "x.com",
|
||||||
"LabelPadding": "50"
|
"LabelPadding": "50"
|
||||||
},
|
},
|
||||||
"annotations": {
|
"annotations": {
|
||||||
|
|||||||
Reference in New Issue
Block a user