new demo of a chart w/ no boxy elements, plus a spark line (a tiny, tiny dygraph)

[dygraphs.git] / tests / unboxed-spark.html
diff --git a/tests/unboxed-spark.html b/tests/unboxed-spark.html

new file mode 100644 (file)

index 0000000..06e10bb
--- /dev/null
+++ b/tests/unboxed-spark.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>dygraphs unboxed</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="../excanvas.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
+    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
+    <script type="text/javascript" src="../dygraph-canvas.js"></script>
+    <script type="text/javascript" src="../dygraph.js"></script>
+    <script type="text/javascript" src="data.js"></script>
+    <style type="text/css">
+      #div_spark {
+        display: inline;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This shows dygraphs without any boxlike elements (i.e. axes or grids):</p>
+    <div id="div_g" style="width:600px; height:300px;"></div>
+
+    <script type="text/javascript">
+      var show_box = false;
+      g = new Dygraph(
+            document.getElementById("div_g"),
+            data, {
+              drawXAxis: show_box,
+              drawYAxis: show_box,
+              drawXGrid: show_box,
+              drawYGrid: show_box
+            }
+          );
+
+      function toggleBox(btn) {
+        show_box = !show_box;
+        document.getElementById("div_g").style.border = show_box ? '1px solid black' : '';
+        if (show_box) {
+          btn.innerHTML = 'Hide box';
+        } else {
+          btn.innerHTML = 'Show box';
+        }
+      }
+    </script>
+
+    <button onClick='toggleBox(this)'>Show box</button>
+
+    <!-- Dygraphs constructs a div inside of whatever div we pass in. So the container div can't be a span or have display: inline-block. We use a table to get the sparkline to display on the same line as the text. -->
+    <p>
+    <table><tr><td>This style can be used to produce interactive sparklines with dygraphs:</td><td><div id="div_spark" style="width:100px; height:20px;"></div></td></tr></table>
+    </p>
+
+    <script type="text/javascript">
+      new Dygraph(
+            document.getElementById("div_spark"),
+            data, {
+              drawXAxis: false,
+              drawYAxis: false,
+              drawXGrid: false,
+              drawYGrid: false,
+              strokeWidth: 1.0,
+              rollPeriod: 7,
+              labelsDiv: '',
+              highlightCircleSize: 2
+            }
+          );
+    </script>
+  </body>
+</html>