charts-debug.js revision 7174b256e7956a8efaff0352e7cac98b942f804f
/**
* The Charts widget provides an api for displaying data
* graphically.
*
* @module charts
*/
{
DRAWINGAPI = "svg";
}
{
DRAWINGAPI = "canvas";
}
else
{
DRAWINGAPI = "vml";
}
/**
* Graphic is a simple drawing api that allows for basic drawing operations.
*
* @class Graphic
* @constructor
*/
};
/**
* Indicates whether or not the instance will size itself based on its contents.
*
* @property autoSize
* @type String
*/
autoSize: true,
/**
* Initializes the class.
*
* @method initializer
* @private
*/
initializer: function(config) {
{
this._styleGroup(this.node);
}
else
{
this.node = this._createGraphics();
this.setSize(w, h);
}
this._initProps();
},
/**
* Specifies a bitmap fill used by subsequent calls to other drawing methods.
*
* @method beginBitmapFill
* @param {Object} config
*/
beginBitmapFill: function(config) {
var fill = {};
this._fillProps = fill;
{
this._gradientBox = {
};
}
else
{
this._gradientBox = null;
}
},
/**
* Specifes a solid fill used by subsequent calls to other drawing methods.
*
* @method beginFill
* @param {String} color Hex color value for the fill.
* @param {Number} alpha Value between 0 and 1 used to specify the opacity of the fill.
*/
if (color) {
this._fillColor = color;
this._fillType = 'solid';
this._fill = 1;
}
return this;
},
/**
* Specifies a gradient fill used by subsequent calls to other drawing methods.
*
* @method beginGradientFill
* @param {Object} config
*/
beginGradientFill: function(config) {
if(!this._defs)
{
}
this._fillAlphas = alphas;
return this;
},
/**
* Removes all nodes.
*
* @method destroy
*/
destroy: function()
{
this._removeChildren(this.node);
{
}
},
/**
* Removes all child nodes.
*
* @method _removeChildren
* @param {HTMLElement} node
* @private
*/
_removeChildren: function(node)
{
if(node.hasChildNodes())
{
var child;
while(node.firstChild)
{
this._removeChildren(child);
}
}
},
/**
* Shows and and hides a the graphic instance.
*
* @method toggleVisible
* @param val {Boolean} indicates whether the instance should be visible.
*/
toggleVisible: function(val)
{
},
/**
* Toggles visibility
*
* @method _toggleVisible
* @param {HTMLElement} node element to toggle
* @param {Boolean} val indicates visibilitye
* @private
*/
{
i = 0,
len;
if(children)
{
for(; i < len; ++i)
{
}
}
},
/**
* Clears the graphics object.
*
* @method clear
*/
clear: function() {
if(this._graphicsList)
{
{
}
}
this.path = '';
},
/**
* Draws a bezier curve.
*
* @method curveTo
* @param {Number} cp1x x-coordinate for the first control point.
* @param {Number} cp1y y-coordinate for the first control point.
* @param {Number} cp2x x-coordinate for the second control point.
* @param {Number} cp2y y-coordinate for the second control point.
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
this._shapeType = "path";
{
this._pathType = "C";
this.path += ' C';
}
this.path += Math.round(cp1x) + ", " + Math.round(cp1y) + ", " + Math.round(cp2x) + ", " + Math.round(cp2y) + ", " + x + ", " + y + " ";
this._trackSize(x, y);
},
/**
* Draws a quadratic bezier curve.
*
* @method quadraticCurveTo
* @param {Number} cpx x-coordinate for the control point.
* @param {Number} cpy y-coordinate for the control point.
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
{
this._pathType = "Q";
this.path += " Q";
}
},
/**
* Draws a circle.
*
* @method drawCircle
* @param {Number} x y-coordinate
* @param {Number} y x-coordinate
* @param {Number} r radius
*/
drawCircle: function(x, y, r) {
this._shape = {
x:x - r,
y:y - r,
w:r * 2,
h:r * 2
};
this._x = x - r;
this._y = y - r;
this._shapeType = "circle";
this._draw();
},
/**
* Draws an ellipse.
*
* @method drawEllipse
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
*/
drawEllipse: function(x, y, w, h) {
this._shape = {
x:x,
y:y,
w:w,
h:h
};
this._width = w;
this._height = h;
this._x = x;
this._y = y;
this._shapeType = "ellipse";
this._draw();
},
/**
* Draws a rectangle.
*
* @method drawRect
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
*/
drawRect: function(x, y, w, h) {
this._shape = {
x:x,
y:y,
w:w,
h:h
};
this._x = x;
this._y = y;
this._width = w;
this._height = h;
this.moveTo(x, y);
this.lineTo(x + w, y);
this.lineTo(x + w, y + h);
this.lineTo(x, y + h);
this.lineTo(x, y);
this._draw();
},
/**
* Draws a rectangle with rounded corners.
*
* @method drawRect
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
* @param {Number} ew width of the ellipse used to draw the rounded corners
* @param {Number} eh height of the ellipse used to draw the rounded corners
*/
this._shape = {
x:x,
y:y,
w:w,
h:h
};
this._x = x;
this._y = y;
this._width = w;
this._height = h;
this.quadraticCurveTo(x, y + h, x + ew, y + h);
this.quadraticCurveTo(x + w, y + h, x + w, y + h - eh);
this.quadraticCurveTo(x + w, y, x + w - ew, y);
this.quadraticCurveTo(x, y, x, y + eh);
this._draw();
},
/**
* Draws a wedge.
*
* @param {Number} x x-coordinate of the wedge's center point
* @param {Number} y y-coordinate of the wedge's center point
* @param {Number} startAngle starting angle in degrees
* @param {Number} arc sweep of the wedge. Negative values draw clockwise.
* @param {Number} radius radius of wedge. If [optional] yRadius is defined, then radius is the x radius.
* @param {Number} yRadius [optional] y radius for wedge.
*/
{
this._drawingComplete = false;
this.path = this._getWedgePath({x:x, y:y, startAngle:startAngle, arc:arc, radius:radius, yRadius:yRadius});
this._shapeType = "path";
this._draw();
},
/**
* Completes a drawing operation.
*
* @method end
*/
end: function() {
if(this._shapeType)
{
this._draw();
}
this._initProps();
},
/**
* Specifies a gradient to use for the stroke when drawing lines.
* Not implemented
*
* @method lineGradientStyle
* @private
*/
lineGradientStyle: function() {
},
/**
* Specifies a line style used for subsequent calls to drawing methods.
*
* @method lineStyle
* @param {Number} thickness indicates the thickness of the line
* @param {String} color hex color value for the line
* @param {Number} alpha Value between 0 and 1 used to specify the opacity of the fill.
*/
this._stroke = 1;
this._strokeWeight = thickness;
if (color) {
this._strokeColor = color;
}
},
/**
* Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
*
* @method lineTo
* @param {Number} point1 x-coordinate for the end point.
* @param {Number} point2 y-coordinate for the end point.
*/
i,
len;
}
this._shapeType = "path";
{
this._pathType = "L";
this.path += ' L';
}
for (i = 0; i < len; ++i) {
}
},
/**
* Moves the current drawing position to specified x and y coordinates.
*
* @method moveTo
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
moveTo: function(x, y) {
this._pathType = "M";
},
/**
* Generates a path string for a wedge shape
*
* @method _getWedgePath
* @param {Object} config attributes used to create the path
* @return String
* @private
*/
_getWedgePath: function(config)
{
var x = config.x,
y = config.y,
segs,
ax,
ay,
bx,
by,
cx,
cy,
i = 0,
// limit sweep to reasonable numbers
{
arc = 360;
}
// First we calculate how many segments are needed
// for a smooth arc.
// Now calculate the sweep of each segment.
// The math requires radians rather than degrees. To convert from degrees
// use the formula (degrees/180)*Math.PI to get radians.
// convert angle startAngle to radians
if(segs > 0)
{
// draw a line from the center to the start of the curve
path += " Q";
for(; i < segs; ++i)
{
}
}
return path;
},
/**
* Sets the size of the graphics object.
*
* @method setSize
* @param w {Number} width to set for the instance.
* @param h {Number} height to set for the instance.
*/
setSize: function(w, h) {
if(this.autoSize)
{
{
}
{
}
}
},
/**
* Updates the size of the graphics object
*
* @method _trackSize
* @param {Number} w width
* @param {Number} h height
* @private
*/
_trackSize: function(w, h) {
if (w > this._width) {
this._width = w;
}
if (h > this._height) {
this._height = h;
}
this.setSize(w, h);
},
/**
* Sets the positon of the graphics object.
*
* @method setPosition
* @param {Number} x x-coordinate for the object.
* @param {Number} y y-coordinate for the object.
*/
setPosition: function(x, y)
{
},
/**
* Adds the graphics node to the dom.
*
* @method render
* @param {HTMLElement} parentNode node in which to render the graphics node into.
*/
render: function(parentNode) {
this.setSize(w, h);
this._initProps();
return this;
},
/**
* Clears the properties
*
* @method _initProps
* @private
*/
_initProps: function() {
this._shape = null;
this._fillColor = null;
this._strokeColor = null;
this._strokeWeight = 0;
this._fillProps = null;
this._fillAlphas = null;
this._fillColors = null;
this._fillType = null;
this._fillRatios = null;
this._fillRotation = null;
this._fillWidth = null;
this._fillHeight = null;
this.path = '';
this._width = 0;
this._height = 0;
this._x = 0;
this._y = 0;
this._fill = null;
this._stroke = 0;
this._stroked = false;
this._pathType = null;
this._attributes = {};
},
/**
* Clears path properties
*
* @method _clearPath
* @private
*/
_clearPath: function()
{
this._shape = null;
this._shapeType = null;
this.path = '';
this._width = 0;
this._height = 0;
this._x = 0;
this._y = 0;
this._pathType = null;
this._attributes = {};
},
/**
* Completes a shape
*
* @method _draw
* @private
*/
_draw: function()
{
i,
if(this.path)
{
if(this._fill)
{
this.path += 'z';
}
}
else
{
for(i in this._attributes)
{
if(this._attributes.hasOwnProperty(i))
{
}
}
}
if(this._strokeColor)
{
}
{
if(this._fillColor)
{
}
else
{
}
}
else if(this._fillType === "linear")
{
}
this._clearPath();
},
/**
* Returns ths actual fill object to be used in a drawing or shape
*
* @method _getFill
* @private
*/
_getFill: function() {
fill;
switch (type) {
case 'linear':
break;
case 'radial':
//fill = this._getRadialGradient('fill');
break;
case 'bitmap':
//fill = this._bitmapFill;
break;
}
return fill;
},
/**
* Returns a linear gradient fill
*
* @method _getLinearGradient
* @param {String} type gradient type
* @private
*/
_getLinearGradient: function(type) {
w = this._fillWidth || (this._shape.w),
h = this._fillHeight || (this._shape.h),
r = this[prop + 'Rotation'],
i,
l,
def,
stop,
cx = w/2,
cy = h/2,
/*
if(r > 0 && r < 90)
{
r *= h/w;
}
else if(r > 90 && r < 180)
{
r = 90 + ((r-90) * w/h);
}
*/
{
if(r < 180)
{
y1 = 0;
y2 = h;
}
else
{
y1 = h;
y2 = 0;
}
}
else
{
if(r > 90 && r < 270)
{
x1 = w;
x2 = 0;
}
else
{
x1 = 0;
x2 = w;
}
}
/*
fill.setAttribute("spreadMethod", "pad");
fill.setAttribute("x1", Math.round(100 * x1/w) + "%");
fill.setAttribute("y1", Math.round(100 * y1/h) + "%");
fill.setAttribute("x2", Math.round(100 * x2/w) + "%");
fill.setAttribute("y2", Math.round(100 * y2/h) + "%");
*/
def = 0;
for(i = 0; i < l; ++i)
{
def = (i + 1) / l;
}
return fill;
},
/**
* Creates a group element
*
* @method _createGraphics
* @private
*/
_createGraphics: function() {
this._styleGroup(group);
return group;
},
/**
* Styles a group element
*
* @method _styleGroup
* @private
*/
_styleGroup: function(group)
{
},
/**
* Creates a graphic node
*
* @method _createGraphicNode
* @param {String} type node type to create
* @param {String} pe specified pointer-events value
* @return HTMLElement
* @private
*/
{
v = pe || "none";
{
}
if(type != "svg")
{
if(!this._graphicsList)
{
this._graphicsList = [];
}
}
return node;
},
/**
* Creates a Shape instance and adds it to the graphics object.
*
* @method getShape
* @param {Object} config Object literal of properties used to construct a Shape.
* @return Shape
*/
}
};
/**
* Set of drawing apis for canvas based classes.
*
* @class CanvasDrawingUtil
* @constructor
*/
function CanvasDrawingUtil()
{
}
/**
* Initializes the class.
*
* @method initializer
* @private
*/
initializer: function(config) {
this._dummy = this._createDummy();
this._canvas = this._createGraphic();
this._initProps();
},
/**
* Specifies a bitmap fill used by subsequent calls to other drawing methods.
*
* @method beginBitmapFill
* @param {Object} config
*/
beginBitmapFill: function(config) {
this._fillType = 'bitmap';
return this;
},
/**
* Specifes a solid fill used by subsequent calls to other drawing methods.
*
* @method beginFill
* @param {String} color Hex color value for the fill.
* @param {Number} alpha Value between 0 and 1 used to specify the opacity of the fill.
*/
if (color) {
if (alpha) {
} else {
}
this._fillColor = color;
this._fillType = 'solid';
}
return this;
},
/**
* Specifies a gradient fill used by subsequent calls to other drawing methods.
*
* @method beginGradientFill
* @param {Object} config
*/
beginGradientFill: function(config) {
var color,
i = 0,
this._fillAlphas = alphas;
this._fillColors = colors;
for(;i < len; ++i)
{
if (alpha) {
} else {
}
}
return this;
},
/**
* Specifies a line style used for subsequent calls to drawing methods.
*
* @method lineStyle
* @param {Number} thickness indicates the thickness of the line
* @param {String} color hex color value for the line
* @param {Number} alpha Value between 0 and 1 used to specify the opacity of the fill.
*/
if(this._stroke)
{
}
if (thickness) {
this._stroke = 1;
} else {
this._stroke = 0;
}
if (color) {
this._strokeStyle = color;
if (alpha) {
}
}
if(!this._fill)
{
}
if (caps === 'butt') {
caps = 'none';
}
//context.lineCap = caps;
}
this._drawingComplete = false;
return this;
},
/**
* Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
*
* @method lineTo
* @param {Number} point1 x-coordinate for the end point.
* @param {Number} point2 y-coordinate for the end point.
*/
i, len;
}
}
this._drawingComplete = false;
return this;
},
/**
* Moves the current drawing position to specified x and y coordinates.
*
* @method moveTo
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
moveTo: function(x, y) {
this._trackPos(x, y);
this._updateShapeProps(x, y);
this._drawingComplete = false;
return this;
},
/**
* Clears the graphics object.
*
* @method clear
*/
clear: function() {
this._initProps();
return this;
},
/**
* Draws a bezier curve.
*
* @method curveTo
* @param {Number} cp1x x-coordinate for the first control point.
* @param {Number} cp1y y-coordinate for the first control point.
* @param {Number} cp2x x-coordinate for the second control point.
* @param {Number} cp2y y-coordinate for the second control point.
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
this._drawingComplete = false;
this._updateShapeProps(x, y);
this._trackSize(x, y);
this._trackPos(x, y);
return this;
},
/**
* Draws a quadratic bezier curve.
*
* @method quadraticCurveTo
* @param {Number} cpx x-coordinate for the control point.
* @param {Number} cpy y-coordinate for the control point.
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
this._drawingComplete = false;
return this;
},
/**
* Draws a circle.
*
* @method drawCircle
* @param {Number} x y-coordinate
* @param {Number} y x-coordinate
* @param {Number} r radius
*/
drawCircle: function(x, y, radius) {
startAngle = 0,
this._shape = {
x:x - radius,
y:y - radius,
w:radius * 2,
h:radius * 2
};
this._drawingComplete = false;
this._trackPos(x, y);
this._draw();
return this;
},
/**
* Draws an ellipse.
*
* @method drawEllipse
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
*/
drawEllipse: function(x, y, w, h) {
this._shape = {
x:x,
y:y,
w:w,
h:h
};
{
}
l = 8,
angle = 0,
radius = w/2,
yRadius = h/2,
i = 0,
this._drawingComplete = false;
this._trackPos(x, y);
this._trackSize(x + w, y + h);
for(; i < l; i++)
{
}
this._draw();
return this;
},
/**
* Draws a rectangle.
*
* @method drawRect
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
*/
drawRect: function(x, y, w, h) {
this._shape = {
x:x,
y:y,
w:w,
h:h
};
this._drawingComplete = false;
this._trackPos(x, y);
this._trackSize(w, h);
this._draw();
return this;
},
/**
* Draws a rectangle with rounded corners.
*
* @method drawRect
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
* @param {Number} ew width of the ellipse used to draw the rounded corners
* @param {Number} eh height of the ellipse used to draw the rounded corners
*/
this._shape = {
x:x,
y:y,
w:w,
h:h
};
this._drawingComplete = false;
this._trackPos(x, y);
this._trackSize(w, h);
this._draw();
return this;
},
/**
* @private
* Draws a wedge.
*
* @param x x component of the wedge's center point
* @param y y component of the wedge's center point
* @param startAngle starting angle in degrees
* @param arc sweep of the wedge. Negative values draw clockwise.
* @param radius radius of wedge. If [optional] yRadius is defined, then radius is the x radius.
* @param yRadius [optional] y radius for wedge.
*/
{
var x = cfg.x,
y = cfg.y,
segs,
ax,
ay,
bx,
by,
cx,
cy,
i = 0;
this._drawingComplete = false;
// move to x,y position
this.moveTo(x, y);
// limit sweep to reasonable numbers
{
arc = 360;
}
// First we calculate how many segments are needed
// for a smooth arc.
// Now calculate the sweep of each segment.
// The math requires radians rather than degrees. To convert from degrees
// use the formula (degrees/180)*Math.PI to get radians.
// convert angle startAngle to radians
// draw the curve in segments no larger than 45 degrees.
if(segs > 0)
{
// draw a line from the center to the start of the curve
// Loop for drawing curve segments
for(; i < segs; ++i)
{
}
// close the wedge by drawing a line to the center
this.lineTo(x, y);
}
this._trackPos(x, y);
this._draw();
},
/**
* Completes a drawing operation.
*
* @method end
*/
end: function() {
this._draw();
this._initProps();
return this;
},
/**
* @private
* Not implemented
* Specifies a gradient to use for the stroke when drawing lines.
*/
lineGradientStyle: function() {
return this;
},
/**
* Sets the size of the graphics object.
*
* @method setSize
* @param w {Number} width to set for the instance.
* @param h {Number} height to set for the instance.
*/
setSize: function(w, h)
{
},
/**
* Clears all values
*
* @method _initProps
* @private
*/
_initProps: function() {
//context.lineCap = 'butt';
this._strokeStyle = 'rgba(0, 0, 0, 1)';
this._width = 0;
this._height = 0;
//this._shape = null;
this._x = 0;
this._y = 0;
this._fillType = null;
this._stroke = null;
this._bitmapFill = null;
this._drawingComplete = false;
},
/**
* Returns ths actual fill object to be used in a drawing or shape
*
* @method _getFill
* @private
*/
_getFill: function() {
fill;
switch (type) {
case 'linear':
break;
case 'radial':
break;
case 'bitmap':
fill = this._bitmapFill;
break;
case 'solid':
fill = this._fillColor;
break;
}
return fill;
},
/**
* Returns a linear gradient fill
*
* @method _getLinearGradient
* @private
*/
_getLinearGradient: function(type) {
w = this._fillWidth || (this._shape.w),
h = this._fillHeight || (this._shape.h),
r = this[prop + 'Rotation'],
i,
l,
def,
grad,
cx = x + w/2,
cy = y + h/2,
{
if(r < 180)
{
y1 = y;
y2 = y + h;
}
else
{
y1 = y + h;
y2 = y;
}
}
else
{
if(r > 90 && r < 270)
{
x1 = x + w;
x2 = x;
}
else
{
x1 = x;
x2 = x + w;
}
}
def = 0;
for(i = 0; i < l; ++i)
{
def = (i + 1) / l;
}
return grad;
},
/**
* Returns a radial gradient fill
*
* @method _getRadialGradient
* @private
*/
_getRadialGradient: function(type) {
i,
l,
w = this._fillWidth || this._shape.w,
h = this._fillHeight || this._shape.h,
def,
grad,
x += w/2;
y += h/2;
def = 0;
for(i = 0; i < l; ++i) {
}
return grad;
},
/**
* Completes a shape or drawing
*
* @method _draw
* @private
*/
_draw: function()
{
if(this._drawingComplete || !this._shape)
{
return;
}
fill;
if (this._fillType) {
if (fill) {
}
}
if (this._fillType) {
}
if (this._stroke) {
}
this._drawingComplete = true;
},
/**
* @private
*/
_drawingComplete: false,
/**
* Regex expression used for converting hex strings to rgb
*
* @property _reHex
* @private
*/
/**
* Parses hex color string and alpha value to rgba
*
* @method _2RGBA
* @private
*/
val = 'rgba(' + [
}
return val;
},
/**
* Creates dom element used for converting color string to rgb
*
* @method _createDummy
* @private
*/
_createDummy: function() {
return dummy;
},
/**
* Creates canvas element
*
* @method _createGraphic
* @private
*/
_createGraphic: function(config) {
// no size until drawn on
return graphic;
},
/**
* Converts color to rgb format
*
* @method _2RGB
* @private
*/
},
/**
* Updates the size of the graphics object
*
* @method _trackSize
* @param {Number} w width
* @param {Number} h height
* @private
*/
_trackSize: function(w, h) {
if (w > this._width) {
this._width = w;
}
if (h > this._height) {
this._height = h;
}
},
/**
* Updates the position of the current drawing
*
* @method _trackPos
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @private
*/
_trackPos: function(x, y) {
if (x > this._x) {
this._x = x;
}
if (y > this._y) {
this._y = y;
}
},
/**
* Updates the position and size of the current drawing
*
* @method _updateShapeProps
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @private
*/
_updateShapeProps: function(x, y)
{
var w,h;
if(!this._shape)
{
this._shape = {};
}
if(!this._shape.x)
{
this._shape.x = x;
}
else
{
}
if(!this._shape.y)
{
this._shape.y = y;
}
else
{
}
if(!this._shape.w)
{
this._shape.w = w;
}
else
{
}
if(!this._shape.h)
{
this._shape.h = h;
}
else
{
}
},
/**
* Creates a Shape instance and adds it to the graphics object.
*
* @method getShape
* @param {Object} config Object literal of properties used to construct a Shape.
* @return Shape
*/
}
};
/**
* CanvasGraphics is a fallback drawing api used for basic drawing operations when SVG is not available.
*
* @class CanvasGraphics
* @constructor
*/
autoSize: true,
/**
* Sets the size of the graphics object.
*
* @method setSize
* @param w {Number} width to set for the instance.
* @param h {Number} height to set for the instance.
*/
setSize: function(w, h) {
if(this.autoSize)
{
{
}
{
}
}
},
/**
* Updates the size of the graphics object
*
* @method _trackSize
* @param {Number} w width
* @param {Number} h height
* @private
*/
_trackSize: function(w, h) {
if (w > this._width) {
this._width = w;
}
if (h > this._height) {
this._height = h;
}
this.setSize(w, h);
},
/**
* Sets the positon of the graphics object.
*
* @method setPosition
* @param {Number} x x-coordinate for the object.
* @param {Number} y y-coordinate for the object.
*/
setPosition: function(x, y)
{
},
/**
* Adds the graphics node to the dom.
*
* @method render
* @param {HTMLElement} parentNode node in which to render the graphics node into.
*/
return this;
},
/**
* Shows and and hides a the graphic instance.
*
* @method toggleVisible
* @param val {Boolean} indicates whether the instance should be visible.
*/
toggleVisible: function(val)
{
},
/**
* Creates a graphic node
*
* @method _createGraphicNode
* @param {String} type node type to create
* @param {String} pe specified pointer-events value
* @return HTMLElement
* @private
*/
_createGraphicNode: function(pe)
{
if(!this._graphicsList)
{
this._graphicsList = [];
}
return node;
},
/**
* Removes all nodes.
*
* @method destroy
*/
destroy: function()
{
this._removeChildren(this.node);
{
}
},
/**
* Removes all child nodes.
*
* @method _removeChildren
* @param {HTMLElement} node
* @private
*/
_removeChildren: function(node)
{
if(node.hasChildNodes())
{
var child;
while(node.firstChild)
{
this._removeChildren(child);
}
}
},
/**
* @private
* Reference to the node for the graphics object
*/
node: null
});
if(DRAWINGAPI == "canvas")
{
Y.Graphic = Y.CanvasGraphic;
}
/**
* VMLGraphics is a fallback drawing api used for basic drawing operations when SVG is not available.
*
* @class VMLGraphics
* @constructor
*/
var VMLGraphics = function(config) {
};
VMLGraphics.prototype = {
/**
* Indicates whether or not the instance will size itself based on its contents.
*
* @property autoSize
* @type String
*/
initializer: function(config) {
this.node = this._createGraphics();
this.setSize(w, h);
this._initProps();
},
/**
* Specifies a bitmap fill used by subsequent calls to other drawing methods.
*
* @method beginBitmapFill
* @param {Object} config
*/
beginBitmapFill: function(config) {
var fill = {};
this._fillProps = fill;
{
this._gradientBox = {
};
}
else
{
this._gradientBox = null;
}
},
/**
* Specifes a solid fill used by subsequent calls to other drawing methods.
*
* @method beginFill
* @param {String} color Hex color value for the fill.
* @param {Number} alpha Value between 0 and 1 used to specify the opacity of the fill.
*/
if (color) {
this._fillProps = {
type:"solid",
};
}
this._fillColor = color;
this._fill = 1;
}
return this;
},
/**
* Specifies a gradient fill used by subsequent calls to other drawing methods.
*
* @method beginGradientFill
* @param {Object} config
*/
beginGradientFill: function(config) {
fill = {
},
i = 0,
oi,
for(;i < len; ++i)
{
}
if(type === "linear")
{
if(config)
{
}
{
}
else if(rotation <= 270)
{
}
else if(rotation <= 360)
{
}
else
{
rotation = 270;
}
}
else if(type === "radial")
{
fill.alignshape = false;
}
{
this._gradientBox = {
};
}
else
{
this._gradientBox = null;
}
this._fillProps = fill;
},
/**
* Clears the graphics object.
*
* @method clear
*/
clear: function() {
this._path = '';
this._removeChildren(this.node);
},
/**
* Removes all nodes.
*
* @method destroy
*/
destroy: function()
{
this._removeChildren(this.node);
},
/**
* Removes all child nodes.
*
* @method _removeChildren
* @param node
* @private
*/
_removeChildren: function(node)
{
if(node.hasChildNodes())
{
var child;
while(node.firstChild)
{
this._removeChildren(child);
}
}
},
/**
* Shows and and hides a the graphic instance.
*
* @method toggleVisible
* @param val {Boolean} indicates whether the instance should be visible.
*/
toggleVisible: function(val)
{
},
/**
* Toggles visibility
*
* @method _toggleVisible
* @param {HTMLElement} node element to toggle
* @param {Boolean} val indicates visibilitye
* @private
*/
{
i = 0,
len;
if(children)
{
for(; i < len; ++i)
{
}
}
},
/**
* Draws a bezier curve.
*
* @method curveTo
* @param {Number} cp1x x-coordinate for the first control point.
* @param {Number} cp1y y-coordinate for the first control point.
* @param {Number} cp2x x-coordinate for the second control point.
* @param {Number} cp2y y-coordinate for the second control point.
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
this._shape = "shape";
this._path += ' c ' + Math.round(cp1x) + ", " + Math.round(cp1y) + ", " + Math.round(cp2x) + ", " + Math.round(cp2y) + ", " + x + ", " + y;
this._trackSize(x, y);
},
/**
* Draws a quadratic bezier curve.
*
* @method quadraticCurveTo
* @param {Number} cpx x-coordinate for the control point.
* @param {Number} cpy y-coordinate for the control point.
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
},
/**
* Draws a circle.
*
* @method drawCircle
* @param {Number} x y-coordinate
* @param {Number} y x-coordinate
* @param {Number} r radius
*/
drawCircle: function(x, y, r) {
this._x = x - r;
this._y = y - r;
this._shape = "oval";
this._draw();
},
/**
* Draws an ellipse.
*
* @method drawEllipse
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
*/
drawEllipse: function(x, y, w, h) {
this._width = w;
this._height = h;
this._x = x;
this._y = y;
this._shape = "oval";
this._draw();
},
/**
* Draws a rectangle.
*
* @method drawRect
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
*/
drawRect: function(x, y, w, h) {
this._x = x;
this._y = y;
this._width = w;
this._height = h;
this.moveTo(x, y);
this.lineTo(x + w, y);
this.lineTo(x + w, y + h);
this.lineTo(x, y + h);
this.lineTo(x, y);
this._draw();
},
/**
* Draws a rectangle with rounded corners.
*
* @method drawRect
* @param {Number} x x-coordinate
* @param {Number} y y-coordinate
* @param {Number} w width
* @param {Number} h height
* @param {Number} ew width of the ellipse used to draw the rounded corners
* @param {Number} eh height of the ellipse used to draw the rounded corners
*/
this._x = x;
this._y = y;
this._width = w;
this._height = h;
this.quadraticCurveTo(x, y + h, x + ew, y + h);
this.quadraticCurveTo(x + w, y + h, x + w, y + h - eh);
this.quadraticCurveTo(x + w, y, x + w - ew, y);
this.quadraticCurveTo(x, y, x, y + eh);
this._draw();
},
/**
* Draws a wedge.
*
* @param {Number} x x-coordinate of the wedge's center point
* @param {Number} y y-coordinate of the wedge's center point
* @param {Number} startAngle starting angle in degrees
* @param {Number} arc sweep of the wedge. Negative values draw clockwise.
* @param {Number} radius radius of wedge. If [optional] yRadius is defined, then radius is the x radius.
* @param {Number} yRadius [optional] y radius for wedge.
*/
{
this._drawingComplete = false;
this._path += this._getWedgePath({x:x, y:y, startAngle:startAngle, arc:arc, radius:radius, yRadius:yRadius});
this._shape = "shape";
this._draw();
},
/**
* Generates a path string for a wedge shape
*
* @method _getWedgePath
* @param {Object} config attributes used to create the path
* @return String
* @private
*/
_getWedgePath: function(config)
{
var x = config.x,
y = config.y,
path;
{
arc = 360;
}
startAngle *= -65535;
arc *= 65536;
path = " m " + x + " " + y + " ae " + x + " " + y + " " + radius + " " + yRadius + " " + startAngle + " " + arc;
return path;
},
/**
* Completes a drawing operation.
*
* @method end
*/
end: function() {
if(this._shape)
{
this._draw();
}
this._initProps();
},
/**
* Specifies a gradient to use for the stroke when drawing lines.
* Not implemented
*
* @method lineGradientStyle
* @private
*/
lineGradientStyle: function() {
},
/**
* Specifies a line style used for subsequent calls to drawing methods.
*
* @method lineStyle
* @param {Number} thickness indicates the thickness of the line
* @param {String} color hex color value for the line
* @param {Number} alpha Value between 0 and 1 used to specify the opacity of the fill.
*/
this._stroke = 1;
this._strokeColor = color;
},
/**
* Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
*
* @method lineTo
* @param {Number} point1 x-coordinate for the end point.
* @param {Number} point2 y-coordinate for the end point.
*/
i,
len;
}
this._shape = "shape";
this._path += ' l ';
for (i = 0; i < len; ++i) {
}
},
/**
* Moves the current drawing position to specified x and y coordinates.
*
* @method moveTo
* @param {Number} x x-coordinate for the end point.
* @param {Number} y y-coordinate for the end point.
*/
moveTo: function(x, y) {
},
/**
* Sets the size of the graphics object.
*
* @method setSize
* @param w {Number} width to set for the instance.
* @param h {Number} height to set for the instance.
*/
setSize: function(w, h) {
w = Math.round(w);
h = Math.round(h);
this._canvasWidth = w;
this._canvasHeight = h;
},
/**
* Sets the positon of the graphics object.
*
* @method setPosition
* @param {Number} x x-coordinate for the object.
* @param {Number} y y-coordinate for the object.
*/
setPosition: function(x, y)
{
x = Math.round(x);
y = Math.round(y);
},
/**
* Adds the graphics node to the dom.
*
* @method render
* @param {HTMLElement} parentNode node in which to render the graphics node into.
*/
render: function(parentNode) {
this.setSize(w, h);
this._initProps();
return this;
},
/**
* @private
*/
_shape: null,
/**
* Updates the size of the graphics object
*
* @method _trackSize
* @param {Number} w width
* @param {Number} h height
* @private
*/
_trackSize: function(w, h) {
if (w > this._width) {
this._width = w;
}
if (h > this._height) {
this._height = h;
}
},
/**
* Clears the properties
*
* @method _initProps
* @private
*/
_initProps: function() {
this._fillColor = null;
this._strokeColor = null;
this._strokeOpacity = null;
this._strokeWeight = 0;
this._fillProps = null;
this._path = '';
this._width = 0;
this._height = 0;
this._x = 0;
this._y = 0;
this._fill = null;
this._stroke = 0;
this._stroked = false;
},
/**
* Clears path properties
*
* @method _clearPath
* @private
*/
_clearPath: function()
{
this._shape = null;
this._path = '';
this._width = 0;
this._height = 0;
this._x = 0;
this._y = 0;
},
/**
* Completes a shape
*
* @method _draw
* @private
*/
_draw: function()
{
fillProps = this._fillProps;
this.setSize(w, h);
if(this._path)
{
if(this._fill || this._fillProps)
{
this._path += ' x';
}
if(this._stroke)
{
this._path += ' e';
}
}
else
{
}
if (this._fill) {
}
else
{
}
{
}
} else {
}
if (fillProps) {
}
this._clearPath();
},
/**
* Returns ths actual fill object to be used in a drawing or shape
*
* @method _getFill
* @private
*/
_getFill: function() {
w = this._width,
h = this._height,
fillProps = this._fillProps,
prop,
pct,
i = 0,
colorstring = "",
len,
cx = 50,
cy = 50;
if(this._gradientBox)
{
cx= Math.round( (this._gradientBox.width/2 - ((this._x - this._gradientBox.tx) * hyp/w))/(w * w/hyp) * 100);
cy = Math.round( (this._gradientBox.height/2 - ((this._y - this._gradientBox.ty) * hyp/h))/(h * h/hyp) * 100);
}
{
for(;i < len; ++i) {
}
{
}
}
}
}
{
}
return fill;
},
/**
* Creates a group element
*
* @method _createGraphics
* @private
*/
_createGraphics: function() {
return group;
},
/**
* Creates a graphic node
*
* @method _createGraphicNode
* @param {String} type node type to create
* @param {String} pe specified pointer-events value
* @return HTMLElement
* @private
*/
_createGraphicNode: function(type)
{
return document.createElement('<' + type + ' xmlns="urn:schemas-microsft.com:vml" class="vml' + type + '"/>');
},
/**
* Converts a shape type to the appropriate vml node type.
*
* @method _getNodeShapeType
* @param {String} type The shape to convert.
* @return String
* @private
*/
_getNodeShapeType: function(type)
{
var shape = "shape";
{
}
return shape;
},
/**
* Used to convert certain shape types to the appropriate vml node type.
*
* @property _typeConversionHash
* @type Object
* @private
*/
circle: "oval",
ellipse: "oval",
rect: "rect"
},
/**
* Creates a Shape instance and adds it to the graphics object.
*
* @method getShape
* @param {Object} config Object literal of properties used to construct a Shape.
* @return Shape
*/
},
/**
* Adds a child to the <code>node</code>.
*
* @method addChild
* @param {HTMLElement} element to add
* @private
*/
{
}
};
if(DRAWINGAPI == "vml")
{
Y.log('using VML');
Y.Graphic = VMLGraphics;
}
/**
* The Shape class creates a graphic object with editable
* properties.
*
* @class Shape
* @extends Graphic
* @constructor
*/
{
this._initialize(cfg);
this._draw();
}
/**
* Indicates the type of shape.
*
* @property type
* @type string
*/
type: "shape",
/**
* Indicates whether or not the instance will size itself based on its contents.
*
* @property autoSize
* @type string
*/
autoSize: false,
/**
* Determines whether the instance will receive mouse events.
*
* @property pointerEvents
* @type string
*/
pointerEvents: "visiblePainted",
/**
* Initializes the graphic instance.
*
* @method _initialize
* @private
*/
_initialize: function(cfg)
{
{
}
},
/**
* Updates properties for the shape.
*
* @method _setProps
* @param {Object} cfg Properties to update.
* @private
*/
{
},
/**
* Draws the graphic.
*
* @method _draw
* @private
*/
_draw: function()
{
var cx,
cy,
rx,
ry,
parentNode = this.parentNode,
borderWeight = 0,
if(!this.node)
{
}
if(this.type == "wedge")
{
}
if(this.nodetype == "path")
{
this._setPath();
}
{
}
this._addBorder();
if(this.nodetype === "ellipse")
{
rx -= borderWeight;
ry -= borderWeight;
}
else
{
}
this._addFill();
return this;
},
/**
* Adds a path to the shape node.
*
* @method _setPath
* @private
*/
_setPath: function()
{
if(this.path)
{
this.path += " Z";
}
},
/**
* Adds a border to the shape node.
*
* @method _addBorder
* @private
*/
_addBorder: function()
{
{
}
else
{
}
},
/**
* Adds a fill to the shape node.
*
* @method _addFill
* @private
*/
_addFill: function()
{
var fillAlpha;
{
this.beginGradientFill(this.fill);
}
{
this.beginBitmapFill(this.fill);
}
else
{
{
}
else
{
}
}
},
/**
* Completes a drawing operation.
*
* @method end
*/
end: function()
{
this._setPath();
},
/**
* Updates the properties of the shape instance.
*
* @method update
* @param {Object} cfg Object literal containing properties to update.
*/
{
this._draw();
return this;
},
/**
* Converts a shape type to the appropriate node attribute.
*
* @private
* @method _getNodeShapeType
* @param {String} type The type of shape.
* @return String
*/
_getNodeShapeType: function(type)
{
{
}
return type;
},
/**
* Sets the visibility of a shape.
*
* @method toggleVisible
* @param {Boolean} val indicates whether or not the shape is visible.
*/
toggleVisible: function(val)
{
if(this.node)
{
}
},
/**
* Adds a class to the shape's node.
*
* @method addClass
* @param {String} className Name of the class to add.
*/
{
if(node)
{
{
}
else
{
}
}
},
/**
* Positions the parent node of the shape.
*
* @method setPosition
* @param {Number}, x The x-coordinate
* @param {Number}, y The y-coordinate
*/
setPosition: function(x, y)
{
if(hotspot)
{
}
},
/**
* Used to convert shape declarations to the appropriate node type.
*
* @property _typeConversionHash
* @type Object
* @private
*/
circle: "ellipse",
wedge: "path"
}
});
/**
* The Shape class creates a graphic object with editable
* properties.
*
* @class CanvasShape
* @extends CanvasGraphic
* @constructor
*/
function CanvasShape(cfg)
{
this._dummy = this._createDummy();
this._canvas = this._createGraphic();
this._initialize(cfg);
this._validate();
}
/**
* Indicates the type of shape.
*
* @property type
* @type string
*/
type: "shape",
/**
* Indicates whether or not the instance will size itself based on its contents.
*
* @property autoSize
* @type string
*/
autoSize: false,
/**
* Initializes the graphic instance.
*
* @method _initialize
* @private
*/
_initialize: function(cfg)
{
{
}
},
/**
* Updates properties for the shape.
*
* @method _setProps
* @param {Object} cfg Properties to update.
* @private
*/
{
},
/**
* Draws the graphic.
*
* @method _validate
* @private
*/
_validate: function()
{
var w = this.width,
h = this.height,
this.clear();
{
}
{
this.beginGradientFill(fill);
}
{
this.beginBitmapFill(fill);
}
else
{
}
switch(type)
{
case "circle" :
break;
case "rect" :
break;
case "wedge" :
break;
}
return this;
},
/**
* Updates the properties of the shape instance.
*
* @method update
* @param {Object} cfg Object literal containing properties to update.
*/
{
this._validate();
return this;
},
/**
* Sets the visibility of a shape.
*
* @method toggleVisible
* @param {Boolean} val indicates whether or not the shape is visible.
*/
toggleVisible: function(val)
{
if(this.node)
{
}
},
/**
* Positions the parent node of the shape.
*
* @method setPosition
* @param {Number}, x The x-coordinate
* @param {Number}, y The y-coordinate
*/
setPosition: function(x, y)
{
},
/**
* Adds a class to the shape's node.
*
* @method addClass
* @param {String} className Name of the class to add.
*/
{
if(this.node)
{
}
}
});
Y.CanvasShape = CanvasShape;
if(DRAWINGAPI == "canvas")
{
Y.Shape = Y.CanvasShape;
}
/**
* VMLShape is a fallback class for Shape. It creates a graphic object with editable properties when
* SVG is not available.
*
* @class VMLShape
* @constructor
*/
{
this._initialize(cfg);
this._draw();
}
/**
* Indicates the type of shape.
*
* @property type
* @type string
*/
type: "shape",
/**
* Initializes the graphic instance.
*
* @method _initialize
* @private
*/
_initialize: function(cfg)
{
{
}
},
/**
* @private
*/
width: 0,
/**
* @private
*/
height: 0,
/**
* Updates properties for the shape.
*
* @method _setProps
* @param {Object} cfg Properties to update.
* @private
*/
},
/**
* Draws the graphic.
*
* @method _draw
* @private
*/
_draw: function()
{
var path,
borderWeight = 0,
if(this.node)
{
}
else if(!this.node)
{
}
if(this.type === "wedge")
{
if(this.fill)
{
path += ' x';
}
if(this.border)
{
path += ' e';
}
}
this._addBorder();
{
}
this._addFill();
return this;
},
/**
* Adds a border to the shape node.
*
* @method _addBorder
* @private
*/
_addBorder: function()
{
{
borderWeight = this.borderWeight;
if(borderAlpha < 1)
{
if(!this._strokeNode)
{
}
}
else if(this._strokeNode)
{
}
}
else
{
}
},
/**
* Adds a fill to the shape node.
*
* @method _addFill
* @private
*/
_addFill: function()
{
var fillAlpha;
{
}
{
}
else
{
{
}
else
{
if(this.fillnode)
{
}
}
}
},
/**
* Adds a class to the shape's node.
*
* @method addClass
* @param {String} className Name of the class to add.
*/
{
if(node)
{
}
},
/**
* Sets the visibility of a shape.
*
* @method toggleVisible
* @param {Boolean} val indicates whether or not the shape is visible.
*/
toggleVisible: function(val)
{
if(this.node)
{
}
},
/**
* Positions the parent node of the shape.
*
* @method setPosition
* @param {Number}, x The x-coordinate
* @param {Number}, y The y-coordinate
*/
setPosition: function(x, y)
{
},
/**
* Updates the properties of the shape instance.
*
* @method update
* @param {Object} cfg Object literal containing properties to update.
*/
{
this._draw();
return this;
}
};
if (DRAWINGAPI == "vml") {
}
/**
* The Renderer class is a base class for chart components that use the <code>styles</code>
* attribute.
*
* @class Renderer
* @constructor
*/
function Renderer(){}
/**
* Hash of style properties for class
*
* @attribute styles
* @type Object
*/
{
getter: function()
{
return this._styles;
},
{
}
},
/**
* The graphic in which drawings will be rendered.
*
* @attribute graphic
* @type Graphic
*/
graphic: {}
};
/**
* @private
*/
_styles: null,
/**
* @protected
*
* Method used by <code>styles</code> setter.
*
* @method _setStyles
* @param {Object} newStyles Hash of properties to update.
* @return Object
*/
_setStyles: function(newstyles)
{
},
/**
* @protected
*
* Merges to object literals so that only specified properties are
* overwritten.
*
* @method _mergeStyles
* @param {Object} a Hash of new styles
* @param {Object} b Hash of original styles
* @return Object
*/
_mergeStyles: function(a, b)
{
if(!b)
{
b = {};
}
{
{
}
else
{
}
}, this);
return newstyles;
},
/**
* @protected
*
* Gets the default value for the <code>styles</code> attribute.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
return {padding:{
top:0,
right: 0,
bottom: 0,
left: 0
}};
}
};
/**
* The Axis class. Generates axes for a chart.
*
* @class Axis
* @extends Renderer
* @constructor
*/
/**
* @private
*/
_dataChangeHandler: function(e)
{
if(this.get("rendered"))
{
this._drawAxis();
}
},
/**
* @private
*/
_updateHandler: function(e)
{
if(this.get("rendered"))
{
this._drawAxis();
}
},
/**
* @private
*/
_positionChangeHandler: function(e)
{
if(position == "none")
{
return;
}
if(this.get("rendered"))
{
this._drawAxis();
}
},
/**
* @private
*/
renderUI: function()
{
{
this._setCanvas();
}
},
/**
* @private
*/
syncUI: function()
{
this._drawAxis();
},
/**
* @private
*/
_setCanvas: function()
{
p = this.get("position"),
pn = this._parentNode,
w = this.get("width"),
h = this.get("height");
if(p === "top" || p === "bottom")
{
}
else
{
}
},
/**
* @protected
*
* Gets the default value for the <code>styles</code> attribute. Overrides
* base implementation.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
var axisstyles = {
majorTicks: {
display:"inside",
length:4,
color:"#dad8c9",
weight:1,
alpha:1
},
minorTicks: {
display:"none",
length:2,
color:"#dad8c9",
weight:1
},
line: {
weight:1,
color:"#dad8c9",
alpha:1
},
majorUnit: {
determinant:"count",
count:11,
distance:75
},
top: "0px",
left: "0px",
width: "100px",
height: "100px",
label: {
color:"#808080",
alpha: 1,
fontSize:"85%",
rotation: 0,
margin: {
top:4,
right:4,
bottom:4,
left:4
}
},
hideOverlappingLabelTicks: false
};
},
/**
* @private
*/
_handleSizeChange: function(e)
{
{
this._drawAxis();
}
},
/**
* @private
*/
_layout: null,
/**
* @private
*/
{
var l;
switch(pos)
{
case "top" :
l = new Y.TopAxisLayout({axisRenderer:this});
break;
case "bottom" :
l = new Y.BottomAxisLayout({axisRenderer:this});
break;
case "left" :
l = new Y.LeftAxisLayout({axisRenderer:this});
break;
case "right" :
l = new Y.RightAxisLayout({axisRenderer:this});
break;
}
return l;
},
/**
* @private
*/
{
},
/**
* @private
*/
_drawAxis: function ()
{
if(this._drawing)
{
this._callLater = true;
return;
}
this._drawing = true;
this._callLater = false;
{
len,
i = 0,
layoutLength = this.getLength();
if(drawTicks)
{
}
if(len < 1)
{
this._clearLabelCache();
return;
}
this._createLabelCache();
this._tickPoints = [];
for(; i < len; ++i)
{
if(drawTicks)
{
}
label.innerHTML = labelFunction.apply(labelFunctionScope, [this.getLabelByIndex(i, len), labelFormat]);
}
this._clearLabelCache();
if(this.get("overlapGraph"))
{
}
for(i = 0; i < len; ++i)
{
}
}
this._drawing = false;
if(this._callLater)
{
this._drawAxis();
}
else
{
this.fire("axisRendered");
}
},
/**
* @private
*/
_labels: null,
/**
* @private
*/
_labelCache: null,
/**
* @private
*/
{
var i,
customStyles = {
rotation: "rotation",
margin: "margin",
alpha: "alpha"
},
cache = this._labelCache,
{
}
else
{
}
for(i in styles)
{
{
}
}
return label;
},
/**
* @private
*/
_createLabelCache: function()
{
if(this._labels)
{
if(this._labelCache)
{
}
else
{
}
}
else
{
this._clearLabelCache();
}
this._labels = [];
},
/**
* @private
*/
_clearLabelCache: function()
{
if(this._labelCache)
{
i = 0,
labelCache = this._labelCache;
for(; i < len; ++i)
{
label = labelCache[i];
}
}
this._labelCache = [];
},
/**
* @private
*/
_calculateSizeByTickLength: true,
/**
* @private
*/
getLineEnd: function(pt)
{
var w = this.get("width"),
h = this.get("height"),
{
return {x:w, y:pt.y};
}
else
{
return {x:pt.x, y:h};
}
},
/**
* @private
*/
getLength: function()
{
var l,
w = this.get("width"),
h = this.get("height"),
{
}
else
{
}
return l;
},
/**
* @private
*/
getFirstPoint:function(pt)
{
{
}
else
{
}
return np;
},
/**
* @private
*/
{
{
}
else
{
}
return point;
},
/**
* @private
*/
getLastPoint: function()
{
w = this.get("width"),
{
}
else
{
}
},
/**
* @private
*/
getPosition: function(point)
{
var p,
h = this.get("height"),
{
//Numeric data on a vertical axis is displayed from bottom to top.
//Categorical and Timeline data is displayed from top to bottom.
if(dataType === "numeric")
{
}
else
{
}
}
else
{
}
return p;
}
}, {
{
/**
* @protected
*
*
* @attribute edgeOffset
* @type Number
*/
{
value: 0
},
/**
* The graphic in which the axis line and ticks will be rendered.
*
* @attribute graphic
* @type Graphic
*/
graphic: {},
/**
* Contains the contents of the axis.
*
* @attribute node
* @type HTMLElement
*/
node: {},
/**
* Direction of the axis.
*
* @attribute position
* @type String
*/
position: {
lazyAdd: false,
setOnce: true,
{
if(val == "none")
{
this.bindUI();
}
return val;
}
},
/**
* Distance determined by the tick styles used to calculate the distance between the axis
* line in relation to the top of the axis.
*
* @attribute topTickOffset
* @type Number
*/
value: 0
},
/**
* Distance determined by the tick styles used to calculate the distance between the axis
* line in relation to the bottom of the axis.
*
* @attribute bottomTickOffset
* @type Number
*/
value: 0
},
/**
* Distance determined by the tick styles used to calculate the distance between the axis
* line in relation to the left of the axis.
*
* @attribute leftTickOffset
* @type Number
*/
value: 0
},
/**
* Distance determined by the tick styles used to calculate the distance between the axis
* line in relation to the right side of the axis.
*
* @attribute rightTickOffset
* @type Number
*/
value: 0
},
/**
* Collection of labels used to render the axis.
*
* @attribute labels
* @type Array
*/
labels: {
readOnly: true,
getter: function()
{
return this._labels;
}
},
/**
* Collection of points used for placement of labels and ticks along the axis.
*
* @attribute tickPoints
* @type Array
*/
tickPoints: {
readOnly: true,
getter: function()
{
{
}
return this._tickPoints;
}
},
/**
* Indicates whether the axis overlaps the graph. If an axis is the inner most axis on a given
* position and the tick position is inside or cross, the axis will need to overlap the graph.
*
* @attribute overlapGraph
* @type Boolean
*/
overlapGraph: {
value:true,
{
}
},
/**
* Object which should have by the labelFunction
*
* @attribute labelFunctionScope
* @type Object
*/
/**
* Style properties used for drawing an axis. This attribute is inherited from <code>Renderer</code>. Below are the default values:
* <dl>
* <dt>majorTicks</dt><dd>Properties used for drawing ticks.
* <dl>
* <dt>display</dt><dd>Position of the tick. Possible values are <code>inside</code>, <code>outside</code>, <code>cross</code> and <code>none</code>. The
* default value is <code>inside</code>.</dd>
* <dt>length</dt><dd>The length (in pixels) of the tick. The default value is 4.</dd>
* <dt>color</dt><dd>The color of the tick. The default value is <code>#dad8c9</code></dd>
* <dt>weight</dt><dd>Number indicating the width of the tick. The default value is 1.</dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the tick. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>line</dt><dd>Properties used for drawing the axis line.
* <dl>
* <dt>weight</dt><dd>Number indicating the width of the axis line. The default value is 1.</dd>
* <dt>color</dt><dd>The color of the axis line. The default value is <code>#dad8c9</code>.</dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the tick. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>majorUnit</dt><dd>Properties used to calculate the <code>majorUnit</code> for the axis.
* <dl>
* <dt>determinant</dt><dd>The algorithm used for calculating distance between ticks. The possible options are <code>count</code> and <code>distance</code>. If
* the <code>determinant</code> is <code>count</code>, the axis ticks will spaced so that a specified number of ticks appear on the axis. If the <code>determinant</code>
* is <code>distance</code>, the axis ticks will spaced out according to the specified distance. The default value is <code>count</code>.</dd>
* <dt>count</dt><dd>Number of ticks to appear on the axis when the <code>determinant</code> is <code>count</code>. The default value is 11.</dd>
* <dt>distance</dt><dd>The distance (in pixels) between ticks when the <code>determinant</code> is <code>distance</code>. The default value is 75.</dd>
* </dl>
* </dd>
* <dt>label</dt><dd>Properties and styles applied to the axis labels.
* <dl>
* <dt>color</dt><dd>The color of the labels. The default value is <code>#808080</code>.</dd>
* <dt>alpha</dt><dd>Number between 0 and 1 indicating the opacity of the labels. The default value is 1.</dd>
* <dt>fontSize</dt><dd>The font-size of the labels. The default value is 85%</dd>
* <dt>rotation</dt><dd>The rotation, in degrees (between -90 and 90) of the labels. The default value is 0.</dd>
* <dt>margin</dt><dd>The distance between the label and the axis/tick. Depending on the position of the <code>Axis</code>, only one of the properties used.
* <dl>
* <dt>top</dt><dd>Pixel value used for an axis with a <code>position</code> of <code>bottom</code>. The default value is 4.</dd>
* <dt>right</dt><dd>Pixel value used for an axis with a <code>position</code> of <code>left</code>. The default value is 4.</dd>
* <dt>bottom</dt><dd>Pixel value used for an axis with a <code>position</code> of <code>top</code>. The default value is 4.</dd>
* <dt>left</dt><dd>Pixel value used for an axis with a <code>position</code> of <code>right</code>. The default value is 4.</dd>
* </dl>
* </dd>
* </dl>
* </dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* Algorithmic strategy for rendering a left axis.
*
* @class LeftAxisLayout
* @extends Base
* @param {Object} config
* @constructor
*/
function LeftAxisLayout(config)
{
}
LeftAxisLayout.ATTRS = {
/**
* Reference to the <code>Axis</code> using the strategy.
*
* @attribute axisRenderer
* @type Axis
* @protected
*/
axisRenderer: {
value: null
},
/**
* @private
*/
maxLabelSize: {
value: 0
}
};
/**
* Sets the length of the tick on either side of the axis line.
*
* @method setTickOffset
* @protected
*/
setTickOffsets: function()
{
switch(display)
{
case "inside" :
break;
case "outside" :
break;
case "cross":
break;
default:
break;
}
},
/**
* Draws a tick
*
* @method drawTick
* @param {Object} pt Point on the axis in which the tick will intersect.
* @param {Object) tickStyle Hash of properties to apply to the tick.
* @protected
*/
{
},
/**
* Calculates the coordinates for the first point on an axis.
*
* @method getLineStart
* @return {Object}
* @protected
*/
getLineStart: function()
{
if(display === "outside")
{
pt.x += tickLength;
}
else if(display === "cross")
{
}
return pt;
},
/**
* Calculates the point for a label.
*
* @method getLabelPoint
* @param {Object} point Point on the axis in which the tick will intersect.
* @return {Object}
* @protected
*/
getLabelPoint: function(point)
{
},
/**
* Updates the value for the <code>maxLabelSize</code> for use in calculating total size.
*
* @method updateMaxLabelSize
* @param {HTMLElement} label to measure
* @protected
*/
updateMaxLabelSize: function(label)
{
m11 = cosRadians,
max;
if(!document.createElementNS)
{
label.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ' M12=' + m12 + ' M21=' + m21 + ' M22=' + m22 + ' sizingMethod="auto expand")';
}
else
{
if(rot === 0)
{
}
else if(absRot === 90)
{
}
else
{
}
}
},
/**
* Rotate and position labels.
*
* @method positionLabel
* @param {HTMLElement} label to rotate position
* @param {Object} pt hash containing the x and y coordinates in which the label will be positioned
* against.
* @protected
*/
{
margin = 0,
leftOffset = pt.x,
m11 = cosRadians,
{
}
if(!document.createElementNS)
{
if(rot === 0)
{
}
else if(absRot === 90)
{
}
else if(rot > 0)
{
}
else
{
}
if(filterString)
{
filterString += " ";
}
{
filterString = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + Math.round(labelAlpha * 100) + ")";
}
if(rot !== 0)
{
if(filterString)
{
filterString += " ";
}
else
{
filterString = "";
}
filterString += 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ' M12=' + m12 + ' M21=' + m21 + ' M22=' + m22 + ' sizingMethod="auto expand")';
}
if(filterString)
{
}
return;
}
if(rot === 0)
{
leftOffset -= labelWidth;
}
else if(rot === 90)
{
}
else if(rot === -90)
{
}
else
{
if(rot < 0)
{
}
else
{
}
}
},
/**
* @protected
*
* Calculates the size and positions the content elements.
*
* @method setSizeAndPosition
* @protected
*/
setSizeAndPosition: function()
{
{
}
},
/**
* Adjust the position of the Axis widget's content box for internal axes.
*
* @method offsetNodeForTick
* @param {Node} cb Content box of the Axis.
* @protected
*/
offsetNodeForTick: function(cb)
{
},
/**
* Sets the width of the axis based on its contents.
*
* @method setCalculatedSize
* @protected
*/
setCalculatedSize: function()
{
}
});
/**
* RightAxisLayout contains algorithms for rendering a right axis.
*
* @constructor
* @class RightAxisLayout
* @extends Base
* @param {Object} config
*/
function RightAxisLayout(config)
{
}
RightAxisLayout.ATTRS = {
/**
* Reference to the <code>Axis</code> using the strategy.
*
* @attribute axisRenderer
* @type Axis
* @protected
*/
axisRenderer: {
value: null
}
};
/**
* Sets the length of the tick on either side of the axis line.
*
* @method setTickOffset
* @protected
*/
setTickOffsets: function()
{
switch(display)
{
case "inside" :
break;
case "outside" :
break;
case "cross" :
break;
default:
break;
}
},
/**
* Draws a tick
*
* @method drawTick
* @param {Object} pt Point on the axis in which the tick will intersect.
* @param {Object) tickStyle Hash of properties to apply to the tick.
* @protected
*/
{
},
/**
* Calculates the coordinates for the first point on an axis.
*
* @method getLineStart
* @return {Object}
* @protected
*/
getLineStart: function()
{
if(display === "inside")
{
pt.x += tickLength;
}
else if(display === "cross")
{
}
return pt;
},
/**
* Calculates the point for a label.
*
* @method getLabelPoint
* @param {Object} point Point on the axis in which the tick will intersect.
* @return {Object}
* @protected
*/
getLabelPoint: function(point)
{
},
/**
* Updates the value for the <code>maxLabelSize</code> for use in calculating total size.
*
* @method updateMaxLabelSize
* @param {HTMLElement} label to measure
* @protected
*/
updateMaxLabelSize: function(label)
{
m11 = cosRadians,
max;
if(!document.createElementNS)
{
label.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ' M12=' + m12 + ' M21=' + m21 + ' M22=' + m22 + ' sizingMethod="auto expand")';
}
else
{
if(rot === 0)
{
}
else if(absRot === 90)
{
}
else
{
}
}
},
/**
* Rotate and position labels.
*
* @method positionLabel
* @param {HTMLElement} label to rotate position
* @param {Object} pt hash containing the x and y coordinates in which the label will be positioned
* against.
* @protected
*/
{
margin = 0,
leftOffset = pt.x,
m11 = cosRadians,
{
}
if(!document.createElementNS)
{
if(rot === 0)
{
}
else if(absRot === 90)
{
}
else if(rot > 0)
{
}
else
{
}
leftOffset += margin;
leftOffset += tickOffset;
{
filterString = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + Math.round(labelAlpha * 100) + ")";
}
if(rot !== 0)
{
if(filterString)
{
filterString += " ";
}
else
{
filterString = "";
}
filterString += 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ' M12=' + m12 + ' M21=' + m21 + ' M22=' + m22 + ' sizingMethod="auto expand")';
}
if(filterString)
{
}
return;
}
if(rot === 0)
{
}
else if(rot === 90)
{
}
else if(rot === -90)
{
}
else if(rot < 0)
{
}
else
{
}
leftOffset += margin;
leftOffset += tickOffset;
},
/**
* Calculates the size and positions the content elements.
*
* @method setSizeAndPosition
* @protected
*/
setSizeAndPosition: function()
{
{
}
},
/**
* Adjusts position for inner ticks.
*
* @method offsetNodeForTick
* @param {Node} cb contentBox of the axis
* @protected
*/
offsetNodeForTick: function(cb)
{
},
/**
* Assigns a height based on the size of the contents.
*
* @method setCalculatedSize
* @protected
*/
setCalculatedSize: function()
{
}
});
/**
* Contains algorithms for rendering a bottom axis.
*
* @class BottomAxisLayout
* @Constructor
*/
function BottomAxisLayout(config)
{
}
/**
* Reference to the <code>Axis</code> using the strategy.
*
* @attribute axisRenderer
* @type Axis
* @protected
*/
axisRenderer: {
value:null
},
/**
* Length in pixels of largest text bounding box. Used to calculate the height of the axis.
*
* @attribute maxLabelSize
* @type Number
* @protected
*/
maxLabelSize: {
value: 0
}
};
/**
* Sets the length of the tick on either side of the axis line.
*
* @method setTickOffsets
* @protected
*/
setTickOffsets: function()
{
switch(display)
{
case "inside" :
break;
case "outside" :
break;
case "cross":
break;
default:
break;
}
},
/**
* Calculates the coordinates for the first point on an axis.
*
* @method getLineStart
* @protected
*/
getLineStart: function()
{
if(display === "inside")
{
pt.y += tickLength;
}
else if(display === "cross")
{
}
return pt;
},
/**
* Draws a tick
*
* @method drawTick
* @param {Object} pt hash containing x and y coordinates
* @param {Object} tickStyles hash of properties used to draw the tick
* @protected
*/
{
},
/**
* Calculates the point for a label.
*
* @method getLabelPoint
* @param {Object} pt hash containing x and y coordinates
* @return Object
* @protected
*/
getLabelPoint: function(point)
{
},
/**
* Updates the value for the <code>maxLabelSize</code> for use in calculating total size.
*
* @method updateMaxLabelSize
* @param {HTMLElement} label to measure
* @protected
*/
updateMaxLabelSize: function(label)
{
m11 = cosRadians,
max;
if(!document.createElementNS)
{
label.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ' M12=' + m12 + ' M21=' + m21 + ' M22=' + m22 + ' sizingMethod="auto expand")';
}
else
{
if(rot === 0)
{
}
else if(absRot === 90)
{
}
else
{
}
}
},
/**
* Rotate and position labels.
*
* @method positionLabel
* @param {HTMLElement} label to rotate position
* @param {Object} pt hash containing the x and y coordinates in which the label will be positioned
* against.
* @protected
*/
{
margin = 0,
m11 = cosRadians,
{
}
if(!document.createElementNS)
{
m11 = cosRadians;
if(absRot === 90)
{
}
else if(rot < 0)
{
}
else if(rot > 0)
{
}
else
{
}
topOffset += tickOffset;
{
filterString = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + Math.round(labelAlpha * 100) + ")";
}
if(rot !== 0)
{
if(filterString)
{
filterString += " ";
}
else
{
filterString = "";
}
filterString += 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ' M12=' + m12 + ' M21=' + m21 + ' M22=' + m22 + ' sizingMethod="auto expand")';
}
if(filterString)
{
}
return;
}
if(rot === 0)
{
}
else if(absRot === 90)
{
if(rot === 90)
{
}
else
{
topOffset += labelWidth;
}
}
else
{
if(rot < 0)
{
}
else
{
}
}
topOffset += tickOffset;
},
/**
* Calculates the size and positions the content elements.
*
* @method setSizeAndPosition
* @protected
*/
setSizeAndPosition: function()
{
{
}
},
/**
* Adjusts position for inner ticks.
*
* @method offsetNodeForTick
* @param {Node} cb contentBox of the axis
* @protected
*/
offsetNodeForTick: function(cb)
{
},
/**
* Assigns a height based on the size of the contents.
*
* @method setCalculatedSize
* @protected
*/
setCalculatedSize: function()
{
}
});
/**
* Contains algorithms for rendering a top axis.
*
* @class TopAxisLayout
* @constructor
*/
function TopAxisLayout(config)
{
}
TopAxisLayout.ATTRS = {
/**
* Reference to the <code>Axis</code> using the strategy.
*
* @attribute axisRenderer
* @type Axis
* @protected
*/
axisRenderer: {
value: null
},
/**
* Length in pixels of largest text bounding box. Used to calculate the height of the axis.
*
* @attribute maxLabelSize
* @type Number
* @protected
*/
maxLabelSize: {
value: 0
}
};
/**
* Sets the length of the tick on either side of the axis line.
*
* @method setTickOffsets
* @protected
*/
setTickOffsets: function()
{
switch(display)
{
case "inside" :
break;
case "outside" :
break;
case "cross" :
break;
default:
break;
}
},
/**
* Calculates the coordinates for the first point on an axis.
*
* @method getLineStart
* @protected
*/
getLineStart: function()
{
if(display === "outside")
{
pt.y += tickLength;
}
else if(display === "cross")
{
}
return pt;
},
/**
* Draws a tick
*
* @method drawTick
* @param {Object} pt hash containing x and y coordinates
* @param {Object} tickStyles hash of properties used to draw the tick
* @protected
*/
{
},
/**
* Calculates the point for a label.
*
* @method getLabelPoint
* @param {Object} pt hash containing x and y coordinates
* @return Object
* @protected
*/
getLabelPoint: function(pt)
{
},
/**
* Updates the value for the <code>maxLabelSize</code> for use in calculating total size.
*
* @method updateMaxLabelSize
* @param {HTMLElement} label to measure
* @protected
*/
updateMaxLabelSize: function(label)
{
m11 = cosRadians,
max;
if(!document.createElementNS)
{
label.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ' M12=' + m12 + ' M21=' + m21 + ' M22=' + m22 + ' sizingMethod="auto expand")';
}
else
{
if(rot === 0)
{
}
else if(absRot === 90)
{
}
else
{
}
}
},
/**
* Rotate and position labels.
*
* @method positionLabel
* @param {HTMLElement} label to rotate position
* @param {Object} pt hash containing the x and y coordinates in which the label will be positioned
* against.
* @protected
*/
{
margin = 0,
leftOffset = pt.x,
m11,
m12,
m21,
m22,
{
}
if(!document.createElementNS)
{
m11 = cosRadians;
if(rot === 0)
{
}
else if(absRot === 90)
{
}
else if(rot > 0)
{
leftOffset -= (cosRadians * labelWidth) + Math.min((sinRadians * labelHeight), (rot/180 * labelHeight));
}
else
{
}
{
filterString = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + Math.round(labelAlpha * 100) + ")";
}
if(rot !== 0)
{
if(filterString)
{
filterString += " ";
}
else
{
filterString = "";
}
filterString += 'progid:DXImageTransform.Microsoft.Matrix(M11=' + m11 + ' M12=' + m12 + ' M21=' + m21 + ' M22=' + m22 + ' sizingMethod="auto expand")';
}
if(filterString)
{
}
return;
}
if(rot === 0)
{
topOffset -= labelHeight;
}
else if(rot === 90)
{
topOffset -= labelWidth;
}
else if(rot === -90)
{
topOffset -= 0;
}
else if(rot < 0)
{
}
else
{
}
},
/**
* Calculates the size and positions the content elements.
*
* @method setSizeAndPosition
* @protected
*/
setSizeAndPosition: function()
{
{
}
},
/**
* Adjusts position for inner ticks.
*
* @method offsetNodeForTick
* @param {Node} cb contentBox of the axis
* @protected
*/
offsetNodeForTick: function(cb)
{
},
/**
* Assigns a height based on the size of the contents.
*
* @method setCalculatedSize
* @protected
*/
setCalculatedSize: function()
{
}
});
/**
* AxisType is an abstract class that manages the data for an axis.
*
* @param {Object} config (optional) Configuration parameters for the Chart.
* @class AxisType
* @constructor
* @extends Axis
*/
/**
* @private
*/
bindUI: function()
{
},
/**
* @private
*/
_dataProviderChangeHandler: function(e)
{
i;
if(keys)
{
for(i in keys)
{
if(keys.hasOwnProperty(i))
{
delete keys[i];
}
}
}
{
}
},
/**
* @private
*/
GUID: "yuibaseaxis",
/**
* @private
*/
_type: null,
/**
* @private
*/
_setMaximum: null,
/**
* @private
*/
_dataMaximum: null,
/**
* @private
*/
_setMinimum: null,
/**
* @private
*/
_data: null,
/**
* @private
*/
_updateTotalDataFlag: true,
/**
* @private
*/
_dataReady: false,
/**
* Adds an array to the key hash.
*
* @param value Indicates what key to use in retrieving
* the array.
*/
{
},
/**
* @private
*/
{
var i = 0,
obj,
keyArray = [],
for(; i < len; ++i)
{
}
return keyArray;
},
/**
* @private
*/
{
var i,
obj,
arr = [],
for(i = 0; i < len; ++i)
{
}
this._updateTotalDataFlag = true;
},
/**
* @private
*/
_updateTotalData: function()
{
i;
this._data = [];
for(i in keys)
{
if(keys.hasOwnProperty(i))
{
}
}
this._updateTotalDataFlag = false;
},
/**
* Removes an array from the key hash.
*
* @method removeKey
* @param {String} value Indicates what key to use in removing from
* the hash.
*/
{
{
this._keyChangeHandler();
}
},
/**
* Returns a numeric value based of a key value and an index.
*
* @method getKeyValueAt
* @param {String} key value used to look up the correct array
* @param {Number} index within the array
* @return Object
*/
{
{
}
return value;
},
/**
* Returns an array of values based on an identifier key.
*
* @method getDataByKey
* @param {String} value value used to identify the array
* @return Object
*/
getDataByKey: function (value)
{
{
}
return null;
},
/**
* @private
*/
_updateMinAndMax: function()
{
max = 0,
min = 0,
len,
num,
i;
{
if(len > 1)
{
for(i = 1; i < len; i++)
{
{
continue;
}
}
}
}
this._dataMaximum = max;
this._dataMinimum = min;
},
/**
* Returns the total number of majorUnits that will appear on an axis.
*
* @method getTotalMajorUnits
* @return Number
*/
getTotalMajorUnits: function()
{
var units,
{
}
{
}
return units;
},
/**
* Returns the distance between major units on an axis.
*
* @method getMajorUnitDistance
* @param {Number} len Number of ticks
* @param {Number} uiLen Size of the axis.
* @param {Object} majorUnit Hash of properties used to determine the majorUnit
* @return Number
*/
{
var dist;
{
}
{
}
return dist;
},
/**
* Gets the distance that the first and last ticks are offset from there respective
* edges.
*
* @attribute getEdgeOffset
* @type Method
* @param {Number} ct Number of ticks on the axis.
* @param {Number} l Length (in pixels) of the axis.
* @return Number
*/
getEdgeOffset: function(ct, l)
{
return 0;
},
/**
* Calculates and returns a value based on the number of labels and the index of
* the current label.
*
* @method getLabelByIndex
* @param {Number} i Index of the label.
* @param {Number} l Total number of labels.
* @return String
*/
getLabelByIndex: function(i, l)
{
l -= 1;
return label;
},
/**
* @private
*/
_keyChangeHandler: function(e)
{
this._updateMinAndMax();
this.fire("dataUpdate");
}
}, {
ATTRS: {
/**
* Hash of array identifed by a string value.
*
* @attribute keys
* @type Object
*/
keys: {
value: {},
{
var keys = {},
i,
len,
{
for(i = 0; i < len; ++i)
{
}
}
{
}
else
{
for(i in val)
{
if(val.hasOwnProperty(i))
{
}
}
}
this._updateTotalDataFlag = true;
return keys;
}
},
/**
*Indicates how to round unit values.
* <dl>
* <dt>niceNumber</dt><dd>Units will be smoothed based on the number of ticks and data range.</dd>
* <dt>auto</dt><dd>If the range is greater than 1, the units will be rounded.</dd>
* <dt>numeric value</dt><dd>Units will be equal to the numeric value.</dd>
* <dt>null</dt><dd>No rounding will occur.</dd>
* </dl>
*
* @attribute roundingMethod
* @type String
* @default niceNumber
*/
value: "niceNumber"
},
/**
*Returns the type of axis data
* <dl>
* <dt>time</dt><dd>Manages time data</dd>
* <dt>stacked</dt><dd>Manages stacked numeric data</dd>
* <dt>numeric</dt><dd>Manages numeric data</dd>
* <dt>category</dt><dd>Manages categorical data</dd>
* </dl>
*
* @attribute type
* @type String
*/
type:
{
readOnly: true,
getter: function ()
{
return this._type;
}
},
/**
* Instance of <code>ChartDataProvider</code> that the class uses
* to build its own data.
*
* @attribute dataProvider
* @type Array
*/
{
return value;
}
},
/**
* The maximum value contained in the <code>data</code> array. Used for
* <code>maximum</code> when <code>autoMax</code> is true.
*
* @attribute dataMaximum
* @type Number
*/
dataMaximum: {
getter: function ()
{
if(!this._dataMaximum)
{
this._updateMinAndMax();
}
return this._dataMaximum;
}
},
/**
* The maximum value that will appear on an axis.
*
* @attribute maximum
* @type Number
*/
maximum: {
getter: function ()
{
if(this.get("setMax"))
{
max = this._setMaximum;
}
return max;
},
{
return value;
}
},
/**
* The minimum value contained in the <code>data</code> array. Used for
* <code>minimum</code> when <code>autoMin</code> is true.
*
* @attribute dataMinimum
* @type Number
*/
dataMinimum: {
getter: function ()
{
if(!this._dataMinimum)
{
this._updateMinAndMax();
}
return this._dataMinimum;
}
},
/**
* The minimum value that will appear on an axis.
*
* @attribute minimum
* @type Number
*/
minimum: {
getter: function ()
{
if(this.get("setMin"))
{
min = this._setMinimum;
}
return min;
},
{
return val;
}
},
/**
* Determines whether the maximum is calculated or explicitly
* set by the user.
*
* @attribute setMax
* @type Boolean
*/
setMax: {
readOnly: true,
getter: function()
{
}
},
/**
* Determines whether the minimum is calculated or explicitly
* set by the user.
*
* @attribute setMin
* @type Boolean
*/
setMin: {
readOnly: true,
getter: function()
{
}
},
/**
* Array of axis data
*
* @attribute data
* @type Array
*/
data: {
getter: function ()
{
if(!this._data || this._updateTotalDataFlag)
{
this._updateTotalData();
}
return this._data;
}
},
/**
* Array containing all the keys in the axis.
*
* @attribute keyCollection
* @type Array
*/
getter: function()
{
i,
col = [];
for(i in keys)
{
if(keys.hasOwnProperty(i))
{
}
}
return col;
},
readOnly: true
},
/**
* Method used for formatting a label.
*
* @attribute labelFunction
* @type Function
* @param {String} val label to be formatted.
* @param {Object} format temlate for formatting a label.
* @return String
*/
{
return val;
}
}
}
});
/**
* NumericAxis manages numeric data on an axis.
*
* @param {Object} config (optional) Configuration parameters for the Chart.
* @class NumericAxis
* @constructor
* @extends AxisType
*/
function NumericAxis(config)
{
}
NumericAxis.ATTRS = {
/**
* Indicates whether 0 should always be displayed.
*
* @attribute alwaysShowZero
* @type Boolean
*/
value: true
},
/**
* Formats a label.
*
* @attribute labelFunction
* @type Function
* @param {Object} val Value to be formatted.
* @param {Object} format Hasho of properties used to format the label.
*/
{
if(format)
{
}
return val;
}
},
/**
* Hash of properties used by the <code>labelFunction</code> to format a
* label.
*
* @attribute labelFormat
* @type Object
*/
labelFormat: {
value: {
prefix: "",
thousandsSeparator: "",
decimalSeparator: "",
decimalPlaces: "0",
suffix: ""
}
}
};
{
/**
* @private
*/
_type: "numeric",
/**
* @private
*/
{
},
/**
* @private
*/
_getNiceNumber: function(roundingUnit)
{
var tempMajorUnit = roundingUnit,
{
}
else
{
}
if(!isNaN(tempMajorUnit))
{
return tempMajorUnit;
}
return roundingUnit;
},
/**
* @private
*/
_updateMinAndMax: function()
{
max = 0,
min = 0,
len,
num,
i,
key,
{
{
if(len > 1)
{
for(i = 1; i < len; i++)
{
{
{
//hloc values
{
{
}
}
}
continue;
}
}
}
}
}
},
/**
* @private
*/
{
var roundingUnit,
if(roundingMethod)
{
if(roundingMethod == "niceNumber")
{
{
{
min = 0;
}
}
else if(maxGreaterThanZero && !minGreaterThanZero)
{
}
else
{
{
max = 0;
}
else
{
}
}
}
else if(roundingMethod == "auto")
{
{
{
min = 0;
}
if(useIntegers)
{
}
}
else if(maxGreaterThanZero && !minGreaterThanZero)
{
if(alwaysShowZero)
{
if(useIntegers)
{
}
else
{
}
}
else
{
if(useIntegers)
{
}
}
}
else
{
if(useIntegers)
{
}
{
max = 0;
if(useIntegers)
{
Math.ceil(roundingUnit);
}
}
else
{
}
}
}
{
{
{
min = 0;
}
else
{
}
if(!dataRangeGreater)
{
}
else
{
}
}
else if(maxGreaterThanZero && !minGreaterThanZero)
{
if(!dataRangeGreater)
{
}
else
{
}
}
else
{
{
max = 0;
}
else
{
}
if(!dataRangeGreater)
{
}
else
{
}
}
}
}
this._dataMaximum = max;
this._dataMinimum = min;
},
/**
* Calculates and returns a value based on the number of labels and the index of
* the current label.
*
* @method getLabelByIndex
* @param {Number} i Index of the label.
* @param {Number} l Total number of labels.
* @return String
*/
getLabelByIndex: function(i, l)
{
l -= 1;
if(i > 0)
{
}
return label;
},
/**
* @private
*
* Rounds a Number to the nearest multiple of an input. For example, by rounding
* 16 to the nearest 10, you will receive 20. Similar to the built-in function Math.round().
*/
{
if(nearest === 0)
{
return number;
}
},
/**
* @private
*
* Rounds a Number <em>up</em> to the nearest multiple of an input. For example, by rounding
* 16 up to the nearest 10, you will receive 20. Similar to the built-in function Math.ceil().
*/
{
if(nearest === 0)
{
return number;
}
},
/**
* @private
*
* Rounds a Number <em>down</em> to the nearest multiple of an input. For example, by rounding
* 16 down to the nearest 10, you will receive 10. Similar to the built-in function Math.floor().
*/
{
if(nearest === 0)
{
return number;
}
},
/**
* @private
*
* Rounds a number to a certain level of precision. Useful for limiting the number of
* decimal places on a fractional number.
*/
{
}
});
Y.NumericAxis = NumericAxis;
/**
* StackedAxis manages stacked numeric data on an axis.
*
* @param {Object} config (optional) Configuration parameters for the Chart.
* @class StackedAxis
* @constructor
* @extends NumericAxis
*/
function StackedAxis(config)
{
}
{
/**
* @private
*/
_updateMinAndMax: function()
{
var max = 0,
min = 0,
pos = 0,
neg = 0,
len = 0,
i = 0,
key,
num,
{
{
}
}
for(; i < len; ++i)
{
pos = 0;
neg = 0;
{
{
{
continue;
}
if(num >= 0)
{
}
else
{
}
}
}
if(pos > 0)
{
}
else
{
}
if(neg < 0)
{
}
else
{
}
}
}
});
Y.StackedAxis = StackedAxis;
/**
* TimeAxis manages time data on an axis.
*
* @param {Object} config (optional) Configuration parameters for the Chart.
* @class TimeAxis
* @constructor
* @extends AxisType
*/
{
}
{
/**
* @private
*/
setMax: {
readOnly: true,
getter: function()
{
}
},
/**
* @private
*/
setMin: {
readOnly: true,
getter: function()
{
}
},
/**
* The maximum value that will appear on an axis.
*
* @attribute maximum
* @type Number
*/
maximum: {
getter: function ()
{
{
}
return max;
},
{
return value;
}
},
/**
* The minimum value that will appear on an axis.
*
* @attribute minimum
* @type Number
*/
minimum: {
getter: function ()
{
{
}
return min;
},
{
return value;
}
},
/**
* Formats a label.
*
* @attribute labelFunction
* @type Function
* @param {Object} val Value to be formatted.
* @param {String} format Pattern used to format label.
*/
{
if(format)
{
}
return val;
}
},
/**
* Pattern used by the <code>labelFunction</code> to format a label.
*
* @attribute labelFormat
* @type String
*/
labelFormat: {
value: "%b %d, %y"
}
};
/**
* Constant used to generate unique id.
*
* @property GUID
* @type String
* @private
*/
GUID: "yuitimeaxis",
/**
* @private
*/
_dataType: "time",
/**
* Calculates and returns a value based on the number of labels and the index of
* the current label.
*
* @method getLabelByIndex
* @param {Number} i Index of the label.
* @param {Number} l Total number of labels.
* @return String
*/
getLabelByIndex: function(i, l)
{
l -= 1;
{
}
else
{
}
return label;
},
/**
* @private
*/
{
var obj,
keyArray = [],
i = 0,
val,
for(; i < len; ++i)
{
{
}
{
}
else
{
}
}
return keyArray;
},
/**
* @private (override)
*/
{
var obj,
arr = [],
i,
val,
for(i = 0; i < len; ++i)
{
{
}
{
}
else
{
}
}
this._updateTotalDataFlag = true;
},
/**
* @private
*/
_getNumber: function(val)
{
{
}
{
}
return val;
}
});
/**
* CategoryAxis manages category data on an axis.
*
* @param {Object} config (optional) Configuration parameters for the Chart.
* @class CategoryAxis
* @constructor
* @extends AxisType
*/
function CategoryAxis(config)
{
}
{
/**
* @private
*/
_indices: null,
/**
* @private
*/
GUID: "yuicategoryaxis",
/**
* @private
*/
_type: "category",
/**
* @private
*/
_updateMinAndMax: function()
{
this._dataMinimum = 0;
},
/**
* @private
*/
{
var i = 0,
obj,
keyArr = [],
labels = [],
if(!this._indices)
{
this._indices = {};
}
for(; i < len; ++i)
{
keyArr[i] = i;
}
return labels;
},
/**
* @private
*/
_setDataByKey: function(key)
{
var i,
obj,
arr = [],
labels = [],
if(!this._indices)
{
this._indices = {};
}
for(i = 0; i < len; ++i)
{
arr[i] = i;
}
this._updateTotalDataFlag = true;
},
/**
* Returns an array of values based on an identifier key.
*
* @method getDataByKey
* @param {String} value value used to identify the array
* @return Array
*/
getDataByKey: function (value)
{
if(!this._indices)
{
this.get("keys");
}
{
}
return null;
},
/**
* Returns the total number of majorUnits that will appear on an axis.
*
* @method getTotalMajorUnits
* @return Number
*/
{
},
/**
* Returns the distance between major units on an axis.
*
* @method getMajorUnitDistance
* @param {Number} len Number of ticks
* @param {Number} uiLen Size of the axis.
* @param {Object} majorUnit Hash of properties used to determine the majorUnit
* @return Number
*/
{
var dist;
{
}
{
}
return dist;
},
/**
* Gets the distance that the first and last ticks are offset from there respective
* edges.
*
* @method getEdgeOffset
* @param {Number} ct Number of ticks on the axis.
* @param {Number} l Length (in pixels) of the axis.
* @return Number
*/
getEdgeOffset: function(ct, l)
{
return l/ct;
},
/**
* Calculates and returns a value based on the number of labels and the index of
* the current label.
*
* @method getLabelByIndex
* @param {Number} i Index of the label.
* @param {Number} l Total number of labels.
* @return String
*/
getLabelByIndex: function(i, l)
{
var label,
{
}
else
{
}
return label;
}
});
Y.CategoryAxis = CategoryAxis;
/**
* Utility class used for calculating curve points.
*
* @class CurveUtil
* @constructor
*/
function CurveUtil()
{
}
/**
* Creates an array of start, end and control points for splines.
*
* @protected
* @param {Array} xcoords Collection of x-coordinates used for calculate the curves
* @param {Array} ycoords Collection of y-coordinates used for calculate the curves
* @return {Object}
*/
{
var outpoints = [],
i = 1,
xvals = [],
yvals = [];
// Too few points, need at least two
if (l < 1)
{
return null;
}
outpoints[0] = {
};
// Special case, the Bezier should be a straight line
if (l === 1)
{
return outpoints;
}
for (; i < l; ++i)
{
outpoints.push({startx: Math.round(xcoords[i]), starty: Math.round(ycoords[i]), endx: Math.round(xcoords[i+1]), endy: Math.round(ycoords[i+1])});
}
for (i = 0; i < l; ++i)
{
if (i < l-1)
{
}
else
{
}
}
return outpoints;
},
/**
* @private
*/
getControlPoints: function(vals)
{
x = [],
tmp = [],
b = 2.0,
i = 1;
for (; i < l; ++i)
{
tmp[i] = 1/b;
x[i] = (vals[i] - x[i-1]) / b;
}
for (i = 1; i < l; ++i)
{
x[l-i-1] -= tmp[l-i] * x[l-i];
}
return x;
}
};
/**
* Utility class used for creating stacked series.
*
* @class StackingUtil
* @constructor
*/
function StackingUtil(){}
/**
* @protected
*
* Adjusts coordinate values for stacked series.
*
* @method _stackCoordinates
*/
_stackCoordinates: function()
{
i = 0,
len,
if(order === 0)
{
return;
}
if(direction === "vertical")
{
for(; i < len; ++i)
{
{
xcoords[i] += prevXCoords[i];
}
}
}
else
{
for(; i < len; ++i)
{
{
}
}
}
}
};
Y.StackingUtil = StackingUtil;
/**
* Utility class used for drawing lines.
*
* @class Lines
* @constructor
*/
function Lines(){}
/**
* @private
*/
_lineDefaults: null,
/**
* Creates a graphic in which to draw a series.
*
* @method _getGraphic
* @return Graphic
* @private
*/
_getGraphic: function()
{
if(!this._lineGraphic)
{
this._lineGraphic = new Y.Graphic();
}
this._lineGraphic.clear();
this.autoSize = false;
return this._lineGraphic;
},
/**
* Draws lines for the series.
*
* @method drawLines
* @protected
*/
drawLines: function()
{
{
return;
}
lastValidX = lastX,
lastValidY = lastY,
i,
graphic = this._getGraphic();
for(i = 1; i < len; i = ++i)
{
{
lastValidX = nextX;
lastValidY = nextY;
continue;
}
if(lastValidX == lastX)
{
if(lineType != "dashed")
{
}
else
{
gapSpace);
}
}
else if(!connectDiscontinuousPoints)
{
}
else
{
if(discontinuousType != "solid")
{
}
else
{
}
}
}
},
/**
* Connects data points with a consistent curve for a series.
*
* @method drawSpline
* @protected
*/
drawSpline: function()
{
{
return;
}
cx1,
cx2,
cy1,
cy2,
x,
y,
i = 0,
graphic = this._getGraphic(),
for(; i < len; i = ++i)
{
x = curvecoords[i].endx;
y = curvecoords[i].endy;
}
},
/**
* Draws a dashed line between two points.
*
* @method drawDashedLine
* @param {Number} xStart The x position of the start of the line
* @param {Number} yStart The y position of the start of the line
* @param {Number} xEnd The x position of the end of the line
* @param {Number} yEnd The y position of the end of the line
* @param {Number} dashSize the size of dashes, in pixels
* @param {Number} gapSize the size of gaps between dashes, in pixels
* @private
*/
{
i,
graphic = this._getGraphic();
for(i = 0; i < segmentCount; ++i)
{
}
{
}
else if(delta > 0)
{
}
},
/**
* Default values for <code>styles</code> attribute.
*
* @method _getLineDefaults
* @return Object
* @protected
*/
_getLineDefaults: function()
{
return {
alpha: 1,
weight: 6,
lineType:"solid",
dashLength:10,
gapSpace:10,
discontinuousType:"solid",
};
}
};
/**
* Utility class used for drawing area fills.
*
* @class Fills
* @constructor
*/
{
var attrs = {
area: {
getter: function()
{
return this._defaults || this._getAreaDefaults();
},
{
}
}
};
this.get("styles");
}
/**
* Draws fill
*
* @method drawFill
* @protected
*/
{
{
return;
}
lastValidX = firstX,
lastValidY = firstY,
i = 1,
for(; i < len; i = ++i)
{
{
lastValidX = nextX;
lastValidY = nextY;
continue;
}
lastValidX = nextX;
lastValidY = nextY;
}
},
/**
* Draws a fill for a spline
*
* @method drawAreaSpline
* @protected
*/
drawAreaSpline: function()
{
{
return;
}
cx1,
cx2,
cy1,
cy2,
x,
y,
i = 0,
for(; i < len; i = ++i)
{
x = curvecoords[i].endx;
y = curvecoords[i].endy;
}
{
}
else
{
}
},
/**
* Draws a a stacked area spline
*
* @method drawStackedAreaSpline
* @protected
*/
drawStackedAreaSpline: function()
{
{
return;
}
len,
cx1,
cx2,
cy1,
cy2,
x,
y,
i = 0,
for(; i < len; i = ++i)
{
x = curvecoords[i].endx;
y = curvecoords[i].endy;
}
if(order > 0)
{
i = 0;
for(; i < len; i = ++i)
{
x = curvecoords[i].endx;
y = curvecoords[i].endy;
}
}
else
{
{
}
else
{
}
}
},
/**
* @private
*/
_defaults: null,
/**
* Concatanates coordinate array with correct coordinates for closing an area fill.
*
* @method _getClosingPoints
* @return Array
* @protected
*/
_getClosingPoints: function()
{
{
}
else
{
}
},
/**
* Concatenates coordinate array with the correct coordinates for closing an area stack.
*
* @method _getStackedClosingPoints
* @return Array
* @protected
*/
_getStackedClosingPoints: function()
{
if(order > 0)
{
}
else
{
if(direction === "vertical")
{
}
else
{
}
}
return [allXCoords, allYCoords];
},
/**
* @private
*/
_getAreaDefaults: function()
{
return {
};
}
};
/**
* Utility class used for drawing markers.
*
* @class Plots
* @constructor
*/
{
var attrs = {
markers: {
getter: function()
{
return this._markers;
}
}
};
}
/**
* @private
*/
_plotDefaults: null,
/**
* Draws the markers
*
* @method drawPlots
* @protected
*/
drawPlots: function()
{
{
return;
}
i = 0,
left,
offsetWidth = w/2,
offsetHeight = h/2,
fillColors = null,
borderColors = null,
{
}
{
}
this._createMarkerCache();
if(isChrome)
{
this._createHotspotCache();
}
for(; i < len; ++i)
{
if(!top || !left || top === undefined || left === undefined || top == "undefined" || left == "undefined" || isNaN(top) || isNaN(left))
{
this._graphicNodes.push(null);
continue;
}
if(fillColors)
{
}
if(borderColors)
{
}
if(isChrome)
{
}
}
this._clearMarkerCache();
if(isChrome)
{
this._clearHotspotCache();
}
},
/**
* Gets the default values for series that use the utility. This method is used by
* the class' <code>styles</code> attribute's getter to get build default values.
*
* @method _getPlotDefaults
* @return Object
* @protected
*/
_getPlotDefaults: function()
{
var defs = {
fill:{
type: "solid",
alpha: 1,
colors:null,
alphas: null,
ratios: null
},
border:{
weight: 1,
alpha: 1
},
width: 10,
height: 10,
shape: "circle"
};
return defs;
},
/**
* Collection of markers to be used in the series.
*
* @private
*/
_markers: null,
/**
* Collection of markers to be re-used on a series redraw.
*
* @private
*/
_markerCache: null,
/**
* Gets and styles a marker. If there is a marker in cache, it will use it. Otherwise
* it will create one.
*
* @method getMarker
* @param {Object} styles Hash of style properties.
* @param {Number} order Order of the series.
* @param {Number} index Index within the series associated with the marker.
* @return Shape
* @protected
*/
{
var marker;
{
while(!marker)
{
{
break;
}
}
}
else
{
}
return marker;
},
/**
* Creates a shape to be used as a marker.
*
* @method _createMarker
* @param {Object} styles Hash of style properties.
* @param {Number} order Order of the series.
* @param {Number} index Index within the series associated with the marker.
* @return Shape
* @private
*/
{
return marker;
},
/**
* Creates a cache of markers for reuse.
*
* @method _createMarkerCache
* @private
*/
_createMarkerCache: function()
{
{
}
else
{
this._markerCache = [];
}
this._markers = [];
this._graphicNodes = [];
},
/**
* Removes unused markers from the marker cache
*
* @method _clearMarkerCache
* @private
*/
_clearMarkerCache: function()
{
i = 0,
for(; i < len; ++i)
{
marker = this._markerCache[i];
if(marker)
{
}
}
this._markerCache = [];
},
/**
* Resizes and positions markers based on a mouse interaction.
*
* @method updateMarkerState
* @param {String} type state of the marker
* @param {Number} i index of the marker
* @protected
*/
updateMarkerState: function(type, i)
{
if(this._markers[i])
{
var w,
h,
w = markerStyles.width;
h = markerStyles.height;
}
},
/**
* Parses a color from an array.
*
* @method _getItemColor
* @param {Array} val collection of colors
* @param {Number} i index of the item
* @return String
* @protected
*/
_getItemColor: function(val, i)
{
{
}
return val;
},
/**
* Method used by <code>styles</code> setter. Overrides base implementation.
*
* @method _setStyles
* @param {Object} newStyles Hash of properties to update.
* @return Object
* @protected
*/
_setStyles: function(val)
{
},
/**
* Combines new styles with existing styles.
*
* @method _parseMarkerStyles
* @private
*/
_parseMarkerStyles: function(val)
{
{
var defs = this._getPlotDefaults();
{
}
{
}
}
return val;
},
/**
* Returns marker state based on event type
*
* @method _getState
* @param {String} type event type
* @return String
* @protected
*/
{
var state;
switch(type)
{
case "mouseout" :
state = "off";
break;
case "mouseover" :
state = "over";
break;
case "mouseup" :
state = "over";
break;
case "mousedown" :
state = "down";
break;
}
return state;
},
/**
* @private
*/
_stateSyles: null,
/**
* Collection of hotspots to be used in the series.
*
* @private
*/
_hotspots: null,
/**
* Collection of hotspots to be re-used on a series redraw.
*
* @private
*/
_hotspotCache: null,
/**
* Gets and styles a hotspot. If there is a hotspot in cache, it will use it. Otherwise
* it will create one.
*
* @method getHotspot
* @param {Object} styles Hash of style properties.
* @param {Number} order Order of the series.
* @param {Number} index Index within the series associated with the hotspot.
* @return Shape
* @protected
*/
{
var hotspot,
type: "solid",
color: "#000",
alpha: 0
};
weight: 0
};
{
while(!hotspot)
{
{
break;
}
}
}
else
{
}
return hotspot;
},
/**
* Creates a shape to be used as a hotspot.
*
* @method _createHotspot
* @param {Object} styles Hash of style properties.
* @param {Number} order Order of the series.
* @param {Number} index Index within the series associated with the hotspot.
* @return Shape
* @private
*/
{
return hotspot;
},
/**
* Creates a cache of hotspots for reuse.
*
* @method _createHotspotCache
* @private
*/
_createHotspotCache: function()
{
{
}
else
{
this._hotspotCache = [];
}
this._hotspots = [];
},
/**
* Removes unused hotspots from the hotspot cache
*
* @method _clearHotspotCache
* @private
*/
_clearHotspotCache: function()
{
i = 0,
for(; i < len; ++i)
{
hotspot = this._hotspotCache[i];
if(hotspot)
{
}
}
this._hotspotCache = [];
}
};
/**
* Histogram is the base class for Column and Bar series.
*
* @class Histogram
* @constructor
*/
function Histogram(){}
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
{
return;
}
i = 0,
seriesSize = 0,
totalSize = 0,
offset = 0,
left,
fillColors = null,
borderColors = null,
{
}
{
}
{
setSizeKey = "height";
calculatedSizeKey = "width";
}
else
{
setSizeKey = "width";
calculatedSizeKey = "height";
}
this._createMarkerCache();
if(isChrome)
{
this._createHotspotCache();
}
for(; i < seriesLen; ++i)
{
renderer = seriesCollection[i];
if(order > i)
{
offset = seriesSize;
}
}
{
seriesSize *= ratio;
}
for(i = 0; i < len; ++i)
{
if(fillColors)
{
}
if(borderColors)
{
}
if(isChrome)
{
}
}
this._clearMarkerCache();
if(isChrome)
{
this._clearHotspotCache();
}
},
/**
* @private
*/
_defaultFillColors: ["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"],
/**
* @private
*/
_getPlotDefaults: function()
{
var defs = {
fill:{
type: "solid",
alpha: 1,
colors:null,
alphas: null,
ratios: null
},
border:{
weight: 0,
alpha: 1
},
width: 12,
height: 12,
shape: "rect",
padding:{
top: 0,
left: 0,
right: 0,
bottom: 0
}
};
return defs;
}
};
/**
* The CartesianSeries class creates a chart with horizontal and vertical axes.
*
* @class CartesianSeries
* @extends Base
* @uses Renderer
* @constructor
*/
/**
* @private
*/
_xDisplayName: null,
/**
* @private
*/
_yDisplayName: null,
/**
* @private
*/
_leftOrigin: null,
/**
* @private
*/
_bottomOrigin: null,
/**
* @private
*/
render: function()
{
this._setCanvas();
this.addListeners();
this.set("rendered", true);
this.validate();
},
/**
* @private
*/
addListeners: function()
{
if(xAxis)
{
}
if(yAxis)
{
}
this.after("stylesChange", function(e) {
var axesReady = this._updateAxisData();
if(axesReady)
{
this.draw();
}
});
this.after("widthChange", function(e) {
var axesReady = this._updateAxisData();
if(axesReady)
{
this.draw();
}
});
this.after("heightChange", function(e) {
var axesReady = this._updateAxisData();
if(axesReady)
{
this.draw();
}
});
},
/**
* @private
*/
_xAxisChangeHandler: function(e)
{
},
/**
* @private
*/
_yAxisChangeHandler: function(e)
{
},
/**
* @private
*/
GUID: "yuicartesianseries",
/**
* @private (protected)
*/
_xDataChangeHandler: function(event)
{
var axesReady = this._updateAxisData();
if(axesReady)
{
this.draw();
}
},
/**
* @private (protected)
*/
_yDataChangeHandler: function(event)
{
var axesReady = this._updateAxisData();
if(axesReady)
{
this.draw();
}
},
/**
* @private
*/
_updateAxisData: function()
{
{
return false;
}
{
return false;
}
return true;
},
/**
* @private
*/
validate: function()
{
{
this.draw();
}
},
/**
* @protected
*
* Creates a <code>Graphic</code> instance.
*
* @method _setCanvas
*/
_setCanvas: function()
{
},
/**
* @protected
*
* Calculates the coordinates for the series.
*
* @method setAreaData
*/
setAreaData: function()
{
xcoords = [],
ycoords = [],
i = 0,
xMarkerPlane = [],
yMarkerPlane = [],
xOffset *= 0.5;
yOffset *= 0.5;
if(direction === "vertical")
{
}
if(graphic)
{
}
for (; i < dataLength; ++i)
{
}
},
/**
* @protected
*
* Draws the series.
*
* @method draw
*/
draw: function()
{
if(this.get("rendered"))
{
if((isFinite(w) && isFinite(h) && w > 0 && h > 0) && ((this.get("xData") && this.get("yData")) || this._updateAxisData()))
{
if(this._drawing)
{
this._callLater = true;
return;
}
this._drawing = true;
this._callLater = false;
this.setAreaData();
{
this.drawSeries();
}
this._drawing = false;
if(this._callLater)
{
this.draw();
}
else
{
this.fire("drawingComplete");
}
}
}
},
/**
* @private
*/
/**
* @protected
*
* Gets the default value for the <code>styles</code> attribute. Overrides
* base implementation.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
return {padding:{
top: 0,
left: 0,
right: 0,
bottom: 0
}};
},
/**
* @protected
*
* Collection of default colors used for lines in a series when not specified by user.
*
* @property _defaultLineColors
* @type Array
*/
_defaultLineColors:["#426ab3", "#d09b2c", "#000000", "#b82837", "#b384b5", "#ff7200", "#779de3", "#cbc8ba", "#7ed7a6", "#007a6c"],
/**
* @protected
*
* Collection of default colors used for marker fills in a series when not specified by user.
*
* @property _defaultFillColors
* @type Array
*/
_defaultFillColors:["#6084d0", "#eeb647", "#6c6b5f", "#d6484f", "#ce9ed1", "#ff9f3b", "#93b7ff", "#e0ddd0", "#94ecba", "#309687"],
/**
* @protected
*
* Collection of default colors used for marker borders in a series when not specified by user.
*
* @property _defaultBorderColors
* @type Array
*/
_defaultBorderColors:["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"],
/**
* @protected
*
* Collection of default colors used for area fills, histogram fills and pie fills in a series when not specified by user.
*
* @property _defaultSliceColors
* @type Array
*/
_defaultSliceColors: ["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"],
/**
* @protected
*
* Parses a color based on a series order and type.
*
* @method _getDefaultColor
* @param {Number} index Index indicating the series order.
* @param {String} type Indicates which type of object needs the color.
* @return String
*/
{
var colors = {
line: this._defaultLineColors,
fill: this._defaultFillColors,
border: this._defaultBorderColors,
slice: this._defaultSliceColors
},
if(index >= l)
{
}
},
/**
* @protected
*
*
* @method _toggleVisible
*/
_toggleVisible: function(e)
{
i = 0,
len,
if(graphic)
{
}
if(markers)
{
for(; i < len; ++i)
{
if(marker)
{
}
}
}
if(this._lineGraphic)
{
}
}
}, {
ATTRS: {
/**
* Name used for for displaying data related to the x-coordinate.
*
* @attribute xDisplayName
* @type String
*/
xDisplayName: {
getter: function()
{
},
{
this._xDisplayName = val;
return val;
}
},
/**
* Name used for for displaying data related to the y-coordinate.
*
* @attribute yDisplayName
* @type String
*/
yDisplayName: {
getter: function()
{
},
{
this._yDisplayName = val;
return val;
}
},
/**
* Name used for for displaying category data
*
* @attribute categoryDisplayName
* @type String
*/
readOnly: true,
getter: function()
{
}
},
/**
* Name used for for displaying value data
*
* @attribute valueDisplayName
* @type String
*/
readOnly: true,
getter: function()
{
}
},
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default cartesian
*/
type: {
value: "cartesian"
},
/**
* Order of this instance of this <code>type</code>.
*
* @attribute order
* @type Number
*/
order: {},
/**
* Order of the instance
*
* @attribute graphOrder
* @type Number
*/
graphOrder: {},
/**
* x coordinates for the series.
*
* @attribute xcoords
* @type Array
*/
xcoords: {},
/**
* y coordinates for the series
*
* @attribute ycoords
* @type Array
*/
ycoords: {},
/**
* Reference to the <code>Graph</code> in which the series is drawn into.
*
* @attribute graph
* @type Graph
*/
graph: {},
/**
* Reference to the <code>Axis</code> instance used for assigning
* x-values to the graph.
*
* @attribute xAxis
* @type Axis
*/
xAxis: {},
/**
* Reference to the <code>Axis</code> instance used for assigning
* y-values to the graph.
*
* @attribute yAxis
* @type Axis
*/
yAxis: {},
/**
* Indicates which array to from the hash of value arrays in
* the x-axis <code>Axis</code> instance.
*
* @attribute xKey
* @type String
*/
xKey: {},
/**
* Indicates which array to from the hash of value arrays in
* the y-axis <code>Axis</code> instance.
*
* @attribute yKey
* @type String
*/
yKey: {},
/**
* Array of x values for the series.
*
* @attribute xData
* @type Array
*/
xData: {},
/**
* Array of y values for the series.
*
* @attribute yData
* @type Array
*/
yData: {},
/**
* Indicates whether the Series has been through its initial set up.
*
* @attribute rendered
* @type Boolean
*/
rendered: {
value: false
},
/*
* Returns the width of the parent graph
*
* @attribute width
* @type Number
*/
width: {
readOnly: true,
getter: function()
{
}
},
/**
* Returns the height of the parent graph
*
* @attribute height
* @type Number
*/
height: {
readOnly: true,
getter: function()
{
}
},
/**
* Indicates whether to show the series
*
* @attribute visible
* @type Boolean
* @default true
*/
visible: {
value: true
},
/**
* Collection of area maps along the xAxis. Used to determine mouseover for multiple
* series.
*
* @attribute xMarkerPlane
* @type Array
*/
xMarkerPlane: {},
/**
* Collection of area maps along the yAxis. Used to determine mouseover for multiple
* series.
*
* @attribute yMarkerPlane
* @type Array
*/
yMarkerPlane: {},
/**
*
* @attribute xMarkerPlaneOffset
* @type Number
*/
getter: function() {
{
}
return this._defaultPlaneOffset;
}
},
/**
*
* @attribute yMarkerPlaneOffset
* @type Number
*/
getter: function() {
{
}
return this._defaultPlaneOffset;
}
},
/**
* Direction of the series
*
* @attribute direction
* @type String
*/
direction: {
value: "horizontal"
}
}
});
/**
* The MarkerSeries class renders quantitative data by plotting relevant data points
* on a graph.
*
* @class MarkerSeries
* @extends CartesianSeries
* @uses Plots
* @constructor
*/
/**
* @private
*/
renderUI: function()
{
this._setNode();
},
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
this.drawPlots();
},
/**
* @protected
*
* Method used by <code>styles</code> setter. Overrides base implementation.
*
* @method _setStyles
* @param {Object} newStyles Hash of properties to update.
* @return Object
*/
_setStyles: function(val)
{
{
}
},
/**
* @protected
*
* Gets the default value for the <code>styles</code> attribute. Overrides
* base implementation.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
var styles = this._mergeStyles({marker:this._getPlotDefaults()}, Y.MarkerSeries.superclass._getDefaultStyles());
return styles;
}
},{
ATTRS : {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default marker
*/
type: {
value:"marker"
}
/**
* Style properties used for drawing markers. This attribute is inherited from <code>Renderer</code>. Below are the default values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#6084d0", "#eeb647", "#6c6b5f", "#d6484f", "#ce9ed1", "#ff9f3b", "#93b7ff", "#e0ddd0", "#94ecba", "#309687"]</code>
* </dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>width</dt><dd>indicates the width of the marker. The default value is 10.</dd>
* <dt>height</dt><dd>indicates the height of the marker The default value is 10.</dd>
* <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
* values for each style is null. When an over style is not set, the non-over value will be used. For example,
* the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* The LineSeries class renders quantitative data on a graph by connecting relevant data points.
*
* @class LineSeries
* @extends CartesianSeries
* @uses Lines
* @constructor
*/
/**
* @protected
*
* @method drawSeries
*/
drawSeries: function()
{
this.drawLines();
},
/**
* @protected
*
* Method used by <code>styles</code> setter. Overrides base implementation.
*
* @method _setStyles
* @param {Object} newStyles Hash of properties to update.
* @return Object
*/
_setStyles: function(val)
{
{
}
},
/**
* @protected
*
* Gets the default value for the <code>styles</code> attribute. Overrides
* base implementation.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
var styles = this._mergeStyles({line:this._getLineDefaults()}, Y.LineSeries.superclass._getDefaultStyles());
return styles;
}
},
{
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default line
*/
type: {
value:"line"
}
/**
* Style properties used for drawing lines. This attribute is inherited from <code>Renderer</code>. Below are the default values:
* <dl>
* <dt>color</dt><dd>The color of the line. The default value is determined by the order of the series on the graph. The color will be
* retrieved from the following array:
* <code>["#426ab3", "#d09b2c", "#000000", "#b82837", "#b384b5", "#ff7200", "#779de3", "#cbc8ba", "#7ed7a6", "#007a6c"]</code>
* <dt>weight</dt><dd>Number that indicates the width of the line. The default value is 6.</dd>
* <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the line. The default value is 1.</dd>
* <dt>lineType</dt><dd>Indicates whether the line is solid or dashed. The default value is solid.</dd>
* <dt>dashLength</dt><dd>When the <code>lineType</code> is dashed, indicates the length of the dash. The default value is 10.</dd>
* <dt>gapSpace</dt><dd>When the <code>lineType</code> is dashed, indicates the distance between dashes. The default value is 10.</dd>
* <dt>connectDiscontinuousPoints</dt><dd>Indicates whether or not to connect lines when there is a missing or null value between points. The default value is true.</dd>
* <dt>discontinuousType</dt><dd>Indicates whether the line between discontinuous points is solid or dashed. The default value is solid.</dd>
* <dt>discontinuousDashLength</dt><dd>When the <code>discontinuousType</code> is dashed, indicates the length of the dash. The default value is 10.</dd>
* <dt>discontinuousGapSpace</dt><dd>When the <code>discontinuousType</code> is dashed, indicates the distance between dashes. The default value is 10.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* SplineSeries renders a graph with data points connected by a curve.
*
* @class SplineSeries
* @constructor
* @extends CartesianSeries
* @uses CurveUtil
* @uses Lines
*/
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
this.drawSpline();
}
}, {
ATTRS : {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default spline
*/
type : {
value:"spline"
}
/**
* Style properties used for drawing lines. This attribute is inherited from <code>Renderer</code>. Below are the default values:
* <dl>
* <dt>color</dt><dd>The color of the line. The default value is determined by the order of the series on the graph. The color will be
* retrieved from the following array:
* <code>["#426ab3", "#d09b2c", "#000000", "#b82837", "#b384b5", "#ff7200", "#779de3", "#cbc8ba", "#7ed7a6", "#007a6c"]</code>
* <dt>weight</dt><dd>Number that indicates the width of the line. The default value is 6.</dd>
* <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the line. The default value is 1.</dd>
* <dt>lineType</dt><dd>Indicates whether the line is solid or dashed. The default value is solid.</dd>
* <dt>dashLength</dt><dd>When the <code>lineType</code> is dashed, indicates the length of the dash. The default value is 10.</dd>
* <dt>gapSpace</dt><dd>When the <code>lineType</code> is dashed, indicates the distance between dashes. The default value is 10.</dd>
* <dt>connectDiscontinuousPoints</dt><dd>Indicates whether or not to connect lines when there is a missing or null value between points. The default value is true.</dd>
* <dt>discontinuousType</dt><dd>Indicates whether the line between discontinuous points is solid or dashed. The default value is solid.</dd>
* <dt>discontinuousDashLength</dt><dd>When the <code>discontinuousType</code> is dashed, indicates the length of the dash. The default value is 10.</dd>
* <dt>discontinuousGapSpace</dt><dd>When the <code>discontinuousType</code> is dashed, indicates the distance between dashes. The default value is 10.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* AreaSplineSeries renders an area graph with data points connected by a curve.
*
* @class AreaSplineSeries
* @constructor
* @extends CartesianSeries
* @uses Fills
* @uses CurveUtil
*/
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
this.drawAreaSpline();
}
}, {
ATTRS : {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default areaSpline
*/
type: {
value:"areaSpline"
}
/**
* Style properties used for drawing area fills. This attribute is inherited from <code>Renderer</code>. Below are the default values:
*
* <dl>
* <dt>color</dt><dd>The color of the fill. The default value is determined by the order of the series on the graph. The color will be
* retrieved from the following array:
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* StackedSplineSeries creates spline graphs in which the different series are stacked along a value axis
* to indicate their contribution to a cumulative total.
*
* @class StackedSplineSeries
* @constructor
* @extends SplineSeries
* @extends StackingUtil
*/
/**
* @protected
*
* Calculates the coordinates for the series. Overrides base implementation.
*
* @method setAreaData
*/
setAreaData: function()
{
this._stackCoordinates.apply(this);
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedSpline
*/
type: {
value:"stackedSpline"
}
}
});
/**
* StackedMarkerSeries plots markers with different series stacked along the value axis to indicate each
* series' contribution to a cumulative total.
*
* @class StackedMarkerSeries
* @constructor
* @extends MarkerSeries
* @extends StackingUtil
*/
/**
* @protected
*
* Calculates the coordinates for the series. Overrides base implementation.
*
* @method setAreaData
*/
setAreaData: function()
{
this._stackCoordinates.apply(this);
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedMarker
*/
type: {
value:"stackedMarker"
}
}
});
/**
* The ColumnSeries class renders columns positioned horizontally along a category or time axis. The columns'
* lengths are proportional to the values they represent along a vertical axis.
* and the relevant data points.
*
* @class ColumnSeries
* @extends MarkerSeries
* @uses Histogram
* @constructor
*/
/**
* @private
*/
{
var config = {
};
return config;
},
/**
* @protected
*
* Resizes and positions markers based on a mouse interaction.
*
* @method updateMarkerState
* @param {String} type state of the marker
* @param {Number} i index of the marker
*/
updateMarkerState: function(type, i)
{
if(this._markers[i])
{
seriesSize = 0,
offset = 0,
n = 0,
xs = [],
for(; n < seriesLen; ++n)
{
if(order > n)
{
offset = seriesSize;
}
}
for(n = 0; n < seriesLen; ++n)
{
}
}
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default column
*/
type: {
value: "column"
}
/**
* Style properties used for drawing markers. This attribute is inherited from <code>MarkerSeries</code>. Below are the default values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>width</dt><dd>indicates the width of the marker. The default value is 12.</dd>
* <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
* values for each style is null. When an over style is not set, the non-over value will be used. For example,
* the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* The BarSeries class renders bars positioned vertically along a category or time axis. The bars'
* lengths are proportional to the values they represent along a horizontal axis.
* and the relevant data points.
*
* @class BarSeries
* @extends MarkerSeries
* @uses Histogram
* @constructor
*/
/**
* @private
*/
renderUI: function()
{
this._setNode();
},
/**
* @private
*/
{
var config = {
left: this._leftOrigin
};
return config;
},
/**
* @protected
*
* Resizes and positions markers based on a mouse interaction.
*
* @method updateMarkerState
* @param {String} type state of the marker
* @param {Number} i index of the marker
*/
updateMarkerState: function(type, i)
{
if(this._markers[i])
{
seriesSize = 0,
offset = 0,
n = 0,
ys = [],
for(; n < seriesLen; ++n)
{
if(order > n)
{
offset = seriesSize;
}
}
for(n = 0; n < seriesLen; ++n)
{
}
}
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default bar
*/
type: {
value: "bar"
},
/**
* Indicates the direction of the category axis that the bars are plotted against.
*
* @attribute direction
* @type String
*/
direction: {
value: "vertical"
}
/**
* Style properties used for drawing markers. This attribute is inherited from <code>MarkerSeries</code>. Below are the default values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>height</dt><dd>indicates the width of the marker. The default value is 12.</dd>
* <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
* values for each style is null. When an over style is not set, the non-over value will be used. For example,
* the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* The AreaSeries class renders quantitative data on a graph by creating a fill between 0
* and the relevant data points.
*
* @class AreaSeries
* @extends CartesianSeries
* @uses Fills
* @constructor
*/
/**
* @protected
*
* Renders the series.
*
* @method drawSeries
*/
drawSeries: function()
{
},
/**
* @protected
*
* Method used by <code>styles</code> setter. Overrides base implementation.
*
* @method _setStyles
* @param {Object} newStyles Hash of properties to update.
* @return Object
*/
_setStyles: function(val)
{
{
}
},
/**
* @protected
*
* Gets the default value for the <code>styles</code> attribute. Overrides
* base implementation.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
var styles = this._mergeStyles({area:this._getAreaDefaults()}, Y.AreaSeries.superclass._getDefaultStyles());
return styles;
}
},
{
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default area
*/
type: {
value:"area"
}
/**
* Style properties used for drawing area fills. This attribute is inherited from <code>Renderer</code>. Below are the default values:
*
* <dl>
* <dt>color</dt><dd>The color of the fill. The default value is determined by the order of the series on the graph. The color will be
* retrieved from the following array:
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* StackedAreaSplineSeries creates a stacked area chart with points data points connected by a curve.
*
* @class StackedAreaSplineSeries
* @constructor
* @extends AreaSeries
* @uses CurveUtil
* @uses StackingUtil
*/
Y.StackedAreaSplineSeries = Y.Base.create("stackedAreaSplineSeries", Y.AreaSeries, [Y.CurveUtil, Y.StackingUtil], {
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
this._stackCoordinates();
this.drawStackedAreaSpline();
}
}, {
ATTRS : {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedAreaSpline
*/
type: {
value:"stackedAreaSpline"
}
}
});
/**
* The ComboSeries class renders a combination of lines, plots and area fills in a single series. Each
* series type has a corresponding boolean attribute indicating if it is rendered. By default, lines and plots
* are rendered and area is not.
*
* @class ComboSeries
* @extends CartesianSeries
* @uses Fills
* @uses Lines
* @uses Plots
* @constructor
*/
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
if(this.get("showAreaFill"))
{
}
if(this.get("showLines"))
{
this.drawLines();
}
if(this.get("showMarkers"))
{
this.drawPlots();
}
},
/**
* @protected
*
* Returns the default hash for the <code>styles</code> attribute.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
return styles;
}
},
{
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default combo
*/
type: {
value:"combo"
},
/**
* Indicates whether a fill is displayed.
*
* @attribute showAreaFill
* @type Boolean
* @default false
*/
showAreaFill: {
value: false
},
/**
* Indicates whether lines are displayed.
*
* @attribute showLines
* @type Boolean
* @default true
*/
showLines: {
value: true
},
/**
* Indicates whether markers are displayed.
*
* @attribute showMarkers
* @type Boolean
* @default true
*/
showMarkers: {
value: true
},
/**
* Reference to the styles of the markers. These styles can also
* be accessed through the <code>styles</code> attribute. Below are default
* values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#6084d0", "#eeb647", "#6c6b5f", "#d6484f", "#ce9ed1", "#ff9f3b", "#93b7ff", "#e0ddd0", "#94ecba", "#309687"]</code>
* </dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>width</dt><dd>indicates the width of the marker. The default value is 10.</dd>
* <dt>height</dt><dd>indicates the height of the marker The default value is 10.</dd>
* <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
* values for each style is null. When an over style is not set, the non-over value will be used. For example,
* the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute marker
* @type Object
*/
marker: {
lazyAdd: false,
getter: function()
{
},
{
}
},
/**
* Reference to the styles of the lines. These styles can also be accessed through the <code>styles</code> attribute.
* Below are the default values:
* <dl>
* <dt>color</dt><dd>The color of the line. The default value is determined by the order of the series on the graph. The color will be
* retrieved from the following array:
* <code>["#426ab3", "#d09b2c", "#000000", "#b82837", "#b384b5", "#ff7200", "#779de3", "#cbc8ba", "#7ed7a6", "#007a6c"]</code>
* <dt>weight</dt><dd>Number that indicates the width of the line. The default value is 6.</dd>
* <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the line. The default value is 1.</dd>
* <dt>lineType</dt><dd>Indicates whether the line is solid or dashed. The default value is solid.</dd>
* <dt>dashLength</dt><dd>When the <code>lineType</code> is dashed, indicates the length of the dash. The default value is 10.</dd>
* <dt>gapSpace</dt><dd>When the <code>lineType</code> is dashed, indicates the distance between dashes. The default value is 10.</dd>
* <dt>connectDiscontinuousPoints</dt><dd>Indicates whether or not to connect lines when there is a missing or null value between points. The default value is true.</dd>
* <dt>discontinuousType</dt><dd>Indicates whether the line between discontinuous points is solid or dashed. The default value is solid.</dd>
* <dt>discontinuousDashLength</dt><dd>When the <code>discontinuousType</code> is dashed, indicates the length of the dash. The default value is 10.</dd>
* <dt>discontinuousGapSpace</dt><dd>When the <code>discontinuousType</code> is dashed, indicates the distance between dashes. The default value is 10.</dd>
* </dl>
*
* @attribute line
* @type Object
*/
line: {
lazyAdd: false,
getter: function()
{
},
{
}
},
/**
* Reference to the styles of the area fills. These styles can also be accessed through the <code>styles</code> attribute.
* Below are the default values:
*
* <dl>
* <dt>color</dt><dd>The color of the fill. The default value is determined by the order of the series on the graph. The color will be
* retrieved from the following array:
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alpha</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1</dd>
* </dl>
*
* @attribute area
* @type Object
*/
area: {
lazyAdd: false,
getter: function()
{
},
{
}
}
/**
* Style properties for the series. Contains a key indexed hash of the following:
* <dl>
* <dt>marker</dt><dd>Style properties for the markers in the series. Specific style attributes are listed
* <a href="#config_marker">here</a>.</dd>
* <dt>line</dt><dd>Style properties for the lines in the series. Specific
* style attributes are listed <a href="#config_line">here</a>.</dd>
* <dt>area</dt><dd>Style properties for the area fills in the series. Specific style attributes are listed
* <a href="#config_area">here</a>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* The StackedComboSeries class renders a combination of lines, plots and area fills in a single series. Series
* are stacked along the value axis to indicate each series contribution to a cumulative total. Each
* series type has a corresponding boolean attribute indicating if it is rendered. By default, all three types are
* rendered.
*
* @class StackedComboSeries
* @extends ComboSeries
* @uses StackingUtil
* @constructor
*/
/**
* @protected
*
* Calculates the coordinates for the series. Overrides base implementation.
*
* @method setAreaData
*/
setAreaData: function()
{
this._stackCoordinates.apply(this);
},
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
if(this.get("showAreaFill"))
{
}
if(this.get("showLines"))
{
this.drawLines();
}
if(this.get("showMarkers"))
{
this.drawPlots();
}
}
}, {
ATTRS : {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedCombo
*/
type: {
value: "stackedCombo"
},
/**
* Indicates whether a fill is displayed.
*
* @attribute showAreaFill
* @type Boolean
* @default true
*/
showAreaFill: {
value: true
}
}
});
/**
* The ComboSplineSeries class renders a combination of splines, plots and areaspline fills in a single series. Each
* series type has a corresponding boolean attribute indicating if it is rendered. By default, splines and plots
* are rendered and areaspline is not.
*
* @class ComboSplineSeries
* @extends ComboSeries
* @extends CurveUtil
* @constructor
*/
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
if(this.get("showAreaFill"))
{
this.drawAreaSpline();
}
if(this.get("showLines"))
{
this.drawSpline();
}
if(this.get("showMarkers"))
{
this.drawPlots();
}
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default comboSpline
*/
type: {
value : "comboSpline"
}
}
});
/**
* The StackedComboSplineSeries class renders a combination of splines, plots and areaspline fills in a single series. Series
* are stacked along the value axis to indicate each series contribution to a cumulative total. Each
* series type has a corresponding boolean attribute indicating if it is rendered. By default, all three types are
* rendered.
*
* @class StackedComboSplineSeries
* @extends StackedComboSeries
* @uses CurveUtil
* @constructor
*/
Y.StackedComboSplineSeries = Y.Base.create("stackedComboSplineSeries", Y.StackedComboSeries, [Y.CurveUtil], {
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
if(this.get("showAreaFill"))
{
this.drawStackedAreaSpline();
}
if(this.get("showLines"))
{
this.drawSpline();
}
if(this.get("showMarkers"))
{
this.drawPlots();
}
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedComboSpline
*/
type : {
value : "stackedComboSpline"
},
/**
* Indicates whether a fill is displayed.
*
* @attribute showAreaFill
* @type Boolean
* @default true
*/
showAreaFill: {
value: true
}
}
});
/**
* StackedLineSeries creates line graphs in which the different series are stacked along a value axis
* to indicate their contribution to a cumulative total.
*
* @class StackedLineSeries
* @constructor
* @extends LineSeries
* @uses StackingUtil
*/
/**
* @protected
*
* Calculates the coordinates for the series. Overrides base implementation.
*
* @method setAreaData
*/
setAreaData: function()
{
this._stackCoordinates.apply(this);
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedLine
*/
type: {
value:"stackedLine"
}
}
});
/**
* StackedAreaSeries area fills to display data showing its contribution to a whole.
*
* @param {Object} config (optional) Configuration parameters for the Chart.
* @class StackedAreaSeries
* @constructor
* @extends AreaSeries
* @uses StackingUtil
*/
/**
* @protected
*
* Calculates the coordinates for the series. Overrides base implementation.
*
* @method setAreaData
*/
setAreaData: function()
{
this._stackCoordinates.apply(this);
},
/**
* @protected
*
* Draws the series
*
* @method drawSeries
*/
drawSeries: function()
{
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedArea
*/
type: {
value:"stackedArea"
}
}
});
/**
* The StackedColumnSeries renders column chart in which series are stacked vertically to show
* their contribution to the cumulative total.
*
* @class StackedColumnSeries
* @extends ColumnSeries
* @uses StackingUtil
* @constructor
*/
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
{
return;
}
i = 0,
left,
totalWidth = len * w,
this._createMarkerCache();
if(isChrome)
{
this._createHotspotCache();
}
{
w *= ratio;
w = Math.max(w, 1);
}
if(!useOrigin)
{
}
else
{
negativeBaseValues = [];
positiveBaseValues = [];
}
for(i = 0; i < len; ++i)
{
if(useOrigin)
{
h = this._bottomOrigin - top;
if(top < this._bottomOrigin)
{
positiveBaseValues[i] = top;
negativeBaseValues[i] = this._bottomOrigin;
}
else if(top > this._bottomOrigin)
{
positiveBaseValues[i] = this._bottomOrigin;
negativeBaseValues[i] = top;
}
else
{
positiveBaseValues[i] = top;
negativeBaseValues[i] = top;
}
}
else
{
if(top > this._bottomOrigin)
{
h = negativeBaseValues[i] - top;
negativeBaseValues[i] = top;
}
else if(top < this._bottomOrigin)
{
h = positiveBaseValues[i] - top;
positiveBaseValues[i] = top;
}
}
if(isChrome)
{
}
}
this._clearMarkerCache();
if(isChrome)
{
this._clearHotspotCache();
}
},
/**
* @protected
*
* Resizes and positions markers based on a mouse interaction.
*
* @method updateMarkerState
* @param {String} type state of the marker
* @param {Number} i index of the marker
*/
updateMarkerState: function(type, i)
{
if(this._markers[i])
{
var styles,
offset = 0;
if(marker.parentNode)
{
}
}
},
/**
* @private
*/
_getPlotDefaults: function()
{
var defs = {
fill:{
type: "solid",
alpha: 1,
colors:null,
alphas: null,
ratios: null
},
border:{
weight: 0,
alpha: 1
},
width: 24,
height: 24,
shape: "rect",
padding:{
top: 0,
left: 0,
right: 0,
bottom: 0
}
};
return defs;
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedColumn
*/
type: {
value: "stackedColumn"
},
/**
* @private
*
* @attribute negativeBaseValues
* @type Array
* @default null
*/
value: null
},
/**
* @private
*
* @attribute positiveBaseValues
* @type Array
* @default null
*/
value: null
}
/**
* Style properties used for drawing markers. This attribute is inherited from <code>ColumnSeries</code>. Below are the default values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>width</dt><dd>indicates the width of the marker. The default value is 24.</dd>
* <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
* values for each style is null. When an over style is not set, the non-over value will be used. For example,
* the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* The StackedBarSeries renders bar chart in which series are stacked horizontally to show
* their contribution to the cumulative total.
*
* @class StackedBarSeries
* @extends BarSeries
* @uses StackingUtil
* @constructor
*/
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
{
return;
}
i = 0,
left,
totalHeight = len * h,
this._createMarkerCache();
if(isChrome)
{
this._createHotspotCache();
}
{
h *= ratio;
h = Math.max(h, 1);
}
if(!useOrigin)
{
}
else
{
negativeBaseValues = [];
positiveBaseValues = [];
}
for(i = 0; i < len; ++i)
{
if(useOrigin)
{
w = left - this._leftOrigin;
if(left > this._leftOrigin)
{
positiveBaseValues[i] = left;
negativeBaseValues[i] = this._leftOrigin;
}
else if(left < this._leftOrigin)
{
positiveBaseValues[i] = this._leftOrigin;
negativeBaseValues[i] = left;
}
else
{
positiveBaseValues[i] = left;
negativeBaseValues[i] = this._leftOrigin;
}
left -= w;
}
else
{
if(left < this._leftOrigin)
{
w = negativeBaseValues[i] - left;
negativeBaseValues[i] = left;
}
else if(left > this._leftOrigin)
{
w = left - positiveBaseValues[i];
positiveBaseValues[i] = left;
left -= w;
}
}
top -= h/2;
if(isChrome)
{
}
}
this._clearMarkerCache();
if(isChrome)
{
this._clearHotspotCache();
}
},
/**
* @protected
*
* Resizes and positions markers based on a mouse interaction.
*
* @method updateMarkerState
* @param {String} type state of the marker
* @param {Number} i index of the marker
*/
updateMarkerState: function(type, i)
{
if(this._markers[i])
{
if(marker.parentNode)
{
}
}
},
/**
* @protected
*
* Returns default values for the <code>styles</code> attribute.
*
* @method _getPlotDefaults
* @return Object
*/
_getPlotDefaults: function()
{
var defs = {
fill:{
type: "solid",
alpha: 1,
colors:null,
alphas: null,
ratios: null
},
border:{
weight: 0,
alpha: 1
},
width: 24,
height: 24,
shape: "rect",
padding:{
top: 0,
left: 0,
right: 0,
bottom: 0
}
};
return defs;
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedBar
*/
type: {
value: "stackedBar"
},
/**
* Direction of the series
*
* @attribute direction
* @type String
* @default vertical
*/
direction: {
value: "vertical"
},
/**
* @private
*
* @attribute negativeBaseValues
* @type Array
* @default null
*/
value: null
},
/**
* @private
*
* @attribute positiveBaseValues
* @type Array
* @default null
*/
value: null
}
/**
* Style properties used for drawing markers. This attribute is inherited from <code>BarSeries</code>. Below are the default values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>height</dt><dd>indicates the width of the marker. The default value is 24.</dd>
* <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
* values for each style is null. When an over style is not set, the non-over value will be used. For example,
* the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* PieSeries visualizes data as a circular chart divided into wedges which represent data as a
* percentage of a whole.
*
* @class PieSeries
* @constructor
* @extends MarkerSeries
*/
/**
* @private
*/
_map: null,
/**
* @private
*/
_image: null,
/**
* @private
*/
_setMap: function()
{
if(this._image)
{
{
}
}
this._image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAABCAYAAAD9yd/wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJJREFUeNpiZGBgSGPAAgACDAAIkABoFyloZQAAAABJRU5ErkJggg==";
this._areaNodes = [];
},
/**
* @private
*/
_categoryDisplayName: null,
/**
* @private
*/
_valueDisplayName: null,
/**
* @private
*/
addListeners: function()
{
if(categoryAxis)
{
}
if(valueAxis)
{
}
},
/**
* @private
*/
validate: function()
{
this.draw();
this._renderered = true;
},
/**
* @private
*/
_categoryAxisChangeHandler: function(e)
{
},
/**
* @private
*/
_valueAxisChangeHandler: function(e)
{
},
/**
* Constant used to generate unique id.
*
* @private
*/
GUID: "pieseries",
/**
* @private (protected)
* Handles updating the graph when the x < code>Axis</code> values
* change.
*/
_categoryDataChangeHandler: function(event)
{
{
this.draw();
}
},
/**
* @private (protected)
* Handles updating the chart when the y <code>Axis</code> values
* change.
*/
_valueDataChangeHandler: function(event)
{
{
this.draw();
}
},
/**
* @protected
*
* Draws the series. Overrides the base implementation.
*
* @method draw
*/
draw: function()
{
{
this._rendered = true;
this.drawSeries();
this.fire("drawingComplete");
}
},
/**
* @private
*/
drawPlots: function()
{
totalValue = 0,
tfc,
tfa,
startAngle = -90,
halfWidth = w / 2,
halfHeight = h / 2,
i = 0,
angle = 0,
lc,
la,
lw,
for(; i < itemCount; ++i)
{
{
totalValue += value;
}
}
this._createMarkerCache();
if(isCanvas)
{
this._setMap();
}
for(i = 0; i < itemCount; i++)
{
if(totalValue === 0)
{
}
else
{
}
{
}
{
}
{
}
{
}
{
}
startAngle += angle;
wedgeStyle = {
border: {
},
fill: {
},
shape: "wedge",
props: {
x: halfWidth,
y: halfHeight
},
width: w,
height: h
};
if(isCanvas)
{
}
}
this._clearMarkerCache();
},
{
i = 1,
x = cfg.x,
y = cfg.y,
for(i = 1; i <= numPoints; ++i)
{
multDivAng = divAngle * i;
if(startAngle <= 90)
{
}
else
{
}
}
},
/**
* Resizes and positions markers based on a mouse interaction.
*
* @protected
* @method updateMarkerState
* @param {String} type state of the marker
* @param {Number} i index of the marker
*/
updateMarkerState: function(type, i)
{
if(this._markers[i])
{
}
},
/**
* @private
*/
{
return marker;
},
/**
* @private
*/
_clearMarkerCache: function()
{
i = 0,
for(; i < len; ++i)
{
marker = this._markerCache[i];
{
}
}
this._markerCache = [];
},
/**
* @private
*/
_getPlotDefaults: function()
{
var defs = {
padding:{
top: 0,
left: 0,
right: 0,
bottom: 0
},
fill:{
alphas:["1"]
},
border: {
weight: 0,
alpha: 1
}
};
return defs;
},
/**
* @private
*/
_defaultLineColors:["#426ab3", "#d09b2c", "#000000", "#b82837", "#b384b5", "#ff7200", "#779de3", "#cbc8ba", "#7ed7a6", "#007a6c"],
/**
* @private
*/
_defaultFillColors:["#6084d0", "#eeb647", "#6c6b5f", "#d6484f", "#ce9ed1", "#ff9f3b", "#93b7ff", "#e0ddd0", "#94ecba", "#309687"],
/**
* @private
*/
_defaultBorderColors:["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"],
/**
* @private
*/
_defaultSliceColors: ["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"],
/**
* @private
* @description Colors used if style colors are not specified
*/
{
var colors = {
line: this._defaultLineColors,
fill: this._defaultFillColors,
border: this._defaultBorderColors,
slice: this._defaultSliceColors
},
if(index >= l)
{
}
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default pie
*/
type: {
value: "pie"
},
/**
* Order of this instance of this <code>type</code>.
*
* @attribute order
* @type Number
*/
order: {},
/**
* Reference to the <code>Graph</code> in which the series is drawn into.
*
* @attribute graph
* @type Graph
*/
graph: {},
/**
* Reference to the <code>Axis</code> instance used for assigning
* category values to the graph.
*
* @attribute categoryAxis
* @type Axis
*/
categoryAxis: {
value: null,
{
}
},
/**
* Reference to the <code>Axis</code> instance used for assigning
* series values to the graph.
*
* @attribute categoryAxis
* @type Axis
*/
valueAxis: {
value: null,
{
}
},
/**
* Indicates which array to from the hash of value arrays in
* the category <code>Axis</code> instance.
*/
categoryKey: {
value: null,
{
}
},
/**
* Indicates which array to from the hash of value arrays in
* the value <code>Axis</code> instance.
*/
valueKey: {
value: null,
{
}
},
/**
* Name used for for displaying category data
*
* @attribute categoryDisplayName
* @type String
*/
{
this._categoryDisplayName = val;
return val;
},
getter: function()
{
}
},
/**
* Name used for for displaying value data
*
* @attribute valueDisplayName
* @type String
*/
{
this._valueDisplayName = val;
return val;
},
getter: function()
{
}
},
/**
* @private
*/
slices: null
/**
* Style properties used for drawing markers. This attribute is inherited from <code>MarkerSeries</code>. Below are the default values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>colors</dt><dd>An array of colors to be used for the marker fills. The color for each marker is retrieved from the
* array below:<br/>
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alphas</dt><dd>An array of alpha references (Number from 0 to 1) indicating the opacity of each marker fill. The default value is [1].</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>An array of colors to be used for the marker borders. The color for each marker is retrieved from the
* array below:<br/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
* values for each style is null. When an over style is not set, the non-over value will be used. For example,
* the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* Gridlines draws gridlines on a Graph.
*
* @class Gridlines
* @constructor
* @extends Base
* @uses Renderer
*/
/**
* @private
*/
render: function()
{
this._setCanvas();
},
/**
* @private
*/
remove: function()
{
if(graphic)
{
if(gNode)
{
}
}
},
/**
* @protected
*
* Draws the gridlines
*
* @method draw
*/
draw: function()
{
{
this._drawGridlines();
}
},
/**
* @private
*/
_drawGridlines: function()
{
i = 0,
l,
if(axisPosition == "none")
{
points = [];
for(; i < l; ++i)
{
points[i] = {
x: w * (i/(l-1)),
y: h * (i/(l-1))
};
}
i = 0;
}
else
{
}
if(!graphic)
{
this._setCanvas();
}
for(; i < l; ++i)
{
}
},
/**
* @private
*/
{
},
/**
* @private
*/
{
},
/**
* @private
* Creates a <code>Graphic</code> instance.
*/
_setCanvas: function()
{
},
/**
* @protected
*
* Gets the default value for the <code>styles</code> attribute. Overrides
* base implementation.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
var defs = {
line: {
color:"#f0efe9",
weight: 1,
alpha: 1
}
};
return defs;
}
},
{
ATTRS: {
/**
* Indicates the direction of the gridline.
*
* @attribute direction
* @type String
*/
direction: {},
/**
* Indicate the <code>Axis</code> in which to bind
* the gridlines.
*
* @attribute axis
* @type Axis
*/
axis: {},
/**
* Indicates the <code>Graph</code> in which the gridlines
* are drawn.
*
* @attribute graph
* @type Graph
*/
graph: {}
}
});
/**
* Graph manages and contains series instances for a <code>CartesianChart</code>
* instance.
*
* @class Graph
* @constructor
* @extends Widget
* @uses Renderer
*/
bindUI: function()
{
},
/**
* @private
*/
syncUI: function()
{
if(this.get("showBackground"))
{
w = this.get("width"),
h = this.get("height");
if(w)
{
w += weight * 2;
}
if(h)
{
h += weight * 2;
}
}
},
/**
* @private
*/
renderUI: function()
{
i = 0,
for(; i < len; ++i)
{
if(series instanceof Y.CartesianSeries)
{
}
}
{
}
{
}
},
/**
* @private
* Hash of arrays containing series mapped to a series type.
*/
seriesTypes: null,
/**
* Returns a series instance based on an index.
*
* @method getSeriesByIndex
* @param {Number} val index of the series
* @return CartesianSeries
*/
getSeriesByIndex: function(val)
{
{
}
return series;
},
/**
* Returns a series instance based on a key value.
*
* @method getSeriesByKey
* @param {String} val key value of the series
* @return CartesianSeries
*/
getSeriesByKey: function(val)
{
var obj = this._seriesDictionary,
{
}
return series;
},
/**
* @protected
* Adds dispatcher to a <code>_dispatcher</code> used to
* to ensure all series have redrawn before for firing event.
*
* @method addDispatcher
* @param {CartesianSeries} val series instance to add
*/
addDispatcher: function(val)
{
if(!this._dispatchers)
{
this._dispatchers = [];
}
},
/**
* @private
* @description Collection of series to be displayed in the graph.
*/
_seriesCollection: null,
/**
* @private
*/
_seriesDictionary: null,
/**
* @private
* Parses series instances to be displayed in the graph.
*/
_parseSeriesCollection: function(val)
{
if(!val)
{
return;
}
i = 0,
if(!this.get("seriesCollection"))
{
this._seriesCollection = [];
}
if(!this._seriesDictionary)
{
this._seriesDictionary = {};
}
if(!this.seriesTypes)
{
this.seriesTypes = [];
}
for(; i < len; ++i)
{
{
this._createSeries(series);
continue;
}
this._addSeries(series);
}
for(i = 0; i < len; ++i)
{
}
},
/**
* @private
* Adds a series to the graph.
*/
_addSeries: function(series)
{
seriesTypes = this.seriesTypes,
{
}
{
this.seriesTypes[type] = [];
}
this.addDispatcher(series);
},
/**
* @private
*/
_createSeries: function(seriesData)
{
seriesTypes = this.seriesTypes,
seriesData.graph = this;
{
seriesTypes[type] = [];
}
seriesData.graph = this;
this.addDispatcher(series);
},
/**
* @private
*/
_getSeries: function(type)
{
var seriesClass;
switch(type)
{
case "line" :
seriesClass = Y.LineSeries;
break;
case "column" :
seriesClass = Y.ColumnSeries;
break;
case "bar" :
seriesClass = Y.BarSeries;
break;
case "area" :
seriesClass = Y.AreaSeries;
break;
case "candlestick" :
break;
case "ohlc" :
seriesClass = Y.OHLCSeries;
break;
case "stackedarea" :
break;
case "stackedline" :
break;
case "stackedcolumn" :
break;
case "stackedbar" :
break;
case "markerseries" :
seriesClass = Y.MarkerSeries;
break;
case "spline" :
seriesClass = Y.SplineSeries;
break;
case "areaspline" :
break;
case "stackedspline" :
break;
case "stackedareaspline" :
break;
case "stackedmarkerseries" :
break;
case "pie" :
seriesClass = Y.PieSeries;
break;
case "combo" :
seriesClass = Y.ComboSeries;
break;
case "stackedcombo" :
break;
case "combospline" :
break;
case "stackedcombospline" :
break;
default:
break;
}
return seriesClass;
},
/**
* @private
*/
_markerEventHandler: function(e)
{
markerNode = e.currentTarget,
},
/**
* @private
*/
_dispatchers: null,
/**
* @private
*/
_updateStyles: function()
{
this._sizeChangeHandler();
},
/**
* @private
*/
_sizeChangeHandler: function(e)
{
w = this.get("width"),
h = this.get("height"),
x = 0,
y = 0,
{
}
if(this._background)
{
if(w && h)
{
if(weight)
{
w += weight * 2;
h += weight * 2;
x -= weight;
y -= weight;
}
}
}
{
}
{
}
this._drawSeries();
},
/**
* @private
*/
_drawSeries: function()
{
if(this._drawing)
{
this._callLater = true;
return;
}
this._callLater = false;
this._drawing = true;
i = 0,
for(; i < len; ++i)
{
{
this._callLater = true;
break;
}
}
this._drawing = false;
if(this._callLater)
{
this._drawSeries();
}
},
/**
* @private
*/
_drawingCompleteHandler: function(e)
{
var series = e.currentTarget,
if(index > -1)
{
}
{
this.fire("chartRendered");
}
},
/**
* @protected
*
* Gets the default value for the <code>styles</code> attribute. Overrides
* base implementation.
*
* @method _getDefaultStyles
* @return Object
*/
_getDefaultStyles: function()
{
var defs = {
background: {
shape: "rect",
fill:{
color:"#faf9f2"
},
border: {
color:"#dad8c9",
weight: 1
}
}
};
return defs;
}
}, {
ATTRS: {
/**
* Collection of series. When setting the <code>seriesCollection</code> the array can contain a combination of either
* <code>CartesianSeries</code> instances or object literals with properties that will define a series.
*
* @attribute seriesCollection
* @type CartesianSeries
*/
getter: function()
{
return this._seriesCollection;
},
{
this._parseSeriesCollection(val);
return this._seriesCollection;
}
},
/**
* Indicates whether the <code>Graph</code> has a background.
*
* @attribute showBackground
* @type Boolean
* @default true
*/
value: true
},
/**
* Read-only hash lookup for all series on in the <code>Graph</code>.
*
* @attribute seriesDictionary
* @type Object
*/
readOnly: true,
getter: function()
{
return this._seriesDictionary;
}
},
/**
* Reference to the horizontal <code>Gridlines</code> instance.
*
* @attribute horizontalGridlines
* @type Gridlines
* @default null
*/
value: null,
{
{
}
{
return val;
}
{
return gl;
}
}
},
/**
* Reference to the vertical <code>Gridlines</code> instance.
*
* @attribute verticalGridlines
* @type Gridlines
* @default null
*/
value: null,
{
{
}
{
return val;
}
{
return gl;
}
}
}
/**
* Style properties used for drawing a background. Below are the default values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the fill. The default value is #faf9f2.</dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the background fill. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the border. The default value is #dad8c9.</dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the background border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});
/**
* The ChartBase class is an abstract class used to create charts.
*
* @class ChartBase
* @constructor
*/
function ChartBase() {}
/**
* Reference to the default tooltip available for the chart.
* <p>Contains the following properties:</p>
* <dl>
* <dt>node</dt><dd>Reference to the actual dom node</dd>
* <dt>showEvent</dt><dd>Event that should trigger the tooltip</dd>
* <dt>hideEvent</dt><dd>Event that should trigger the removal of a tooltip (can be an event or an array of events)</dd>
* <dt>styles</dt><dd>A hash of style properties that will be applied to the tooltip node</dd>
* <dt>show</dt><dd>Indicates whether or not to show the tooltip</dd>
* <dt>markerEventHandler</dt><dd>Displays and hides tooltip based on marker events</dd>
* <dt>planarEventHandler</dt><dd>Displays and hides tooltip based on planar events</dd>
* <dt>markerLabelFunction</dt><dd>Reference to the function used to format a marker event triggered tooltip's text</dd>
* <dt>planarLabelFunction</dt><dd>Reference to the function used to format a planar event triggered tooltip's text</dd>
* </dl>
* @attribute tooltip
* @type Object
*/
tooltip: {
valueFn: "_getTooltip",
{
return this._updateTooltip(val);
}
},
/**
* The key value used for the chart's category axis.
*
* @attribute categoryKey
* @type String
* @default category
*/
categoryKey: {
value: "category"
},
/**
* Indicates the type of axis to use for the category axis.
*
* <dl>
* <dt>category</dt><dd>Specifies a <code>CategoryAxis</code>.</dd>
* <dt>time</dt><dd>Specifies a <code>TimeAxis</dd>
* </dl>
*
* @attribute categoryType
* @type String
* @default category
*/
value:"category"
},
/**
* Indicates the the type of interactions that will fire events.
*
* <dl>
* <dt>marker</dt><dd>Events will be broadcasted when the mouse interacts with individual markers.</dd>
* <dt>planar</dt><dd>Events will be broadcasted when the mouse intersects the plane of any markers on the chart.</dd>
* <dt>none</dt><dd>No events will be broadcasted.</dd>
* </dl>
*
* @attribute interactionType
* @type String
* @default marker
*/
value: "marker"
},
/**
* Data used to generate the chart.
*
* @attribute dataProvider
* @type Array
*/
dataProvider: {
{
return this._setDataValues(val);
}
},
/**
* A collection of keys that map to the series axes. If no keys are set,
* they will be generated automatically depending on the data structure passed into
* the chart.
*
* @attribute seriesKeys
* @type Array
*/
seriesKeys: {},
/**
* Reference to all the axes in the chart.
*
* @attribute axesCollection
* @type Array
*/
axesCollection: {},
/**
* Reference to graph instance.
*
* @attribute graph
* @type Graph
*/
graph: {
valueFn: "_getGraph"
}
};
/**
* @private
* @description Default value function for the <code>graph</code> attribute.
*/
_getGraph: function()
{
this.fire("chartRendered");
}, this));
return graph;
},
/**
* Returns a series instance by index or key value.
*
* @method getSeries
* @param val
* @return CartesianSeries
*/
{
var series = null,
if(graph)
{
{
}
else
{
}
}
return series;
},
/**
* Returns an <code>Axis</code> instance by key reference. If the axis was explicitly set through the <code>axes</code> attribute,
* the key will be the same as the key used in the <code>axes</code> object. For default axes, the key for
* the category axis is the value of the <code>categoryKey</code> (<code>category</code>). For the value axis, the default
* key is <code>values</code>.
*
* @method getAxisByKey
* @param {String} val Key reference used to look up the axis.
* @return Axis
*/
getAxisByKey: function(val)
{
var axis,
{
}
return axis;
},
/**
* Returns the category axis for the chart.
*
* @method getCategoryAxis
* @return Axis
*/
getCategoryAxis: function()
{
var axis,
{
}
return axis;
},
/**
* @private
*/
_direction: "horizontal",
/**
* @private
*/
_dataProvider: null,
/**
* @private
*/
_setDataValues: function(val)
{
{
var hash,
dp = [],
i = 0,
n,
for(; i < l; ++i)
{
for(n = 1; n < sl; ++n)
{
}
}
return dp;
}
return val;
},
/**
* @private
*/
_seriesCollection: null,
/**
* @private
*/
_setSeriesCollection: function(val)
{
this._seriesCollection = val;
},
/**
* @private
*/
_getAxisClass: function(t)
{
return this._axisClass[t];
},
/**
* @private
*/
_axisClass: {
stacked: Y.StackedAxis,
numeric: Y.NumericAxis,
category: Y.CategoryAxis,
},
/**
* @private
*/
_axes: null,
/**
* @private
*/
renderUI: function()
{
//move the position = absolute logic to a class file
this._addAxes();
this._addSeries();
{
this._addTooltip();
}
this._redraw();
},
/**
* @private
*/
bindUI: function()
{
hideEvent = "mouseout",
showEvent = "mouseover",
i = 0,
len;
if(interactionType == "marker")
{
}
else if(interactionType == "planar")
{
}
if(tt)
{
{
}
else
{
if(showEvent)
{
}
if(hideEvent)
{
{
for(; i < len; ++i)
{
}
}
}
}
}
},
/**
* @private
*/
_markerEventDispatcher: function(e)
{
markerNode = e.currentTarget,
if(type == "mouseenter")
{
type = "mouseover";
}
else if(type == "mouseleave")
{
type = "mouseout";
}
e.halt();
/**
* Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a mouseover event.
*
*
* @event markerEvent:mouseover
* @preventable false
* @param {EventFacade} e Event facade with the following additional
* properties:
* <dl>
* <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd>
* <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd>
* <dt>node</dt><dd>The dom node of the marker.</dd>
* <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
* <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
* <dt>series</dt><dd>Reference to the series of the marker.</dd>
* <dt>index</dt><dd>Index of the marker in the series.</dd>
* <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd>
* </dl>
*/
/**
* Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a mouseout event.
*
* @event markerEvent:mouseout
* @preventable false
* @param {EventFacade} e Event facade with the following additional
* properties:
* <dl>
* <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd>
* <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd>
* <dt>node</dt><dd>The dom node of the marker.</dd>
* <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
* <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
* <dt>series</dt><dd>Reference to the series of the marker.</dd>
* <dt>index</dt><dd>Index of the marker in the series.</dd>
* <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd>
* </dl>
*/
/**
* Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a mousedown event.
*
* @event markerEvent:mousedown
* @preventable false
* @param {EventFacade} e Event facade with the following additional
* properties:
* <dl>
* <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd>
* <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd>
* <dt>node</dt><dd>The dom node of the marker.</dd>
* <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
* <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
* <dt>series</dt><dd>Reference to the series of the marker.</dd>
* <dt>index</dt><dd>Index of the marker in the series.</dd>
* <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd>
* </dl>
*/
/**
* Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a mouseup event.
*
* @event markerEvent:mouseup
* @preventable false
* @param {EventFacade} e Event facade with the following additional
* properties:
* <dl>
* <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd>
* <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd>
* <dt>node</dt><dd>The dom node of the marker.</dd>
* <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
* <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
* <dt>series</dt><dd>Reference to the series of the marker.</dd>
* <dt>index</dt><dd>Index of the marker in the series.</dd>
* <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd>
* </dl>
*/
/**
* Broadcasts when <code>interactionType</code> is set to <code>marker</code> and a series marker has received a click event.
*
* @event markerEvent:click
* @preventable false
* @param {EventFacade} e Event facade with the following additional
* properties:
* <dl>
* <dt>categoryItem</dt><dd>Hash containing information about the category <code>Axis</code>.</dd>
* <dt>valueItem</dt><dd>Hash containing information about the value <code>Axis</code>.</dd>
* <dt>node</dt><dd>The dom node of the marker.</dd>
* <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
* <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
* <dt>series</dt><dd>Reference to the series of the marker.</dd>
* <dt>index</dt><dd>Index of the marker in the series.</dd>
* <dt>seriesIndex</dt><dd>The <code>order</code> of the marker's series.</dd>
* </dl>
*/
this.fire("markerEvent:" + type, {categoryItem:items.category, valueItem:items.value, node:markerNode, x:x, y:y, series:series, index:index, seriesIndex:seriesIndex});
},
/**
* @private
*/
_dataProviderChangeHandler: function(e)
{
i,
axis;
for(i in axes)
{
if(axes.hasOwnProperty(i))
{
{
}
}
}
},
/**
* Event listener for toggling the tooltip. If a tooltip is visible, hide it. If not, it
* will create and show a tooltip based on the event object.
*
* @method toggleTooltip
*/
toggleTooltip: function(e)
{
{
this.hideTooltip();
}
else
{
}
},
/**
* @private
*/
_showTooltip: function(msg, x, y)
{
if(msg)
{
}
},
/**
* @private
*/
_positionTooltip: function(e)
{
if(node)
{
}
},
/**
* Hides the default tooltip
*/
hideTooltip: function()
{
},
/**
* @private
*/
_addTooltip: function()
{
},
/**
* @private
*/
_updateTooltip: function(val)
{
i,
props = {
markerLabelFunction:"markerLabelFunction",
planarLabelFunction:"planarLabelFunction",
showEvent:"showEvent",
hideEvent:"hideEvent",
markerEventHandler:"markerEventHandler",
planarEventHandler:"planarEventHandler"
};
if(styles)
{
for(i in styles)
{
if(styles.hasOwnProperty(i))
{
}
}
}
for(i in props)
{
if(val.hasOwnProperty(i))
{
}
}
return tt;
},
/**
* @private
*/
_getTooltip: function()
{
tt = {
show: true,
hideEvent: "mouseout",
showEvent: "mouseover",
markerEventHandler: function(e)
{
msg = tt.markerLabelFunction.apply(this, [e.categoryItem, e.valueItem, e.index, e.series, e.seriesIndex]);
},
planarEventHandler: function(e)
{
msg ,
msg = tt.planarLabelFunction.apply(this, [categoryAxis, e.valueItem, e.index, e.items, e.seriesIndex]);
}
};
return tt;
},
/**
* @private
*/
{
var msg = "",
i = 0,
axis,
if(categoryAxis)
{
msg += categoryAxis.get("labelFunction").apply(this, [categoryAxis.getKeyValueAt(this.get("categoryKey"), index), categoryAxis.get("labelFormat")]);
}
for(; i < len; ++i)
{
series = seriesArray[i];
{
valueItem = valueItems[i];
msg += "<br/><span>" + valueItem.displayName + ": " + axis.get("labelFunction").apply(this, [axis.getKeyValueAt(valueItem.key, index), axis.get("labelFormat")]) + "</span>";
}
}
return msg;
},
/**
* @private
*/
{
": " + categoryItem.axis.get("labelFunction").apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")]) +
": " + valueItem.axis.get("labelFunction").apply(this, [valueItem.value, valueItem.axis.get("labelFormat")]);
return msg;
},
/**
* @private
*/
_tooltipChangeHandler: function(e)
{
if(this.get("tooltip"))
{
{
{
this._addTooltip();
}
}
}
}
};
/**
* The CartesianChart class creates a chart with horizontal and vertical axes.
*
* @class CartesianChart
* @extends ChartBase
* @constructor
*/
/**
* @private
*/
renderUI: function()
{
//move the position = absolute logic to a class file
this._addAxes();
this._addGridlines();
this._addSeries();
{
this._addTooltip();
}
//If there is a style definition. Force them to set.
this.get("styles");
{
}
this._redraw();
},
/**
* @private
*/
_planarEventDispatcher: function(e)
{
x = e.pageX,
y = e.pageY,
i = 0,
oldIndex = this._selectedIndex,
item,
items = [],
categoryItems = [],
valueItems = [],
//data columns and area data could be created on a graph level
for(; i < len; ++i)
{
{
index = i;
break;
}
}
for(i = 0; i < len; ++i)
{
{
}
{
{
}
}
}
this._selectedIndex = index;
/**
* Broadcasts when <code>interactionType</code> is set to <code>planar</code> and a series' marker plane has received a mouseover event.
*
*
* @event planarEvent:mouseover
* @preventable false
* @param {EventFacade} e Event facade with the following additional
* properties:
* <dl>
* <dt>categoryItem</dt><dd>An array of hashes, each containing information about the category <code>Axis</code> of each marker whose plane has been intersected.</dd>
* <dt>valueItem</dt><dd>An array of hashes, each containing information about the value <code>Axis</code> of each marker whose plane has been intersected.</dd>
* <dt>x</dt><dd>The x-coordinate of the mouse in relation to the Chart.</dd>
* <dt>y</dt><dd>The y-coordinate of the mouse in relation to the Chart.</dd>
* <dt>items</dt><dd>An array including all the series which contain a marker whose plane has been intersected.</dd>
* <dt>index</dt><dd>Index of the markers in their respective series.</dd>
* </dl>
*/
/**
* Broadcasts when <code>interactionType</code> is set to <code>planar</code> and a series' marker plane has received a mouseout event.
*
* @event planarEvent:mouseout
* @preventable false
* @param {EventFacade} e
*/
if(index > -1)
{
this.fire("planarEvent:mouseover", {categoryItem:categoryItems, valueItem:valueItems, x:posX, y:posY, items:items, index:index});
}
else
{
this.fire("planarEvent:mouseout");
}
},
/**
* @private
*/
_type: "combo",
/**
* @private
*/
_axesRenderQueue: null,
/**
* @private
*/
_addToAxesRenderQueue: function(axis)
{
if(!this._axesRenderQueue)
{
this._axesRenderQueue = [];
}
{
}
},
/**
* @private
*/
_getDefaultSeriesCollection: function(val)
{
tempKeys = [],
i,
l,
key,
if(dir == "vertical")
{
catAxis = "yAxis";
catKey = "yKey";
valAxis = "xAxis";
seriesKey = "xKey";
}
else
{
catAxis = "xAxis";
catKey = "xKey";
valAxis = "yAxis";
seriesKey = "yKey";
}
for(i = 0; i < l; ++i)
{
if(key)
{
if(index > -1)
{
}
}
}
{
}
for(i = 0; i < l; ++i)
{
if(series instanceof Y.CartesianSeries)
{
this._parseSeriesAxes(series);
continue;
}
if((series.type == "combo" || series.type == "stackedcombo" || series.type == "combospline" || series.type == "stackedcombospline"))
{
if(showAreaFill !== null)
{
}
if(showMarkers !== null)
{
}
if(showLines !== null)
{
}
}
}
if(val)
{
}
return sc;
},
/**
* @private
*/
_parseSeriesAxes: function(series)
{
axis;
{
{
}
}
{
{
}
}
},
/**
* @private
*/
_getCategoryAxis: function()
{
var axis,
return axis;
},
/**
* @private
*/
{
i,
keys,
axis;
if(axes)
{
{
}
else
{
for(i in axes)
{
if(axes.hasOwnProperty(i))
{
{
break;
}
}
}
}
}
return axis;
},
/**
* @private
* Gets an attribute from an object, using a getter for Base objects and a property for object
* literals. Used for determining attributes from series/axis references which can be an actual class instance
* or a hash of properties that will be used to create a class instance.
*/
{
{
}
{
}
return null;
},
/**
* @private
* Sets an attribute on an object, using a setter of Base objects and a property for object
* literals. Used for setting attributes on a Base class, either directly or to be stored in an object literal
* for use at instantiation.
*/
{
{
}
else
{
}
},
/**
* @private
* Creates Axis and Axis data classes based on hashes of properties.
*/
_parseAxes: function(val)
{
axes = {},
axesAttrs = {
edgeOffset: "edgeOffset",
position: "position",
overlapGraph:"overlapGraph",
labelFunction:"labelFunction",
labelFunctionScope:"labelFunctionScope",
labelFormat:"labelFormat",
maximum:"maximum",
minimum:"minimum",
roundingMethod:"roundingMethod",
alwaysShowZero:"alwaysShowZero"
},
ai,
i,
pos,
axis,
dh,
for(i in hash)
{
if(hash.hasOwnProperty(i))
{
{
}
else
{
config = {};
{
}
{
}
{
{
}
}
}
if(axis)
{
{
}
}
}
}
return axes;
},
/**
* @private
*/
_addAxes: function()
{
i,
axis,
pos,
w = this.get("width"),
h = this.get("height"),
if(!this._axesCollection)
{
this._axesCollection = [];
}
for(i in axes)
{
if(axes.hasOwnProperty(i))
{
{
if(!w)
{
w = this.get("width");
}
if(!h)
{
h = this.get("height");
}
this._addToAxesRenderQueue(axis);
{
}
else
{
}
{
}
}
}
}
},
/**
* @private
*/
_addSeries: function()
{
},
/**
* @private
* @description Adds gridlines to the chart.
*/
_addGridlines: function()
{
if(this._axesCollection)
{
}
if(hgl)
{
{
}
{
}
else
{
}
{
}
{
}
}
if(vgl)
{
{
}
{
}
else
{
}
{
}
{
}
}
},
/**
* @private
*/
_getDefaultAxes: function(axes)
{
axis,
attr,
keys,
newAxes = {},
claimedKeys = [],
i,
l,
ii,
ll,
dv,
valueAxes = [],
if(direction == "vertical")
{
seriesPosition = "bottom";
categoryPosition = "left";
}
else
{
seriesPosition = "left";
categoryPosition = "bottom";
}
if(axes)
{
for(i in axes)
{
if(axes.hasOwnProperty(i))
{
{
categoryAxisName = i;
this.set("categoryAxisName", i);
{
}
}
else if(i == categoryAxisName)
{
}
else
{
{
{
}
}
{
}
{
this._setBaseAttribute(newAxes[i], "position", this._getDefaultAxisPosition(newAxes[i], valueAxes, seriesPosition));
}
}
}
}
}
{
for(i in dv)
{
{
seriesKeys.push(i);
}
}
}
if(cIndex > -1)
{
}
l = claimedKeys.length;
for(i = 0; i < l; ++i)
{
if(cIndex > -1)
{
}
}
{
newAxes[categoryAxisName] = {};
}
{
}
{
}
{
}
{
}
{
{
}
else
{
}
}
{
{
this._setBaseAttribute(newAxes[valueAxisName], "position", this._getDefaultAxisPosition(newAxes[valueAxisName], valueAxes, seriesPosition));
}
{
}
{
}
}
return newAxes;
},
/**
* @private
* @description Determines the position of an axis when one is not specified.
*/
{
{
if(direction == "horizontal")
{
{
position = "right";
}
{
position = "left";
}
}
else
{
{
position = "top";
}
else
{
position = "bottom";
}
}
}
return position;
},
/**
* Returns an object literal containing a categoryItem and a valueItem for a given series index.
*
* @method getSeriesItem
* @param {CartesianSeries} series Reference to a series.
* @param {Number} index Index of the specified item within a series.
* @return Object
*/
{
{
categoryItem = {
};
valueItem = {
};
}
else
{
valueItem = {
};
categoryItem = {
};
}
},
/**
* @private
* Listender for axisRendered event.
*/
_axisRendered: function(e)
{
this._axesRenderQueue = this._axesRenderQueue.splice(1 + Y.Array.indexOf(this._axesRenderQueue, e.currentTarget), 1);
{
this._redraw();
}
},
/**
* @private
*/
_sizeChanged: function(e)
{
if(this._axesCollection)
{
var ac = this._axesCollection,
i = 0,
for(; i < l; ++i)
{
this._addToAxesRenderQueue(ac[i]);
}
this._redraw();
}
},
/**
* @private
*/
_redraw: function()
{
if(this._drawing)
{
this._callLater = true;
return;
}
this._drawing = true;
this._callLater = false;
var w = this.get("width"),
h = this.get("height"),
lw = 0,
rw = 0,
th = 0,
bh = 0,
i = 0,
l,
axis,
pos,
pts = [],
graphOverflow = "visible",
if(lc)
{
for(i = l - 1; i > -1; --i)
{
}
}
if(rc)
{
i = 0;
for(i = l - 1; i > -1; --i)
{
}
}
if(tc)
{
for(i = l - 1; i > -1; --i)
{
}
}
if(bc)
{
for(i = l - 1; i > -1; --i)
{
}
}
l = this._axesCollection.length;
i = 0;
for(; i < l; ++i)
{
axis = this._axesCollection[i];
{
{
}
}
{
{
}
}
{
graphOverflow = "hidden";
}
}
this._drawing = false;
if(this._callLater)
{
this._redraw();
return;
}
if(graph)
{
}
if(this._overlay)
{
}
}
}, {
ATTRS: {
/**
* @private
* Style object for the axes.
*
* @attribute axesStyles
* @type Object
*/
axesStyles: {
getter: function()
{
i,
styles = this._axesStyles;
if(axes)
{
for(i in axes)
{
{
if(!styles)
{
styles = {};
}
}
}
}
return styles;
},
{
i;
for(i in val)
{
{
}
}
}
},
/**
* @private
* Style object for the series
*
* @attribute seriesStyles
* @type Object
*/
seriesStyles: {
getter: function()
{
var styles = this._seriesStyles,
dict,
i;
if(graph)
{
if(dict)
{
styles = {};
for(i in dict)
{
if(dict.hasOwnProperty(i))
{
}
}
}
}
return styles;
},
{
var i,
l,
s;
{
s = this.get("seriesCollection");
i = 0;
for(; i < l; ++i)
{
}
}
else
{
for(i in val)
{
if(val.hasOwnProperty(i))
{
s = this.getSeries(i);
}
}
}
}
},
/**
* @private
* Styles for the graph.
*
* @attribute graphStyles
* @type Object
*/
graphStyles: {
getter: function()
{
if(graph)
{
}
return this._graphStyles;
},
{
}
},
/**
* Style properties for the chart. Contains a key indexed hash of the following:
* <dl>
* <dt>series</dt><dd>A key indexed hash containing references to the <code>styles</code> attribute for each series in the chart.
* Specific style attributes vary depending on the series:
* <ul>
* <li><a href="AreaSeries.html#config_styles">AreaSeries</a></li>
* <li><a href="BarSeries.html#config_styles">BarSeries</a></li>
* <li><a href="ColumnSeries.html#config_styles">ColumnSeries</a></li>
* <li><a href="ComboSeries.html#config_styles">ComboSeries</a></li>
* <li><a href="LineSeries.html#config_styles">LineSeries</a></li>
* <li><a href="MarkerSeries.html#config_styles">MarkerSeries</a></li>
* <li><a href="SplineSeries.html#config_styles">SplineSeries</a></li>
* </ul>
* </dd>
* <dt>axes</dt><dd>A key indexed hash containing references to the <code>styles</code> attribute for each axes in the chart. Specific
* style attributes can be found in the <a href="Axis.html#config_styles">Axis</a> class.</dd>
* <dt>graph</dt><dd>A reference to the <code>styles</code> attribute in the chart. Specific style attributes can be found in the
* <a href="Graph.html#config_styles">Graph</a> class.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
styles: {
getter: function()
{
var styles = {
};
return styles;
},
{
{
if(this.get("axesStyles"))
{
}
else
{
}
}
{
if(this.get("seriesStyles"))
{
}
else
{
}
}
{
}
}
},
/**
* Axes to appear in the chart. This can be a key indexed hash of axis instances or object literals
* used to construct the appropriate axes.
*
* @attribute axes
* @type Object
*/
axes: {
valueFn: "_parseAxes",
{
return this._parseAxes(val);
}
},
/**
* Collection of series to appear on the chart. This can be an array of Series instances or object literals
* used to construct the appropriate series.
*
* @attribute seriesCollection
* @type Array
*/
valueFn: "_getDefaultSeriesCollection",
{
return this._getDefaultSeriesCollection(val);
}
},
/**
* Reference to the left-aligned axes for the chart.
*
* @attribute leftAxesCollection
* @type Array
* @private
*/
leftAxesCollection: {},
/**
* Reference to the bottom-aligned axes for the chart.
*
* @attribute bottomAxesCollection
* @type Array
* @private
*/
bottomAxesCollection: {},
/**
* Reference to the right-aligned axes for the chart.
*
* @attribute rightAxesCollection
* @type Array
* @private
*/
rightAxesCollection: {},
/**
* Reference to the top-aligned axes for the chart.
*
* @attribute topAxesCollection
* @type Array
* @private
*/
topAxesCollection: {},
/**
* Indicates whether or not the chart is stacked.
*
* @attribute stacked
* @type Boolean
*/
stacked: {
value: false
},
/**
* Direction of chart's category axis when there is no series collection specified. Charts can
* be horizontal or vertical. When the chart type is column, the chart is horizontal.
* When the chart type is bar, the chart is vertical.
*
* @attribute direction
* @type String
*/
direction: {
getter: function()
{
if(type == "bar")
{
return "vertical";
}
else if(type == "column")
{
return "horizontal";
}
return this._direction;
},
{
this._direction = val;
return this._direction;
}
},
/**
* Indicates whether or not an area is filled in a combo chart.
*
* @attribute showAreaFill
* @type Boolean
*/
showAreaFill: {},
/**
* Indicates whether to display markers in a combo chart.
*
* @attribute showMarkers
* @type Boolean
*/
showMarkers:{},
/**
* Indicates whether to display lines in a combo chart.
*
* @attribute showLines
* @type Boolean
*/
showLines:{},
/**
* Indicates the key value used to identify a category axis in the <code>axes</code> hash. If
* not specified, the categoryKey attribute value will be used.
*
* @attribute categoryAxisName
* @type String
*/
},
/**
* Indicates the key value used to identify a the series axis when an axis not generated.
*
* @attribute valueAxisName
* @type String
*/
value: "values"
},
/**
* Reference to the horizontalGridlines for the chart.
*
* @attribute horizontalGridlines
* @type Gridlines
*/
getter: function()
{
if(graph)
{
}
return this._horizontalGridlines;
},
{
{
val = {};
}
if(graph)
{
}
else
{
this._horizontalGridlines = val;
}
}
},
/**
* Reference to the verticalGridlines for the chart.
*
* @attribute verticalGridlines
* @type Gridlines
*/
getter: function()
{
if(graph)
{
}
return this._verticalGridlines;
},
{
{
val = {};
}
if(graph)
{
}
else
{
this._verticalGridlines = val;
}
}
},
/**
* Type of chart when there is no series collection specified.
*
* @attribute type
* @type String
*/
type: {
getter: function()
{
if(this.get("stacked"))
{
return "stacked" + this._type;
}
return this._type;
},
{
if(this._type == "bar")
{
if(val != "bar")
{
}
}
else
{
if(val == "bar")
{
}
}
return this._type;
}
},
/**
* Reference to the category axis used by the chart.
*
* @attribute categoryAxis
* @type Axis
*/
categoryAxis:{}
}
});
/**
* The PieChart class creates a pie chart
*
* @class PieChart
* @extends ChartBase
* @constructor
*/
/**
* @private
*/
_getSeriesCollection: function()
{
if(this._seriesCollection)
{
return this._seriesCollection;
}
sc = [],
i = 0,
l,
key,
catAxis = "categoryAxis",
catKey = "categoryKey",
valAxis = "valueAxis",
seriesKey = "valueKey";
if(axes)
{
l = seriesKeys.length;
for(; i < l; ++i)
{
}
}
this._seriesCollection = sc;
return sc;
},
/**
* @private
*/
_parseAxes: function(hash)
{
if(!this._axes)
{
this._axes = {};
}
w = this.get("width"),
h = this.get("height"),
if(!w)
{
w = this.get("width");
}
if(!h)
{
h = this.get("height");
}
for(i in hash)
{
if(hash.hasOwnProperty(i))
{
{
}
}
}
},
/**
* @private
*/
_addAxes: function()
{
i,
axis,
p;
if(!axes)
{
}
if(!this._axesCollection)
{
this._axesCollection = [];
}
for(i in axes)
{
if(axes.hasOwnProperty(i))
{
if(!this.get(p + "AxesCollection"))
{
}
else
{
}
}
}
},
/**
* @private
*/
_addSeries: function()
{
this._parseSeriesAxes(seriesCollection);
},
/**
* @private
*/
_parseSeriesAxes: function(c)
{
var i = 0,
s,
axis;
for(; i < len; ++i)
{
s = c[i];
if(s)
{
//If series is an actual series instance,
//replace axes attribute string ids with axes
if(s instanceof Y.PieSeries)
{
{
}
{
}
continue;
}
if(!s.type)
{
}
}
}
},
/**
* @private
*/
_getDefaultAxes: function()
{
seriesAxis = "numeric",
i,
{
for(i in dv)
{
if(i != catKey)
{
seriesKeys.push(i);
}
}
{
}
}
return {
values:{
},
category:{
}
};
},
/**
* Returns an object literal containing a categoryItem and a valueItem for a given series index.
*
* @method getSeriesItem
* @param series Reference to a series.
* @param index Index of the specified item within a series.
*/
{
var categoryItem = {
},
valueItem = {
};
},
/**
* @private
*/
_sizeChanged: function(e)
{
this._redraw();
},
/**
* @private
*/
_redraw: function()
{
if(graph)
{
}
}
}, {
ATTRS: {
/**
* Axes to appear in the chart.
*
* @attribute axes
* @type Object
*/
axes: {
getter: function()
{
return this._axes;
},
{
this._parseAxes(val);
}
},
/**
* Collection of series to appear on the chart. This can be an array of Series instances or object literals
* used to describe a Series instance.
*
* @attribute seriesCollection
* @type Array
*/
getter: function()
{
return this._getSeriesCollection();
},
{
return this._setSeriesCollection(val);
}
},
/**
* Type of chart when there is no series collection specified.
*
* @attribute type
* @type String
*/
type: {
value: "pie"
}
}
});
/**
* The Chart class is the basic application used to create a chart.
*
* @class Chart
* @constructor
*/
{
{
return new Y.CartesianChart(cfg);
}
else
{
}
}
}, '@VERSION@' ,{requires:['dom', 'datatype', 'event-custom', 'event-mouseenter', 'widget', 'widget-position', 'widget-stack']});