-
Notifications
You must be signed in to change notification settings - Fork 0
/
plot.js
90 lines (64 loc) · 1.96 KB
/
plot.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/*This JS module provides some basic functions and objects to interact with the HTML5 canvas*/
function Point2d(x, y) {
this.x = x;
this.y = y;
// default values for point plotting
this.radius = 5;
this.fill = "blue";
this.stroke = "blue";
this.draw = function () {
ctx.save()
ctx.strokeStyle = this.stroke;
ctx.fillStyle = this.fill;
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
ctx.stroke();
ctx.fill();
ctx.restore();
}
}
function Axis(origin, end, type){
this.origin = origin;
this.end = end;
this.type = type;
this.majorTickN = 22;
this.major_tick_length = 4;
this.draw = function(ctx) {
// draw the ax line
ctx.beginPath();
ctx.moveTo(this.origin.x, this.origin.y);
ctx.lineTo(this.end.x, this.end.y);
ctx.stroke();
}
}
// Visualization of Data
function connectPoints(ctx, pointList) {
ctx.beginPath();
ctx.moveTo(pointList[0].x, pointList[0].y);
pointList[0].draw();
pointList.slice(1).forEach(function (element) {
ctx.lineTo(element.x, element.y);
ctx.stroke();
element.draw();
})
}
// top Level object Plot
function Plot(canvas){
this.totalWidth = canvas.width;
this.totalHeight = canvas.height;
this.ctx = canvas.getContext("2d");
// margins
this.mTop = this.totalHeight*0.1;
this.mBot = this.totalHeight*0.1;
this.mLeft = this.totalWidth*0.1;
this.mRight = this.totalWidth*0.2;
this.origin = new Point2d(0+this.mLeft, 0+(this.totalHeight-this.mBot));
this.xEnd = new Point2d(this.origin.x+(this.totalWidth - this.mLeft - this.mRight), this.origin.y);
this.yEnd = new Point2d(this.origin.x, 0 + this.mTop);
// axis
this.xAxis = new Axis(this.origin, this.xEnd);
this.yAxis = new Axis(this.origin, this.yEnd);
// draw
this.xAxis.draw(this.ctx);
this.yAxis.draw(this.ctx);
}