[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]-->
    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
    <script type="text/javascript" src="../dygraph-canvas.js"></script>
    <script type="text/javascript" src="../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">
    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="graph2" 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("graph2"),
"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"
      , {
        labels: ["x", "A", "B" ],
        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]-->
	9	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	10	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	11	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	12	<script type="text/javascript" src="../dygraph.js"></script>
	13	<style type="text/css">
	14	.thinborder {
	15	border-width: 1px;
	16	border-spacing: 0px;
	17	border-style: solid;
	18	border-color: black;
	19	border-collapse: collapse;
	20	}
	21
	22	.thinborder td,
	23	.thinborder th {
	24	border-width: 1px;
	25	padding: 5px;
	26	border-style: solid;
	27	border-color: black;
	28	}
	29	</style>
	30	</head>
	31	<body>
7219edb3	32	<h3>Independent Series</h3>
75c589da DV	33	<p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.</p>
	34
	35	<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>
	36
c6a0ebba	37	<div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
75c589da DV	38	<p>For example, say you had two series:</p>
	39	<table><tr>
	40	<td valign=top>
	41	<table>
	42	<table class=thinborder>
	43	<tr><th>x</th><th>A</th></tr>
	44	<tr><td>2</td><td>2</td></tr>
c6a0ebba DV	45	<tr><td>4</td><td>6</td></tr>
c6a0ebba DV	46	<tr><td>6</td><td>4</td></tr>
75c589da DV	47	</table>
	48	</td>
	49	<td valign=top style="padding-left:25px;">
	50	<table class=thinborder>
	51	<tr><th>x</th><th>B</th></tr>
	52	<tr><td>1</td><td>3</td></tr>
c6a0ebba DV	53	<tr><td>3</td><td>7</td></tr>
c6a0ebba DV	54	<tr><td>5</td><td>5</td></tr>
75c589da DV	55	</table>
	56	</td>
	57	</tr></table>
	58
	59	<p>Then you would specify the following CSV or native data:</p>
	60	<table><tr>
	61	<td valign=top>
	62	(CSV)
	63	<pre>X,A,B
	64	1,,3
	65	2,2,
c6a0ebba DV	66	3,,7
	67	4,6,
	68	5,,5
	69	6,4,</pre>
75c589da DV	70	</td>
	71	<td valign=top style="padding-left: 25px;">
	72	(native)
	73	<pre>[
	74	[1, null, 3],
	75	[2, 2, null],
c6a0ebba DV	76	[3, null, 7],
	77	[4, 6, null],
	78	[5, null, 5],
	79	[6, 4, null] ]</pre>
75c589da DV	80	</td>
	81	</tr></table>
	82
	83	<script type="text/javascript">
	84	new Dygraph(
	85	document.getElementById("graph"),
	86	[
	87	[1, null, 3],
	88	[2, 2, null],
c6a0ebba DV	89	[3, null, 7],
	90	[4, 5, null],
	91	[5, null, 5],
	92	[6, 3, null]
75c589da DV	93	],
	94	{
	95	labels: ["x", "A", "B" ],
c6a0ebba DV	96	connectSeparatedPoints: true,
c6a0ebba DV	97	drawPoints: true
75c589da DV	98	}
	99	);
	100	</script>
	101
c6a0ebba DV	102	<h3>Encoding a gap</h3>
	103	<p>There's one extra wrinkle. What if one of the series has a missing
	104	value, i.e. what if your series are something like </p>
75c589da DV	105
	106	<table><tr>
	107	<td valign=top>
	108	<table>
	109	<table class=thinborder>
	110	<tr><th>x</th><th>A</th></tr>
	111	<tr><td>2</td><td>2</td></tr>
	112	<tr><td>4</td><td>4</td></tr>
	113	<tr><td>6</td><td>(gap)</td></tr>
	114	<tr><td>8</td><td>8</td></tr>
	115	<tr><td>10</td><td>10</td></tr>
	116	</table>
	117	</td>
	118	<td valign=top style="padding-left:25px;">
	119	<table class=thinborder>
	120	<tr><th>x</th><th>B</th></tr>
	121	<tr><td>1</td><td>3</td></tr>
	122	<tr><td>3</td><td>5</td></tr>
	123	<tr><td>5</td><td>7</td></tr>
	124	</table>
	125	</td>
	126	</tr></table>
	127
c6a0ebba	128	<div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
75c589da DV	129	<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>
	130
	131	<script type="text/javascript">
876cc77c	132	g2 = new Dygraph(
75c589da	133	document.getElementById("graph2"),
c6a0ebba DV	134	"x,A,B \n" +
	135	"1,,3 \n" +
	136	"2,2, \n" +
	137	"3,,5 \n" +
	138	"4,4, \n" +
	139	"5,,7 \n" +
	140	"6,NaN, \n" +
	141	"8,8, \n" +
	142	"10,10, \n"
	143	, {
75c589da	144	labels: ["x", "A", "B" ],
c6a0ebba DV	145	connectSeparatedPoints: true,
c6a0ebba DV	146	drawPoints: true
75c589da DV	147	}
	148	);
	149	</script>
	150
c6a0ebba DV	151	<table><tr>
	152	<td valign=top>
	153	(CSV)
	154	<pre>x,A,B
	155	1,,3
	156	2,2,
	157	3,,5
	158	4,4,
	159	5,,7
	160	6,NaN,
	161	8,8,
	162	10,10,</pre>
	163	</td>
	164	<td valign=top style="padding-left: 25px;">
	165	(native)
	166	<pre>[ [1, null, 3],
	167	[2, 2, null],
	168	[3, null, 5],
	169	[4, 4, null],
	170	[5, null, 7],
	171	[6, NaN, null],
	172	[8, 8, null],
	173	[10, 10, null] ]</pre>
	174	</td>
	175	</tr></table>
	176
75c589da DV	177	</body>
75c589da DV	178	</html>