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:

Then you would specify the following CSV or native data:

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

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

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

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.

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

[ [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.

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

 
0
1
2
3
4
5
6
7
8

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

[
  [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] ]