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

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