Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 250 lines (248 sloc) 4.47 KB
<!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 / 2) - 20;
function onLoad() {
var c6 = new ChartX("ID_1", {
width: panelwidth,
height: 160,
bufferfactor: 3,
title: "Comparison Line chart",
legend: true,
container: "charts",
bgcolor: "black",
linewidth: 1,
series: [
{
name: "WTI",
color: "#cc3300",
type: "line",
yscale: 870,
cross: -300
},
{
name: "Brent",
color: "#339900",
type: "line",
yscale: 870,
cross: -300
}
]
});
var c1 = new ChartX("ID_2", {
width: panelwidth,
height: 160,
bufferfactor: 3,
title: "Comparison Up/Down Stacked chart",
legend: true,
container: "charts",
bgcolor: "black",
linewidth: 1,
series: [
{
name: "WTI",
color: "#cc3300",
type: "stack",
yscale: 20,
cross: 0
},
{
name: "Brent",
color: "#339900",
type: "stack",
yscale: 20,
cross: 0
}
]
});
var c2 = new ChartX("ID_3", {
width: panelwidth,
height: 160,
bufferfactor: 3,
title: "Single Series Up Down Chart",
legend: true,
container: "charts",
bgcolor: "black",
linewidth: 1,
grid: {
color: "#666666",
hsegments: panelwidth/5,
vsegments: 160/5,
linewidth: .5
},
series: [
{
name: "Brent",
color: "#339900",
type: "line",
yscale: 40,
cross: 20
}
]
});
var c4 = new ChartX("ID_4", {
width: panelwidth,
height: 160,
bufferfactor: 3,
title: "Single Series Stacked Chart",
legend: true,
container: "charts",
bgcolor: "black",
linewidth: 1,
grid: {
color: "#666666",
hsegments: panelwidth/5,
vsegments: 160/5,
linewidth: .5
},
series: [
{
name: "Spread",
color: "#cc66cc",
type: "stack",
yscale: 30,
cross: 15
}
]
});
var c3 = new ChartX("ID_5", {
width: panelwidth,
height: 160,
bufferfactor: 3,
title: "Static Bollinger (no refresh)",
legend: true,
container: "charts",
bgcolor: "black",
grid: {
color: "#666666",
hsegments: panelwidth/5,
vsegments: 160/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 prev = null;
var lastspread = 0;
setInterval(function() {
var price = prices[idx++];
var spread = ((price[2]*100) - (price[3]*100));
if(prev) {
var wti = ((price[2] * 100) - (prev[2] * 100));
var brent = ((price[3] * 100) - (prev[3] * 100));
c1.draw({
WTI: wti,
Brent: brent
});
c2.draw({
Brent: brent
});
c4.draw({
Spread: spread - lastspread,
});
c6.draw({
WTI: (price[2] * 100) - 11000,
Brent: (price[3] * 100) - 8000
});
}
prev = price;
lastspread = spread;
if(idx == prices.length) idx = 0;
}, 100);
var ma = {
len: 20,
data: []
};
prices.forEach(function(price) {
// 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();
c3.draw({
WTI: (price[2] * 100)-11300,
MA1: avg,
B1: avg + (sdev * 2),
B2: avg - (sdev * 2)
});
});
}
</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>