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

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