3 <title>Independent Series
</title>
5 <script type=
"text/javascript" src=
"../excanvas.js"></script>
7 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
8 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
9 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
10 <script type=
"text/javascript" src=
"../dygraph.js"></script>
11 <style type=
"text/css">
17 border-collapse: collapse;
30 <h3>Independent Series
</h3>
31 <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.
</p>
33 <p>The trick is to specify values for the series at the union of the x-values of all series. For one series' x values, specify
<code>null
</code> for each of the other series.
</p>
35 <div id=
"graph" style=
"float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
36 <p>For example, say you had two series:
</p>
40 <table class=thinborder
>
41 <tr><th>x
</th><th>A
</th></tr>
42 <tr><td>2</td><td>2</td></tr>
43 <tr><td>4</td><td>6</td></tr>
44 <tr><td>6</td><td>4</td></tr>
47 <td valign=top
style=
"padding-left:25px;">
48 <table class=thinborder
>
49 <tr><th>x
</th><th>B
</th></tr>
50 <tr><td>1</td><td>3</td></tr>
51 <tr><td>3</td><td>7</td></tr>
52 <tr><td>5</td><td>5</td></tr>
57 <p>Then you would specify the following CSV or native data:
</p>
69 <td valign=top
style=
"padding-left: 25px;">
81 <script type=
"text/javascript">
83 document.getElementById(
"graph"),
93 labels: [
"x",
"A",
"B" ],
94 connectSeparatedPoints: true,
100 <h3>Encoding a gap
</h3>
101 <p>There's one extra wrinkle. What if one of the series has a missing
102 value, i.e. what if your series are something like
</p>
107 <table class=thinborder
>
108 <tr><th>x
</th><th>A
</th></tr>
109 <tr><td>2</td><td>2</td></tr>
110 <tr><td>4</td><td>4</td></tr>
111 <tr><td>6</td><td>(gap)
</td></tr>
112 <tr><td>8</td><td>8</td></tr>
113 <tr><td>10</td><td>10</td></tr>
116 <td valign=top
style=
"padding-left:25px;">
117 <table class=thinborder
>
118 <tr><th>x
</th><th>B
</th></tr>
119 <tr><td>1</td><td>3</td></tr>
120 <tr><td>3</td><td>5</td></tr>
121 <tr><td>5</td><td>7</td></tr>
126 <div id=
"graph2" style=
"float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
127 <p>The gap would normally be encoded as a null, or missing value. But when you use
<code>connectSeparatedPoints
</code>, that has a special meaning. Instead, you have to use
<code>NaN
</code>. This is a bit of a hack, but it gets the job done.
</p>
129 <script type=
"text/javascript">
131 document.getElementById(
"graph2"),
142 labels: [
"x",
"A",
"B" ],
143 connectSeparatedPoints: true,
162 <td valign=top
style=
"padding-left: 25px;">
171 [
10,
10, null] ]
</pre>