You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
11 KiB
HTML
170 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
|
|
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
|
|
|
<style>
|
|
|
|
body {
|
|
overflow-y:scroll;
|
|
}
|
|
|
|
text {
|
|
font: 12px sans-serif;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
|
|
<div id="test1">
|
|
<svg></svg>
|
|
</div>
|
|
|
|
<script src="../lib/d3.v2.js"></script>
|
|
<script src="../lib/jquery.min.js"></script>
|
|
<script src="../nv.d3.js"></script>
|
|
<script src="../src/nvtooltip.js"></script>
|
|
<script src="../src/models/legend.js"></script>
|
|
<script src="../src/models/xaxis.js"></script>
|
|
<script src="../src/models/yaxis.js"></script>
|
|
<script src="../src/models/line.js"></script>
|
|
<script src="../src/models/cumulativeLine.js"></script>
|
|
<script>
|
|
|
|
|
|
var cumulativeTestData = [
|
|
{
|
|
key: "Long",
|
|
values: [ [ 1201755600000 , -6.774298931796] , [ 1204261200000 , -11.422461282769] , [ 1206936000000 , -10.219916615529] , [ 1209528000000 , -0.56407600751219] , [ 1212206400000 , 4.6840307972664] , [ 1214798400000 , -3.9248672389375] , [ 1217476800000 , -6.0716225772829] , [ 1220155200000 , -5.7778068668664] , [ 1222747200000 , -23.305053130956] , [ 1225425600000 , -36.265703536880] , [ 1228021200000 , -42.370839876110] , [ 1230699600000 , -40.980153086928] , [ 1233378000000 , -43.453115415726] , [ 1235797200000 , -47.126268843788] , [ 1238472000000 , -45.640450538503] , [ 1241064000000 , -39.069177821319] , [ 1243742400000 , -32.473149326513] , [ 1246334400000 , -32.839058643003] , [ 1249012800000 , -24.086484363256] , [ 1251691200000 , -20.778110994079] , [ 1254283200000 , -14.680659434995] , [ 1256961600000 , -18.037208993777] , [ 1259557200000 , -11.029707170002] , [ 1262235600000 , -10.290150526116] , [ 1264914000000 , -15.275247251944] , [ 1267333200000 , -13.193884134335] , [ 1270008000000 , -5.2907717177462] , [ 1272600000000 , -3.9721079979652] , [ 1275278400000 , -14.621491396228] , [ 1277870400000 , -17.834038951494] , [ 1280548800000 , -9.7980978780076] , [ 1283227200000 , -12.367670799178] , [ 1285819200000 , 5.0872546622468] , [ 1288497600000 , 9.8628117206068] , [ 1291093200000 , 9.6821647981428] , [ 1293771600000 , 15.542754406224] , [ 1296450000000 , 15.169718066427] , [ 1298869200000 , 20.633132200089] , [ 1301544000000 , 20.947418513749] , [ 1304136000000 , 27.567424162979] , [ 1306814400000 , 24.901938361681] , [ 1309406400000 , 22.497073375650] , [ 1312084800000 , 21.987088423124] , [ 1314763200000 , 3.1254197967874] , [ 1317355200000 , -8.0186535759880] , [ 1320033600000 , 1.0475042879104] , [ 1322629200000 , -2.1426714011605] , [ 1325307600000 , -5.2893935115000] , [ 1327986000000 , 6.1945068788305] , [ 1330491600000 , 13.100019228710] , [ 1333166400000 , 15.238895035959]]
|
|
},
|
|
{
|
|
key: "Short",
|
|
values: [ [ 1201755600000 , 1.6967185806565] , [ 1204261200000 , 2.9544605100342] , [ 1206936000000 , 3.5676649424863] , [ 1209528000000 , 0.70848661177785] , [ 1212206400000 , -1.7076190259865] , [ 1214798400000 , 7.8105595020039] , [ 1217476800000 , 8.5476021506446] , [ 1220155200000 , 7.1576538909335] , [ 1222747200000 , 14.086479472107] , [ 1225425600000 , 26.638902767663] , [ 1228021200000 , 29.002916299172] , [ 1230699600000 , 23.336734970188] , [ 1233378000000 , 25.785466305977] , [ 1235797200000 , 30.826840805638] , [ 1238472000000 , 28.381484497177] , [ 1241064000000 , 21.759783928799] , [ 1243742400000 , 18.166465772204] , [ 1246334400000 , 18.161281272431] , [ 1249012800000 , 13.730944119173] , [ 1251691200000 , 12.667881940682] , [ 1254283200000 , 10.038695304926] , [ 1256961600000 , 10.957569008401] , [ 1259557200000 , 9.8350884213349] , [ 1262235600000 , 8.3833563781759] , [ 1264914000000 , 10.456986736208] , [ 1267333200000 , 9.5627923118989] , [ 1270008000000 , 4.5053427131636] , [ 1272600000000 , 3.5720754748957] , [ 1275278400000 , 10.347684404293] , [ 1277870400000 , 10.222585554753] , [ 1280548800000 , 6.8089787796259] , [ 1283227200000 , 12.714884589143] , [ 1285819200000 , 4.1572619086765] , [ 1288497600000 , 0.26499294242447] , [ 1291093200000 , 0.86369284151557] , [ 1293771600000 , -4.9641630596314] , [ 1296450000000 , -6.7956990273974] , [ 1298869200000 , -9.6706033017749] , [ 1301544000000 , -10.697126031426] , [ 1304136000000 , -13.637090599569] , [ 1306814400000 , -11.977608760351] , [ 1309406400000 , -8.8934853811678] , [ 1312084800000 , -5.7780351819777] , [ 1314763200000 , 0.013928580370608] , [ 1317355200000 , 7.8721613921440] , [ 1320033600000 , 4.5239162085138] , [ 1322629200000 , 7.1293313800248] , [ 1325307600000 , 8.9699302202310] , [ 1327986000000 , 3.4331637128227] , [ 1330491600000 , 0.87231281087281] , [ 1333166400000 , 0.34597419296371]]
|
|
},
|
|
{
|
|
key: "Gross",
|
|
values: [ [ 1201755600000 , -5.0775803511395] , [ 1204261200000 , -8.4680007727348] , [ 1206936000000 , -6.6522516730427] , [ 1209528000000 , 0.14441060426566] , [ 1212206400000 , 2.9764117712799] , [ 1214798400000 , 3.8856922630664] , [ 1217476800000 , 2.4759795733617] , [ 1220155200000 , 1.3798470240671] , [ 1222747200000 , -9.218573658849] , [ 1225425600000 , -9.626800769217] , [ 1228021200000 , -13.367923576938] , [ 1230699600000 , -17.643418116740] , [ 1233378000000 , -17.667649109749] , [ 1235797200000 , -16.299428038150] , [ 1238472000000 , -17.258966041326] , [ 1241064000000 , -17.309393892520] , [ 1243742400000 , -14.306683554309] , [ 1246334400000 , -14.677777370572] , [ 1249012800000 , -10.355540244083] , [ 1251691200000 , -8.110229053397] , [ 1254283200000 , -4.641964130069] , [ 1256961600000 , -7.079639985376] , [ 1259557200000 , -1.1946187486671] , [ 1262235600000 , -1.9067941479401] , [ 1264914000000 , -4.818260515736] , [ 1267333200000 , -3.6310918224361] , [ 1270008000000 , -0.7854290045826] , [ 1272600000000 , -0.4000325230695] , [ 1275278400000 , -4.273806991935] , [ 1277870400000 , -7.611453396741] , [ 1280548800000 , -2.9891190983817] , [ 1283227200000 , 0.347213789965] , [ 1285819200000 , 9.2445165709233] , [ 1288497600000 , 10.127804663031] , [ 1291093200000 , 10.545857639658] , [ 1293771600000 , 10.578591346593] , [ 1296450000000 , 8.3740190390296] , [ 1298869200000 , 10.962528898314] , [ 1301544000000 , 10.250292482323] , [ 1304136000000 , 13.930333563410] , [ 1306814400000 , 12.924329601330] , [ 1309406400000 , 13.603587994482] , [ 1312084800000 , 16.209053241146] , [ 1314763200000 , 3.1393483771580] , [ 1317355200000 , -0.1464921838440] , [ 1320033600000 , 5.5714204964242] , [ 1322629200000 , 4.9866599788643] , [ 1325307600000 , 3.6805367087310] , [ 1327986000000 , 9.6276705916532] , [ 1330491600000 , 13.972332039583] , [ 1333166400000 , 15.584869228923]]
|
|
},
|
|
{
|
|
key: "S&P 1500",
|
|
values: [ [ 1201755600000 , -5.9710800189518] , [ 1204261200000 , -8.9186908887917] , [ 1206936000000 , -9.3265754909255] , [ 1209528000000 , -4.7381178885542] , [ 1212206400000 , -3.0912920812728] , [ 1214798400000 , -11.116204586183] , [ 1217476800000 , -11.845729061204] , [ 1220155200000 , -10.462970905824] , [ 1222747200000 , -18.501870830803] , [ 1225425600000 , -32.616659607913] , [ 1228021200000 , -37.668891164316] , [ 1230699600000 , -36.722829020553] , [ 1233378000000 , -42.100391912416] , [ 1235797200000 , -48.249838295680] , [ 1238472000000 , -43.714511725956] , [ 1241064000000 , -37.944007905028] , [ 1243742400000 , -34.706605423145] , [ 1246334400000 , -34.526285928477] , [ 1249012800000 , -29.449295179018] , [ 1251691200000 , -26.893738314183] , [ 1254283200000 , -24.013011151663] , [ 1256961600000 , -25.698073456930] , [ 1259557200000 , -21.445628470490] , [ 1262235600000 , -19.480335623731] , [ 1264914000000 , -22.346030236959] , [ 1267333200000 , -19.775463207788] , [ 1270008000000 , -14.812442842643] , [ 1272600000000 , -13.148750272697] , [ 1275278400000 , -20.001724517317] , [ 1277870400000 , -24.333509222471] , [ 1280548800000 , -19.056593021706] , [ 1283227200000 , -22.826146186356] , [ 1285819200000 , -15.718227905522] , [ 1288497600000 , -12.522888999313] , [ 1291093200000 , -12.181363414422] , [ 1293771600000 , -6.2892434050551] , [ 1296450000000 , -4.1751220461218] , [ 1298869200000 , -0.75769110337973] , [ 1301544000000 , -0.40521206856089] , [ 1304136000000 , 2.5093887670054] , [ 1306814400000 , 1.3387467892848] , [ 1309406400000 , -0.38763177561303] , [ 1312084800000 , -2.5850739507076] , [ 1314763200000 , -8.0958326971042] , [ 1317355200000 , -14.939943551408] , [ 1320033600000 , -5.3273405660650] , [ 1322629200000 , -5.5140388315835] , [ 1325307600000 , -4.6491354185989] , [ 1327986000000 , -0.13977544505504] , [ 1330491600000 , 4.1131148964748] , [ 1333166400000 , 6.9778910857160]]
|
|
}
|
|
].map(function(line) {
|
|
line.values = line.values.map(function(d) { return {x: d[0], y: d[1]/100 }});
|
|
return line;
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
nv.addGraph({
|
|
generate: function() {
|
|
var width = $(window).width() - 40,
|
|
height = $(window).height() - 40;
|
|
|
|
var chart = nv.models.cumulativeLine()
|
|
.width(width)
|
|
.height(height)
|
|
//.margin({top: 20, right: 10, bottom: 50, left: 80})
|
|
|
|
//chart.yAxis.axisLabel('Cumulative');
|
|
//chart.xAxis.axisLabel('Date');
|
|
|
|
|
|
chart.yAxis.tickFormat(d3.format(',%'))
|
|
chart.xAxis.tickFormat(function(d) {
|
|
return d3.time.format('%x')(new Date(d))
|
|
})
|
|
|
|
//chart.xaxis.tickFormat(d3.format(".02f"))
|
|
|
|
var svg = d3.select('#test1 svg')
|
|
.attr('width', width)
|
|
.attr('height', height)
|
|
.datum(cumulativeTestData)
|
|
|
|
svg.transition().duration(500).call(chart);
|
|
|
|
return chart;
|
|
},
|
|
callback: function(graph) {
|
|
|
|
graph.dispatch.on('tooltipShow', function(e) {
|
|
var offset = $('#test1').offset(),
|
|
left = e.pos[0] + offset.left,
|
|
top = e.pos[1] + offset.top,
|
|
formatterY = d3.format(",.2%"),
|
|
formatterX = function(d) {
|
|
return d3.time.format('%x')(new Date(d))
|
|
};
|
|
|
|
var content = '<h3>' + e.series.key + '</h3>' +
|
|
'<p>' +
|
|
formatterY(graph.y()(e.point)) + ' on ' + formatterX(graph.x()(e.point)) +
|
|
'</p>';
|
|
|
|
//$('#positionTest').css({'left': left, 'top': top});
|
|
nvtooltip.show([left, top], content);
|
|
});
|
|
|
|
graph.dispatch.on('tooltipHide', function(e) {
|
|
nvtooltip.cleanup();
|
|
});
|
|
|
|
|
|
|
|
$(window).resize(function() {
|
|
var width = $(window).width() - 40,
|
|
height = $(window).height() - 40,
|
|
margin = graph.margin();
|
|
|
|
|
|
if (width < margin.left + margin.right + 20)
|
|
width = margin.left + margin.right + 20;
|
|
|
|
if (height < margin.top + margin.bottom + 20)
|
|
height = margin.top + margin.bottom + 20;
|
|
|
|
|
|
graph
|
|
.width(width)
|
|
.height(height);
|
|
|
|
d3.select('#test1 svg')
|
|
.attr('width', width)
|
|
.attr('height', height)
|
|
.call(graph);
|
|
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
|
|
function sinAndCos() {
|
|
var sin = [],
|
|
cos = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
sin.push({x: i, y: Math.sin(i/10)});
|
|
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
|
}
|
|
|
|
return [
|
|
{
|
|
values: sin,
|
|
key: "Sine Wave",
|
|
color: "#ff7f0e"
|
|
},
|
|
{
|
|
values: cos,
|
|
key: "Cosine Wave",
|
|
color: "#2ca02c"
|
|
}
|
|
];
|
|
}
|
|
|
|
|
|
</script>
|