-
Notifications
You must be signed in to change notification settings - Fork 0
/
sparklines.html
143 lines (108 loc) · 4.26 KB
/
sparklines.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<html>
<head>
<title>Sparklines with canvas</title>
<style type="text/css">
#can{
border: 1px dashed blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<p> oh hello world</p>
<canvas id="can" width="100" height="16">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<script type="text/javascript">
// var weights = [163.4,162.4,162.2,161.6,160.1,162.6,162.6,162.6,162.4,163.2,162,162.6,163.4,163.6,163.2,164,163.2,161.2,162.6,162.6,163.4,163.4,165.2,164.8,162.4,163,161,159,158.8,157.6, 158.2];
// var temp = [163.4,162.4,162.2,161.6,160.1,162.6,162.6,162.6,162.4,163.2,162,162.6,163.4,163.6,163.2,164,163.2,161.2,162.6,162.6,163.4,163.4,165.2,164.8,162.4,163,161,159,158.8,157.6, 158.2];
// var weights = [3, 2, 2, 1, 0, 2, 2, 2, 2, 3];
// var temp = [3, 2, 2, 1, 0, 2, 2, 2, 2, 3];
var weights = [4, 5, 2, 11, 12, 23, 7 ,8, 19, 13, 11, 99];
var temp = [4, 5, 2, 11, 12, 23, 7 ,8, 19, 13, 11, 99];
var median = function(values) {
values.sort( function(a,b) {return a - b;} );
var half = Math.floor(values.length/2);
if(values.length % 2)
return values[half];
else
return (values[half-1] + values[half]) / 2.0;
}
var med = median(temp);
var min = Math.min.apply(null, weights);
var max = Math.max.apply(null, weights);
console.log('max = ',max, ' min = ',min);
var edgePoint = Math.abs(min-med) > Math.abs(max-med) ? min : max; //either min or max, whichever's delta is greater
console.log('edgepoint ', edgePoint);
//x -axis will be time (or just instances in this case)
//y-axis will be weights
//remember to only take the last "100" points of data or so
var canvas = document.getElementById('can');
var c = canvas.getContext('2d');
var verticalScaleMultiplier = canvas.height / edgePoint; // 16 is the height of the canvas
// Instead of translating, find a way to 'flip' the whole canvas on the horizontal..
//This bounding box represents the normal range of values to be expected
// c.fillStyle = "#d2d1d1";
// c.fillRect(0, (200-164), (weights.length)*4, (164-132));
var x= 0;
var y = verticalScaleMultiplier; //vertical scale multiplier
c.strokeStyle = "#736F6E";
c.beginPath();
c.moveTo(x, canvas.height-(weights[0]*y));
for(var i=0; i<weights.length; i++)
{
//the x axis will move 2 "pts" each iteration
// the y axis will be the weight itself
//c.moveTo(10,10);
/*
The weight data cannot be treated as pixels directly - you need to modify
them.
Since this is not a normal x axis/y axis grid, the weight must be
subtracted from the height of the canvas. This is to flip the whole
graph, otherwise it would display upside down.
Multiplying by 4 will increase the scale of the y axis, making the graph -
and especially its peaks and valleys - easier to distinguish.
*/
console.log('x = ', x, ' y = ', canvas.height-(weights[i]*y));
c.lineTo(x, canvas.height-(weights[i]*y));
x+=(100/weights.length);
// c.lineTo(150, 100);
// c.moveTo(60, 40);
// c.lineTo(61, 41);
}
c.stroke();
c.strokeStyle = "red";
c.beginPath();
//This will draw the red "dot" on the final point
c.moveTo(x, (200-weights[weights.length-1]));
c.lineTo(x, (200-weights[weights.length-1]));
c.lineTo(x, ((200-weights[weights.length-1]))+1);
c.lineTo(x+1, ((200-weights[weights.length-1]))+1);
c.lineTo(x+2, ((200-weights[weights.length-1]))+1);
c.lineTo(x+2, ((200-weights[weights.length-1])));
c.lineTo(x+2, ((200-weights[weights.length-1]))-1);
c.lineTo(x+1, ((200-weights[weights.length-1]))-1);
c.lineTo(x, ((200-weights[weights.length-1]))-1);
c.lineTo(x+1, ((200-weights[weights.length-1])));
c.stroke();
//c.fillStyle = "red";
//c.fillRect(100,50,100,200);
//tick line
// c.strokeStyle = "green";
// c.beginPath();
// c.moveTo(10,10);
// c.lineTo(10,10);
// c.stroke();
// c.moveTo(40.5,80);
// c.lineTo(60.5,100);
// c.stroke();
c.fillStyle = "black";
c.font = 'italic 10pt sans-serif';
c.fillText("weight ", x+2, 200-(weights[weights.length-1]));
c.fillStyle = "red";
c.font = 'italic 10pt sans-serif';
c.fillText(weights[weights.length-1], x+42, 200-(weights[weights.length-1]));
</script>
</body>
</html>