<!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;
}
#chart1 {
height: 500px;
margin: 10px;
min-width: 100px;
min-height: 100px;
/*
Minimum height and width is a good idea to prevent negative SVG dimensions...
For example width should be =< margin.left + margin.right + 1,
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
*/
}
</style>
<body>
<div id="chart1">
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/discreteBar.js"></script>
<script src="../src/models/discreteBarWithAxes.js"></script>
<script src="stream_layers.js"></script>
<script>
historicalBarChart = [
{
key: "Cumulative Return",
values: [
{
"label" : "CDS / Options" ,
"value" : -29.765957771107
} ,
{
"label" : "Cash" ,
"value" : 0
} ,
{
"label" : "Corporate Bonds" ,
"value" : 32.807804682612
} ,
{
"label" : "Equity" ,
"value" : 196.45946739256
} ,
{
"label" : "Index Futures" ,
"value" : 0.19434030906893
} ,
{
"label" : "Options" ,
"value" : -98.079782601442
} ,
{
"label" : "Preferred" ,
"value" : -13.925743130903
} ,
{
"label" : "Not Available" ,
"value" : -5.1387322875705
}
]
}
];
var selector = '#chart1',
chart = nv.models.discreteBarWithAxes()
.color(d3.scale.category10().range())
.x(function(d) { return d.label })
.y(function(d) { return d.value }),
data = historicalBarChart,
xTickFormat = function(d) { return d },
yTickFormat = d3.format(',.2f'),
xAxisLabel = null,
yAxisLabel = null,
duration = 500;
nv.addGraph({
generate: function() {
var container = d3.select(selector),
width = function() { return parseInt(container.style('width')) },
height = function() { return parseInt(container.style('height')) },
svg = container.append('svg');
chart
.width(width)
.height(height)
.staggerLabels(true);
chart.xAxis
.tickFormat(xTickFormat);
chart.yAxis
.tickFormat(yTickFormat)
.axisLabel(yAxisLabel);
svg
.attr('width', width())
.attr('height', height())
.datum(data)
.transition().duration(duration).call(chart);
return chart;
},
callback: function(chart) {
var showTooltip = function(e) {
var offsetElement = document.getElementById(selector.substr(1)),
left = e.pos[0] + offsetElement.offsetLeft,
top = e.pos[1] + offsetElement.offsetTop,
formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
formatX = chart.xAxis.tickFormat();
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
// ex. daily data without weekends, x is the index, while you want the date
var content = '<h3>' + formatX(chart.x()(e.point)) + '</h3>' +
'<p>' +
formatY(chart.y()(e.point)) +
'</p>';
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
};
chart.dispatch.on('tooltipShow', showTooltip);
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
window.onresize= function() {
// now that width and height are functions, should be automatic..of course you can always override them
d3.select('#chart1 svg')
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
.attr('height', chart.height()())
.transition().duration(duration)
.call(chart);
/*
d3.select('#chart1 svg')
.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
.attr('height', chart.height()())
.call(chart);
*/
};
}
});
</script>