-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo2.html
executable file
·124 lines (122 loc) · 2.36 KB
/
demo2.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Chart Demo</title>
<script type="text/javascript" src="js/chartx.js"></script>
<script type="text/javascript" src="js/prices.js"></script>
<script type="text/javascript" src="http://pseudosavant.googlecode.com/files/psMathStats.min.js"></script>
<script type="text/javascript">
var panelWidth = (window.innerWidth) - 20;
var panelHeight = (window.innerHeight) - 60;
function onLoad() {
var c6 = new ChartX("PRICE/WTI/BRN", {
width: panelWidth,
height: panelHeight,
bufferfactor: 3,
title: "WTI, Brent Price",
legend: true,
container: "charts",
bgcolor: "black",
grid: {
color: "#666666",
hsegments: panelWidth/5,
vsegments: panelHeight/5,
linewidth: .5
},
linewidth: 1,
series: [
{
name: "WTI",
color: "#cc3300",
type: "line",
yscale: 220,
cross: 0
},
{
name: "MA1",
color: "#33cc99",
type: "line",
yscale: 220,
cross: 0
},
{
name: "B1",
color: "#ffcc33",
type: "line",
yscale: 220,
cross: 0
},
{
name: "B2",
color: "#ffcc33",
type: "line",
yscale: 220,
cross: 0
}
]
});
var idx = 0;
var ma = {
len: 20,
data: []
};
setInterval(function() {
var price = prices[idx++];
// store last N prices for moving average
if(ma.data.length >= ma.len) {
ma.data.shift();
}
ma.data.push((price[2]*100)-11300);
var tot1 = 0;
ma.data.forEach(function(pp) {
tot1 += pp;
});
// moving average
var avg = tot1/ma.data.length;
// standard deviation
var sdev = ma.data.stdDev();
c6.draw({
WTI: (price[2] * 100)-11300,
MA1: avg,
B1: avg + (sdev * 2),
B2: avg - (sdev * 2)
});
if(idx == prices.length) idx = 0;
}, 10);
}
</script>
<style>
body, textarea, input, p, div {
font-family: "Lucida Console", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Consolas, "Andale Mono", "Courier New";
}
body {
background-color: #f5f5f5;
font-size: 8pt;
margin: 0;
padding: 4px;
}
div.cx-chart {
padding: 4px;
border: 1px solid silver;
margin: 2px;
float: left;
background-color: #999999;
color: white;
}
span.cx-legend-label {
background-color: black;
}
span.cx-legend-indicator {
background-color: black;
}
canvas.cx-canvas {
}
div.cx-legend {
background-color: black;
}
</style>
</head>
<body onload="onLoad()">
<div id="charts"></div>
</body>
</html>