added yahoo pipes example
Bob Monteverde
12 years ago
parent
333e77e167
commit
0179534896
@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="controls">
|
||||
<label for="ticker">Stock Ticker: </label>
|
||||
<input type="text" id="ticker" name="ticker" value="GOOG"></input>
|
||||
|
||||
<label for="endDate">Start Date: </label>
|
||||
<input type="text" id="startDate" name="startDate" value="-1 year"></input>
|
||||
|
||||
<label for="endDate">End Date: </label>
|
||||
<input type="text" id="endDate" name="endDate" value="now"></input>
|
||||
|
||||
<label for="frequency">Frequency: </label>
|
||||
<select id="frequency" name="frequency">
|
||||
<option value="d">Daily</option>
|
||||
<option value="w">Weekly</option>
|
||||
<option value="m">Monthly</option>
|
||||
<!--<option value="v">Dividends Only</option>-->
|
||||
</select>
|
||||
<button id="getData" name="getData">Get Data</button>
|
||||
</div>
|
||||
|
||||
<h1><span id="stockName"></span> (<span id="stockSymbol"></span>)</h1>
|
||||
<h2><span id="stockValue"></span> <span id="stockChange"></span> (<span id="stockChangePercent"></span>) </h2>
|
||||
|
||||
<div id="chart1">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/tooltip.js"></script>
|
||||
<script src="../src/utils.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/axis.js"></script>
|
||||
<script src="../src/models/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/historicalBar.js"></script>
|
||||
<script src="../src/models/linePlusBarChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
d3.select('#getData').on('click', chooseTicker);
|
||||
|
||||
chooseTicker();
|
||||
|
||||
|
||||
function chooseTicker() {
|
||||
var ticker = d3.select('#ticker').property('value');
|
||||
var startDate = d3.select('#startDate').property('value');
|
||||
var endDate = d3.select('#endDate').property('value');
|
||||
var frequency = d3.select('#frequency').property('value');
|
||||
|
||||
getHistoricalStockData(ticker, startDate, endDate, frequency);
|
||||
getStockInfo(ticker);
|
||||
}
|
||||
|
||||
|
||||
function getStockInfo(symbol) {
|
||||
d3.json('http://pipes.yahoo.com/pipes/pipe.run?_id=ctBz1YeB3BGxfaUVqWIyXQ&_render=json&StockNames=' + symbol, function(data) {
|
||||
var info = data.value.items[0];
|
||||
|
||||
//nv.log(info);
|
||||
|
||||
d3.select('#stockName').text(info.StockName);
|
||||
d3.select('#stockSymbol').text(info.Symbol);
|
||||
d3.select('#stockValue').text(info.StockValue);
|
||||
d3.select('#stockChange')
|
||||
.text(info.Change)
|
||||
.style('color', parseFloat(info.Change) > 0 ? 'green' : 'red' );
|
||||
d3.select('#stockChangePercent').text(d3.format('.2%')(parseInt(info.Change) / info.StockValue));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getHistoricalStockData(symbol, startDate, endDate, frequency) {
|
||||
startDate = startDate || '-1 year';
|
||||
endDate = endDate || 'now';
|
||||
frequency = frequency || 'd';
|
||||
|
||||
d3.csv('http://pipes.yahoo.com/pipes/pipe.run?_id=e9668915a9ae04cb96c6f8c63279ad7f&_render=csv&enddate=' + endDate + '&startdate=' + startDate + '&frequency=' + frequency + '&ticker=' + symbol, function(data) {
|
||||
//nv.log(data);
|
||||
|
||||
data = data.reverse(); //order data oldest to newest, left to right
|
||||
|
||||
var lineData = [
|
||||
{
|
||||
"key": "Volume",
|
||||
"bar": true,
|
||||
"values": data.map(function(d) {
|
||||
return {
|
||||
'x': Date.parse(d.Date),
|
||||
'y': d.Volume / 1000 //TODO: figure out why y domain was maxing out at 9933800
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
"key": "Price",
|
||||
"bar": false,
|
||||
"values": data.map(function(d) {
|
||||
return {
|
||||
'x': Date.parse(d.Date),
|
||||
'y': d.Close
|
||||
}
|
||||
})
|
||||
}
|
||||
];
|
||||
|
||||
//nv.log(lineData);
|
||||
|
||||
//Having issue with tooltips when updating data
|
||||
d3.selectAll('#chart1 svg *').remove();
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.linePlusBarChart()
|
||||
.margin({top: 30, right: 70, bottom: 50, left: 55})
|
||||
.x(function(d,i) { return i })
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
// Use if we are removing weekends/holidays
|
||||
chart.xAxis
|
||||
.tickPadding(7)
|
||||
.tickFormat(function(d) {
|
||||
var dx = lineData[0].values[d] && lineData[0].values[d].x || 0;
|
||||
return d3.time.format('%x')(new Date(dx))
|
||||
});
|
||||
|
||||
// Use to treat dates linear
|
||||
//chart.xAxis.tickFormat(function(d) {
|
||||
//return d3.time.format('%x')(new Date(d))
|
||||
//});
|
||||
|
||||
chart.yAxis1
|
||||
.tickFormat(function(d) { return d3.format(',f')(d) + 'K' });
|
||||
|
||||
chart.yAxis2
|
||||
.tickFormat(function(d) { return '$' + d3.format(',.2f')(d) });
|
||||
|
||||
chart.bars.forceY([0]);
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(lineData)
|
||||
.transition().duration(500).call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue