Set this for drawCallback
[dygraphs.git] / tests / connect-separated.html
CommitLineData
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],
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>