about summary refs log tree commit diff
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>