1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://www.danvk.org/dygraphs
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
97 // TODO(danvk): default padding
100 xValueFormatter
: Dygraph
.dateString_
,
101 xValueParser
: Dygraph
.dateParser
,
102 xTicker
: Dygraph
.dateTicker
,
107 wilsonInterval
: true, // only relevant if fractions is true
111 // Various logging levels.
117 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
118 // Labels is no longer a constructor parameter, since it's typically set
119 // directly from the data source. It also conains a name for the x-axis,
120 // which the previous constructor form did not.
121 if (labels
!= null) {
122 var new_labels
= ["Date"];
123 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
124 MochiKit
.Base
.update(attrs
, { 'labels': new_labels
});
126 this.__init__(div
, file
, attrs
);
130 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
131 * and interaction <canvas> inside of it. See the constructor for details
133 * @param {String | Function} file Source data
134 * @param {Array.<String>} labels Names of the data series
135 * @param {Object} attrs Miscellaneous other options
138 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
139 // Support two-argument constructor
140 if (attrs
== null) { attrs
= {}; }
142 // Copy the important bits into the object
143 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
146 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
147 this.previousVerticalX_
= -1;
148 this.fractions_
= attrs
.fractions
|| false;
149 this.dateWindow_
= attrs
.dateWindow
|| null;
150 this.valueRange_
= attrs
.valueRange
|| null;
151 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
152 this.customBars_
= attrs
.customBars
|| false;
154 // If the div isn't already sized then give it a default size.
155 if (div
.style
.width
== '') {
156 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
158 if (div
.style
.height
== '') {
159 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
161 this.width_
= parseInt(div
.style
.width
, 10);
162 this.height_
= parseInt(div
.style
.height
, 10);
164 // Dygraphs has many options, some of which interact with one another.
165 // To keep track of everything, we maintain two sets of options:
167 // this.user_attrs_ only options explicitly set by the user.
168 // this.attrs_ defaults, options derived from user_attrs_, data.
170 // Options are then accessed this.attr_('attr'), which first looks at
171 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
172 // defaults without overriding behavior that the user specifically asks for.
173 this.user_attrs_
= {};
174 MochiKit
.Base
.update(this.user_attrs_
, attrs
);
177 MochiKit
.Base
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
179 // Make a note of whether labels will be pulled from the CSV file.
180 this.labelsFromCSV_
= (this.attr_("labels") == null);
182 // Create the containing DIV and other interactive elements
183 this.createInterface_();
185 // Create the PlotKit grapher
186 // TODO(danvk): why does the Layout need its own set of options?
187 this.layoutOptions_
= { 'errorBars': (this.attr_("errorBars") ||
189 'xOriginIsZero': false };
190 MochiKit
.Base
.update(this.layoutOptions_
, this.attrs_
);
191 MochiKit
.Base
.update(this.layoutOptions_
, this.user_attrs_
);
193 this.layout_
= new DygraphLayout(this.layoutOptions_
);
195 // TODO(danvk): why does the Renderer need its own set of options?
196 this.renderOptions_
= { colorScheme
: this.colors_
,
198 strokeWidth
: this.attr_("strokeWidth"),
199 axisLabelFontSize
: 14,
200 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
201 MochiKit
.Base
.update(this.renderOptions_
, this.attrs_
);
202 MochiKit
.Base
.update(this.renderOptions_
, this.user_attrs_
);
203 this.plotter_
= new DygraphCanvasRenderer(this.hidden_
, this.layout_
,
204 this.renderOptions_
);
206 this.createStatusMessage_();
207 this.createRollInterface_();
208 this.createDragInterface_();
210 // connect(window, 'onload', this, function(e) { this.start_(); });
214 Dygraph
.prototype.attr_
= function(name
) {
215 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
216 return this.user_attrs_
[name
];
217 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
218 return this.attrs_
[name
];
224 // TODO(danvk): any way I can get the line numbers to be this.warn call?
225 Dygraph
.prototype.log
= function(severity
, message
) {
226 if (typeof(console
) != 'undefined') {
229 console
.debug('dygraphs: ' + message
);
232 console
.info('dygraphs: ' + message
);
234 case Dygraph
.WARNING
:
235 console
.warn('dygraphs: ' + message
);
238 console
.error('dygraphs: ' + message
);
243 Dygraph
.prototype.info
= function(message
) {
244 this.log(Dygraph
.INFO
, message
);
246 Dygraph
.prototype.warn
= function(message
) {
247 this.log(Dygraph
.WARNING
, message
);
249 Dygraph
.prototype.error
= function(message
) {
250 this.log(Dygraph
.ERROR
, message
);
254 * Returns the current rolling period, as set by the user or an option.
255 * @return {Number} The number of days in the rolling window
257 Dygraph
.prototype.rollPeriod
= function() {
258 return this.rollPeriod_
;
262 * Generates interface elements for the Dygraph: a containing div, a div to
263 * display the current point, and a textbox to adjust the rolling average
267 Dygraph
.prototype.createInterface_
= function() {
268 // Create the all-enclosing graph div
269 var enclosing
= this.maindiv_
;
271 this.graphDiv
= MochiKit
.DOM
.DIV( { style
: { 'width': this.width_
+ "px",
272 'height': this.height_
+ "px"
274 appendChildNodes(enclosing
, this.graphDiv
);
276 // Create the canvas to store
277 var canvas
= MochiKit
.DOM
.CANVAS
;
278 this.canvas_
= canvas( { style
: { 'position': 'absolute' },
280 height
: this.height_
});
281 appendChildNodes(this.graphDiv
, this.canvas_
);
283 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
284 connect(this.hidden_
, 'onmousemove', this, function(e
) { this.mouseMove_(e
) });
285 connect(this.hidden_
, 'onmouseout', this, function(e
) { this.mouseOut_(e
) });
289 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
290 * this particular canvas. All Dygraph work is done on this.canvas_.
291 * @param {Object} canvas The Dygraph canvas to over which to overlay the plot
292 * @return {Object} The newly-created canvas
295 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
296 var h
= document
.createElement("canvas");
297 h
.style
.position
= "absolute";
298 h
.style
.top
= canvas
.style
.top
;
299 h
.style
.left
= canvas
.style
.left
;
300 h
.width
= this.width_
;
301 h
.height
= this.height_
;
302 MochiKit
.DOM
.appendChildNodes(this.graphDiv
, h
);
307 * Generate a set of distinct colors for the data series. This is done with a
308 * color wheel. Saturation/Value are customizable, and the hue is
309 * equally-spaced around the color wheel. If a custom set of colors is
310 * specified, that is used instead.
313 Dygraph
.prototype.setColors_
= function() {
314 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
315 // away with this.renderOptions_.
316 var num
= this.attr_("labels").length
- 1;
318 var colors
= this.attr_('colors');
320 var sat
= this.attr_('colorSaturation') || 1.0;
321 var val
= this.attr_('colorValue') || 0.5;
322 for (var i
= 1; i
<= num
; i
++) {
323 var hue
= (1.0*i
/(1+num
));
324 this.colors_
.push( MochiKit
.Color
.Color
.fromHSV(hue
, sat
, val
) );
327 for (var i
= 0; i
< num
; i
++) {
328 var colorStr
= colors
[i
% colors
.length
];
329 this.colors_
.push( MochiKit
.Color
.Color
.fromString(colorStr
) );
333 // TODO(danvk): update this w/r
/t/ the
new options system
.
334 this.renderOptions_
.colorScheme
= this.colors_
;
335 MochiKit
.Base
.update(this.plotter_
.options
, this.renderOptions_
);
336 MochiKit
.Base
.update(this.layoutOptions_
, this.user_attrs_
);
337 MochiKit
.Base
.update(this.layoutOptions_
, this.attrs_
);
341 * Create the div that contains information on the selected point(s)
342 * This goes in the top right of the canvas, unless an external div has already
346 Dygraph
.prototype.createStatusMessage_
= function(){
347 if (!this.attr_("labelsDiv")) {
348 var divWidth
= this.attr_('labelsDivWidth');
349 var messagestyle
= { "style": {
350 "position": "absolute",
353 "width": divWidth
+ "px",
355 "left": this.width_
- divWidth
+ "px",
356 "background": "white",
358 "overflow": "hidden"}};
359 MochiKit
.Base
.update(messagestyle
["style"], this.attr_('labelsDivStyles'));
360 var div
= MochiKit
.DOM
.DIV(messagestyle
);
361 MochiKit
.DOM
.appendChildNodes(this.graphDiv
, div
);
362 this.attrs_
.labelsDiv
= div
;
367 * Create the text box to adjust the averaging period
368 * @return {Object} The newly-created text box
371 Dygraph
.prototype.createRollInterface_
= function() {
372 var padding
= this.plotter_
.options
.padding
;
373 var display
= this.attr_('showRoller') ? "block" : "none";
374 var textAttr
= { "type": "text",
376 "value": this.rollPeriod_
,
377 "style": { "position": "absolute",
379 "top": (this.height_
- 25 - padding
.bottom
) + "px",
380 "left": (padding
.left
+1) + "px",
383 var roller
= MochiKit
.DOM
.INPUT(textAttr
);
384 var pa
= this.graphDiv
;
385 MochiKit
.DOM
.appendChildNodes(pa
, roller
);
386 connect(roller
, 'onchange', this,
387 function() { this.adjustRoll(roller
.value
); });
392 * Set up all the mouse handlers needed to capture dragging behavior for zoom
393 * events. Uses MochiKit.Signal to attach all the event handlers.
396 Dygraph
.prototype.createDragInterface_
= function() {
399 // Tracks whether the mouse is down right now
400 var mouseDown
= false;
401 var dragStartX
= null;
402 var dragStartY
= null;
407 // Utility function to convert page-wide coordinates to canvas coords
410 var getX
= function(e
) { return e
.mouse().page
.x
- px
};
411 var getY
= function(e
) { return e
.mouse().page
.y
- py
};
413 // Draw zoom rectangles when the mouse is down and the user moves around
414 connect(this.hidden_
, 'onmousemove', function(event
) {
416 dragEndX
= getX(event
);
417 dragEndY
= getY(event
);
419 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
424 // Track the beginning of drag events
425 connect(this.hidden_
, 'onmousedown', function(event
) {
427 px
= PlotKit
.Base
.findPosX(self
.canvas_
);
428 py
= PlotKit
.Base
.findPosY(self
.canvas_
);
429 dragStartX
= getX(event
);
430 dragStartY
= getY(event
);
433 // If the user releases the mouse button during a drag, but not over the
434 // canvas, then it doesn't count as a zooming action.
435 connect(document
, 'onmouseup', this, function(event
) {
443 // Temporarily cancel the dragging event when the mouse leaves the graph
444 connect(this.hidden_
, 'onmouseout', this, function(event
) {
451 // If the mouse is released on the canvas during a drag event, then it's a
452 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
453 connect(this.hidden_
, 'onmouseup', this, function(event
) {
456 dragEndX
= getX(event
);
457 dragEndY
= getY(event
);
458 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
459 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
461 if (regionWidth
< 2 && regionHeight
< 2 &&
462 self
.attr_('clickCallback') != null &&
463 self
.lastx_
!= undefined
) {
464 // TODO(danvk): pass along more info about the point.
465 self
.attr_('clickCallback')(event
, new Date(self
.lastx_
));
468 if (regionWidth
>= 10) {
469 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
470 Math
.max(dragStartX
, dragEndX
));
472 self
.canvas_
.getContext("2d").clearRect(0, 0,
474 self
.canvas_
.height
);
482 // Double-clicking zooms back out
483 connect(this.hidden_
, 'ondblclick', this, function(event
) {
484 self
.dateWindow_
= null;
485 self
.drawGraph_(self
.rawData_
);
486 var minDate
= self
.rawData_
[0][0];
487 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
488 if (self
.attr_("zoomCallback")) {
489 self
.attr_("zoomCallback")(minDate
, maxDate
);
495 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
496 * up any previous zoom rectangles that were drawn. This could be optimized to
497 * avoid extra redrawing, but it's tricky to avoid interactions with the status
499 * @param {Number} startX The X position where the drag started, in canvas
501 * @param {Number} endX The current X position of the drag, in canvas coords.
502 * @param {Number} prevEndX The value of endX on the previous call to this
503 * function. Used to avoid excess redrawing
506 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
507 var ctx
= this.canvas_
.getContext("2d");
509 // Clean up from the previous rect if necessary
511 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
512 Math
.abs(startX
- prevEndX
), this.height_
);
515 // Draw a light-grey rectangle to show the new viewing area
516 if (endX
&& startX
) {
517 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
518 ctx
.fillRect(Math
.min(startX
, endX
), 0,
519 Math
.abs(endX
- startX
), this.height_
);
524 * Zoom to something containing [lowX, highX]. These are pixel coordinates
525 * in the canvas. The exact zoom window may be slightly larger if there are no
526 * data points near lowX or highX. This function redraws the graph.
527 * @param {Number} lowX The leftmost pixel value that should be visible.
528 * @param {Number} highX The rightmost pixel value that should be visible.
531 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
532 // Find the earliest and latest dates contained in this canvasx range.
533 var points
= this.layout_
.points
;
536 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
537 for (var i
= 0; i
< points
.length
; i
++) {
538 var cx
= points
[i
].canvasx
;
539 var x
= points
[i
].xval
;
540 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
541 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
543 // Use the extremes if either is missing
544 if (minDate
== null) minDate
= points
[0].xval
;
545 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
547 this.dateWindow_
= [minDate
, maxDate
];
548 this.drawGraph_(this.rawData_
);
549 if (this.attr_("zoomCallback")) {
550 this.attr_("zoomCallback")(minDate
, maxDate
);
555 * When the mouse moves in the canvas, display information about a nearby data
556 * point and draw dots over those points in the data series. This function
557 * takes care of cleanup of previously-drawn dots.
558 * @param {Object} event The mousemove event from the browser.
561 Dygraph
.prototype.mouseMove_
= function(event
) {
562 var canvasx
= event
.mouse().page
.x
- PlotKit
.Base
.findPosX(this.hidden_
);
563 var points
= this.layout_
.points
;
568 // Loop through all the points and find the date nearest to our current
570 var minDist
= 1e+100;
572 for (var i
= 0; i
< points
.length
; i
++) {
573 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
574 if (dist
> minDist
) break;
578 if (idx
>= 0) lastx
= points
[idx
].xval
;
579 // Check that you can really highlight the last day's data
580 if (canvasx
> points
[points
.length
-1].canvasx
)
581 lastx
= points
[points
.length
-1].xval
;
583 // Extract the points we've selected
585 for (var i
= 0; i
< points
.length
; i
++) {
586 if (points
[i
].xval
== lastx
) {
587 selPoints
.push(points
[i
]);
591 // Clear the previously drawn vertical, if there is one
592 var circleSize
= this.attr_('highlightCircleSize');
593 var ctx
= this.canvas_
.getContext("2d");
594 if (this.previousVerticalX_
>= 0) {
595 var px
= this.previousVerticalX_
;
596 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
599 if (selPoints
.length
> 0) {
600 var canvasx
= selPoints
[0].canvasx
;
602 // Set the status message to indicate the selected point(s)
603 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
604 var clen
= this.colors_
.length
;
605 for (var i
= 0; i
< selPoints
.length
; i
++) {
606 if (this.attr_("labelsSeparateLines")) {
609 var point
= selPoints
[i
];
610 replace
+= " <b><font color='" + this.colors_
[i
%clen
].toHexString() + "'>"
611 + point
.name
+ "</font></b>:"
612 + this.round_(point
.yval
, 2);
614 this.attr_("labelsDiv").innerHTML
= replace
;
616 // Save last x position for callbacks.
619 // Draw colored circles over the center of each selected point
621 for (var i
= 0; i
< selPoints
.length
; i
++) {
623 ctx
.fillStyle
= this.colors_
[i
%clen
].toRGBString();
624 ctx
.arc(canvasx
, selPoints
[i
%clen
].canvasy
, circleSize
, 0, 360, false);
629 this.previousVerticalX_
= canvasx
;
634 * The mouse has left the canvas. Clear out whatever artifacts remain
635 * @param {Object} event the mouseout event from the browser.
638 Dygraph
.prototype.mouseOut_
= function(event
) {
639 // Get rid of the overlay data
640 var ctx
= this.canvas_
.getContext("2d");
641 ctx
.clearRect(0, 0, this.width_
, this.height_
);
642 this.attr_("labelsDiv").innerHTML
= "";
645 Dygraph
.zeropad
= function(x
) {
646 if (x
< 10) return "0" + x
; else return "" + x
;
650 * Return a string version of the hours, minutes and seconds portion of a date.
651 * @param {Number} date The JavaScript date (ms since epoch)
652 * @return {String} A time of the form "HH:MM:SS"
655 Dygraph
.prototype.hmsString_
= function(date
) {
656 var zeropad
= Dygraph
.zeropad
;
657 var d
= new Date(date
);
658 if (d
.getSeconds()) {
659 return zeropad(d
.getHours()) + ":" +
660 zeropad(d
.getMinutes()) + ":" +
661 zeropad(d
.getSeconds());
662 } else if (d
.getMinutes()) {
663 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
665 return zeropad(d
.getHours());
670 * Convert a JS date (millis since epoch) to YYYY/MM/DD
671 * @param {Number} date The JavaScript date (ms since epoch)
672 * @return {String} A date of the form "YYYY/MM/DD"
674 * TODO(danvk): why is this part of the prototype?
676 Dygraph
.dateString_
= function(date
, self
) {
677 var zeropad
= Dygraph
.zeropad
;
678 var d
= new Date(date
);
681 var year
= "" + d
.getFullYear();
682 // Get a 0 padded month string
683 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
684 // Get a 0 padded day string
685 var day
= zeropad(d
.getDate());
688 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
689 if (frac
) ret
= " " + self
.hmsString_(date
);
691 return year
+ "/" + month + "/" + day
+ ret
;
695 * Round a number to the specified number of digits past the decimal point.
696 * @param {Number} num The number to round
697 * @param {Number} places The number of decimals to which to round
698 * @return {Number} The rounded number
701 Dygraph
.prototype.round_
= function(num
, places
) {
702 var shift
= Math
.pow(10, places
);
703 return Math
.round(num
* shift
)/shift
;
707 * Fires when there's data available to be graphed.
708 * @param {String} data Raw CSV data to be plotted
711 Dygraph
.prototype.loadedEvent_
= function(data
) {
712 this.rawData_
= this.parseCSV_(data
);
713 this.drawGraph_(this.rawData_
);
716 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
717 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
718 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
721 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
724 Dygraph
.prototype.addXTicks_
= function() {
725 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
726 var startDate
, endDate
;
727 if (this.dateWindow_
) {
728 startDate
= this.dateWindow_
[0];
729 endDate
= this.dateWindow_
[1];
731 startDate
= this.rawData_
[0][0];
732 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
735 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
736 this.layout_
.updateOptions({xTicks
: xTicks
});
739 // Time granularity enumeration
740 Dygraph
.SECONDLY
= 0;
741 Dygraph
.TEN_SECONDLY
= 1;
742 Dygraph
.THIRTY_SECONDLY
= 2;
743 Dygraph
.MINUTELY
= 3;
744 Dygraph
.TEN_MINUTELY
= 4;
745 Dygraph
.THIRTY_MINUTELY
= 5;
747 Dygraph
.SIX_HOURLY
= 7;
750 Dygraph
.MONTHLY
= 10;
751 Dygraph
.QUARTERLY
= 11;
752 Dygraph
.BIANNUAL
= 12;
754 Dygraph
.DECADAL
= 14;
755 Dygraph
.NUM_GRANULARITIES
= 15;
757 Dygraph
.SHORT_SPACINGS
= [];
758 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
759 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
760 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
761 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
762 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
763 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
764 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
765 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600 * 6;
766 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
767 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
771 // If we used this time granularity, how many ticks would there be?
772 // This is only an approximation, but it's generally good enough.
774 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
775 if (granularity
< Dygraph
.MONTHLY
) {
776 // Generate one tick mark for every fixed interval of time.
777 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
778 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
780 var year_mod
= 1; // e.g. to only print one point every 10 years.
782 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
783 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
784 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
785 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
787 var msInYear
= 365.2524 * 24 * 3600 * 1000;
788 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
789 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
795 // Construct an x-axis of nicely-formatted times on meaningful boundaries
796 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
798 // Returns an array containing {v: millis, label: label} dictionaries.
800 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
802 if (granularity
< Dygraph
.MONTHLY
) {
803 // Generate one tick mark for every fixed interval of time.
804 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
805 var format
= '%d%b'; // e.g. "1 Jan"
806 // TODO(danvk): be smarter about making sure this really hits a "nice" time.
807 if (granularity
< Dygraph
.HOURLY
) {
808 start_time
= spacing
* Math
.floor(0.5 + start_time
/ spacing
);
810 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
812 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
813 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
814 // the extra hour covers DST problems.
815 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
817 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
821 // Display a tick mark on the first of a set of months of each year.
822 // Years get a tick mark iff y % year_mod == 0. This is useful for
823 // displaying a tick mark once every 10 years, say, on long time scales.
825 var year_mod
= 1; // e.g. to only print one point every 10 years.
827 if (granularity
== Dygraph
.MONTHLY
) {
828 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
829 } else if (granularity
== Dygraph
.QUARTERLY
) {
830 months
= [ 0, 3, 6, 9 ];
831 } else if (granularity
== Dygraph
.BIANNUAL
) {
833 } else if (granularity
== Dygraph
.ANNUAL
) {
835 } else if (granularity
== Dygraph
.DECADAL
) {
840 var start_year
= new Date(start_time
).getFullYear();
841 var end_year
= new Date(end_time
).getFullYear();
842 var zeropad
= Dygraph
.zeropad
;
843 for (var i
= start_year
; i
<= end_year
; i
++) {
844 if (i
% year_mod
!= 0) continue;
845 for (var j
= 0; j
< months
.length
; j
++) {
846 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
847 var t
= Date
.parse(date_str
);
848 if (t
< start_time
|| t
> end_time
) continue;
849 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
859 * Add ticks to the x-axis based on a date range.
860 * @param {Number} startDate Start of the date window (millis since epoch)
861 * @param {Number} endDate End of the date window (millis since epoch)
862 * @return {Array.<Object>} Array of {label, value} tuples.
865 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
867 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
868 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
869 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
876 return self
.GetXAxis(startDate
, endDate
, chosen
);
878 // TODO(danvk): signal error.
883 * Add ticks when the x axis has numbers on it (instead of dates)
884 * @param {Number} startDate Start of the date window (millis since epoch)
885 * @param {Number} endDate End of the date window (millis since epoch)
886 * @return {Array.<Object>} Array of {label, value} tuples.
889 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
891 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
892 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
893 // The first spacing greater than pixelsPerYLabel is what we use.
894 var mults
= [1, 2, 5];
895 var scale
, low_val
, high_val
, nTicks
;
896 // TODO(danvk): make it possible to set this for x- and y-axes independently.
897 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
898 for (var i
= -10; i
< 50; i
++) {
899 var base_scale
= Math
.pow(10, i
);
900 for (var j
= 0; j
< mults
.length
; j
++) {
901 scale
= base_scale
* mults
[j
];
902 low_val
= Math
.floor(minV
/ scale
) * scale
;
903 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
904 nTicks
= (high_val
- low_val
) / scale
;
905 var spacing
= self
.height_
/ nTicks
;
906 // wish I could break out of both loops at once...
907 if (spacing
> pixelsPerTick
) break;
909 if (spacing
> pixelsPerTick
) break;
912 // Construct labels for the ticks
914 for (var i
= 0; i
< nTicks
; i
++) {
915 var tickV
= low_val
+ i
* scale
;
916 var label
= self
.round_(tickV
, 2);
917 if (self
.attr_("labelsKMB")) {
919 if (tickV
>= k
*k
*k
) {
920 label
= self
.round_(tickV
/(k
*k
*k
), 1) + "B";
921 } else if (tickV
>= k
*k
) {
922 label
= self
.round_(tickV
/(k
*k
), 1) + "M";
923 } else if (tickV
>= k
) {
924 label
= self
.round_(tickV
/k
, 1) + "K";
927 ticks
.push( {label
: label
, v
: tickV
} );
933 * Adds appropriate ticks on the y-axis
934 * @param {Number} minY The minimum Y value in the data set
935 * @param {Number} maxY The maximum Y value in the data set
938 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
939 // Set the number of ticks so that the labels are human-friendly.
940 // TODO(danvk): make this an attribute as well.
941 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
942 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
947 * Update the graph with new data. Data is in the format
948 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
949 * or, if errorBars=true,
950 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
951 * @param {Array.<Object>} data The data (see above)
954 Dygraph
.prototype.drawGraph_
= function(data
) {
956 this.layout_
.removeAllDatasets();
959 // Loop over all fields in the dataset
960 for (var i
= 1; i
< data
[0].length
; i
++) {
962 for (var j
= 0; j
< data
.length
; j
++) {
963 var date
= data
[j
][0];
964 series
[j
] = [date
, data
[j
][i
]];
966 series
= this.rollingAverage(series
, this.rollPeriod_
);
968 // Prune down to the desired range, if necessary (for zooming)
969 var bars
= this.attr_("errorBars") || this.customBars_
;
970 if (this.dateWindow_
) {
971 var low
= this.dateWindow_
[0];
972 var high
= this.dateWindow_
[1];
974 for (var k
= 0; k
< series
.length
; k
++) {
975 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
976 pruned
.push(series
[k
]);
977 var y
= bars
? series
[k
][1][0] : series
[k
][1];
978 if (maxY
== null || y
> maxY
) maxY
= y
;
983 if (!this.customBars_
) {
984 for (var j
= 0; j
< series
.length
; j
++) {
985 var y
= bars
? series
[j
][1][0] : series
[j
][1];
986 if (maxY
== null || y
> maxY
) {
987 maxY
= bars
? y
+ series
[j
][1][1] : y
;
991 // With custom bars, maxY is the max of the high values.
992 for (var j
= 0; j
< series
.length
; j
++) {
993 var y
= series
[j
][1][0];
994 var high
= series
[j
][1][2];
995 if (high
> y
) y
= high
;
996 if (maxY
== null || y
> maxY
) {
1005 for (var j
=0; j
<series
.length
; j
++)
1006 vals
[j
] = [series
[j
][0],
1007 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1008 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1010 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1014 // Use some heuristics to come up with a good maxY value, unless it's been
1015 // set explicitly by the user.
1016 if (this.valueRange_
!= null) {
1017 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1019 // Add some padding and round up to an integer to be human-friendly.
1021 if (maxY
<= 0.0) maxY
= 1.0;
1022 this.addYTicks_(0, maxY
);
1027 // Tell PlotKit to use this new data and render itself
1028 this.layout_
.evaluateWithError();
1029 this.plotter_
.clear();
1030 this.plotter_
.render();
1031 this.canvas_
.getContext('2d').clearRect(0, 0,
1032 this.canvas_
.width
, this.canvas_
.height
);
1036 * Calculates the rolling average of a data set.
1037 * If originalData is [label, val], rolls the average of those.
1038 * If originalData is [label, [, it's interpreted as [value, stddev]
1039 * and the roll is returned in the same form, with appropriately reduced
1040 * stddev for each value.
1041 * Note that this is where fractional input (i.e. '5/10') is converted into
1043 * @param {Array} originalData The data in the appropriate format (see above)
1044 * @param {Number} rollPeriod The number of days over which to average the data
1046 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1047 if (originalData
.length
< 2)
1048 return originalData
;
1049 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1050 var rollingData
= [];
1051 var sigma
= this.attr_("sigma");
1053 if (this.fractions_
) {
1055 var den
= 0; // numerator/denominator
1057 for (var i
= 0; i
< originalData
.length
; i
++) {
1058 num
+= originalData
[i
][1][0];
1059 den
+= originalData
[i
][1][1];
1060 if (i
- rollPeriod
>= 0) {
1061 num
-= originalData
[i
- rollPeriod
][1][0];
1062 den
-= originalData
[i
- rollPeriod
][1][1];
1065 var date
= originalData
[i
][0];
1066 var value
= den
? num
/ den
: 0.0;
1067 if (this.attr_("errorBars")) {
1068 if (this.wilsonInterval_
) {
1069 // For more details on this confidence interval, see:
1070 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1072 var p
= value
< 0 ? 0 : value
, n
= den
;
1073 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1074 var denom
= 1 + sigma
* sigma
/ den
;
1075 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1076 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1077 rollingData
[i
] = [date
,
1078 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1080 rollingData
[i
] = [date
, [0, 0, 0]];
1083 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1084 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1087 rollingData
[i
] = [date
, mult
* value
];
1090 } else if (this.customBars_
) {
1095 for (var i
= 0; i
< originalData
.length
; i
++) {
1096 var data
= originalData
[i
][1];
1098 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1104 if (i
- rollPeriod
>= 0) {
1105 var prev
= originalData
[i
- rollPeriod
];
1111 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1112 1.0 * (mid
- low
) / count
,
1113 1.0 * (high
- mid
) / count
]];
1116 // Calculate the rolling average for the first rollPeriod - 1 points where
1117 // there is not enough data to roll over the full number of days
1118 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1119 if (!this.attr_("errorBars")){
1120 for (var i
= 0; i
< num_init_points
; i
++) {
1122 for (var j
= 0; j
< i
+ 1; j
++)
1123 sum
+= originalData
[j
][1];
1124 rollingData
[i
] = [originalData
[i
][0], sum
/ (i
+ 1)];
1126 // Calculate the rolling average for the remaining points
1127 for (var i
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1128 i
< originalData
.length
;
1131 for (var j
= i
- rollPeriod
+ 1; j
< i
+ 1; j
++)
1132 sum
+= originalData
[j
][1];
1133 rollingData
[i
] = [originalData
[i
][0], sum
/ rollPeriod
];
1136 for (var i
= 0; i
< num_init_points
; i
++) {
1139 for (var j
= 0; j
< i
+ 1; j
++) {
1140 sum
+= originalData
[j
][1][0];
1141 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1143 var stddev
= Math
.sqrt(variance
)/(i
+1);
1144 rollingData
[i
] = [originalData
[i
][0],
1145 [sum
/(i
+1), sigma
* stddev
, sigma
* stddev
]];
1147 // Calculate the rolling average for the remaining points
1148 for (var i
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1149 i
< originalData
.length
;
1153 for (var j
= i
- rollPeriod
+ 1; j
< i
+ 1; j
++) {
1154 sum
+= originalData
[j
][1][0];
1155 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1157 var stddev
= Math
.sqrt(variance
) / rollPeriod
;
1158 rollingData
[i
] = [originalData
[i
][0],
1159 [sum
/ rollPeriod
, sigma
* stddev
, sigma
* stddev
]];
1168 * Parses a date, returning the number of milliseconds since epoch. This can be
1169 * passed in as an xValueParser in the Dygraph constructor.
1170 * TODO(danvk): enumerate formats that this understands.
1171 * @param {String} A date in YYYYMMDD format.
1172 * @return {Number} Milliseconds since epoch.
1175 Dygraph
.dateParser
= function(dateStr
, self
) {
1178 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1179 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1180 while (dateStrSlashed
.search("-") != -1) {
1181 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1183 d
= Date
.parse(dateStrSlashed
);
1184 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1185 // TODO(danvk): remove support for this format. It's confusing.
1186 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1187 + "/" + dateStr
.substr(6,2);
1188 d
= Date
.parse(dateStrSlashed
);
1190 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1191 // "2009/07/12 12:34:56"
1192 d
= Date
.parse(dateStr
);
1195 if (!d
|| isNaN(d
)) {
1196 self
.error("Couldn't parse " + dateStr
+ " as a date");
1202 * Detects the type of the str (date or numeric) and sets the various
1203 * formatting attributes in this.attrs_ based on this type.
1204 * @param {String} str An x value.
1207 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1209 if (str
.indexOf('-') >= 0 ||
1210 str
.indexOf('/') >= 0 ||
1211 isNaN(parseFloat(str
))) {
1213 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1214 // TODO(danvk): remove support for this format.
1219 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1220 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1221 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1223 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1224 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1225 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1230 * Parses a string in a special csv format. We expect a csv file where each
1231 * line is a date point, and the first field in each line is the date string.
1232 * We also expect that all remaining fields represent series.
1233 * if the errorBars attribute is set, then interpret the fields as:
1234 * date, series1, stddev1, series2, stddev2, ...
1235 * @param {Array.<Object>} data See above.
1238 * @return Array.<Object> An array with one entry for each row. These entries
1239 * are an array of cells in that row. The first entry is the parsed x-value for
1240 * the row. The second, third, etc. are the y-values. These can take on one of
1241 * three forms, depending on the CSV and constructor parameters:
1243 * 2. [ value, stddev ]
1244 * 3. [ low value, center value, high value ]
1246 Dygraph
.prototype.parseCSV_
= function(data
) {
1248 var lines
= data
.split("\n");
1250 if (this.labelsFromCSV_
) {
1252 this.attrs_
.labels
= lines
[0].split(",");
1256 var defaultParserSet
= false; // attempt to auto-detect x value type
1257 var expectedCols
= this.attr_("labels").length
;
1258 for (var i
= start
; i
< lines
.length
; i
++) {
1259 var line
= lines
[i
];
1260 if (line
.length
== 0) continue; // skip blank lines
1261 var inFields
= line
.split(',');
1262 if (inFields
.length
< 2) continue;
1265 if (!defaultParserSet
) {
1266 this.detectTypeFromString_(inFields
[0]);
1267 xParser
= this.attr_("xValueParser");
1268 defaultParserSet
= true;
1270 fields
[0] = xParser(inFields
[0], this);
1272 // If fractions are expected, parse the numbers as "A/B
"
1273 if (this.fractions_) {
1274 for (var j = 1; j < inFields.length; j++) {
1275 // TODO(danvk): figure out an appropriate way to flag parse errors.
1276 var vals = inFields[j].split("/");
1277 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1279 } else if (this.attr_("errorBars
")) {
1280 // If there are error bars, values are (value, stddev) pairs
1281 for (var j = 1; j < inFields.length; j += 2)
1282 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1283 parseFloat(inFields[j + 1])];
1284 } else if (this.customBars_) {
1285 // Bars are a low;center;high tuple
1286 for (var j = 1; j < inFields.length; j++) {
1287 var vals = inFields[j].split(";");
1288 fields[j] = [ parseFloat(vals[0]),
1289 parseFloat(vals[1]),
1290 parseFloat(vals[2]) ];
1293 // Values are just numbers
1294 for (var j = 1; j < inFields.length; j++) {
1295 fields[j] = parseFloat(inFields[j]);
1300 if (fields.length != expectedCols) {
1301 this.error("Number of columns
in line
" + i + " (" + fields.length +
1302 ") does not agree
with number of
labels (" + expectedCols +
1310 * The user has provided their data as a pre-packaged JS array. If the x values
1311 * are numeric, this is the same as dygraphs' internal format. If the x values
1312 * are dates, we need to convert them from Date objects to ms since epoch.
1313 * @param {Array.<Object>} data
1314 * @return {Array.<Object>} data with numeric x values.
1316 Dygraph.prototype.parseArray_ = function(data) {
1317 // Peek at the first x value to see if it's numeric.
1318 if (data.length == 0) {
1319 this.error("Can
't plot empty data set");
1322 if (data[0].length == 0) {
1323 this.error("Data set cannot contain an empty row");
1327 if (this.attr_("labels") == null) {
1328 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1329 "in the options parameter");
1330 this.attrs_.labels = [ "X" ];
1331 for (var i = 1; i < data[0].length; i++) {
1332 this.attrs_.labels.push("Y" + i);
1336 if (MochiKit.Base.isDateLike(data[0][0])) {
1337 // Some intelligent defaults for a date x-axis.
1338 this.attrs_.xValueFormatter = Dygraph.dateString_;
1339 this.attrs_.xTicker = Dygraph.dateTicker;
1341 // Assume they're all dates
.
1342 var parsedData
= MochiKit
.Base
.clone(data
);
1343 for (var i
= 0; i
< data
.length
; i
++) {
1344 if (parsedData
[i
].length
== 0) {
1345 this.error("Row " << (1 + i
) << " of data is empty");
1348 if (parsedData
[i
][0] == null
1349 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1350 this.error("x value in row " << (1 + i
) << " is not a Date");
1353 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1357 // Some intelligent defaults for a numeric x-axis.
1358 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1359 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1365 * Parses a DataTable object from gviz.
1366 * The data is expected to have a first column that is either a date or a
1367 * number. All subsequent columns must be numbers. If there is a clear mismatch
1368 * between this.xValueParser_ and the type of the first column, it will be
1369 * fixed. Returned value is in the same format as return value of parseCSV_.
1370 * @param {Array.<Object>} data See above.
1373 Dygraph
.prototype.parseDataTable_
= function(data
) {
1374 var cols
= data
.getNumberOfColumns();
1375 var rows
= data
.getNumberOfRows();
1377 // Read column labels
1379 for (var i
= 0; i
< cols
; i
++) {
1380 labels
.push(data
.getColumnLabel(i
));
1382 this.attrs_
.labels
= labels
;
1384 var indepType
= data
.getColumnType(0);
1385 if (indepType
== 'date') {
1386 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1387 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1388 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1389 } else if (indepType
!= 'number') {
1390 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1391 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1392 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1394 this.error("only 'date' and 'number' types are supported for column 1" +
1395 "of DataTable input (Got '" + indepType
+ "')");
1400 for (var i
= 0; i
< rows
; i
++) {
1402 if (indepType
== 'date') {
1403 row
.push(data
.getValue(i
, 0).getTime());
1405 row
.push(data
.getValue(i
, 0));
1407 for (var j
= 1; j
< cols
; j
++) {
1408 row
.push(data
.getValue(i
, j
));
1416 * Get the CSV data. If it's in a function, call that function. If it's in a
1417 * file, do an XMLHttpRequest to get it.
1420 Dygraph
.prototype.start_
= function() {
1421 if (typeof this.file_
== 'function') {
1422 // CSV string. Pretend we got it via XHR.
1423 this.loadedEvent_(this.file_());
1424 } else if (MochiKit
.Base
.isArrayLike(this.file_
)) {
1425 this.rawData_
= this.parseArray_(this.file_
);
1426 this.drawGraph_(this.rawData_
);
1427 } else if (typeof this.file_
== 'object' &&
1428 typeof this.file_
.getColumnRange
== 'function') {
1429 // must be a DataTable from gviz.
1430 this.rawData_
= this.parseDataTable_(this.file_
);
1431 this.drawGraph_(this.rawData_
);
1432 } else if (typeof this.file_
== 'string') {
1433 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1434 if (this.file_
.indexOf('\n') >= 0) {
1435 this.loadedEvent_(this.file_
);
1437 var req
= new XMLHttpRequest();
1439 req
.onreadystatechange
= function () {
1440 if (req
.readyState
== 4) {
1441 if (req
.status
== 200) {
1442 caller
.loadedEvent_(req
.responseText
);
1447 req
.open("GET", this.file_
, true);
1451 this.error("Unknown data format: " + (typeof this.file_
));
1456 * Changes various properties of the graph. These can include:
1458 * <li>file: changes the source data for the graph</li>
1459 * <li>errorBars: changes whether the data contains stddev</li>
1461 * @param {Object} attrs The new properties and values
1463 Dygraph
.prototype.updateOptions
= function(attrs
) {
1464 // TODO(danvk): this is a mess. Rethink this function.
1465 if (attrs
.customBars
) {
1466 this.customBars_
= attrs
.customBars
;
1468 if (attrs
.rollPeriod
) {
1469 this.rollPeriod_
= attrs
.rollPeriod
;
1471 if (attrs
.dateWindow
) {
1472 this.dateWindow_
= attrs
.dateWindow
;
1474 if (attrs
.valueRange
) {
1475 this.valueRange_
= attrs
.valueRange
;
1477 MochiKit
.Base
.update(this.user_attrs_
, attrs
);
1479 this.labelsFromCSV_
= (this.attr_("labels") == null);
1481 // TODO(danvk): this doesn't match the constructor logic
1482 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1483 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1484 this.file_
= attrs
['file'];
1487 this.drawGraph_(this.rawData_
);
1492 * Adjusts the number of days in the rolling average. Updates the graph to
1493 * reflect the new averaging period.
1494 * @param {Number} length Number of days over which to average the data.
1496 Dygraph
.prototype.adjustRoll
= function(length
) {
1497 this.rollPeriod_
= length
;
1498 this.drawGraph_(this.rawData_
);
1503 * A wrapper around Dygraph that implements the gviz API.
1504 * @param {Object} container The DOM object the visualization should live in.
1506 Dygraph
.GVizChart
= function(container
) {
1507 this.container
= container
;
1510 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1511 this.container
.innerHTML
= '';
1512 this.date_graph
= new Dygraph(this.container
, data
, options
);
1515 // Older pages may still use this name.
1516 DateGraph
= Dygraph
;