aboutsummaryrefslogtreecommitdiff
path: root/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/line.html
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/line.html')
-rwxr-xr-xwqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/line.html96
1 files changed, 96 insertions, 0 deletions
diff --git a/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/line.html b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/line.html
new file mode 100755
index 00000000..917437e3
--- /dev/null
+++ b/wqflask/wqflask/static/packages/novus-nvd3-d51729c/examples/line.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
+<style>
+
+body {
+ overflow-y:scroll;
+}
+
+</style>
+<body>
+
+<svg id="test1"></svg>
+
+<script src="../lib/d3.v3.js"></script>
+<script src="../nv.d3.js"></script>
+<script src="../src/models/legend.js"></script>
+<script src="../src/models/line.js"></script>
+<script src="../src/utils.js"></script>
+<script>
+
+
+
+//Format A
+nv.addGraph({
+ generate: function() {
+ var width = nv.utils.windowSize().width - 40,
+ height = nv.utils.windowSize().height - 40;
+
+ var chart = nv.models.line()
+ .width(width)
+ .height(height)
+ .margin({top: 20, right: 20, bottom: 20, left: 20})
+
+
+ d3.select('#test1')
+ .attr('width', width)
+ .attr('height', height)
+ .datum(sinAndCos())
+ .call(chart);
+
+ return chart;
+ },
+ callback: function(graph) {
+ 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')
+ .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>