[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>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
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	5	<title>Independent Series</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
	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
	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>
	34	<h3>Independent Series</h3>
	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
	39	<div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
	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>
	47	<tr><td>4</td><td>6</td></tr>
	48	<tr><td>6</td><td>4</td></tr>
	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>
	55	<tr><td>3</td><td>7</td></tr>
	56	<tr><td>5</td><td>5</td></tr>
	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,
	68	3,,7
	69	4,6,
	70	5,,5
	71	6,4,</pre>
	72	</td>
	73	<td valign=top style="padding-left: 25px;">
	74	(native)
	75	<pre>[
	76	[1, null, 3],
	77	[2, 2, null],
	78	[3, null, 7],
	79	[4, 6, null],
	80	[5, null, 5],
	81	[6, 4, null] ]</pre>
	82	</td>
	83	</tr></table>
	84
	85	<script type="text/javascript">
	86	var g1 = new Dygraph(
	87	document.getElementById("graph"),
	88	[
	89	[1, null, 3],
	90	[2, 2, null],
	91	[3, null, 7],
	92	[4, 5, null],
	93	[5, null, 5],
	94	[6, 3, null]
	95	],
	96	{
	97	labels: ["x", "A", "B" ],
	98	connectSeparatedPoints: true,
	99	drawPoints: true
	100	}
	101	);
	102	</script>
	103
	104	<h3>Encoding a gap</h3>
	105	<p>There's one extra wrinkle. What if one of the series has a missing
	106	value, i.e. what if your series are something like </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>2</td><td>2</td></tr>
	114	<tr><td>4</td><td>4</td></tr>
	115	<tr><td>6</td><td>(gap)</td></tr>
	116	<tr><td>8</td><td>8</td></tr>
	117	<tr><td>10</td><td>10</td></tr>
	118	</table>
	119	</td>
	120	<td valign=top style="padding-left:25px;">
	121	<table class=thinborder>
	122	<tr><th>x</th><th>B</th></tr>
	123	<tr><td>1</td><td>3</td></tr>
	124	<tr><td>3</td><td>5</td></tr>
	125	<tr><td>5</td><td>7</td></tr>
	126	</table>
	127	</td>
	128	</tr></table>
	129
	130	<div id="graph3" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
	131	<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>
	132
	133	<script type="text/javascript">
	134	g2 = new Dygraph(
	135	document.getElementById("graph3"),
	136	"x,A,B \n" +
	137	"1,,3 \n" +
	138	"2,2, \n" +
	139	"3,,5 \n" +
	140	"4,4, \n" +
	141	"5,,7 \n" +
	142	"6,NaN, \n" +
	143	"8,8, \n" +
	144	"10,10, \n"
	145	, {
	146	connectSeparatedPoints: true,
	147	drawPoints: true
	148	}
	149	);
	150	</script>
	151
	152	<table><tr>
	153	<td valign=top>
	154	(CSV)
	155	<pre>x,A,B
	156	1,,3
	157	2,2,
	158	3,,5
	159	4,4,
	160	5,,7
	161	6,NaN,
	162	8,8,
	163	10,10,</pre>
	164	</td>
	165	<td valign=top style="padding-left: 25px;">
	166	(native)
	167	<pre>[ [1, null, 3],
	168	[2, 2, null],
	169	[3, null, 5],
	170	[4, 4, null],
	171	[5, null, 7],
	172	[6, NaN, null],
	173	[8, 8, null],
	174	[10, 10, null] ]</pre>
	175	</td>
	176	</tr></table>
	177
	178	<h3>Behavior at the edges of the panel for independent series</h3>
	179	<p> In case only a part of the whole data is visible (e.g. after zooming in) the lines are
	180	drawn to the respective next valid point outside the visible area. </p>
	181
	182	<table><tr>
	183	<td valign=top>
	184	<table>
	185	<table class=thinborder>
	186	<tr><th>x</th><th>A</th></tr>
	187	<tr><td>0</td><td>2</td></tr>
	188	<tr><td>1</td><td>3</td></tr>
	189	<tr><td>2</td><td>3</td></tr>
	190	<tr><td>4</td><td>4</td></tr>
	191	<tr><td>5</td><td>3</td></tr>
	192	<tr><td>6</td><td>3</td></tr>
	193	<tr><td>7</td><td>3</td></tr>
	194	<tr><td>8</td><td>4</td></tr>
	195	</table>
	196	</td>
	197	<td valign=top style="padding-left:25px;">
	198	<table class=thinborder>
	199	<tr><th>x</th><th>B</th></tr>
	200	<tr><td>0</td><td>1</td></tr>
	201	<tr><td>1</td><td>2</td></tr>
	202	<tr><td>2</td><td>1</td></tr>
	203	<tr><td>8</td><td>2</td></tr>
	204	</table>
	205	</td>
	206	</tr></table>
	207
	208	<div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
	209	<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.
	210	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>
	211	<p>Use double click to unzoom and see the currently invisible points</p>
	212
	213	<script type="text/javascript">
	214	g2 = new Dygraph(
	215	document.getElementById("graph2"),
	216	"x,A,B \n" +
	217	"0,2,1 \n" +
	218	"1,3,2 \n" +
	219	"2,3,1 \n" +
	220	"3,, \n" +
	221	"4,4, \n" +
	222	"5,3, \n" +
	223	"6,3, \n" +
	224	"7,3, \n" +
	225	"8,4,2 \n"
	226
	227	, {
	228	connectSeparatedPoints: true,
	229	drawPoints: true,
	230	pointSize: 3,
	231	highlightCircleSize: 5,
	232	dateWindow: [0,3]
	233	}
	234	);
	235	</script>
	236
	237	<table><tr>
	238	<td valign=top>
	239	Index
	240	<pre>
	241	0
	242	1
	243	2
	244	3
	245	4
	246	5
	247	6
	248	7
	249	8</pre>
	250	</td>
	251	<td valign=top>
	252	(CSV)
	253	<pre>x,A,B
	254	0,2,1
	255	1,3,2
	256	2,3,1
	257	3,,
	258	4,4,
	259	5,3,
	260	6,3,
	261	7,3,
	262	8,4,2</pre>
	263	</td>
	264	<td valign=top style="padding-left: 25px;">
	265	(native)
	266	<pre>[
	267	[0, 2, 1],
	268	[1, 3, 2],
	269	[2, 3, 1],
	270	[3, null, null],
	271	[4, 4, null],
	272	[5, 3, null],
	273	[6, 3, null],
	274	[7, 3, null],
	275	[8, 4, 2] ]</pre>
	276	</td>
	277	</tr></table>
	278
	279	</body>
	280	</html>