--- /dev/null
+<html>
+ <head>
+ <title>Independent Series</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="../excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../strftime/strftime-min.js"></script>
+ <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ <style type="text/css">
+ .thinborder {
+ border-width: 1px;
+ border-spacing: 0px;
+ border-style: solid;
+ border-color: black;
+ border-collapse: collapse;
+ }
+
+ .thinborder td,
+ .thinborder th {
+ border-width: 1px;
+ padding: 5px;
+ border-style: solid;
+ border-color: black;
+ }
+ </style>
+ </head>
+ <body>
+ <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.</p>
+
+ <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>
+
+ <div id="graph" style="position: absolute; top: 100px; left: 400px; width: 400px; height: 300px;"></div>
+ <p>For example, say you had two series:</p>
+ <table><tr>
+ <td valign=top>
+ <table>
+ <table class=thinborder>
+ <tr><th>x</th><th>A</th></tr>
+ <tr><td>2</td><td>2</td></tr>
+ <tr><td>4</td><td>4</td></tr>
+ <tr><td>6</td><td>6</td></tr>
+ </table>
+ </td>
+ <td valign=top style="padding-left:25px;">
+ <table class=thinborder>
+ <tr><th>x</th><th>B</th></tr>
+ <tr><td>1</td><td>3</td></tr>
+ <tr><td>3</td><td>5</td></tr>
+ <tr><td>5</td><td>7</td></tr>
+ </table>
+ </td>
+ </tr></table>
+
+ <p>Then you would specify the following CSV or native data:</p>
+ <table><tr>
+ <td valign=top>
+ (CSV)
+ <pre>X,A,B
+1,,3
+2,2,
+3,,5
+4,4,
+5,,7
+6,6,</pre>
+ </td>
+ <td valign=top style="padding-left: 25px;">
+ (native)
+ <pre>[
+[1, null, 3],
+[2, 2, null],
+[3, null, 5],
+[4, 4, null],
+[5, null, 7],
+[6, 6, null] ]</pre>
+ </td>
+ </tr></table>
+
+ <script type="text/javascript">
+ new Dygraph(
+ document.getElementById("graph"),
+ [
+ [1, null, 3],
+ [2, 2, null],
+ [3, null, 5],
+ [4, 4, null],
+ [5, null, 7],
+ [6, 6, null]
+ ],
+ {
+ labels: ["x", "A", "B" ],
+ connectSeparatedPoints: true
+ }
+ );
+ </script>
+
+ <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
+
+ <table><tr>
+ <td valign=top>
+ <table>
+ <table class=thinborder>
+ <tr><th>x</th><th>A</th></tr>
+ <tr><td>2</td><td>2</td></tr>
+ <tr><td>4</td><td>4</td></tr>
+ <tr><td>6</td><td>(gap)</td></tr>
+ <tr><td>8</td><td>8</td></tr>
+ <tr><td>10</td><td>10</td></tr>
+ </table>
+ </td>
+ <td valign=top style="padding-left:25px;">
+ <table class=thinborder>
+ <tr><th>x</th><th>B</th></tr>
+ <tr><td>1</td><td>3</td></tr>
+ <tr><td>3</td><td>5</td></tr>
+ <tr><td>5</td><td>7</td></tr>
+ </table>
+ </td>
+ </tr></table>
+
+ <div id="graph2" style="float: left; width: 400px; height: 300px;"></div>
+ <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>
+
+ <script type="text/javascript">
+ new Dygraph(
+ document.getElementById("graph2"),
+ [
+ [1, null, 3],
+ [2, 2, null],
+ [3, null, 5],
+ [4, 4, null],
+ [5, null, 7],
+ [6, NaN, null],
+ [8, 8, null],
+ [10, 10, null]
+ ],
+ {
+ labels: ["x", "A", "B" ],
+ connectSeparatedPoints: true
+ }
+ );
+ </script>
+
+ </body>
+</html>
projects / dygraphs.git / commitdiff