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

<!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]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.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, {
              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' : '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, {
              drawXAxis: false,
              drawYAxis: false,
              drawXGrid: false,
              drawYGrid: false,
              strokeWidth: 1.0,
              rollPeriod: 7,
              labelsDiv: '',
              highlightCircleSize: 2
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	5	<title>dygraphs unboxed</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
	9	<!--
	10	For production (minified) code, use:
	11	<script type="text/javascript" src="dygraph-combined.js"></script>
	12	-->
	13	<script type="text/javascript" src="../dygraph-dev.js"></script>
	14
	15	<script type="text/javascript" src="data.js"></script>
	16	<style type="text/css">
	17	#div_spark {
	18	display: inline-block;
	19	}
	20	</style>
	21	</head>
	22	<body>
	23	<p>This shows dygraphs without any boxlike elements (i.e. axes or grids):</p>
	24	<div id="div_g" style="width:600px; height:300px; border:1px solid white;"></div>
	25
	26	<script type="text/javascript">
	27	var show_box = false;
	28	g = new Dygraph(
	29	document.getElementById("div_g"),
	30	data, {
	31	drawXAxis: show_box,
	32	drawYAxis: show_box,
	33	drawXGrid: show_box,
	34	drawYGrid: show_box
	35	}
	36	);
	37
	38	function toggleBox(btn) {
	39	show_box = !show_box;
	40	document.getElementById("div_g").style.border = show_box ? '1px solid black' : '1px solid white';
	41	if (show_box) {
	42	btn.innerHTML = 'Hide box';
	43	} else {
	44	btn.innerHTML = 'Show box';
	45	}
	46	}
	47	</script>
	48
	49	<button onClick='toggleBox(this)'>Show box</button>
	50
	51	<!-- 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. -->
	52	<p>
	53	<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>
	54	</p>
	55
	56	<script type="text/javascript">
	57	var g2 = new Dygraph(
	58	document.getElementById("div_spark"),
	59	data, {
	60	drawXAxis: false,
	61	drawYAxis: false,
	62	drawXGrid: false,
	63	drawYGrid: false,
	64	strokeWidth: 1.0,
	65	rollPeriod: 7,
	66	labelsDiv: '',
	67	highlightCircleSize: 2
	68	}
	69	);
	70	</script>
	71	</body>
	72	</html>