Skip to content

Instantly share code, notes, and snippets.

@vsinha

vsinha/plot.html

Created August 8, 2014 23:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save vsinha/591c6414b010445d75c5 to your computer and use it in GitHub Desktop.
Save vsinha/591c6414b010445d75c5 to your computer and use it in GitHub Desktop.
Download ZIP
dygraphs plot tool for stock data (stored as csvs in data/ folder relative to wherever this file is). Run "python -m SimpleHTTPServer" in the folder this file is in
Raw
plot.html
<html>
<head>
<script type="text/javascript" src="dygraph-combined.js"></script>
<style>
body{
font-family:"Helvetica";
}
.graph {
height: 250px;
}
.select_style {
width: auto;
height: 600px;
padding: 5px;
font-size:11px;
float: left;
}
.graphContainer {
margin-left: 70px;
}
</style>
</head>
<body>
<div class="select_style">
<form action="form_action.asp">
<button type="button" id="renderButton" onclick="render()">Render</button><br>
<label><input type="checkbox" id="checkbox0" name="tickers" value="AAPL">AAPL</label></br>
<label><input type="checkbox" id="checkbox1" name="tickers" value="ADBE">ADBE</label></br>
<label><input type="checkbox" id="checkbox2" name="tickers" value="ADP">ADP</label></br>
<label><input type="checkbox" id="checkbox3" name="tickers" value="ADSK">ADSK</label></br>
<label><input type="checkbox" id="checkbox4" name="tickers" value="AKAM">AKAM</label></br>
<label><input type="checkbox" id="checkbox5" name="tickers" value="ALTR">ALTR</label></br>
<label><input type="checkbox" id="checkbox6" name="tickers" value="ALXN">ALXN</label></br>
<label><input type="checkbox" id="checkbox7" name="tickers" value="AMAT">AMAT</label></br>
<label><input type="checkbox" id="checkbox8" name="tickers" value="AMGN">AMGN</label></br>
<label><input type="checkbox" id="checkbox9" name="tickers" value="AMLN">AMLN</label></br>
<label><input type="checkbox" id="checkbox10" name="tickers" value="AMZN">AMZN</label></br>
<label><input type="checkbox" id="checkbox11" name="tickers" value="APOL">APOL</label></br>
<label><input type="checkbox" id="checkbox12" name="tickers" value="ATVI">ATVI</label></br>
<label><input type="checkbox" id="checkbox13" name="tickers" value="BBBY">BBBY</label></br>
<label><input type="checkbox" id="checkbox14" name="tickers" value="BIIB">BIIB</label></br>
<label><input type="checkbox" id="checkbox15" name="tickers" value="BMC">BMC</label></br>
<label><input type="checkbox" id="checkbox16" name="tickers" value="BRCM">BRCM</label></br>
<label><input type="checkbox" id="checkbox17" name="tickers" value="CA">CA</label></br>
<label><input type="checkbox" id="checkbox18" name="tickers" value="CELG">CELG</label></br>
<label><input type="checkbox" id="checkbox19" name="tickers" value="CEPH">CEPH</label></br>
<label><input type="checkbox" id="checkbox20" name="tickers" value="CERN">CERN</label></br>
<label><input type="checkbox" id="checkbox21" name="tickers" value="CHKP">CHKP</label></br>
<label><input type="checkbox" id="checkbox22" name="tickers" value="CHRW">CHRW</label></br>
<label><input type="checkbox" id="checkbox23" name="tickers" value="CMCSA">CMCSA</label></br>
<label><input type="checkbox" id="checkbox24" name="tickers" value="COST">COST</label></br>
<label><input type="checkbox" id="checkbox25" name="tickers" value="CSCO">CSCO</label></br>
<label><input type="checkbox" id="checkbox26" name="tickers" value="CTAS">CTAS</label></br>
<label><input type="checkbox" id="checkbox27" name="tickers" value="CTSH">CTSH</label></br>
<label><input type="checkbox" id="checkbox28" name="tickers" value="CTXS">CTXS</label></br>
<label><input type="checkbox" id="checkbox29" name="tickers" value="DELL">DELL</label></br>
<label><input type="checkbox" id="checkbox30" name="tickers" value="DISH">DISH</label></br>
<label><input type="checkbox" id="checkbox31" name="tickers" value="DLTR">DLTR</label></br>
<label><input type="checkbox" id="checkbox32" name="tickers" value="EBAY">EBAY</label></br>
<label><input type="checkbox" id="checkbox33" name="tickers" value="ERTS">ERTS</label></br>
<label><input type="checkbox" id="checkbox34" name="tickers" value="ESRX">ESRX</label></br>
<label><input type="checkbox" id="checkbox35" name="tickers" value="EXPD">EXPD</label></br>
<label><input type="checkbox" id="checkbox36" name="tickers" value="FAST">FAST</label></br>
<label><input type="checkbox" id="checkbox37" name="tickers" value="FFIV">FFIV</label></br>
<label><input type="checkbox" id="checkbox38" name="tickers" value="FISV">FISV</label></br>
<label><input type="checkbox" id="checkbox39" name="tickers" value="FLEX">FLEX</label></br>
<label><input type="checkbox" id="checkbox40" name="tickers" value="FLIR">FLIR</label></br>
<label><input type="checkbox" id="checkbox41" name="tickers" value="GENZ">GENZ</label></br>
<label><input type="checkbox" id="checkbox42" name="tickers" value="GILD">GILD</label></br>
<label><input type="checkbox" id="checkbox43" name="tickers" value="GMCR">GMCR</label></br>
<label><input type="checkbox" id="checkbox44" name="tickers" value="GRMN">GRMN</label></br>
<label><input type="checkbox" id="checkbox45" name="tickers" value="HANS">HANS</label></br>
<label><input type="checkbox" id="checkbox46" name="tickers" value="HOLX">HOLX</label></br>
<label><input type="checkbox" id="checkbox47" name="tickers" value="HSIC">HSIC</label></br>
<label><input type="checkbox" id="checkbox48" name="tickers" value="ILMN">ILMN</label></br>
<label><input type="checkbox" id="checkbox49" name="tickers" value="INFY">INFY</label></br>
<label><input type="checkbox" id="checkbox50" name="tickers" value="INTC">INTC</label></br>
<label><input type="checkbox" id="checkbox51" name="tickers" value="INTU">INTU</label></br>
<label><input type="checkbox" id="checkbox52" name="tickers" value="ISRG">ISRG</label></br>
<label><input type="checkbox" id="checkbox53" name="tickers" value="JAVA">JAVA</label></br>
<label><input type="checkbox" id="checkbox54" name="tickers" value="JBHT">JBHT</label></br>
<label><input type="checkbox" id="checkbox55" name="tickers" value="JNPR">JNPR</label></br>
<label><input type="checkbox" id="checkbox56" name="tickers" value="JOYG">JOYG</label></br>
<label><input type="checkbox" id="checkbox57" name="tickers" value="KLAC">KLAC</label></br>
<label><input type="checkbox" id="checkbox58" name="tickers" value="LLTC">LLTC</label></br>
<label><input type="checkbox" id="checkbox59" name="tickers" value="LRCX">LRCX</label></br>
<label><input type="checkbox" id="checkbox60" name="tickers" value="MAT">MAT</label></br>
<label><input type="checkbox" id="checkbox61" name="tickers" value="MCHP">MCHP</label></br>
<label><input type="checkbox" id="checkbox62" name="tickers" value="MICC">MICC</label></br>
<label><input type="checkbox" id="checkbox63" name="tickers" value="MRVL">MRVL</label></br>
<label><input type="checkbox" id="checkbox64" name="tickers" value="MSFT">MSFT</label></br>
<label><input type="checkbox" id="checkbox65" name="tickers" value="MU">MU</label></br>
<label><input type="checkbox" id="checkbox66" name="tickers" value="MXIM">MXIM</label></br>
<label><input type="checkbox" id="checkbox67" name="tickers" value="MYL">MYL</label></br>
<label><input type="checkbox" id="checkbox68" name="tickers" value="NTAP">NTAP</label></br>
<label><input type="checkbox" id="checkbox69" name="tickers" value="NVDA">NVDA</label></br>
<label><input type="checkbox" id="checkbox70" name="tickers" value="ORCL">ORCL</label></br>
<label><input type="checkbox" id="checkbox71" name="tickers" value="ORLY">ORLY</label></br>
<label><input type="checkbox" id="checkbox72" name="tickers" value="PAYX">PAYX</label></br>
<label><input type="checkbox" id="checkbox73" name="tickers" value="PCAR">PCAR</label></br>
<label><input type="checkbox" id="checkbox74" name="tickers" value="PCLN">PCLN</label></br>
<label><input type="checkbox" id="checkbox75" name="tickers" value="PDCO">PDCO</label></br>
<label><input type="checkbox" id="checkbox76" name="tickers" value="PPDI">PPDI</label></br>
<label><input type="checkbox" id="checkbox77" name="tickers" value="QCOM">QCOM</label></br>
<label><input type="checkbox" id="checkbox78" name="tickers" value="RIMM">RIMM</label></br>
<label><input type="checkbox" id="checkbox79" name="tickers" value="ROST">ROST</label></br>
<label><input type="checkbox" id="checkbox80" name="tickers" value="RYAAY">RYAAY</label></br>
<label><input type="checkbox" id="checkbox81" name="tickers" value="SBUX">SBUX</label></br>
<label><input type="checkbox" id="checkbox82" name="tickers" value="SIAL">SIAL</label></br>
<label><input type="checkbox" id="checkbox83" name="tickers" value="SIRI">SIRI</label></br>
<label><input type="checkbox" id="checkbox84" name="tickers" value="SNDK">SNDK</label></br>
<label><input type="checkbox" id="checkbox85" name="tickers" value="SPLS">SPLS</label></br>
<label><input type="checkbox" id="checkbox86" name="tickers" value="SRCL">SRCL</label></br>
<label><input type="checkbox" id="checkbox87" name="tickers" value="STLD">STLD</label></br>
<label><input type="checkbox" id="checkbox88" name="tickers" value="SYMC">SYMC</label></br>
<label><input type="checkbox" id="checkbox89" name="tickers" value="TEVA">TEVA</label></br>
<label><input type="checkbox" id="checkbox90" name="tickers" value="URBN">URBN</label></br>
<label><input type="checkbox" id="checkbox91" name="tickers" value="VOD">VOD</label></br>
<label><input type="checkbox" id="checkbox92" name="tickers" value="VRSN">VRSN</label></br>
<label><input type="checkbox" id="checkbox93" name="tickers" value="VRTX">VRTX</label></br>
<label><input type="checkbox" id="checkbox94" name="tickers" value="WFM">WFM</label></br>
<label><input type="checkbox" id="checkbox95" name="tickers" value="XRAY">XRAY</label></br>
<label><input type="checkbox" id="checkbox96" name="tickers" value="YHOO">YHOO</label></br>
<label><input type="checkbox" id="checkbox97" name="tickers" value="GMCR">GMCR</label></br>
</form>
</div>
<div class="graphContainer">
<div id="graphdiv0" class="graph"></div>
<div id="graphdiv1" class="graph"></div>
<div id="graphdiv2" class="graph"></div>
<div id="graphdiv3" class="graph"></div>
<div id="graphdiv4" class="graph"></div>
<div id="graphdiv5" class="graph"></div>
<div id="graphdiv6" class="graph"></div>
<div id="graphdiv7" class="graph"></div>
<div id="graphdiv8" class="graph"></div>
<div id="graphdiv9" class="graph"></div>
<div id="graphdiv10" class="graph"></div>
<div id="graphdiv11" class="graph"></div>
<div id="graphdiv12" class="graph"></div>
<div id="graphdiv13" class="graph"></div>
<div id="graphdiv14" class="graph"></div>
<div id="graphdiv15" class="graph"></div>
<div id="graphdiv16" class="graph"></div>
<div id="graphdiv17" class="graph"></div>
<div id="graphdiv18" class="graph"></div>
<div id="graphdiv19" class="graph"></div>
<div id="graphdiv20" class="graph"></div>
<div id="graphdiv21" class="graph"></div>
<div id="graphdiv22" class="graph"></div>
<div id="graphdiv23" class="graph"></div>
<div id="graphdiv24" class="graph"></div>
<div id="graphdiv25" class="graph"></div>
<div id="graphdiv26" class="graph"></div>
<div id="graphdiv27" class="graph"></div>
<div id="graphdiv28" class="graph"></div>
<div id="graphdiv29" class="graph"></div>
</div>
<script type="text/javascript">
var graphs = [];
var blockRedraw = false;
var numgraphs = 5;
var tickers = document.forms[0].tickers;
function render() {
graphs = [];
selected = new Array();
for (var i = 0; i < tickers.length; i++) {
if (tickers[i].checked) {
selected.push(tickers[i].value);
console.log(tickers[i].value);
}
}
for (var i = 0; i < selected.length; i++) {
console.log ("constructing in graphdiv" + i)
div = document.getElementById("graphdiv" + i);
graphs.push(
new Dygraph(
div,
"data/stocks." + selected[i] + ".volume.csv", // path to CSV file
{
rollPeriod: 7,
visibility: [true, true, true, false, false, false],
series: {
rownumber: {
axis: 'x1'
},
value: {
strokeWidth: 0.5
},
anomalyScore: {
axis: 'y2',
strokeWidth: 1,
valueRange: [0.0, 1.0]
}
},
legend: 'always',
title: selected[i],
drawCallback: function(me, initial) {
if (blockRedraw || initial) return;
blockRedraw = true;
var range = me.xAxisRange();
var yrange = me.yAxisRange();
for (var j = 0; j < selected.length; j++) {
if (graphs[j] == me) continue;
graphs[j].updateOptions({
dateWindow: range,
valueRange: yrange
} );
}
blockRedraw = false;
}
}
));
}}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment