[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>
    <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,
                '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
                }
              }
          );

    </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>
46dde5f9	21	<script type="text/javascript">
79253bd0	22	data = function() {
	23	var zp = function(x) { if (x < 10) return "0"+x; else return x; };
	24	var r = "date,parabola,line,another line,sine wave,sine wave2\n";
	25	for (var i=1; i<=31; i++) {
	26	r += "200610" + zp(i);
	27	r += "," + 10(i(31-i));
	28	r += "," + 10(8i);
	29	r += "," + 10(250 - 8i);
	30	r += "," + 10(125 + 125 Math.sin(0.3*i));
	31	r += "," + 10(125 + 125 Math.sin(0.3*i+Math.PI));
	32	r += "\n";
	33	}
	34	return r;
	35	};
46dde5f9 DV	36	g = new Dygraph(
46dde5f9 DV	37	document.getElementById("demodiv"),
79253bd0	38	data,
46dde5f9 DV	39	{
46dde5f9 DV	40	strokeWidth: 2,
227b93cc	41	'parabola': {
46dde5f9 DV	42	strokeWidth: 0.0,
	43	drawPoints: true,
	44	pointSize: 4,
	45	highlightCircleSize: 6
	46	},
227b93cc	47	'line': {
46dde5f9 DV	48	strokeWidth: 1.0,
	49	drawPoints: true,
	50	pointSize: 1.5
	51	},
227b93cc	52	'sine wave': {
46dde5f9 DV	53	strokeWidth: 3,
46dde5f9 DV	54	highlightCircleSize: 10
79253bd0	55	},
	56	'sine wave2': {
	57	strokePattern: [10, 2, 5, 2],
	58	strokeWidth: 2,
	59	highlightCircleSize: 3
	60	}
	61	}
	62	);
	63	g2 = new Dygraph(
	64	document.getElementById("demodiv2"),
	65	data,
	66	{
	67	legend: 'always',
	68	strokeWidth: 2,
	69	'parabola': {
	70	strokePattern: null,
	71	drawPoints: true,
	72	pointSize: 4,
	73	highlightCircleSize: 6
	74	},
	75	'line': {
	76	strokePattern: Dygraph.DASHED_LINE,
	77	strokeWidth: 1.0,
	78	drawPoints: true,
	79	pointSize: 1.5
	80	},
	81	'another line': {
	82	strokePattern: [25, 5]
	83	},
	84	'sine wave': {
	85	strokePattern: Dygraph.DOTTED_LINE,
	86	strokeWidth: 3,
	87	highlightCircleSize: 10
	88	},
	89	'sine wave2': {
	90	strokePattern: Dygraph.DOT_DASH_LINE,
	91	strokeWidth: 2,
	92	highlightCircleSize: 3
46dde5f9 DV	93	}
	94	}
	95	);
79253bd0	96
46dde5f9 DV	97	</script>
	98	</body>
	99	</html>