X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=tests%2Findependent-series.html;h=130a943303692fd8c72c8435995b8d23293627ca;hb=44310217eccf34939b40cf0309b5a9b4e03df784;hp=ad0357495995bbac14b2bb008b6427fc448a72ab;hpb=75c589da9e8e764d354a24c9c7640733e7f036e9;p=dygraphs.git diff --git a/tests/independent-series.html b/tests/independent-series.html index ad03574..130a943 100644 --- a/tests/independent-series.html +++ b/tests/independent-series.html @@ -1,13 +1,13 @@ +
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,B 1,,3 2,2, -3,,5 -4,4, -5,,7 -6,6,+3,,7 +4,6, +5,,5 +6,4,
[ [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 +
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] ]+ |
+
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.
+ +
+
+ |
+
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 + + + +
|