[dygraphs.git] / tests / unboxed-spark.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../css/dygraph.css">
    <title>dygraphs unboxed</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dist/dygraph.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
      #div_spark {
        display: inline-block;
      }
    </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; border:1px solid white;"></div>

    <script type="text/javascript">
      var show_box = false;
      g = new Dygraph(
            document.getElementById("div_g"),
            data, {
              axes : {
                x : {
                  drawGrid: show_box,
                  drawAxis : show_box,
                },
                y : {
                  drawGrid: show_box,
                  drawAxis : show_box,
                }
              }
            }
          );

      function toggleBox(btn) {
        show_box = !show_box;
        document.getElementById("div_g").style.border = show_box ? '1px solid black' : '1px solid white';
        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">
      var g2 = new Dygraph(
            document.getElementById("div_spark"),
            data, {
              axes : {
                x : {
                  drawGrid: false,
                  drawAxis : false,
                },
                y : {
                  drawGrid: false,
                  drawAxis : false,
                }
              },
              strokeWidth: 1.0,
              rollPeriod: 7,
              labelsDiv: '',
              highlightCircleSize: 2
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
592f449f DV	1	<!DOCTYPE html>
	2	<html>
	3	<head>
93a5bb4c	4	<link rel="stylesheet" href="../css/dygraph.css">
592f449f	5	<title>dygraphs unboxed</title>
7e5ddc94 DV	6	<!--
	7	For production (minified) code, use:
	8	<script type="text/javascript" src="dygraph-combined.js"></script>
	9	-->
fbd6834a	10	<script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94	11
592f449f DV	12	<script type="text/javascript" src="data.js"></script>
	13	<style type="text/css">
	14	#div_spark {
01681f66	15	display: inline-block;
592f449f DV	16	}
	17	</style>
	18	</head>
	19	<body>
	20	<p>This shows dygraphs without any boxlike elements (i.e. axes or grids):</p>
362d4b90	21	<div id="div_g" style="width:600px; height:300px; border:1px solid white;"></div>
592f449f DV	22
	23	<script type="text/javascript">
	24	var show_box = false;
	25	g = new Dygraph(
	26	document.getElementById("div_g"),
	27	data, {
bfb3e0a4 RK	28	axes : {
	29	x : {
	30	drawGrid: show_box,
	31	drawAxis : show_box,
	32	},
	33	y : {
	34	drawGrid: show_box,
	35	drawAxis : show_box,
	36	}
	37	}
592f449f DV	38	}
	39	);
	40
	41	function toggleBox(btn) {
	42	show_box = !show_box;
362d4b90	43	document.getElementById("div_g").style.border = show_box ? '1px solid black' : '1px solid white';
592f449f DV	44	if (show_box) {
	45	btn.innerHTML = 'Hide box';
	46	} else {
	47	btn.innerHTML = 'Show box';
	48	}
	49	}
	50	</script>
	51
	52	<button onClick='toggleBox(this)'>Show box</button>
	53
	54	<!-- 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. -->
	55	<p>
	56	<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>
	57	</p>
	58
	59	<script type="text/javascript">
f6fbf9e0	60	var g2 = new Dygraph(
592f449f DV	61	document.getElementById("div_spark"),
592f449f DV	62	data, {
bfb3e0a4 RK	63	axes : {
	64	x : {
	65	drawGrid: false,
	66	drawAxis : false,
	67	},
	68	y : {
	69	drawGrid: false,
	70	drawAxis : false,
	71	}
	72	},
592f449f DV	73	strokeWidth: 1.0,
	74	rollPeriod: 7,
	75	labelsDiv: '',
	76	highlightCircleSize: 2
	77	}
	78	);
	79	</script>
	80	</body>
	81	</html>