Independent Series

X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Findependent-series.html;h=1a2153f9a015bd96213336db025d3dd14d8a5636;hb=3b196163552cb25ae554ac48a20fe3131bee5dd1;hp=ad0357495995bbac14b2bb008b6427fc448a72ab;hpb=75c589da9e8e764d354a24c9c7640733e7f036e9;p=dygraphs.git diff --git a/tests/independent-series.html b/tests/independent-series.html index ad03574..1a2153f 100644 --- a/tests/independent-series.html +++ b/tests/independent-series.html @@ -1,13 +1,13 @@ + Independent Series - - - - - + + + +

Independent Series

By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.

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 null for each of the other series.

For example, say you had two series:

@@ -39,16 +40,16 @@ - - + +

x	A
2	2
4	4
6	6
4	6
6	4

- - + +

x	B
1	3
3	5
5	7
3	7
5	5

@@ -60,42 +61,45 @@

X,A,B
 1,,3
 2,2,
-3,,5
-4,4,
-5,,7
-6,6,

+3,,7 +4,6, +5,,5 +6,4, (native)

[
 [1, null, 3],
 [2, 2, null],
-[3, null, 5],
-[4, 4, null],
-[5, null, 7],
-[6, 6, null] ]

+[3, null, 7], +[4, 6, null], +[5, null, 5], +[6, 4, null] ] -

There's one extra wrinkle. What if one of the series has a missing value, i.e. what if your series are something like +

Encoding a gap

There's one extra wrinkle. What if one of the series has a missing + value, i.e. what if your series are something like

@@ -119,28 +123,154 @@

The gap would normally be encoded as a null, or missing value. But when you use connectSeparatedPoints, that has a special meaning. Instead, you have to use NaN. This is a bit of a hack, but it gets the job done.

+ + + + +

+ (CSV) +

x,A,B
+1,,3
+2,2,
+3,,5
+4,4,
+5,,7
+6,NaN,
+8,8,
+10,10,

+ (native) +

[ [1, null, 3],
+  [2, 2, null],
+  [3, null, 5],
+  [4, 4, null],
+  [5, null, 7],
+  [6, NaN, null],
+  [8, 8, null],
+  [10, 10, null] ]

+ +

Behavior at the edges of the panel for independent series

In case only a part of the whole data is visible (e.g. after zooming in) the lines are + drawn to the respective next valid point outside the visible area.

+ + + + +

+ +

+ + + + + + + + + +

x	A
0	2
1	3
2	3
4	4
5	3
6	3
7	3
8	4

+ + + + + + +

x	B
0	1
1	2
2	1
8	2

+ +

Both graphs have no value at the right edge of the panel (x=3). The lines that are drawn to the right edge are determined by their respective next valid value outside the visible area. + Therefore it is neither necessary that the next valid values are on the same point nor that they have the same index (index 4 for the green line and index 8 for the blue line).

Use double click to unzoom and see the currently invisible points

+ + + + + + + +

+ Index +

 
+0
+1
+2
+3
+4
+5
+6
+7
+8

+ (CSV) +

x,A,B
+0,2,1
+1,3,2
+2,3,1
+3,,
+4,4,
+5,3,
+6,3,
+7,3,
+8,4,2

+ (native) +

[ 
+  [0, 2, 1], 
+  [1, 3, 2],
+  [2, 3, 1],
+  [3, null, null],
+  [4, 4, null],
+  [5, 3, null],
+  [6, 3, null],
+  [7, 3, null],
+  [8, 4, 2] ]