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 <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.
</p>
32 <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>
34 <div id=
"graph" style=
"position: absolute; top: 100px; left: 400px; width: 400px; height: 300px;"></div>
35 <p>For example, say you had two series:
</p>
39 <table class=thinborder
>
40 <tr><th>x
</th><th>A
</th></tr>
41 <tr><td>2</td><td>2</td></tr>
42 <tr><td>4</td><td>4</td></tr>
43 <tr><td>6</td><td>6</td></tr>
46 <td valign=top
style=
"padding-left:25px;">
47 <table class=thinborder
>
48 <tr><th>x
</th><th>B
</th></tr>
49 <tr><td>1</td><td>3</td></tr>
50 <tr><td>3</td><td>5</td></tr>
51 <tr><td>5</td><td>7</td></tr>
56 <p>Then you would specify the following CSV or native data:
</p>
68 <td valign=top
style=
"padding-left: 25px;">
80 <script type=
"text/javascript">
82 document.getElementById(
"graph"),
92 labels: [
"x",
"A",
"B" ],
93 connectSeparatedPoints: true
98 <p>There's one extra wrinkle. What if one of the series has a missing value, i.e. what if your series are something like
103 <table class=thinborder
>
104 <tr><th>x
</th><th>A
</th></tr>
105 <tr><td>2</td><td>2</td></tr>
106 <tr><td>4</td><td>4</td></tr>
107 <tr><td>6</td><td>(gap)
</td></tr>
108 <tr><td>8</td><td>8</td></tr>
109 <tr><td>10</td><td>10</td></tr>
112 <td valign=top
style=
"padding-left:25px;">
113 <table class=thinborder
>
114 <tr><th>x
</th><th>B
</th></tr>
115 <tr><td>1</td><td>3</td></tr>
116 <tr><td>3</td><td>5</td></tr>
117 <tr><td>5</td><td>7</td></tr>
122 <div id=
"graph2" style=
"float: left; width: 400px; height: 300px;"></div>
123 <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>
125 <script type=
"text/javascript">
127 document.getElementById(
"graph2"),
139 labels: [
"x",
"A",
"B" ],
140 connectSeparatedPoints: true