diff options
Diffstat (limited to 'wqflask/wqflask/static/packages/novus-nvd3-d51729c/deprecated/lineWithFocus.html')
-rwxr-xr-x | wqflask/wqflask/static/packages/novus-nvd3-d51729c/deprecated/lineWithFocus.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/wqflask/wqflask/static/packages/novus-nvd3-d51729c/deprecated/lineWithFocus.html b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/deprecated/lineWithFocus.html new file mode 100755 index 00000000..c845bcf8 --- /dev/null +++ b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/deprecated/lineWithFocus.html @@ -0,0 +1,137 @@ +<!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="../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/scatter.js"></script> +<script src="../src/models/line.js"></script> +<script src="../src/models/lineWithFocus.js"></script> +<script src="stream_layers.js"></script> +<script> + + var test_data = stream_layers(3,128,.1).map(function(data, i) { + return { + key: 'Stream' + i, + values: data + }; + }); + +nv.addGraph({ + generate: function() { + var width = nv.utils.windowSize().width - 40, + height = nv.utils.windowSize().height - 40; + + var chart = nv.models.lineWithFocus() + .width(width) + .height(height) + .yTickFormat(d3.format('.2r')) + .xTickFormat(d3.format('.2r')) + + + var svg = d3.select('#test1 svg') + .attr('width', width) + .attr('height', height) + .datum(test_data); + + svg.transition().duration(500).call(chart); + + return chart; + }, + callback: function(graph) { + + graph.dispatch.on('tooltipShow', function(e) { + var offsetElement = document.getElementById("test1"), + left = e.pos[0] + offsetElement.offsetLeft, + top = e.pos[1] + offsetElement.offsetTop, + formatter = d3.format('.2r'); + + var content = '<h3>' + e.series.key + '</h3>' + + '<p>' + + formatter(graph.y()(e.point)) + ', ' + formatter(graph.x()(e.point)) + + '</p>'; + + nv.tooltip.show([left, top], content); + }); + + graph.dispatch.on('tooltipHide', function(e) { + nv.tooltip.cleanup(); + }); + + + + window.onresize = function() { + var width = nv.utils.windowSize().width - 40, + height = nv.utils.windowSize().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> |