";
-}
-this.xlabels=new Array();
-this.ylabels=new Array();
-this.isFirstRender=true;
-this.area={x:this.options.padding.left,y:this.options.padding.top,w:this.width-this.options.padding.left-this.options.padding.right,h:this.height-this.options.padding.top-this.options.padding.bottom};
-MochiKit.DOM.updateNodeAttributes(this.container,{"style":{"position":"relative","width":this.width+"px"}});
-};
-PlotKit.CanvasRenderer.prototype.render=function(){
-if(this.isIE){
-try{
-if(this.renderDelay){
-this.renderDelay.cancel();
-this.renderDelay=null;
-}
-var _166=this.element.getContext("2d");
-}
-catch(e){
-this.isFirstRender=false;
-if(this.maxTries-->0){
-this.renderDelay=MochiKit.Async.wait(this.IEDelay);
-this.renderDelay.addCallback(bind(this.render,this));
-}
-return;
-}
-}
-if(this.options.drawBackground){
-this._renderBackground();
-}
-if(this.layout.style=="bar"){
-this._renderBarChart();
-this._renderBarAxis();
-}else{
-if(this.layout.style=="pie"){
-this._renderPieChart();
-this._renderPieAxis();
-}else{
-if(this.layout.style=="line"){
-this._renderLineChart();
-this._renderLineAxis();
-}
-}
-}
-};
-PlotKit.CanvasRenderer.prototype._renderBarChartWrap=function(data,_168){
-var _169=this.element.getContext("2d");
-var _170=this.options.colorScheme.length;
-var _171=this.options.colorScheme;
-var _172=MochiKit.Base.keys(this.layout.datasets);
-var _173=_172.length;
-for(var i=0;i<_173;i++){
-var _174=_172[i];
-var _175=_171[i%_170];
-_169.save();
-_169.fillStyle=_175.toRGBString();
-if(this.options.strokeColor){
-_169.strokeStyle=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_169.strokeStyle=_175[this.options.strokeColorTransform]().toRGBString();
-}
-}
-_169.lineWidth=this.options.strokeWidth;
-var _176=function(obj){
-if(obj.name==_174){
-_168(_169,obj);
-}
-};
-MochiKit.Iter.forEach(data,bind(_176,this));
-_169.restore();
-}
-};
-PlotKit.CanvasRenderer.prototype._renderBarChart=function(){
-var bind=MochiKit.Base.bind;
-var _178=function(_179,bar){
-var x=this.area.w*bar.x+this.area.x;
-var y=this.area.h*bar.y+this.area.y;
-var w=this.area.w*bar.w;
-var h=this.area.h*bar.h;
-if((w<1)||(h<1)){
-return;
-}
-if(this.options.shouldFill){
-_179.fillRect(x,y,w,h);
-}
-if(this.options.shouldStroke){
-_179.strokeRect(x,y,w,h);
-}
-};
-this._renderBarChartWrap(this.layout.bars,bind(_178,this));
-};
-PlotKit.CanvasRenderer.prototype._renderLineChart=function(){
-var _182=this.element.getContext("2d");
-var _183=this.options.colorScheme.length;
-var _184=this.options.colorScheme;
-var _185=MochiKit.Base.keys(this.layout.datasets);
-var _186=_185.length;
-var bind=MochiKit.Base.bind;
-var _187=MochiKit.Base.partial;
-for(var i=0;i<_186;i++){
-var _188=_185[i];
-var _189=_184[i%_183];
-var _190=this.options.strokeColorTransform;
-_182.save();
-_182.fillStyle=_189.toRGBString();
-if(this.options.strokeColor){
-_182.strokeStyle=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_182.strokeStyle=_189[_190]().toRGBString();
-}
-}
-_182.lineWidth=this.options.strokeWidth;
-var _191=function(ctx){
-ctx.beginPath();
-ctx.moveTo(this.area.x,this.area.y+this.area.h);
-var _193=function(ctx_,_195){
-if(_195.name==_188){
-ctx_.lineTo(this.area.w*_195.x+this.area.x,this.area.h*_195.y+this.area.y);
-}
-};
-MochiKit.Iter.forEach(this.layout.points,_187(_193,ctx),this);
-ctx.lineTo(this.area.w+this.area.x,this.area.h+this.area.y);
-ctx.lineTo(this.area.x,this.area.y+this.area.h);
-ctx.closePath();
-};
-if(this.options.shouldFill){
-bind(_191,this)(_182);
-_182.fill();
-}
-if(this.options.shouldStroke){
-bind(_191,this)(_182);
-_182.stroke();
-}
-_182.restore();
-}
-};
-PlotKit.CanvasRenderer.prototype._renderPieChart=function(){
-var _196=this.element.getContext("2d");
-var _197=this.options.colorScheme.length;
-var _198=this.layout.slices;
-var _199=this.area.x+this.area.w*0.5;
-var _200=this.area.y+this.area.h*0.5;
-var _201=Math.min(this.area.w*this.options.pieRadius,this.area.h*this.options.pieRadius);
-if(this.isIE){
-_199=parseInt(_199);
-_200=parseInt(_200);
-_201=parseInt(_201);
-}
-for(var i=0;i<_198.length;i++){
-var _202=this.options.colorScheme[i%_197];
-_196.save();
-_196.fillStyle=_202.toRGBString();
-var _203=function(){
-_196.beginPath();
-_196.moveTo(_199,_200);
-_196.arc(_199,_200,_201,_198[i].startAngle-Math.PI/2,_198[i].endAngle-Math.PI/2,false);
-_196.lineTo(_199,_200);
-_196.closePath();
-};
-if(Math.abs(_198[i].startAngle-_198[i].endAngle)>0.001){
-if(this.options.shouldFill){
-_203();
-_196.fill();
-}
-if(this.options.shouldStroke){
-_203();
-_196.lineWidth=this.options.strokeWidth;
-if(this.options.strokeColor){
-_196.strokeStyle=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_196.strokeStyle=_202[this.options.strokeColorTransform]().toRGBString();
-}
-}
-_196.stroke();
-}
-}
-_196.restore();
-}
-};
-PlotKit.CanvasRenderer.prototype._renderBarAxis=function(){
-this._renderAxis();
-};
-PlotKit.CanvasRenderer.prototype._renderLineAxis=function(){
-this._renderAxis();
-};
-PlotKit.CanvasRenderer.prototype._renderAxis=function(){
-if(!this.options.drawXAxis&&!this.options.drawYAxis){
-return;
-}
-var _204=this.element.getContext("2d");
-var _205={"style":{"position":"absolute","fontSize":this.options.axisLabelFontSize+"px","zIndex":10,"color":this.options.axisLabelColor.toRGBString(),"width":this.options.axisLabelWidth+"px","overflow":"hidden"}};
-_204.save();
-_204.strokeStyle=this.options.axisLineColor.toRGBString();
-_204.lineWidth=this.options.axisLineWidth;
-if(this.options.drawYAxis){
-if(this.layout.yticks){
-var _206=function(tick){
-if(typeof (tick)=="function"){
-return;
-}
-var x=this.area.x;
-var y=this.area.y+tick[0]*this.area.h;
-_204.beginPath();
-_204.moveTo(x,y);
-_204.lineTo(x-this.options.axisTickSize,y);
-_204.closePath();
-_204.stroke();
-var _207=DIV(_205,tick[1]);
-_207.style.top=(y-this.options.axisLabelFontSize)+"px";
-_207.style.left=(x-this.options.padding.left-this.options.axisTickSize)+"px";
-_207.style.textAlign="right";
-_207.style.width=(this.options.padding.left-this.options.axisTickSize*2)+"px";
-MochiKit.DOM.appendChildNodes(this.container,_207);
-this.ylabels.push(_207);
-};
-MochiKit.Iter.forEach(this.layout.yticks,bind(_206,this));
-}
-_204.beginPath();
-_204.moveTo(this.area.x,this.area.y);
-_204.lineTo(this.area.x,this.area.y+this.area.h);
-_204.closePath();
-_204.stroke();
-}
-if(this.options.drawXAxis){
-if(this.layout.xticks){
-var _206=function(tick){
-if(typeof (dataset)=="function"){
-return;
-}
-var x=this.area.x+tick[0]*this.area.w;
-var y=this.area.y+this.area.h;
-_204.beginPath();
-_204.moveTo(x,y);
-_204.lineTo(x,y+this.options.axisTickSize);
-_204.closePath();
-_204.stroke();
-var _208=DIV(_205,tick[1]);
-_208.style.top=(y+this.options.axisTickSize)+"px";
-_208.style.left=(x-this.options.axisLabelWidth/2)+"px";
-_208.style.textAlign="center";
-_208.style.width=this.options.axisLabelWidth+"px";
-MochiKit.DOM.appendChildNodes(this.container,_208);
-this.xlabels.push(_208);
-};
-MochiKit.Iter.forEach(this.layout.xticks,bind(_206,this));
-}
-_204.beginPath();
-_204.moveTo(this.area.x,this.area.y+this.area.h);
-_204.lineTo(this.area.x+this.area.w,this.area.y+this.area.h);
-_204.closePath();
-_204.stroke();
-}
-_204.restore();
-};
-PlotKit.CanvasRenderer.prototype._renderPieAxis=function(){
-if(!this.options.drawXAxis){
-return;
-}
-if(this.layout.xticks){
-var _209=new Array();
-for(var i=0;i
Math.PI*2){
-_216=_216-Math.PI*2;
-}else{
-if(_216<0){
-_216=_216+Math.PI*2;
-}
-}
-var _217=_210+Math.sin(_216)*(_212+10);
-var _218=_211-Math.cos(_216)*(_212+10);
-var _219={"position":"absolute","zIndex":11,"width":_213+"px","fontSize":this.options.axisLabelFontSize+"px","overflow":"hidden","color":this.options.axisLabelColor.toHexString()};
-if(_216<=Math.PI*0.5){
-_219["textAlign"]="left";
-_219["verticalAlign"]="top";
-_219["left"]=_217+"px";
-_219["top"]=(_218-this.options.axisLabelFontSize)+"px";
-}else{
-if((_216>Math.PI*0.5)&&(_216<=Math.PI)){
-_219["textAlign"]="left";
-_219["verticalAlign"]="bottom";
-_219["left"]=_217+"px";
-_219["top"]=_218+"px";
-}else{
-if((_216>Math.PI)&&(_216<=Math.PI*1.5)){
-_219["textAlign"]="right";
-_219["verticalAlign"]="bottom";
-_219["left"]=(_217-_213)+"px";
-_219["top"]=_218+"px";
-}else{
-_219["textAlign"]="right";
-_219["verticalAlign"]="bottom";
-_219["left"]=(_217-_213)+"px";
-_219["top"]=(_218-this.options.axisLabelFontSize)+"px";
-}
-}
-}
-var _220=DIV({"style":_219},this.layout.xticks[i][1]);
-this.xlabels.push(_220);
-MochiKit.DOM.appendChildNodes(this.container,_220);
-}
-}
-};
-PlotKit.CanvasRenderer.prototype._renderBackground=function(){
-var _221=this.element.getContext("2d");
-_221.save();
-_221.fillStyle=this.options.backgroundColor.toRGBString();
-_221.fillRect(0,0,this.width,this.height);
-_221.restore();
-};
-PlotKit.CanvasRenderer.prototype.clear=function(){
-if(this.isIE){
-try{
-if(this.clearDelay){
-this.clearDelay.cancel();
-this.clearDelay=null;
-}
-var _222=this.element.getContext("2d");
-}
-catch(e){
-this.isFirstRender=false;
-this.clearDelay=MochiKit.Async.wait(this.IEDelay);
-this.clearDelay.addCallback(bind(this.clear,this));
-return;
-}
-}
-var _222=this.element.getContext("2d");
-_222.clearRect(0,0,this.width,this.height);
-MochiKit.Iter.forEach(this.xlabels,MochiKit.DOM.removeElement);
-MochiKit.Iter.forEach(this.ylabels,MochiKit.DOM.removeElement);
-this.xlabels=new Array();
-this.ylabels=new Array();
-};
-PlotKit.CanvasRenderer.prototype._initialiseEvents=function(){
-var _223=MochiKit.Signal.connect;
-var bind=MochiKit.Base.bind;
-_223(this.element,"onclick",bind(this.onclick,this));
-};
-PlotKit.CanvasRenderer.prototype._resolveObject=function(e){
-var x=(e.mouse().page.x-PlotKit.Base.findPosX(this.element)-this.area.x)/this.area.w;
-var y=(e.mouse().page.y-PlotKit.Base.findPosY(this.element)-this.area.y)/this.area.h;
-var _225=this.layout.hitTest(x,y);
-if(_225){
-return _225;
-}
-return null;
-};
-PlotKit.CanvasRenderer.prototype._createEventObject=function(_226,e){
-if(_226==null){
-return null;
-}
-e.chart=_226;
-return e;
-};
-PlotKit.CanvasRenderer.prototype.onclick=function(e){
-var _227=this._resolveObject(e);
-var _228=this._createEventObject(_227,e);
-if(_228!=null){
-MochiKit.Signal.signal(this,"onclick",_228);
-}
-};
-PlotKit.CanvasRenderer.prototype.onmouseover=function(e){
-var _229=this._resolveObject(e);
-var _230=this._createEventObject(_229,e);
-if(_230!=null){
-signal(this,"onmouseover",_230);
-}
-};
-PlotKit.CanvasRenderer.prototype.onmouseout=function(e){
-var _231=this._resolveObject(e);
-var _232=this._createEventObject(_231,e);
-if(_232==null){
-signal(this,"onmouseout",e);
-}else{
-signal(this,"onmouseout",_232);
-}
-};
-PlotKit.CanvasRenderer.prototype.onmousemove=function(e){
-var _233=this._resolveObject(e);
-var _234=this._createEventObject(_233,e);
-if((_233==null)&&(this.event_isinside==null)){
-return;
-}
-if((_233!=null)&&(this.event_isinside==null)){
-signal(this,"onmouseover",_234);
-}
-if((_233==null)&&(this.event_isinside!=null)){
-signal(this,"onmouseout",_234);
-}
-if((_233!=null)&&(this.event_isinside!=null)){
-signal(this,"onmousemove",_234);
-}
-this.event_isinside=_233;
-};
-PlotKit.CanvasRenderer.isSupported=function(_235){
-var _236=null;
-try{
-if(MochiKit.Base.isUndefinedOrNull(_235)){
-_236=MochiKit.DOM.CANVAS({});
-}else{
-_236=MochiKit.DOM.getElement(_235);
-}
-var _237=_236.getContext("2d");
-}
-catch(e){
-var ie=navigator.appVersion.match(/MSIE (\d\.\d)/);
-var _239=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
-if((!ie)||(ie[1]<6)||(_239)){
-return false;
-}
-return true;
-}
-return true;
-};
-PlotKit.Canvas={};
-PlotKit.Canvas.CanvasRenderer=PlotKit.CanvasRenderer;
-PlotKit.Canvas.EXPORT=["CanvasRenderer"];
-PlotKit.Canvas.EXPORT_OK=["CanvasRenderer"];
-PlotKit.Canvas.__new__=function(){
-var m=MochiKit.Base;
-m.nameFunctions(this);
-this.EXPORT_TAGS={":common":this.EXPORT,":all":m.concat(this.EXPORT,this.EXPORT_OK)};
-};
-PlotKit.Canvas.__new__();
-MochiKit.Base._exportSymbols(this,PlotKit.Canvas);
-
-
-// Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
-// All Rights Reserved.
-
-/**
- * @fileoverview Subclasses various parts of PlotKit to meet the additional
- * needs of DateGraph: grid overlays and error bars
- */
-
-// Subclass PlotKit.Layout to add:
-// 1. Sigma/errorBars properties
-// 2. Copy error terms for PlotKit.CanvasRenderer._renderLineChart
-
-/**
- * Creates a new DateGraphLayout object. Options are the same as those allowed
- * by the PlotKit.Layout constructor.
- * @param {Object} options Options for PlotKit.Layout
- * @return {Object} The DateGraphLayout object
- */
-DateGraphLayout = function(options) {
- PlotKit.Layout.call(this, "line", options);
-};
-DateGraphLayout.prototype = new PlotKit.Layout();
-
-/**
- * Behaves the same way as PlotKit.Layout, but also copies the errors
- * @private
- */
-DateGraphLayout.prototype.evaluateWithError = function() {
- this.evaluate();
- if (!this.options.errorBars) return;
-
- // Copy over the error terms
- var i = 0; // index in this.points
- for (var setName in this.datasets) {
- var j = 0;
- var dataset = this.datasets[setName];
- if (PlotKit.Base.isFuncLike(dataset)) continue;
- for (var j = 0; j < dataset.length; j++, i++) {
- var item = dataset[j];
- var xv = parseFloat(item[0]);
- var yv = parseFloat(item[1]);
-
- if (xv == this.points[i].xval &&
- yv == this.points[i].yval) {
- this.points[i].errorMinus = parseFloat(item[2]);
- this.points[i].errorPlus = parseFloat(item[3]);
- }
- }
- }
-};
-
-/**
- * Convenience function to remove all the data sets from a graph
- */
-DateGraphLayout.prototype.removeAllDatasets = function() {
- delete this.datasets;
- this.datasets = new Array();
-};
-
-/**
- * Change the values of various layout options
- * @param {Object} new_options an associative array of new properties
- */
-DateGraphLayout.prototype.updateOptions = function(new_options) {
- MochiKit.Base.update(this.options, new_options ? new_options : {});
-};
-
-// Subclass PlotKit.CanvasRenderer to add:
-// 1. X/Y grid overlay
-// 2. Ability to draw error bars (if required)
-
-/**
- * Sets some PlotKit.CanvasRenderer options
- * @param {Object} element The canvas to attach to
- * @param {Layout} layout The DateGraphLayout object for this graph.
- * @param {Object} options Options to pass on to CanvasRenderer
- */
-DateGraphCanvasRenderer = function(element, layout, options) {
- PlotKit.CanvasRenderer.call(this, element, layout, options);
- this.options.shouldFill = false;
- this.options.shouldStroke = true;
- this.options.drawYGrid = true;
- this.options.drawXGrid = true;
- this.options.gridLineColor = MochiKit.Color.Color.grayColor();
- MochiKit.Base.update(this.options, options);
-
- // TODO(danvk) This shouldn't be necessary: effects should be overlaid
- this.options.drawBackground = false;
-};
-DateGraphCanvasRenderer.prototype = new PlotKit.CanvasRenderer();
-
-/**
- * Draw an X/Y grid on top of the existing plot
- */
-DateGraphCanvasRenderer.prototype.render = function() {
- // Do the ordinary rendering, as before
- // TODO(danvk) Call super.render()
- this._renderLineChart();
- this._renderLineAxis();
-
- // Draw the new X/Y grid
- var ctx = this.element.getContext("2d");
- if (this.options.drawYGrid) {
- var ticks = this.layout.yticks;
- ctx.save();
- ctx.strokeStyle = this.options.gridLineColor.toRGBString();
- ctx.lineWidth = this.options.axisLineWidth;
- for (var i = 0; i < ticks.length; i++) {
- var x = this.area.x;
- var y = this.area.y + ticks[i][0] * this.area.h;
- ctx.beginPath();
- ctx.moveTo(x, y);
- ctx.lineTo(x + this.area.w, y);
- ctx.closePath();
- ctx.stroke();
- }
- }
-
- if (this.options.drawXGrid) {
- var ticks = this.layout.xticks;
- ctx.save();
- ctx.strokeStyle = this.options.gridLineColor.toRGBString();
- ctx.lineWidth = this.options.axisLineWidth;
- for (var i=0; i= 0) {
- ctx_.moveTo(prevX, prevYs[0]);
- ctx_.lineTo(point.canvasx, newYs[0]);
- ctx_.lineTo(point.canvasx, newYs[1]);
- ctx_.lineTo(prevX, prevYs[1]);
- ctx_.closePath();
- }
- prevYs[0] = newYs[0];
- prevYs[1] = newYs[1];
- prevX = point.canvasx;
- }
- };
- // should be same color as the lines
- var err_color = color.colorWithAlpha(0.15);
- ctx.fillStyle = err_color.toRGBString();
- ctx.beginPath();
- MochiKit.Iter.forEach(this.layout.points, partial(errorTrapezoid, ctx), this);
- ctx.fill();
- }
- };
- if (errorBars)
- bind(makeErrorBars, this)(context);
- bind(makePath, this)(context);
- context.restore();
-};
-// Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
-// All Rights Reserved.
-
-/**
- * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
- * string. DateGraph can handle multiple series with or without error bars. The
- * date/value ranges will be automatically set. DateGraph uses the
- * <canvas> tag, so it only works in FF1.5+.
- * @author danvdk@gmail.com (Dan Vanderkam)
-
- Usage:
-
-
-
- The CSV file is of the form
-
- YYYYMMDD,A1,B1,C1
- YYYYMMDD,A2,B2,C2
-
- If null is passed as the third parameter (series names), then the first line
- of the CSV file is assumed to contain names for each series.
-
- If the 'errorBars' option is set in the constructor, the input should be of
- the form
-
- YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
- YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
-
- If the 'fractions' option is set, the input should be of the form:
-
- YYYYMMDD,A1/B1,A2/B2,...
- YYYYMMDD,A1/B1,A2/B2,...
-
- And error bars will be calculated automatically using a binomial distribution.
-
- For further documentation and examples, see http://www/~danvk/dg/
-
- */
-
-/**
- * An interactive, zoomable graph
- * @param {String | Function} file A file containing CSV data or a function that
- * returns this data. The expected format for each line is
- * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
- * YYYYMMDD,val1,stddev1,val2,stddev2,...
- * @param {Array.} labels Labels for the data series
- * @param {Object} attrs Various other attributes, e.g. errorBars determines
- * whether the input data contains error ranges.
- */
-DateGraph = function(div, file, labels, attrs) {
- if (arguments.length > 0)
- this.__init__(div, file, labels, attrs);
-};
-
-DateGraph.NAME = "DateGraph";
-DateGraph.VERSION = "1.1";
-DateGraph.__repr__ = function() {
- return "[" + this.NAME + " " + this.VERSION + "]";
-};
-DateGraph.toString = function() {
- return this.__repr__();
-};
-
-// Various default values
-DateGraph.DEFAULT_ROLL_PERIOD = 1;
-DateGraph.DEFAULT_WIDTH = 480;
-DateGraph.DEFAULT_HEIGHT = 320;
-DateGraph.DEFAULT_STROKE_WIDTH = 1.0;
-DateGraph.AXIS_LINE_WIDTH = 0.3;
-
-/**
- * Initializes the DateGraph. This creates a new DIV and constructs the PlotKit
- * and interaction <canvas> inside of it. See the constructor for details
- * on the parameters.
- * @param {String | Function} file Source data
- * @param {Array.} labels Names of the data series
- * @param {Object} attrs Miscellaneous other options
- * @private
- */
-DateGraph.prototype.__init__ = function(div, file, labels, attrs) {
- // Copy the important bits into the object
- this.maindiv_ = div;
- this.labels_ = labels;
- this.file_ = file;
- this.rollPeriod_ = attrs.rollPeriod || DateGraph.DEFAULT_ROLL_PERIOD;
- this.previousVerticalX_ = -1;
- this.width_ = parseInt(div.style.width, 10);
- this.height_ = parseInt(div.style.height, 10);
- this.errorBars_ = attrs.errorBars || false;
- this.fractions_ = attrs.fractions || false;
- this.strokeWidth_ = attrs.strokeWidth || DateGraph.DEFAULT_STROKE_WIDTH;
- this.dateWindow_ = attrs.dateWindow || null;
- this.valueRange_ = attrs.valueRange || null;
- this.labelsSeparateLines = attrs.labelsSeparateLines || false;
- this.labelsDiv_ = attrs.labelsDiv || null;
- this.labelsKMB_ = attrs.labelsKMB || false;
- this.minTickSize_ = attrs.minTickSize || 0;
- this.xValueParser_ = attrs.xValueParser || DateGraph.prototype.dateParser;
- this.xValueFormatter_ = attrs.xValueFormatter ||
- DateGraph.prototype.dateString_;
- this.xTicker_ = attrs.xTicker || DateGraph.prototype.dateTicker;
- this.sigma_ = attrs.sigma || 2.0;
- this.wilsonInterval_ = attrs.wilsonInterval || true;
- this.customBars_ = attrs.customBars || false;
- this.attrs_ = attrs;
-
- // Make a note of whether labels will be pulled from the CSV file.
- this.labelsFromCSV_ = (this.labels_ == null);
- if (this.labels_ == null)
- this.labels_ = [];
-
- // Prototype of the callback is "void clickCallback(event, date)"
- this.clickCallback_ = attrs.clickCallback || null;
-
- // Prototype of zoom callback is "void dragCallback(minDate, maxDate)"
- this.zoomCallback_ = attrs.zoomCallback || null;
-
- // Create the containing DIV and other interactive elements
- this.createInterface_();
-
- // Create the PlotKit grapher
- this.layoutOptions_ = { 'errorBars': (this.errorBars_ || this.customBars_),
- 'xOriginIsZero': false };
- MochiKit.Base.update(this.layoutOptions_, attrs);
- this.setColors_(attrs);
-
- this.layout_ = new DateGraphLayout(this.layoutOptions_);
-
- this.renderOptions_ = { colorScheme: this.colors_,
- strokeColor: null,
- strokeWidth: this.strokeWidth_,
- axisLabelFontSize: 14,
- axisLineWidth: DateGraph.AXIS_LINE_WIDTH };
- MochiKit.Base.update(this.renderOptions_, attrs);
- this.plotter_ = new DateGraphCanvasRenderer(this.hidden_, this.layout_,
- this.renderOptions_);
-
- this.createStatusMessage_();
- this.createRollInterface_();
- this.createDragInterface_();
-
- connect(window, 'onload', this, function(e) { this.start_(); });
-};
-
-/**
- * Returns the current rolling period, as set by the user or an option.
- * @return {Number} The number of days in the rolling window
- */
-DateGraph.prototype.rollPeriod = function() {
- return this.rollPeriod_;
-}
-
-/**
- * Generates interface elements for the DateGraph: a containing div, a div to
- * display the current point, and a textbox to adjust the rolling average
- * period.
- * @private
- */
-DateGraph.prototype.createInterface_ = function() {
- // Create the all-enclosing graph div
- var enclosing = this.maindiv_;
-
- this.graphDiv = MochiKit.DOM.DIV( { style: { 'width': this.width_ + "px",
- 'height': this.height_ + "px"
- }});
- appendChildNodes(enclosing, this.graphDiv);
-
- // Create the canvas to store
- var canvas = MochiKit.DOM.CANVAS;
- this.canvas_ = canvas( { style: { 'position': 'absolute' },
- width: this.width_,
- height: this.height_});
- appendChildNodes(this.graphDiv, this.canvas_);
-
- this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
- connect(this.hidden_, 'onmousemove', this, function(e) { this.mouseMove_(e) });
- connect(this.hidden_, 'onmouseout', this, function(e) { this.mouseOut_(e) });
-}
-
-/**
- * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
- * this particular canvas. All DateGraph work is done on this.canvas_.
- * @param {Object} canvas The DateGraph canvas to over which to overlay the plot
- * @return {Object} The newly-created canvas
- * @private
- */
-DateGraph.prototype.createPlotKitCanvas_ = function(canvas) {
- var h = document.createElement("canvas");
- h.style.position = "absolute";
- h.style.top = canvas.style.top;
- h.style.left = canvas.style.left;
- h.width = this.width_;
- h.height = this.height_;
- MochiKit.DOM.appendChildNodes(this.graphDiv, h);
- return h;
-};
-
-/**
- * Generate a set of distinct colors for the data series. This is done with a
- * color wheel. Saturation/Value are customizable, and the hue is
- * equally-spaced around the color wheel. If a custom set of colors is
- * specified, that is used instead.
- * @param {Object} attrs Various attributes, e.g. saturation and value
- * @private
- */
-DateGraph.prototype.setColors_ = function(attrs) {
- var num = this.labels_.length;
- this.colors_ = [];
- if (!attrs.colors) {
- var sat = attrs.colorSaturation || 1.0;
- var val = attrs.colorValue || 0.5;
- for (var i = 1; i <= num; i++) {
- var hue = (1.0*i/(1+num));
- this.colors_.push( MochiKit.Color.Color.fromHSV(hue, sat, val) );
- }
- } else {
- for (var i = 0; i < num; i++) {
- var colorStr = attrs.colors[i % attrs.colors.length];
- this.colors_.push( MochiKit.Color.Color.fromString(colorStr) );
- }
- }
-}
-
-/**
- * Create the div that contains information on the selected point(s)
- * This goes in the top right of the canvas, unless an external div has already
- * been specified.
- * @private
- */
-DateGraph.prototype.createStatusMessage_ = function(){
- if (!this.labelsDiv_) {
- var divWidth = 250;
- var messagestyle = { "style": {
- "position": "absolute",
- "fontSize": "14px",
- "zIndex": 10,
- "width": divWidth + "px",
- "top": "0px",
- "left": this.width_ - divWidth + "px",
- "background": "white",
- "textAlign": "left",
- "overflow": "hidden"}};
- this.labelsDiv_ = MochiKit.DOM.DIV(messagestyle);
- MochiKit.DOM.appendChildNodes(this.graphDiv, this.labelsDiv_);
- }
-};
-
-/**
- * Create the text box to adjust the averaging period
- * @return {Object} The newly-created text box
- * @private
- */
-DateGraph.prototype.createRollInterface_ = function() {
- var padding = this.plotter_.options.padding;
- var textAttr = { "type": "text",
- "size": "2",
- "value": this.rollPeriod_,
- "style": { "position": "absolute",
- "zIndex": 10,
- "top": (this.height_ - 25 - padding.bottom) + "px",
- "left": (padding.left+1) + "px" }
- };
- var roller = MochiKit.DOM.INPUT(textAttr);
- var pa = this.graphDiv;
- MochiKit.DOM.appendChildNodes(pa, roller);
- connect(roller, 'onchange', this,
- function() { this.adjustRoll(roller.value); });
- return roller;
-}
-
-/**
- * Set up all the mouse handlers needed to capture dragging behavior for zoom
- * events. Uses MochiKit.Signal to attach all the event handlers.
- * @private
- */
-DateGraph.prototype.createDragInterface_ = function() {
- var self = this;
-
- // Tracks whether the mouse is down right now
- var mouseDown = false;
- var dragStartX = null;
- var dragStartY = null;
- var dragEndX = null;
- var dragEndY = null;
- var prevEndX = null;
-
- // Utility function to convert page-wide coordinates to canvas coords
- var px = PlotKit.Base.findPosX(this.canvas_);
- var py = PlotKit.Base.findPosY(this.canvas_);
- var getX = function(e) { return e.mouse().page.x - px };
- var getY = function(e) { return e.mouse().page.y - py };
-
- // Draw zoom rectangles when the mouse is down and the user moves around
- connect(this.hidden_, 'onmousemove', function(event) {
- if (mouseDown) {
- dragEndX = getX(event);
- dragEndY = getY(event);
-
- self.drawZoomRect_(dragStartX, dragEndX, prevEndX);
- prevEndX = dragEndX;
- }
- });
-
- // Track the beginning of drag events
- connect(this.hidden_, 'onmousedown', function(event) {
- mouseDown = true;
- dragStartX = getX(event);
- dragStartY = getY(event);
- });
-
- // If the user releases the mouse button during a drag, but not over the
- // canvas, then it doesn't count as a zooming action.
- connect(document, 'onmouseup', this, function(event) {
- if (mouseDown) {
- mouseDown = false;
- dragStartX = null;
- dragStartY = null;
- }
- });
-
- // Temporarily cancel the dragging event when the mouse leaves the graph
- connect(this.hidden_, 'onmouseout', this, function(event) {
- if (mouseDown) {
- dragEndX = null;
- dragEndY = null;
- }
- });
-
- // If the mouse is released on the canvas during a drag event, then it's a
- // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
- connect(this.hidden_, 'onmouseup', this, function(event) {
- if (mouseDown) {
- mouseDown = false;
- dragEndX = getX(event);
- dragEndY = getY(event);
- var regionWidth = Math.abs(dragEndX - dragStartX);
- var regionHeight = Math.abs(dragEndY - dragStartY);
-
- if (regionWidth < 2 && regionHeight < 2 &&
- self.clickCallback_ != null &&
- self.lastx_ != undefined) {
- self.clickCallback_(event, new Date(self.lastx_));
- }
-
- if (regionWidth >= 10) {
- self.doZoom_(Math.min(dragStartX, dragEndX),
- Math.max(dragStartX, dragEndX));
- } else {
- self.canvas_.getContext("2d").clearRect(0, 0,
- self.canvas_.width,
- self.canvas_.height);
- }
-
- dragStartX = null;
- dragStartY = null;
- }
- });
-
- // Double-clicking zooms back out
- connect(this.hidden_, 'ondblclick', this, function(event) {
- self.dateWindow_ = null;
- self.drawGraph_(self.rawData_);
- var minDate = self.rawData_[0][0];
- var maxDate = self.rawData_[self.rawData_.length - 1][0];
- self.zoomCallback_(minDate, maxDate);
- });
-};
-
-/**
- * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
- * up any previous zoom rectangles that were drawn. This could be optimized to
- * avoid extra redrawing, but it's tricky to avoid interactions with the status
- * dots.
- * @param {Number} startX The X position where the drag started, in canvas
- * coordinates.
- * @param {Number} endX The current X position of the drag, in canvas coords.
- * @param {Number} prevEndX The value of endX on the previous call to this
- * function. Used to avoid excess redrawing
- * @private
- */
-DateGraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
- var ctx = this.canvas_.getContext("2d");
-
- // Clean up from the previous rect if necessary
- if (prevEndX) {
- ctx.clearRect(Math.min(startX, prevEndX), 0,
- Math.abs(startX - prevEndX), this.height_);
- }
-
- // Draw a light-grey rectangle to show the new viewing area
- if (endX && startX) {
- ctx.fillStyle = "rgba(128,128,128,0.33)";
- ctx.fillRect(Math.min(startX, endX), 0,
- Math.abs(endX - startX), this.height_);
- }
-};
-
-/**
- * Zoom to something containing [lowX, highX]. These are pixel coordinates
- * in the canvas. The exact zoom window may be slightly larger if there are no
- * data points near lowX or highX. This function redraws the graph.
- * @param {Number} lowX The leftmost pixel value that should be visible.
- * @param {Number} highX The rightmost pixel value that should be visible.
- * @private
- */
-DateGraph.prototype.doZoom_ = function(lowX, highX) {
- // Find the earliest and latest dates contained in this canvasx range.
- var points = this.layout_.points;
- var minDate = null;
- var maxDate = null;
- // Find the nearest [minDate, maxDate] that contains [lowX, highX]
- for (var i = 0; i < points.length; i++) {
- var cx = points[i].canvasx;
- var x = points[i].xval;
- if (cx < lowX && (minDate == null || x > minDate)) minDate = x;
- if (cx > highX && (maxDate == null || x < maxDate)) maxDate = x;
- }
- // Use the extremes if either is missing
- if (minDate == null) minDate = points[0].xval;
- if (maxDate == null) maxDate = points[points.length-1].xval;
-
- this.dateWindow_ = [minDate, maxDate];
- this.drawGraph_(this.rawData_);
- this.zoomCallback_(minDate, maxDate);
-};
-
-/**
- * When the mouse moves in the canvas, display information about a nearby data
- * point and draw dots over those points in the data series. This function
- * takes care of cleanup of previously-drawn dots.
- * @param {Object} event The mousemove event from the browser.
- * @private
- */
-DateGraph.prototype.mouseMove_ = function(event) {
- var canvasx = event.mouse().page.x - PlotKit.Base.findPosX(this.hidden_);
- var points = this.layout_.points;
-
- var lastx = -1;
- var lasty = -1;
-
- // Loop through all the points and find the date nearest to our current
- // location.
- var minDist = 1e+100;
- var idx = -1;
- for (var i = 0; i < points.length; i++) {
- var dist = Math.abs(points[i].canvasx - canvasx);
- if (dist > minDist) break;
- minDist = dist;
- idx = i;
- }
- if (idx >= 0) lastx = points[idx].xval;
- // Check that you can really highlight the last day's data
- if (canvasx > points[points.length-1].canvasx)
- lastx = points[points.length-1].xval;
-
- // Extract the points we've selected
- var selPoints = [];
- for (var i = 0; i < points.length; i++) {
- if (points[i].xval == lastx) {
- selPoints.push(points[i]);
- }
- }
-
- // Clear the previously drawn vertical, if there is one
- var circleSize = 3;
- var ctx = this.canvas_.getContext("2d");
- if (this.previousVerticalX_ >= 0) {
- var px = this.previousVerticalX_;
- ctx.clearRect(px - circleSize - 1, 0, 2 * circleSize + 2, this.height_);
- }
-
- if (selPoints.length > 0) {
- var canvasx = selPoints[0].canvasx;
-
- // Set the status message to indicate the selected point(s)
- var replace = this.xValueFormatter_(lastx) + ":";
- var clen = this.colors_.length;
- for (var i = 0; i < selPoints.length; i++) {
- if (this.labelsSeparateLines) {
- replace += "
";
- }
- var point = selPoints[i];
- replace += " "
- + point.name + ":"
- + this.round_(point.yval, 2);
- }
- this.labelsDiv_.innerHTML = replace;
-
- // Save last x position for callbacks.
- this.lastx_ = lastx;
-
- // Draw colored circles over the center of each selected point
- ctx.save()
- for (var i = 0; i < selPoints.length; i++) {
- ctx.beginPath();
- ctx.fillStyle = this.colors_[i%clen].toRGBString();
- ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false);
- ctx.fill();
- }
- ctx.restore();
-
- this.previousVerticalX_ = canvasx;
- }
-};
-
-/**
- * The mouse has left the canvas. Clear out whatever artifacts remain
- * @param {Object} event the mouseout event from the browser.
- * @private
- */
-DateGraph.prototype.mouseOut_ = function(event) {
- // Get rid of the overlay data
- var ctx = this.canvas_.getContext("2d");
- ctx.clearRect(0, 0, this.width_, this.height_);
- this.labelsDiv_.innerHTML = "";
-};
-
-/**
- * Convert a JS date (millis since epoch) to YYYY/MM/DD
- * @param {Number} date The JavaScript date (ms since epoch)
- * @return {String} A date of the form "YYYY/MM/DD"
- * @private
- */
-DateGraph.prototype.dateString_ = function(date) {
- var d = new Date(date);
-
- // Get the year:
- var year = "" + d.getFullYear();
- // Get a 0 padded month string
- var month = "" + (d.getMonth() + 1); //months are 0-offset, sigh
- if (month.length < 2) month = "0" + month;
- // Get a 0 padded day string
- var day = "" + d.getDate();
- if (day.length < 2) day = "0" + day;
-
- return year + "/" + month + "/" + day;
-};
-
-/**
- * Round a number to the specified number of digits past the decimal point.
- * @param {Number} num The number to round
- * @param {Number} places The number of decimals to which to round
- * @return {Number} The rounded number
- * @private
- */
-DateGraph.prototype.round_ = function(num, places) {
- var shift = Math.pow(10, places);
- return Math.round(num * shift)/shift;
-};
-
-/**
- * Fires when there's data available to be graphed.
- * @param {String} data Raw CSV data to be plotted
- * @private
- */
-DateGraph.prototype.loadedEvent_ = function(data) {
- this.rawData_ = this.parseCSV_(data);
- this.drawGraph_(this.rawData_);
-};
-
-DateGraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
- "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-DateGraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
-
-/**
- * Add ticks on the x-axis representing years, months, quarters, weeks, or days
- * @private
- */
-DateGraph.prototype.addXTicks_ = function() {
- // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
- var startDate, endDate;
- if (this.dateWindow_) {
- startDate = this.dateWindow_[0];
- endDate = this.dateWindow_[1];
- } else {
- startDate = this.rawData_[0][0];
- endDate = this.rawData_[this.rawData_.length - 1][0];
- }
-
- var xTicks = this.xTicker_(startDate, endDate);
- this.layout_.updateOptions({xTicks: xTicks});
-}
-
-/**
- * Add ticks to the x-axis based on a date range.
- * @param {Number} startDate Start of the date window (millis since epoch)
- * @param {Number} endDate End of the date window (millis since epoch)
- * @return {Array.