';
-
- // do the x-axis
- this.xaxis.ticks.each(function(tick){
- if (!tick.label || tick.v < this.xaxis.min || tick.v > this.xaxis.max)
- return;
- html += '
' + tick.label + "
";
-
- }.bind(this));
-
- // do the y-axis
- this.yaxis.ticks.each(function(tick){
- if (!tick.label || tick.v < this.yaxis.min || tick.v > this.yaxis.max)
- return;
- html += '
' + tick.label + "
";
- }.bind(this));
-
- html += '
';
-
- this.domObj.insert(html);
- },
- /**
- * function: drawGraph
- *
- * Paramters:
- * {Object} graphData
- *
- * Description: given a graphData (series) this function calls a proper lower level method to draw it.
- */
- drawGraph: function(graphData) {
- if (graphData.lines.show || (!graphData.bars.show && !graphData.points.show))
- this.drawGraphLines(graphData);
- if (graphData.bars.show)
- this.drawGraphBar(graphData);
- if (graphData.points.show)
- this.drawGraphPoints(graphData);
- },
- /**
- * function: plotLine
- *
- * parameters:
- * {Object} data
- * {Object} offset
- *
- * description:
- * Helper function that plots a line based on the data provided
- */
- plotLine: function(data, offset) {
- var prev, cur = null, drawx = null, drawy = null;
-
- this.context.beginPath();
- for (var i = 0; i < data.length; ++i) {
- prev = cur;
- cur = data[i];
-
- if (prev == null || cur == null)
- continue;
-
- var x1 = prev[0], y1 = prev[1],
- x2 = cur[0], y2 = cur[1];
-
- // clip with ymin
- if (y1 <= y2 && y1 < this.yaxis.min) {
- if (y2 < this.yaxis.min)
- continue; // line segment is outside
- // compute new intersection point
- x1 = (this.yaxis.min - y1) / (y2 - y1) * (x2 - x1) + x1;
- y1 = this.yaxis.min;
- }
- else if (y2 <= y1 && y2 < this.yaxis.min) {
- if (y1 < this.yaxis.min)
- continue;
- x2 = (this.yaxis.min - y1) / (y2 - y1) * (x2 - x1) + x1;
- y2 = this.yaxis.min;
- }
-
- // clip with ymax
- if (y1 >= y2 && y1 > this.yaxis.max) {
- if (y2 > this.yaxis.max)
- continue;
- x1 = (this.yaxis.max - y1) / (y2 - y1) * (x2 - x1) + x1;
- y1 = this.yaxis.max;
- }
- else if (y2 >= y1 && y2 > this.yaxis.max) {
- if (y1 > this.yaxis.max)
- continue;
- x2 = (this.yaxis.max - y1) / (y2 - y1) * (x2 - x1) + x1;
- y2 = this.yaxis.max;
- }
-
- // clip with xmin
- if (x1 <= x2 && x1 < this.xaxis.min) {
- if (x2 < this.xaxis.min)
- continue;
- y1 = (this.xaxis.min - x1) / (x2 - x1) * (y2 - y1) + y1;
- x1 = this.xaxis.min;
- }
- else if (x2 <= x1 && x2 < this.xaxis.min) {
- if (x1 < this.xaxis.min)
- continue;
- y2 = (this.xaxis.min - x1) / (x2 - x1) * (y2 - y1) + y1;
- x2 = this.xaxis.min;
- }
-
- // clip with xmax
- if (x1 >= x2 && x1 > this.xaxis.max) {
- if (x2 > this.xaxis.max)
- continue;
- y1 = (this.xaxis.max - x1) / (x2 - x1) * (y2 - y1) + y1;
- x1 = this.xaxis.max;
- }
- else if (x2 >= x1 && x2 > this.xaxis.max) {
- if (x1 > this.xaxis.max)
- continue;
- y2 = (this.xaxis.max - x1) / (x2 - x1) * (y2 - y1) + y1;
- x2 = this.xaxis.max;
- }
-
- if (drawx != this.translateHoz(x1) || drawy != this.translateVert(y1) + offset)
- this.context.moveTo(this.translateHoz(x1), this.translateVert(y1) + offset);
-
- drawx = this.translateHoz(x2);
- drawy = this.translateVert(y2) + offset;
- this.context.lineTo(drawx, drawy);
- }
- this.context.stroke();
- },
- /**
- * function: plotLineArea
- *
- * parameters:
- * {Object} data
- *
- * description:
- * Helper functoin that plots a colored line graph. This function
- * takes the data nad then fill in the area on the graph properly
- */
- plotLineArea: function(data) {
- var prev, cur = null;
-
- var bottom = Math.min(Math.max(0, this.yaxis.min), this.yaxis.max);
- var top, lastX = 0;
-
- var areaOpen = false;
-
- for (var i = 0; i < data.length; ++i) {
- prev = cur;
- cur = data[i];
-
- if (areaOpen && prev != null && cur == null) {
- // close area
- this.context.lineTo(this.translateHoz(lastX), this.translateVert(bottom));
- this.context.fill();
- areaOpen = false;
- continue;
- }
-
- if (prev == null || cur == null)
- continue;
-
- var x1 = prev[0], y1 = prev[1],
- x2 = cur[0], y2 = cur[1];
-
- // clip x values
-
- // clip with xmin
- if (x1 <= x2 && x1 < this.xaxis.min) {
- if (x2 < this.xaxis.min)
- continue;
- y1 = (this.xaxis.min - x1) / (x2 - x1) * (y2 - y1) + y1;
- x1 = this.xaxis.min;
- }
- else if (x2 <= x1 && x2 < this.xaxis.min) {
- if (x1 < this.xaxis.min)
- continue;
- y2 = (this.xaxis.min - x1) / (x2 - x1) * (y2 - y1) + y1;
- x2 = this.xaxis.min;
- }
-
- // clip with xmax
- if (x1 >= x2 && x1 > this.xaxis.max) {
- if (x2 > this.xaxis.max)
- continue;
- y1 = (this.xaxis.max - x1) / (x2 - x1) * (y2 - y1) + y1;
- x1 = this.xaxis.max;
- }
- else if (x2 >= x1 && x2 > this.xaxis.max) {
- if (x1 > this.xaxis.max)
- continue;
- y2 = (this.xaxis.max - x1) / (x2 - x1) * (y2 - y1) + y1;
- x2 = this.xaxis.max;
- }
-
- if (!areaOpen) {
- // open area
- this.context.beginPath();
- this.context.moveTo(this.translateHoz(x1), this.translateVert(bottom));
- areaOpen = true;
- }
-
- // now first check the case where both is outside
- if (y1 >= this.yaxis.max && y2 >= this.yaxis.max) {
- this.context.lineTo(this.translateHoz(x1), this.translateVert(this.yaxis.max));
- this.context.lineTo(this.translateHoz(x2), this.translateVert(this.yaxis.max));
- continue;
- }
- else if (y1 <= this.yaxis.min && y2 <= this.yaxis.min) {
- this.context.lineTo(this.translateHoz(x1), this.translateVert(this.yaxis.min));
- this.context.lineTo(this.translateHoz(x2), this.translateVert(this.yaxis.min));
- continue;
- }
-
- var x1old = x1, x2old = x2;
-
- // clip with ymin
- if (y1 <= y2 && y1 < this.yaxis.min && y2 >= this.yaxis.min) {
- x1 = (this.yaxis.min - y1) / (y2 - y1) * (x2 - x1) + x1;
- y1 = this.yaxis.min;
- }
- else if (y2 <= y1 && y2 < this.yaxis.min && y1 >= this.yaxis.min) {
- x2 = (this.yaxis.min - y1) / (y2 - y1) * (x2 - x1) + x1;
- y2 = this.yaxis.min;
- }
-
- // clip with ymax
- if (y1 >= y2 && y1 > this.yaxis.max && y2 <= this.yaxis.max) {
- x1 = (this.yaxis.max - y1) / (y2 - y1) * (x2 - x1) + x1;
- y1 = this.yaxis.max;
- }
- else if (y2 >= y1 && y2 > this.yaxis.max && y1 <= this.yaxis.max) {
- x2 = (this.yaxis.max - y1) / (y2 - y1) * (x2 - x1) + x1;
- y2 = this.yaxis.max;
- }
-
-
- // if the x value was changed we got a rectangle
- // to fill
- if (x1 != x1old) {
- if (y1 <= this.yaxis.min)
- top = this.yaxis.min;
- else
- top = this.yaxis.max;
-
- this.context.lineTo(this.translateHoz(x1old), this.translateVert(top));
- this.context.lineTo(this.translateHoz(x1), this.translateVert(top));
- }
-
- // fill the triangles
- this.context.lineTo(this.translateHoz(x1), this.translateVert(y1));
- this.context.lineTo(this.translateHoz(x2), this.translateVert(y2));
-
- // fill the other rectangle if it's there
- if (x2 != x2old) {
- if (y2 <= this.yaxis.min)
- top = this.yaxis.min;
- else
- top = this.yaxis.max;
-
- this.context.lineTo(this.translateHoz(x2old), this.translateVert(top));
- this.context.lineTo(this.translateHoz(x2), this.translateVert(top));
- }
-
- lastX = Math.max(x2, x2old);
- }
-
- if (areaOpen) {
- this.context.lineTo(this.translateHoz(lastX), this.translateVert(bottom));
- this.context.fill();
- }
- },
- /**
- * function: drawGraphLines
- *
- * parameters:
- * {Object} graphData
- *
- * description:
- * Main function that daws the line graph. This function is called
- * if