[dygraphs.git] / tests / connect-separated.html

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

  </head>
  <body>
    <p>Connecting separated points.  All three of the series should have their points
      connected with lines, and hovering over them should produce dot and legend
      overlays in the proper color.</p>

    <div id="graphdiv" style="width:600px; height:300px;"></div>
<p><b>Toggle ConnectSeparated:<b></p>
<p>
  All: <button id="All" onclick="change(this)">true</button>
  Series 1 <button id="Series1" onclick="change(this)">disabled</button>
  Series 2 <button id="Series2" onclick="change(this)">disabled</button>
  Series 3 <button id="Series3" onclick="change(this)">disabled</button>
</p>
    <script type="text/javascript">
      var g = new Dygraph(document.getElementById("graphdiv"),
      [
        [ new Date("2009/12/01"), 10, 10, 10],
        [ new Date("2009/12/02"), 15, 11, 12],
        [ new Date("2009/12/03"), null, null, 12],
        [ new Date("2009/12/04"), 20, 14, null],
        [ new Date("2009/12/05"), 15, null, 17],
        [ new Date("2009/12/06"), 18, null, null],
        [ new Date("2009/12/07"), 12, 14, null]
      ],
      {
        connectSeparatedPoints: true,
        labels: ["Date","Series1","Series2","Series3"]
      });

      function change(el) {
        var textSequences = [ "disabled", "true", "false" ];
        var values = [ null, true, false ];
        for (var idx = 0; idx < textSequences.length; idx++) {
          if (textSequences[idx] == el.textContent) {
            var nextIdx = (idx + 1) % 3;
            var nextVal = values[nextIdx];
            el.textContent = textSequences[nextIdx];

            if (el.id == "All") {
              g.updateOptions({ connectSeparatedPoints : nextVal });
            } else {
              var seriesOpt = {};
              seriesOpt[el.id] = { connectSeparatedPoints : nextVal };
              g.updateOptions({ series : seriesOpt });
            }
            break;
          }
        }
      }
    </script>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
563c70ca AV	2	<html>
	3	<head>
	4	<title>connect separated</title>
7e5ddc94 DV	5	<!--
	6	For production (minified) code, use:
	7	<script type="text/javascript" src="dygraph-combined.js"></script>
	8	-->
	9	<script type="text/javascript" src="../dygraph-dev.js"></script>
	10
563c70ca AV	11	</head>
	12	<body>
	13	<p>Connecting separated points. All three of the series should have their points
	14	connected with lines, and hovering over them should produce dot and legend
	15	overlays in the proper color.</p>
67b65269	16
563c70ca	17	<div id="graphdiv" style="width:600px; height:300px;"></div>
b85358e2 RK	18	<p><b>Toggle ConnectSeparated:<b></p>
	19	<p>
	20	All: <button id="All" onclick="change(this)">true</button>
	21	Series 1 <button id="Series1" onclick="change(this)">disabled</button>
	22	Series 2 <button id="Series2" onclick="change(this)">disabled</button>
	23	Series 3 <button id="Series3" onclick="change(this)">disabled</button>
	24	</p>
563c70ca	25	<script type="text/javascript">
f6fbf9e0	26	var g = new Dygraph(document.getElementById("graphdiv"),
563c70ca AV	27	[
	28	[ new Date("2009/12/01"), 10, 10, 10],
	29	[ new Date("2009/12/02"), 15, 11, 12],
	30	[ new Date("2009/12/03"), null, null, 12],
	31	[ new Date("2009/12/04"), 20, 14, null],
	32	[ new Date("2009/12/05"), 15, null, 17],
0209e56f AV	33	[ new Date("2009/12/06"), 18, null, null],
0209e56f AV	34	[ new Date("2009/12/07"), 12, 14, null]
563c70ca AV	35	],
	36	{
	37	connectSeparatedPoints: true,
31b1e394	38	labels: ["Date","Series1","Series2","Series3"]
563c70ca	39	});
b85358e2 RK	40
	41	function change(el) {
	42	var textSequences = [ "disabled", "true", "false" ];
	43	var values = [ null, true, false ];
	44	for (var idx = 0; idx < textSequences.length; idx++) {
	45	if (textSequences[idx] == el.textContent) {
	46	var nextIdx = (idx + 1) % 3;
	47	var nextVal = values[nextIdx];
	48	el.textContent = textSequences[nextIdx];
	49
7e64db42	50	if (el.id == "All") {
b85358e2 RK	51	g.updateOptions({ connectSeparatedPoints : nextVal });
	52	} else {
	53	var seriesOpt = {};
	54	seriesOpt[el.id] = { connectSeparatedPoints : nextVal };
	55	g.updateOptions({ series : seriesOpt });
	56	}
	57	break;
	58	}
	59	}
	60	}
563c70ca AV	61	</script>
	62	</body>
	63	</html>