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

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Independent Series</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.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>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>
    
    <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>

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