[dygraphs.git] / tests / color-visibility.html

<!DOCTYPE html>
<html>
  <head>
    <title>color visibility</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dist/dygraph.js"></script>

  </head>
  <body>
    <p>The lines should maintain their colors as their visibility is toggled.</p>

    <div id="blah"></div>
    <p><b>Display: </b>
    <input type=checkbox id=0 onClick="change(this)" checked>
    <label for="0"> a</label>
    <input type=checkbox id=1 onClick="change(this)" checked>
    <label for="1"> b</label>
    <input type=checkbox id=2 onClick="change(this)" checked>
    <label for="2"> c</label>
    </p>

    <script type="text/javascript">
      chart = new Dygraph(document.getElementById("blah"),
                          "X,a,b,c\n" +
                          "10,12345,23456,34567\n" +
                          "11,12345,20123,31345\n",
                          {
                            width: 640,
                            height: 480,
                            colors: ['#284785', '#EE1111', '#8AE234'],
                            visibility: [true, true, true]
                          });

      function change(el) {
        chart.setVisibility(el.id, el.checked);
      }
    </script>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
ec1959eb DV	2	<html>
	3	<head>
	4	<title>color visibility</title>
7e5ddc94 DV	5	<!--
	6	For production (minified) code, use:
	7	<script type="text/javascript" src="dygraph-combined.js"></script>
	8	-->
fbd6834a	9	<script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94	10
ec1959eb DV	11	</head>
	12	<body>
	13	<p>The lines should maintain their colors as their visibility is toggled.</p>
	14
	15	<div id="blah"></div>
	16	<p><b>Display: </b>
	17	<input type=checkbox id=0 onClick="change(this)" checked>
	18	<label for="0"> a</label>
	19	<input type=checkbox id=1 onClick="change(this)" checked>
	20	<label for="1"> b</label>
	21	<input type=checkbox id=2 onClick="change(this)" checked>
	22	<label for="2"> c</label>
	23	</p>
	24
	25	<script type="text/javascript">
	26	chart = new Dygraph(document.getElementById("blah"),
	27	"X,a,b,c\n" +
	28	"10,12345,23456,34567\n" +
	29	"11,12345,20123,31345\n",
	30	{
	31	width: 640,
	32	height: 480,
	33	colors: ['#284785', '#EE1111', '#8AE234'],
	34	visibility: [true, true, true]
	35	});
	36
	37	function change(el) {
	38	chart.setVisibility(el.id, el.checked);
	39	}
	40	</script>
	41	</body>
	42	</html>