4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Independent Series
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
9 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
10 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
11 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
12 <script type=
"text/javascript" src=
"../dygraph.js"></script>
13 <style type=
"text/css">
19 border-collapse: collapse;
32 <h3>Independent Series
</h3>
33 <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.
</p>
35 <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>
37 <div id=
"graph" style=
"float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
38 <p>For example, say you had two series:
</p>
42 <table class=thinborder
>
43 <tr><th>x
</th><th>A
</th></tr>
44 <tr><td>2</td><td>2</td></tr>
45 <tr><td>4</td><td>6</td></tr>
46 <tr><td>6</td><td>4</td></tr>
49 <td valign=top
style=
"padding-left:25px;">
50 <table class=thinborder
>
51 <tr><th>x
</th><th>B
</th></tr>
52 <tr><td>1</td><td>3</td></tr>
53 <tr><td>3</td><td>7</td></tr>
54 <tr><td>5</td><td>5</td></tr>
59 <p>Then you would specify the following CSV or native data:
</p>
71 <td valign=top
style=
"padding-left: 25px;">
83 <script type=
"text/javascript">
85 document.getElementById(
"graph"),
95 labels: [
"x",
"A",
"B" ],
96 connectSeparatedPoints: true,
102 <h3>Encoding a gap
</h3>
103 <p>There's one extra wrinkle. What if one of the series has a missing
104 value, i.e. what if your series are something like
</p>
109 <table class=thinborder
>
110 <tr><th>x
</th><th>A
</th></tr>
111 <tr><td>2</td><td>2</td></tr>
112 <tr><td>4</td><td>4</td></tr>
113 <tr><td>6</td><td>(gap)
</td></tr>
114 <tr><td>8</td><td>8</td></tr>
115 <tr><td>10</td><td>10</td></tr>
118 <td valign=top
style=
"padding-left:25px;">
119 <table class=thinborder
>
120 <tr><th>x
</th><th>B
</th></tr>
121 <tr><td>1</td><td>3</td></tr>
122 <tr><td>3</td><td>5</td></tr>
123 <tr><td>5</td><td>7</td></tr>
128 <div id=
"graph2" style=
"float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
129 <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>
131 <script type=
"text/javascript">
133 document.getElementById(
"graph2"),
144 labels: [
"x",
"A",
"B" ],
145 connectSeparatedPoints: true,
164 <td valign=top
style=
"padding-left: 25px;">
173 [
10,
10, null] ]
</pre>