<!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/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/models/lineWithFourAxes.js"></script>
<script>
/************
* Considering making an nv.charts object which will contain abstractions similar to the one below,
* but with the usual d3 reusable style.
* I could make this abstraction inside the layer above, but this layer incorporates some jQuery, so
* thinking nv.charts can be the glue that's not 100% d3
************/
var selector = '#chart1',
chart = nv.models.lineWithLegend(),
data = sinAndCos(),
xTickFormat = d3.format(',r'),
yTickFormat = d3.format(',.2f'),
xAxisLabel = null,
yAxisLabel = 'Voltage (v)',
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)
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>' + e.series.key + '</h3>' +
'<p>' +
formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
'</p>';
nv.tooltip.show([left, top], content);
};
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()())
.call(chart);
};
}
});
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>