1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Based on PlotKit, but modified to meet the needs of dygraphs.
6 * In particular, support for:
9 * - dygraphs attribute system
13 * Creates a new DygraphLayout object.
14 * @param {Object} options Options for PlotKit.Layout
15 * @return {Object} The DygraphLayout object
17 DygraphLayout
= function(dygraph
, options
) {
18 this.dygraph_
= dygraph
;
19 this.options
= {}; // TODO(danvk): remove, use attr_ instead.
20 Dygraph
.update(this.options
, options
? options
: {});
21 this.datasets
= new Array();
22 this.annotations
= new Array();
25 DygraphLayout
.prototype.attr_
= function(name
) {
26 return this.dygraph_
.attr_(name
);
29 DygraphLayout
.prototype.addDataset
= function(setname
, set_xy
) {
30 this.datasets
[setname
] = set_xy
;
33 DygraphLayout
.prototype.setAnnotations
= function(ann
) {
34 // The Dygraph object's annotations aren't parsed. We parse them here and
36 var parse
= this.attr_('xValueParser');
37 for (var i
= 0; i
< ann
.length
; i
++) {
39 if (!ann
[i
].xval
&& !ann
[i
].x
) {
40 this.dygraph_
.error("Annotations must have an 'x' property");
44 !(ann
[i
].hasOwnProperty('width') &&
45 ann
[i
].hasOwnProperty('height'))) {
46 this.dygraph_
.error("Must set width and height when setting " +
47 "annotation.icon property");
50 Dygraph
.update(a
, ann
[i
]);
51 if (!a
.xval
) a
.xval
= parse(a
.x
);
52 this.annotations
.push(a
);
56 DygraphLayout
.prototype.evaluate
= function() {
57 this._evaluateLimits();
58 this._evaluateLineCharts();
59 this._evaluateLineTicks();
60 this._evaluateAnnotations();
63 DygraphLayout
.prototype._evaluateLimits
= function() {
64 this.minxval
= this.maxxval
= null;
65 if (this.options
.dateWindow
) {
66 this.minxval
= this.options
.dateWindow
[0];
67 this.maxxval
= this.options
.dateWindow
[1];
69 for (var name
in this.datasets
) {
70 if (!this.datasets
.hasOwnProperty(name
)) continue;
71 var series
= this.datasets
[name
];
72 var x1
= series
[0][0];
73 if (!this.minxval
|| x1
< this.minxval
) this.minxval
= x1
;
75 var x2
= series
[series
.length
- 1][0];
76 if (!this.maxxval
|| x2
> this.maxxval
) this.maxxval
= x2
;
79 this.xrange
= this.maxxval
- this.minxval
;
80 this.xscale
= (this.xrange
!= 0 ? 1/this.xrange
: 1.0);
82 this.minyval
= this.options
.yAxis
[0];
83 this.maxyval
= this.options
.yAxis
[1];
84 this.yrange
= this.maxyval
- this.minyval
;
85 this.yscale
= (this.yrange
!= 0 ? 1/this.yrange
: 1.0);
88 DygraphLayout
.prototype._evaluateLineCharts
= function() {
90 this.points
= new Array();
91 for (var setName
in this.datasets
) {
92 if (!this.datasets
.hasOwnProperty(setName
)) continue;
94 var dataset
= this.datasets
[setName
];
95 for (var j
= 0; j
< dataset
.length
; j
++) {
96 var item
= dataset
[j
];
99 x
: ((parseFloat(item
[0]) - this.minxval
) * this.xscale
),
100 y
: 1.0 - ((parseFloat(item
[1]) - this.minyval
) * this.yscale
),
101 xval
: parseFloat(item
[0]),
102 yval
: parseFloat(item
[1]),
106 this.points
.push(point
);
111 DygraphLayout
.prototype._evaluateLineTicks
= function() {
112 this.xticks
= new Array();
113 for (var i
= 0; i
< this.options
.xTicks
.length
; i
++) {
114 var tick
= this.options
.xTicks
[i
];
115 var label
= tick
.label
;
116 var pos
= this.xscale
* (tick
.v
- this.minxval
);
117 if ((pos
>= 0.0) && (pos
<= 1.0)) {
118 this.xticks
.push([pos
, label
]);
122 this.yticks
= new Array();
123 for (var i
= 0; i
< this.options
.yTicks
.length
; i
++) {
124 var tick
= this.options
.yTicks
[i
];
125 var label
= tick
.label
;
126 var pos
= 1.0 - (this.yscale
* (tick
.v
- this.minyval
));
127 if ((pos
>= 0.0) && (pos
<= 1.0)) {
128 this.yticks
.push([pos
, label
]);
135 * Behaves the same way as PlotKit.Layout, but also copies the errors
138 DygraphLayout
.prototype.evaluateWithError
= function() {
140 if (!this.options
.errorBars
) return;
142 // Copy over the error terms
143 var i
= 0; // index in this.points
144 for (var setName
in this.datasets
) {
145 if (!this.datasets
.hasOwnProperty(setName
)) continue;
147 var dataset
= this.datasets
[setName
];
148 for (var j
= 0; j
< dataset
.length
; j
++, i
++) {
149 var item
= dataset
[j
];
150 var xv
= parseFloat(item
[0]);
151 var yv
= parseFloat(item
[1]);
153 if (xv
== this.points
[i
].xval
&&
154 yv
== this.points
[i
].yval
) {
155 this.points
[i
].errorMinus
= parseFloat(item
[2]);
156 this.points
[i
].errorPlus
= parseFloat(item
[3]);
162 DygraphLayout
.prototype._evaluateAnnotations
= function() {
163 // Add the annotations to the point to which they belong.
164 // Make a map from (setName, xval) to annotation for quick lookups.
165 var annotations
= {};
166 for (var i
= 0; i
< this.annotations
.length
; i
++) {
167 var a
= this.annotations
[i
];
168 annotations
[a
.xval
+ "," + a
.series
] = a
;
171 this.annotated_points
= [];
172 for (var i
= 0; i
< this.points
.length
; i
++) {
173 var p
= this.points
[i
];
174 var k
= p
.xval
+ "," + p
.name
;
175 if (k
in annotations
) {
176 p
.annotation
= annotations
[k
];
177 this.annotated_points
.push(p
);
183 * Convenience function to remove all the data sets from a graph
185 DygraphLayout
.prototype.removeAllDatasets
= function() {
186 delete this.datasets
;
187 this.datasets
= new Array();
191 * Change the values of various layout options
192 * @param {Object} new_options an associative array of new properties
194 DygraphLayout
.prototype.updateOptions
= function(new_options
) {
195 Dygraph
.update(this.options
, new_options
? new_options
: {});
198 // Subclass PlotKit.CanvasRenderer to add:
199 // 1. X/Y grid overlay
200 // 2. Ability to draw error bars (if required)
203 * Sets some PlotKit.CanvasRenderer options
204 * @param {Object} element The canvas to attach to
205 * @param {Layout} layout The DygraphLayout object for this graph.
206 * @param {Object} options Options to pass on to CanvasRenderer
208 DygraphCanvasRenderer
= function(dygraph
, element
, layout
, options
) {
209 // TODO(danvk): remove options, just use dygraph.attr_.
210 this.dygraph_
= dygraph
;
217 "axisLineColor": "black",
218 "axisLineWidth": 0.5,
220 "axisLabelColor": "black",
221 "axisLabelFont": "Arial",
222 "axisLabelFontSize": 9,
223 "axisLabelWidth": 50,
226 "gridLineColor": "rgb(128,128,128)",
228 "underlayCallback": null
230 Dygraph
.update(this.options
, options
);
232 this.layout
= layout
;
233 this.element
= element
;
234 this.container
= this.element
.parentNode
;
236 this.height
= this.element
.height
;
237 this.width
= this.element
.width
;
239 // --- check whether everything is ok before we return
240 if (!this.isIE
&& !(DygraphCanvasRenderer
.isSupported(this.element
)))
241 throw "Canvas is not supported.";
244 this.xlabels
= new Array();
245 this.ylabels
= new Array();
246 this.annotations
= new Array();
249 x
: this.options
.yAxisLabelWidth
+ 2 * this.options
.axisTickSize
,
252 this.area
.w
= this.width
- this.area
.x
- this.options
.rightGap
;
253 this.area
.h
= this.height
- this.options
.axisLabelFontSize
-
254 2 * this.options
.axisTickSize
;
256 this.container
.style
.position
= "relative";
257 this.container
.style
.width
= this.width
+ "px";
260 DygraphCanvasRenderer
.prototype.clear
= function() {
262 // VML takes a while to start up, so we just poll every this.IEDelay
264 if (this.clearDelay
) {
265 this.clearDelay
.cancel();
266 this.clearDelay
= null;
268 var context
= this.element
.getContext("2d");
271 // TODO(danvk): this is broken, since MochiKit.Async is gone.
272 this.clearDelay
= MochiKit
.Async
.wait(this.IEDelay
);
273 this.clearDelay
.addCallback(bind(this.clear
, this));
278 var context
= this.element
.getContext("2d");
279 context
.clearRect(0, 0, this.width
, this.height
);
281 for (var i
= 0; i
< this.xlabels
.length
; i
++) {
282 var el
= this.xlabels
[i
];
283 el
.parentNode
.removeChild(el
);
285 for (var i
= 0; i
< this.ylabels
.length
; i
++) {
286 var el
= this.ylabels
[i
];
287 el
.parentNode
.removeChild(el
);
289 for (var i
= 0; i
< this.annotations
.length
; i
++) {
290 var el
= this.annotations
[i
];
291 el
.parentNode
.removeChild(el
);
293 this.xlabels
= new Array();
294 this.ylabels
= new Array();
295 this.annotations
= new Array();
299 DygraphCanvasRenderer
.isSupported
= function(canvasName
) {
302 if (typeof(canvasName
) == 'undefined' || canvasName
== null)
303 canvas
= document
.createElement("canvas");
306 var context
= canvas
.getContext("2d");
309 var ie
= navigator
.appVersion
.match(/MSIE (\d\.\d)/);
310 var opera
= (navigator
.userAgent
.toLowerCase().indexOf("opera") != -1);
311 if ((!ie
) || (ie
[1] < 6) || (opera
))
319 * Draw an X/Y grid on top of the existing plot
321 DygraphCanvasRenderer
.prototype.render
= function() {
322 // Draw the new X/Y grid
323 var ctx
= this.element
.getContext("2d");
325 if (this.options
.underlayCallback
) {
326 this.options
.underlayCallback(ctx
, this.area
, this.layout
, this.dygraph_
);
329 if (this.options
.drawYGrid
) {
330 var ticks
= this.layout
.yticks
;
332 ctx
.strokeStyle
= this.options
.gridLineColor
;
333 ctx
.lineWidth
= this.options
.axisLineWidth
;
334 for (var i
= 0; i
< ticks
.length
; i
++) {
336 var y
= this.area
.y
+ ticks
[i
][0] * this.area
.h
;
339 ctx
.lineTo(x
+ this.area
.w
, y
);
345 if (this.options
.drawXGrid
) {
346 var ticks
= this.layout
.xticks
;
348 ctx
.strokeStyle
= this.options
.gridLineColor
;
349 ctx
.lineWidth
= this.options
.axisLineWidth
;
350 for (var i
=0; i
<ticks
.length
; i
++) {
351 var x
= this.area
.x
+ ticks
[i
][0] * this.area
.w
;
352 var y
= this.area
.y
+ this.area
.h
;
355 ctx
.lineTo(x
, this.area
.y
);
361 // Do the ordinary rendering, as before
362 this._renderLineChart();
364 this._renderAnnotations();
368 DygraphCanvasRenderer
.prototype._renderAxis
= function() {
369 if (!this.options
.drawXAxis
&& !this.options
.drawYAxis
)
372 var context
= this.element
.getContext("2d");
375 "position": "absolute",
376 "fontSize": this.options
.axisLabelFontSize
+ "px",
378 "color": this.options
.axisLabelColor
,
379 "width": this.options
.axisLabelWidth
+ "px",
382 var makeDiv
= function(txt
) {
383 var div
= document
.createElement("div");
384 for (var name
in labelStyle
) {
385 if (labelStyle
.hasOwnProperty(name
)) {
386 div
.style
[name
] = labelStyle
[name
];
389 div
.appendChild(document
.createTextNode(txt
));
395 context
.strokeStyle
= this.options
.axisLineColor
;
396 context
.lineWidth
= this.options
.axisLineWidth
;
398 if (this.options
.drawYAxis
) {
399 if (this.layout
.yticks
&& this.layout
.yticks
.length
> 0) {
400 for (var i
= 0; i
< this.layout
.yticks
.length
; i
++) {
401 var tick
= this.layout
.yticks
[i
];
402 if (typeof(tick
) == "function") return;
404 var y
= this.area
.y
+ tick
[0] * this.area
.h
;
406 context
.moveTo(x
, y
);
407 context
.lineTo(x
- this.options
.axisTickSize
, y
);
411 var label
= makeDiv(tick
[1]);
412 var top
= (y
- this.options
.axisLabelFontSize
/ 2);
413 if (top
< 0) top
= 0;
415 if (top
+ this.options
.axisLabelFontSize
+ 3 > this.height
) {
416 label
.style
.bottom
= "0px";
418 label
.style
.top
= top
+ "px";
420 label
.style
.left
= "0px";
421 label
.style
.textAlign
= "right";
422 label
.style
.width
= this.options
.yAxisLabelWidth
+ "px";
423 this.container
.appendChild(label
);
424 this.ylabels
.push(label
);
427 // The lowest tick on the y-axis often overlaps with the leftmost
428 // tick on the x-axis. Shift the bottom tick up a little bit to
429 // compensate if necessary.
430 var bottomTick
= this.ylabels
[0];
431 var fontSize
= this.options
.axisLabelFontSize
;
432 var bottom
= parseInt(bottomTick
.style
.top
) + fontSize
;
433 if (bottom
> this.height
- fontSize
) {
434 bottomTick
.style
.top
= (parseInt(bottomTick
.style
.top
) -
435 fontSize
/ 2) + "px";
440 context
.moveTo(this.area
.x
, this.area
.y
);
441 context
.lineTo(this.area
.x
, this.area
.y
+ this.area
.h
);
446 if (this.options
.drawXAxis
) {
447 if (this.layout
.xticks
) {
448 for (var i
= 0; i
< this.layout
.xticks
.length
; i
++) {
449 var tick
= this.layout
.xticks
[i
];
450 if (typeof(dataset
) == "function") return;
452 var x
= this.area
.x
+ tick
[0] * this.area
.w
;
453 var y
= this.area
.y
+ this.area
.h
;
455 context
.moveTo(x
, y
);
456 context
.lineTo(x
, y
+ this.options
.axisTickSize
);
460 var label
= makeDiv(tick
[1]);
461 label
.style
.textAlign
= "center";
462 label
.style
.bottom
= "0px";
464 var left
= (x
- this.options
.axisLabelWidth
/2);
465 if (left
+ this.options
.axisLabelWidth
> this.width
) {
466 left
= this.width
- this.options
.xAxisLabelWidth
;
467 label
.style
.textAlign
= "right";
471 label
.style
.textAlign
= "left";
474 label
.style
.left
= left
+ "px";
475 label
.style
.width
= this.options
.xAxisLabelWidth
+ "px";
476 this.container
.appendChild(label
);
477 this.xlabels
.push(label
);
482 context
.moveTo(this.area
.x
, this.area
.y
+ this.area
.h
);
483 context
.lineTo(this.area
.x
+ this.area
.w
, this.area
.y
+ this.area
.h
);
492 DygraphCanvasRenderer
.prototype._renderAnnotations
= function() {
493 var annotationStyle
= {
494 "position": "absolute",
495 "fontSize": this.options
.axisLabelFontSize
+ "px",
500 var bindEvt
= function(eventName
, classEventName
, p
, self
) {
502 var a
= p
.annotation
;
503 if (a
.hasOwnProperty(eventName
)) {
504 a
[eventName
](a
, p
, self
.dygraph_
, e
);
505 } else if (self
.dygraph_
.attr_(classEventName
)) {
506 self
.dygraph_
.attr_(classEventName
)(a
, p
, self
.dygraph_
,e
);
511 // Get a list of point with annotations.
512 var points
= this.layout
.annotated_points
;
513 for (var i
= 0; i
< points
.length
; i
++) {
515 if (p
.canvasx
< this.area
.x
|| p
.canvasx
> this.area
.x
+ this.area
.w
) {
519 var a
= p
.annotation
;
521 if (a
.hasOwnProperty("tickHeight")) {
522 tick_height
= a
.tickHeight
;
525 var div
= document
.createElement("div");
526 for (var name
in annotationStyle
) {
527 if (annotationStyle
.hasOwnProperty(name
)) {
528 div
.style
[name
] = annotationStyle
[name
];
531 if (!a
.hasOwnProperty('icon')) {
532 div
.className
= "dygraphDefaultAnnotation";
534 if (a
.hasOwnProperty('cssClass')) {
535 div
.className
+= " " + a
.cssClass
;
538 var width
= a
.hasOwnProperty('width') ? a
.width
: 16;
539 var height
= a
.hasOwnProperty('height') ? a
.height
: 16;
540 if (a
.hasOwnProperty('icon')) {
541 var img
= document
.createElement("img");
545 div
.appendChild(img
);
546 } else if (p
.annotation
.hasOwnProperty('shortText')) {
547 div
.appendChild(document
.createTextNode(p
.annotation
.shortText
));
549 div
.style
.left
= (p
.canvasx
- width
/ 2) + "px";
550 if (a
.attachAtBottom
) {
551 div
.style
.top
= (this.area
.h
- height
- tick_height
) + "px";
553 div
.style
.top
= (p
.canvasy
- height
- tick_height
) + "px";
555 div
.style
.width
= width
+ "px";
556 div
.style
.height
= height
+ "px";
557 div
.title
= p
.annotation
.text
;
558 div
.style
.color
= this.colors
[p
.name
];
559 div
.style
.borderColor
= this.colors
[p
.name
];
562 Dygraph
.addEvent(div
, 'click',
563 bindEvt('clickHandler', 'annotationClickHandler', p
, this));
564 Dygraph
.addEvent(div
, 'mouseover',
565 bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p
, this));
566 Dygraph
.addEvent(div
, 'mouseout',
567 bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p
, this));
568 Dygraph
.addEvent(div
, 'dblclick',
569 bindEvt('dblClickHandler', 'annotationDblClickHandler', p
, this));
571 this.container
.appendChild(div
);
572 this.annotations
.push(div
);
574 var ctx
= this.element
.getContext("2d");
575 ctx
.strokeStyle
= this.colors
[p
.name
];
577 if (!a
.attachAtBottom
) {
578 ctx
.moveTo(p
.canvasx
, p
.canvasy
);
579 ctx
.lineTo(p
.canvasx
, p
.canvasy
- 2 - tick_height
);
581 ctx
.moveTo(p
.canvasx
, this.area
.h
);
582 ctx
.lineTo(p
.canvasx
, this.area
.h
- 2 - tick_height
);
591 * Overrides the CanvasRenderer method to draw error bars
593 DygraphCanvasRenderer
.prototype._renderLineChart
= function() {
594 var context
= this.element
.getContext("2d");
595 var colorCount
= this.options
.colorScheme
.length
;
596 var colorScheme
= this.options
.colorScheme
;
597 var fillAlpha
= this.options
.fillAlpha
;
598 var errorBars
= this.layout
.options
.errorBars
;
599 var fillGraph
= this.layout
.options
.fillGraph
;
600 var stackedGraph
= this.layout
.options
.stackedGraph
;
601 var stepPlot
= this.layout
.options
.stepPlot
;
604 for (var name
in this.layout
.datasets
) {
605 if (this.layout
.datasets
.hasOwnProperty(name
)) {
609 var setCount
= setNames
.length
;
612 for (var i
= 0; i
< setCount
; i
++) {
613 this.colors
[setNames
[i
]] = colorScheme
[i
% colorCount
];
618 for (var i
= 0; i
< this.layout
.points
.length
; i
++) {
619 var point
= this.layout
.points
[i
];
620 point
.canvasx
= this.area
.w
* point
.x
+ this.area
.x
;
621 point
.canvasy
= this.area
.h
* point
.y
+ this.area
.y
;
625 var isOK
= function(x
) { return x
&& !isNaN(x
); };
630 this.dygraph_
.warn("Can't use fillGraph option with error bars");
633 for (var i
= 0; i
< setCount
; i
++) {
634 var setName
= setNames
[i
];
635 var color
= this.colors
[setName
];
637 // setup graphics context
641 var prevYs
= [-1, -1];
642 var yscale
= this.layout
.yscale
;
643 // should be same color as the lines but only 15% opaque.
644 var rgb
= new RGBColor(color
);
645 var err_color
= 'rgba(' + rgb
.r
+ ',' + rgb
.g
+ ',' + rgb
.b
+ ',' +
647 ctx
.fillStyle
= err_color
;
649 for (var j
= 0; j
< this.layout
.points
.length
; j
++) {
650 var point
= this.layout
.points
[j
];
651 if (point
.name
== setName
) {
652 if (!isOK(point
.y
)) {
659 var newYs
= [ prevY
- point
.errorPlus
* yscale
,
660 prevY
+ point
.errorMinus
* yscale
];
663 var newYs
= [ point
.y
- point
.errorPlus
* yscale
,
664 point
.y
+ point
.errorMinus
* yscale
];
666 newYs
[0] = this.area
.h
* newYs
[0] + this.area
.y
;
667 newYs
[1] = this.area
.h
* newYs
[1] + this.area
.y
;
670 ctx
.moveTo(prevX
, newYs
[0]);
672 ctx
.moveTo(prevX
, prevYs
[0]);
674 ctx
.lineTo(point
.canvasx
, newYs
[0]);
675 ctx
.lineTo(point
.canvasx
, newYs
[1]);
677 ctx
.lineTo(prevX
, newYs
[1]);
679 ctx
.lineTo(prevX
, prevYs
[1]);
684 prevX
= point
.canvasx
;
689 } else if (fillGraph
) {
690 var axisY
= 1.0 + this.layout
.minyval
* this.layout
.yscale
;
691 if (axisY
< 0.0) axisY
= 0.0;
692 else if (axisY
> 1.0) axisY
= 1.0;
693 axisY
= this.area
.h
* axisY
+ this.area
.y
;
695 var baseline
= [] // for stacked graphs: baseline for filling
697 // process sets in reverse order (needed for stacked graphs)
698 for (var i
= setCount
- 1; i
>= 0; i
--) {
699 var setName
= setNames
[i
];
700 var color
= this.colors
[setName
];
702 // setup graphics context
705 var prevYs
= [-1, -1];
706 var yscale
= this.layout
.yscale
;
707 // should be same color as the lines but only 15% opaque.
708 var rgb
= new RGBColor(color
);
709 var err_color
= 'rgba(' + rgb
.r
+ ',' + rgb
.g
+ ',' + rgb
.b
+ ',' +
711 ctx
.fillStyle
= err_color
;
713 for (var j
= 0; j
< this.layout
.points
.length
; j
++) {
714 var point
= this.layout
.points
[j
];
715 if (point
.name
== setName
) {
716 if (!isOK(point
.y
)) {
722 lastY
= baseline
[point
.canvasx
];
723 if (lastY
=== undefined
) lastY
= axisY
;
724 baseline
[point
.canvasx
] = point
.canvasy
;
725 newYs
= [ point
.canvasy
, lastY
];
727 newYs
= [ point
.canvasy
, axisY
];
730 ctx
.moveTo(prevX
, prevYs
[0]);
732 ctx
.lineTo(point
.canvasx
, prevYs
[0]);
734 ctx
.lineTo(point
.canvasx
, newYs
[0]);
736 ctx
.lineTo(point
.canvasx
, newYs
[1]);
737 ctx
.lineTo(prevX
, prevYs
[1]);
741 prevX
= point
.canvasx
;
748 for (var i
= 0; i
< setCount
; i
++) {
749 var setName
= setNames
[i
];
750 var color
= this.colors
[setName
];
752 // setup graphics context
754 var point
= this.layout
.points
[0];
755 var pointSize
= this.dygraph_
.attr_("pointSize");
756 var prevX
= null, prevY
= null;
757 var drawPoints
= this.dygraph_
.attr_("drawPoints");
758 var points
= this.layout
.points
;
759 for (var j
= 0; j
< points
.length
; j
++) {
760 var point
= points
[j
];
761 if (point
.name
== setName
) {
762 if (!isOK(point
.canvasy
)) {
763 // this will make us move to the next point, not draw a line to it.
764 prevX
= prevY
= null;
766 // A point is "isolated" if it is non-null but both the previous
767 // and next points are null.
768 var isIsolated
= (!prevX
&& (j
== points
.length
- 1 ||
769 !isOK(points
[j
+1].canvasy
)));
772 prevX
= point
.canvasx
;
773 prevY
= point
.canvasy
;
776 ctx
.strokeStyle
= color
;
777 ctx
.lineWidth
= this.options
.strokeWidth
;
778 ctx
.moveTo(prevX
, prevY
);
780 ctx
.lineTo(point
.canvasx
, prevY
);
782 prevX
= point
.canvasx
;
783 prevY
= point
.canvasy
;
784 ctx
.lineTo(prevX
, prevY
);
788 if (drawPoints
|| isIsolated
) {
790 ctx
.fillStyle
= color
;
791 ctx
.arc(point
.canvasx
, point
.canvasy
, pointSize
,
792 0, 2 * Math
.PI
, false);