aboutsummaryrefslogtreecommitdiff
path: root/wqflask/wqflask/static/packages/novus-nvd3-d51729c/deprecated/lineWithFocus.html
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask/wqflask/static/packages/novus-nvd3-d51729c/deprecated/lineWithFocus.html')
-rwxr-xr-xwqflask/wqflask/static/packages/novus-nvd3-d51729c/deprecated/lineWithFocus.html137
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>