[dygraphs.git] / tests / independent-series.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>Independent Series</title>
    <script type="text/javascript" src="../dist/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>
    <h3>Independent Series</h3>
    <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="float: right; margin-right: 50px; 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>6</td></tr>
        <tr><td>6</td><td>4</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>7</td></tr>
        <tr><td>5</td><td>5</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,,7
4,6,
5,,5
6,4,</pre>
    </td>
    <td valign=top style="padding-left: 25px;">
    (native)
    <pre>[
[1, null, 3],
[2, 2, null],
[3, null, 7],
[4, 6, null],
[5, null, 5],
[6, 4, null] ]</pre>
    </td>
    </tr></table>

    <script type="text/javascript">
    var g1 = new Dygraph(
      document.getElementById("graph"),
      [
        [1, null, 3],
        [2, 2, null],
        [3, null, 7],
        [4, 5, null],
        [5, null, 5],
        [6, 3, null]
      ],
      {
        labels: ["x", "A", "B" ],
        connectSeparatedPoints: true,
        drawPoints: true
      }
    );
    </script>

    <h3>Encoding a gap</h3>
    <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 </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>(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="graph3" style="float: right; margin-right: 50px; 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">
    g2 = new Dygraph(
      document.getElementById("graph3"),
"x,A,B  \n" +
"1,,3   \n" +
"2,2,   \n" +
"3,,5   \n" +
"4,4,   \n" +
"5,,7   \n" +
"6,NaN, \n" +
"8,8,   \n" +
"10,10, \n"
      , {
        connectSeparatedPoints: true,
        drawPoints: true
      }
    );
    </script>

    <table><tr>
    <td valign=top>
    (CSV)
    <pre>x,A,B
1,,3
2,2,
3,,5
4,4,
5,,7
6,NaN,
8,8,
10,10,</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, NaN, null],
  [8, 8, null],
  [10, 10, null] ]</pre>
    </td>
    </tr></table>

    <h3>Behavior at the edges of the panel for independent series</h3>
    <p> 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. </p>
              
    <table><tr>
    <td valign=top>
    <table>
      <table class=thinborder>
        <tr><th>x</th><th>A</th></tr>
        <tr><td>0</td><td>2</td></tr>
        <tr><td>1</td><td>3</td></tr>
        <tr><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>4</td></tr>
        <tr><td>5</td><td>3</td></tr>
        <tr><td>6</td><td>3</td></tr>
        <tr><td>7</td><td>3</td></tr>
        <tr><td>8</td><td>4</td></tr>
      </table>
    </td>
    <td valign=top style="padding-left:25px;">
      <table class=thinborder>
        <tr><th>x</th><th>B</th></tr>
        <tr><td>0</td><td>1</td></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>2</td><td>1</td></tr>
        <tr><td>8</td><td>2</td></tr>
      </table>
    </td>
    </tr></table>

    <div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
    <p>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).</p> 
    <p>Use double click to unzoom and see the currently invisible points</p> 
    
    <script type="text/javascript">
    g2 = new Dygraph(
      document.getElementById("graph2"),
"x,A,B  \n" +
"0,2,1   \n" +
"1,3,2   \n" +
"2,3,1   \n" +
"3,,   \n" +
"4,4,   \n" +
"5,3,   \n" +
"6,3,   \n" +
"7,3,   \n" +
"8,4,2   \n"

      , {
        connectSeparatedPoints: true,
        drawPoints: true,
        pointSize: 3,
        highlightCircleSize: 5,
        dateWindow: [0,3]
      }
    );
    </script>
    
    <table><tr>
    <td valign=top>
    Index
    <pre>&nbsp;
0
1
2
3
4
5
6
7
8</pre>
    </td>
    <td valign=top>
    (CSV)
    <pre>x,A,B
0,2,1
1,3,2
2,3,1
3,,
4,4,
5,3,
6,3,
7,3,
8,4,2</pre>
    </td>
    <td valign=top style="padding-left: 25px;">
    (native)
    <pre>[ 
  [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] ]</pre>
    </td>
    </tr></table>

  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
75c589da DV	2	<html>
75c589da DV	3	<head>
fd6b8dad	4	<link rel="stylesheet" href="../dist/dygraph.css">
75c589da	5	<title>Independent Series</title>
fbd6834a	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94	7
75c589da DV	8	<style type="text/css">
	9	.thinborder {
	10	border-width: 1px;
	11	border-spacing: 0px;
	12	border-style: solid;
	13	border-color: black;
	14	border-collapse: collapse;
	15	}
	16
	17	.thinborder td,
	18	.thinborder th {
	19	border-width: 1px;
	20	padding: 5px;
	21	border-style: solid;
	22	border-color: black;
	23	}
	24	</style>
	25	</head>
	26	<body>
7219edb3	27	<h3>Independent Series</h3>
75c589da DV	28	<p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.</p>
	29
	30	<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>
	31
c6a0ebba	32	<div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
75c589da DV	33	<p>For example, say you had two series:</p>
	34	<table><tr>
	35	<td valign=top>
	36	<table>
	37	<table class=thinborder>
	38	<tr><th>x</th><th>A</th></tr>
	39	<tr><td>2</td><td>2</td></tr>
c6a0ebba DV	40	<tr><td>4</td><td>6</td></tr>
c6a0ebba DV	41	<tr><td>6</td><td>4</td></tr>
75c589da DV	42	</table>
	43	</td>
	44	<td valign=top style="padding-left:25px;">
	45	<table class=thinborder>
	46	<tr><th>x</th><th>B</th></tr>
	47	<tr><td>1</td><td>3</td></tr>
c6a0ebba DV	48	<tr><td>3</td><td>7</td></tr>
c6a0ebba DV	49	<tr><td>5</td><td>5</td></tr>
75c589da DV	50	</table>
	51	</td>
	52	</tr></table>
	53
	54	<p>Then you would specify the following CSV or native data:</p>
	55	<table><tr>
	56	<td valign=top>
	57	(CSV)
	58	<pre>X,A,B
	59	1,,3
	60	2,2,
c6a0ebba DV	61	3,,7
	62	4,6,
	63	5,,5
	64	6,4,</pre>
75c589da DV	65	</td>
	66	<td valign=top style="padding-left: 25px;">
	67	(native)
	68	<pre>[
	69	[1, null, 3],
	70	[2, 2, null],
c6a0ebba DV	71	[3, null, 7],
	72	[4, 6, null],
	73	[5, null, 5],
	74	[6, 4, null] ]</pre>
75c589da DV	75	</td>
	76	</tr></table>
	77
	78	<script type="text/javascript">
f6fbf9e0	79	var g1 = new Dygraph(
75c589da DV	80	document.getElementById("graph"),
	81	[
	82	[1, null, 3],
	83	[2, 2, null],
c6a0ebba DV	84	[3, null, 7],
	85	[4, 5, null],
	86	[5, null, 5],
	87	[6, 3, null]
75c589da DV	88	],
	89	{
	90	labels: ["x", "A", "B" ],
c6a0ebba DV	91	connectSeparatedPoints: true,
c6a0ebba DV	92	drawPoints: true
75c589da DV	93	}
	94	);
	95	</script>
	96
141064ff DE	97	<h3>Encoding a gap</h3>
	98	<p>There's one extra wrinkle. What if one of the series has a missing
	99	value, i.e. what if your series are something like </p>
	100
	101	<table><tr>
	102	<td valign=top>
	103	<table>
	104	<table class=thinborder>
	105	<tr><th>x</th><th>A</th></tr>
	106	<tr><td>2</td><td>2</td></tr>
	107	<tr><td>4</td><td>4</td></tr>
	108	<tr><td>6</td><td>(gap)</td></tr>
	109	<tr><td>8</td><td>8</td></tr>
	110	<tr><td>10</td><td>10</td></tr>
	111	</table>
	112	</td>
	113	<td valign=top style="padding-left:25px;">
	114	<table class=thinborder>
	115	<tr><th>x</th><th>B</th></tr>
	116	<tr><td>1</td><td>3</td></tr>
	117	<tr><td>3</td><td>5</td></tr>
	118	<tr><td>5</td><td>7</td></tr>
	119	</table>
	120	</td>
	121	</tr></table>
	122
	123	<div id="graph3" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
	124	<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>
	125
	126	<script type="text/javascript">
	127	g2 = new Dygraph(
	128	document.getElementById("graph3"),
	129	"x,A,B \n" +
	130	"1,,3 \n" +
	131	"2,2, \n" +
	132	"3,,5 \n" +
	133	"4,4, \n" +
	134	"5,,7 \n" +
	135	"6,NaN, \n" +
	136	"8,8, \n" +
	137	"10,10, \n"
	138	, {
	139	connectSeparatedPoints: true,
	140	drawPoints: true
	141	}
	142	);
	143	</script>
	144
	145	<table><tr>
	146	<td valign=top>
	147	(CSV)
	148	<pre>x,A,B
	149	1,,3
	150	2,2,
	151	3,,5
	152	4,4,
	153	5,,7
	154	6,NaN,
	155	8,8,
	156	10,10,</pre>
	157	</td>
	158	<td valign=top style="padding-left: 25px;">
	159	(native)
	160	<pre>[ [1, null, 3],
161	[2, 2, null],
162	[3, null, 5],
163	[4, 4, null],
164	[5, null, 7],
165	[6, NaN, null],
166	[8, 8, null],
167	[10, 10, null] ]</pre>
168	</td>
169	</tr></table>
170
1ef9d2f7	171	<h3>Behavior at the edges of the panel for independent series</h3>
	172	<p> In case only a part of the whole data is visible (e.g. after zooming in) the lines are
	173	drawn to the respective next valid point outside the visible area. </p>
	174
	175	<table><tr>
	176	<td valign=top>
	177	<table>
	178	<table class=thinborder>
	179	<tr><th>x</th><th>A</th></tr>
	180	<tr><td>0</td><td>2</td></tr>
	181	<tr><td>1</td><td>3</td></tr>
	182	<tr><td>2</td><td>3</td></tr>
	183	<tr><td>4</td><td>4</td></tr>
	184	<tr><td>5</td><td>3</td></tr>
	185	<tr><td>6</td><td>3</td></tr>
	186	<tr><td>7</td><td>3</td></tr>
	187	<tr><td>8</td><td>4</td></tr>
	188	</table>
	189	</td>
	190	<td valign=top style="padding-left:25px;">
	191	<table class=thinborder>
	192	<tr><th>x</th><th>B</th></tr>
	193	<tr><td>0</td><td>1</td></tr>
	194	<tr><td>1</td><td>2</td></tr>
	195	<tr><td>2</td><td>1</td></tr>
	196	<tr><td>8</td><td>2</td></tr>
	197	</table>
	198	</td>
	199	</tr></table>
	200
	201	<div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
	202	<p>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.
	203	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).</p>
	204	<p>Use double click to unzoom and see the currently invisible points</p>
	205
	206	<script type="text/javascript">
	207	g2 = new Dygraph(
	208	document.getElementById("graph2"),
	209	"x,A,B \n" +
	210	"0,2,1 \n" +
	211	"1,3,2 \n" +
	212	"2,3,1 \n" +
	213	"3,, \n" +
	214	"4,4, \n" +
	215	"5,3, \n" +
	216	"6,3, \n" +
	217	"7,3, \n" +
	218	"8,4,2 \n"
	219
	220	, {
	221	connectSeparatedPoints: true,
	222	drawPoints: true,
	223	pointSize: 3,
	224	highlightCircleSize: 5,
	225	dateWindow: [0,3]
	226	}
	227	);
	228	</script>
	229
	230	<table><tr>
	231	<td valign=top>
	232	Index
	233	<pre>
	234	0
235	1
236	2
237	3
238	4
239	5
240	6
241	7
242	8</pre>
243	</td>
244	<td valign=top>
245	(CSV)
246	<pre>x,A,B
247	0,2,1
248	1,3,2
249	2,3,1
250	3,,
251	4,4,
252	5,3,
253	6,3,
254	7,3,
255	8,4,2</pre>
256	</td>
257	<td valign=top style="padding-left: 25px;">
258	(native)
259	<pre>[
260	[0, 2, 1],
261	[1, 3, 2],
262	[2, 3, 1],
263	[3, null, null],
264	[4, 4, null],
265	[5, 3, null],
266	[6, 3, null],
267	[7, 3, null],
268	[8, 4, 2] ]</pre>
269	</td>
270	</tr></table>
c6a0ebba	271
75c589da DV	272	</body>
75c589da DV	273	</html>