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

<!DOCTYPE html>
<html>
  <head>
    <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>
	3	<head>
	4	<title>Independent Series</title>
	5	<!--[if IE]>
	6	<script type="text/javascript" src="../excanvas.js"></script>
	7	<![endif]-->
	8	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	9	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	10	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	11	<script type="text/javascript" src="../dygraph.js"></script>
	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">
	83	new Dygraph(
	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
c6a0ebba DV	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>
75c589da DV	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
c6a0ebba	127	<div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
75c589da DV	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">
876cc77c	131	g2 = new Dygraph(
75c589da	132	document.getElementById("graph2"),
c6a0ebba DV	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	, {
75c589da	143	labels: ["x", "A", "B" ],
c6a0ebba DV	144	connectSeparatedPoints: true,
c6a0ebba DV	145	drawPoints: true
75c589da DV	146	}
	147	);
	148	</script>
	149
c6a0ebba DV	150	<table><tr>
	151	<td valign=top>
	152	(CSV)
	153	<pre>x,A,B
	154	1,,3
	155	2,2,
	156	3,,5
	157	4,4,
	158	5,,7
	159	6,NaN,
	160	8,8,
	161	10,10,</pre>
	162	</td>
	163	<td valign=top style="padding-left: 25px;">
	164	(native)
	165	<pre>[ [1, null, 3],
	166	[2, 2, null],
	167	[3, null, 5],
	168	[4, 4, null],
	169	[5, null, 7],
	170	[6, NaN, null],
	171	[8, 8, null],
	172	[10, 10, null] ]</pre>
	173	</td>
	174	</tr></table>
	175
75c589da DV	176	</body>
75c589da DV	177	</html>