[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="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]-->
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
c6a0ebba DV	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>
75c589da DV	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
c6a0ebba	130	<div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
75c589da DV	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">
876cc77c	134	g2 = new Dygraph(
75c589da	135	document.getElementById("graph2"),
c6a0ebba DV	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	, {
75c589da	146	labels: ["x", "A", "B" ],
c6a0ebba DV	147	connectSeparatedPoints: true,
c6a0ebba DV	148	drawPoints: true
75c589da DV	149	}
	150	);
	151	</script>
	152
c6a0ebba DV	153	<table><tr>
	154	<td valign=top>
	155	(CSV)
	156	<pre>x,A,B
	157	1,,3
	158	2,2,
	159	3,,5
	160	4,4,
	161	5,,7
	162	6,NaN,
	163	8,8,
	164	10,10,</pre>
	165	</td>
	166	<td valign=top style="padding-left: 25px;">
	167	(native)
	168	<pre>[ [1, null, 3],
	169	[2, 2, null],
	170	[3, null, 5],
	171	[4, 4, null],
	172	[5, null, 7],
	173	[6, NaN, null],
	174	[8, 8, null],
	175	[10, 10, null] ]</pre>
	176	</td>
	177	</tr></table>
	178
75c589da DV	179	</body>
75c589da DV	180	</html>