';
// 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