1 // Use this as a template for new Gallery entries.
5 name
: 'Independent Series',
6 title
: 'Independent Series',
7 setup
: function(parent
) {
9 "<p>By using the <i>connectSeparated</i> attribute, it's possible to display a chart of several time series with completely independent x-values.</p> \
11 <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> \
13 <div id='graph' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> \
14 <p>For example, say you had two series:</p> \
18 <table class='thinborder'> \
19 <tr><th>x</th><th>A</th></tr> \
20 <tr><td>2</td><td>2</td></tr> \
21 <tr><td>4</td><td>6</td></tr> \
22 <tr><td>6</td><td>4</td></tr> \
25 <td valign=top style='padding-left:25px;'> \
26 <table class='thinborder'> \
27 <tr><th>x</th><th>B</th></tr> \
28 <tr><td>1</td><td>3</td></tr> \
29 <tr><td>3</td><td>7</td></tr> \
30 <tr><td>5</td><td>5</td></tr> \
35 <p>Then you would specify the following CSV or native data:</p> \
39 <pre id='csv1'></pre> \
41 <td valign=top style='padding-left: 25px;'>\
43 <pre id='native1'></pre> \
47 <h3>Encoding a gap</h3>\
48 <p>There's one extra wrinkle. What if one of the series has a missing \
49 value, i.e. what if your series are something like </p> \
54 <table class='thinborder'> \
55 <tr><th>x</th><th>A</th></tr> \
56 <tr><td>2</td><td>2</td></tr> \
57 <tr><td>4</td><td>4</td></tr> \
58 <tr><td>6</td><td>(gap)</td></tr> \
59 <tr><td>8</td><td>8</td></tr> \
60 <tr><td>10</td><td>10</td></tr> \
63 <td valign=top style='padding-left:25px;'> \
64 <table class='thinborder'> \
65 <tr><th>x</th><th>B</th></tr> \
66 <tr><td>1</td><td>3</td></tr> \
67 <tr><td>3</td><td>5</td></tr> \
68 <tr><td>5</td><td>7</td></tr> \
73 <div id='graph2' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> \
74 <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> \
79 <pre id='csv2'></pre> \
81 <td valign=top style='padding-left: 25px;'> \
83 <pre id='native2'></pre> \
88 document
.getElementById("csv1").textContent
=
97 document
.getElementById("native1").textContent
=
107 document
.getElementById("csv2").textContent
=
117 document
.getElementById("native2").textContent
=
124 " [6, NaN, null],\n" +
126 " [10, 10, null]\n" +
129 var g1
= new Dygraph(
130 document
.getElementById('graph'),
140 labels
: ['x', 'A', 'B' ],
141 connectSeparatedPoints
: true,
147 document
.getElementById('graph2'),
158 labels
: ['x', 'A', 'B' ],
159 connectSeparatedPoints
: true,