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

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Per-Series Properties</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>

  </head>
  <body>
    <h2>Chart with per-series properties</h2>
    <div id="demodiv"></div>
    <h2>Chart with per-series properties with legend.</h2>
    <div id="demodiv2"></div>
    <h2>First graph, using old-style series specification.</h2>
    <div id="demodiv3"></div>
    <script type="text/javascript">
      data = function() {
        var zp = function(x) { if (x < 10) return "0"+x; else return x; };
        var r = "date,parabola,line,another line,sine wave,sine wave2\n";
        for (var i=1; i<=31; i++) {
          r += "200610" + zp(i);
          r += "," + 10*(i*(31-i));
          r += "," + 10*(8*i);
          r += "," + 10*(250 - 8*i);
          r += "," + 10*(125 + 125 * Math.sin(0.3*i));
          r += "," + 10*(125 + 125 * Math.sin(0.3*i+Math.PI));
          r += "\n";
        }
        return r;
      };
      g = new Dygraph(
              document.getElementById("demodiv"),
              data,
              {
                strokeWidth: 2,
		series : {
                  'parabola': {
                    strokeWidth: 0.0,
                    drawPoints: true,
                    pointSize: 4,
                    highlightCircleSize: 6
                  },
                  'line': {
                    strokeWidth: 1.0,
                    drawPoints: true,
                    pointSize: 1.5
                  },
                  'sine wave': {
                    strokeWidth: 3,
                    highlightCircleSize: 10
                  },
                  'sine wave2': {
                    strokePattern: [10, 2, 5, 2],
                    strokeWidth: 2,
                    highlightCircleSize: 3
                  }
                }
              }
          );
      g2 = new Dygraph(
              document.getElementById("demodiv2"),
              data,
              {
                legend: 'always',
                strokeWidth: 2,
                'parabola': {
                  strokePattern: null,
                  drawPoints: true,
                  pointSize: 4,
                  highlightCircleSize: 6
                },
                'line': {
                  strokePattern: Dygraph.DASHED_LINE,
                  strokeWidth: 1.0,
                  drawPoints: true,
                  pointSize: 1.5
                },
                'another line': {
                  strokePattern: [25, 5]
                },
                'sine wave': {
                  strokePattern: Dygraph.DOTTED_LINE,
                  strokeWidth: 3,
                  highlightCircleSize: 10
                },
                'sine wave2': {
                  strokePattern: Dygraph.DOT_DASH_LINE,
                  strokeWidth: 2,
                  highlightCircleSize: 3
                }
              }
          );
      g3 = new Dygraph(
              document.getElementById("demodiv3"),
              data,
              {
                strokeWidth: 2,
                'parabola': {
                  strokeWidth: 0.0,
                  drawPoints: true,
                  pointSize: 4,
                  highlightCircleSize: 6
                },
                'line': {
                  strokeWidth: 1.0,
                  drawPoints: true,
                  pointSize: 1.5
                },
                'sine wave': {
                  strokeWidth: 3,
                  highlightCircleSize: 10
                },
                'sine wave2': {
                  strokePattern: [10, 2, 5, 2],
                  strokeWidth: 2,
                  highlightCircleSize: 3
                }
              }
          );

    </script>
</body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
46dde5f9 DV	2	<html>
46dde5f9 DV	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
46dde5f9 DV	5	<title>Per-Series Properties</title>
46dde5f9 DV	6	<!--[if IE]>
a2b2c3a1	7	<script type="text/javascript" src="../excanvas.js"></script>
46dde5f9	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
46dde5f9 DV	15	</head>
	16	<body>
	17	<h2>Chart with per-series properties</h2>
	18	<div id="demodiv"></div>
79253bd0	19	<h2>Chart with per-series properties with legend.</h2>
79253bd0	20	<div id="demodiv2"></div>
30abcfb6 RK	21	<h2>First graph, using old-style series specification.</h2>
30abcfb6 RK	22	<div id="demodiv3"></div>
46dde5f9	23	<script type="text/javascript">
79253bd0	24	data = function() {
	25	var zp = function(x) { if (x < 10) return "0"+x; else return x; };
	26	var r = "date,parabola,line,another line,sine wave,sine wave2\n";
	27	for (var i=1; i<=31; i++) {
	28	r += "200610" + zp(i);
	29	r += "," + 10(i(31-i));
	30	r += "," + 10(8i);
	31	r += "," + 10(250 - 8i);
	32	r += "," + 10(125 + 125 Math.sin(0.3*i));
	33	r += "," + 10(125 + 125 Math.sin(0.3*i+Math.PI));
	34	r += "\n";
	35	}
	36	return r;
	37	};
46dde5f9 DV	38	g = new Dygraph(
46dde5f9 DV	39	document.getElementById("demodiv"),
79253bd0	40	data,
46dde5f9 DV	41	{
46dde5f9 DV	42	strokeWidth: 2,
30abcfb6 RK	43	series : {
	44	'parabola': {
	45	strokeWidth: 0.0,
	46	drawPoints: true,
	47	pointSize: 4,
	48	highlightCircleSize: 6
	49	},
	50	'line': {
	51	strokeWidth: 1.0,
	52	drawPoints: true,
	53	pointSize: 1.5
	54	},
	55	'sine wave': {
	56	strokeWidth: 3,
	57	highlightCircleSize: 10
	58	},
	59	'sine wave2': {
	60	strokePattern: [10, 2, 5, 2],
	61	strokeWidth: 2,
	62	highlightCircleSize: 3
	63	}
	64	}
	65	}
	66	);
	67	g2 = new Dygraph(
	68	document.getElementById("demodiv2"),
	69	data,
	70	{
	71	legend: 'always',
	72	strokeWidth: 2,
227b93cc	73	'parabola': {
30abcfb6	74	strokePattern: null,
46dde5f9 DV	75	drawPoints: true,
	76	pointSize: 4,
	77	highlightCircleSize: 6
	78	},
227b93cc	79	'line': {
30abcfb6	80	strokePattern: Dygraph.DASHED_LINE,
46dde5f9 DV	81	strokeWidth: 1.0,
	82	drawPoints: true,
	83	pointSize: 1.5
	84	},
30abcfb6 RK	85	'another line': {
	86	strokePattern: [25, 5]
	87	},
227b93cc	88	'sine wave': {
30abcfb6	89	strokePattern: Dygraph.DOTTED_LINE,
46dde5f9 DV	90	strokeWidth: 3,
46dde5f9 DV	91	highlightCircleSize: 10
79253bd0	92	},
79253bd0	93	'sine wave2': {
30abcfb6	94	strokePattern: Dygraph.DOT_DASH_LINE,
79253bd0	95	strokeWidth: 2,
	96	highlightCircleSize: 3
	97	}
	98	}
	99	);
30abcfb6 RK	100	g3 = new Dygraph(
30abcfb6 RK	101	document.getElementById("demodiv3"),
79253bd0	102	data,
79253bd0	103	{
79253bd0	104	strokeWidth: 2,
79253bd0	105	'parabola': {
30abcfb6	106	strokeWidth: 0.0,
79253bd0	107	drawPoints: true,
	108	pointSize: 4,
	109	highlightCircleSize: 6
	110	},
	111	'line': {
79253bd0	112	strokeWidth: 1.0,
	113	drawPoints: true,
	114	pointSize: 1.5
	115	},
79253bd0	116	'sine wave': {
79253bd0	117	strokeWidth: 3,
	118	highlightCircleSize: 10
	119	},
	120	'sine wave2': {
30abcfb6	121	strokePattern: [10, 2, 5, 2],
79253bd0	122	strokeWidth: 2,
79253bd0	123	highlightCircleSize: 3
46dde5f9 DV	124	}
	125	}
	126	);
79253bd0	127
46dde5f9 DV	128	</script>
	129	</body>
	130	</html>