[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]-->
    <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>
  </head>
  <body>
    <h2>Chart with per-series properties</h2>
    <div id="demodiv"></div>

    <script type="text/javascript">
      g = new Dygraph(
              document.getElementById("demodiv"),
              function() {
                var zp = function(x) { if (x < 10) return "0"+x; else return x; };
                var r = "date,parabola,line,another line,sine wave\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 += "\n";
                }
                return r;
              },
              {
                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
                }
              }
          );
    </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 DV	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	</head>
	14	<body>
	15	<h2>Chart with per-series properties</h2>
	16	<div id="demodiv"></div>
46dde5f9 DV	17
	18	<script type="text/javascript">
	19	g = new Dygraph(
	20	document.getElementById("demodiv"),
	21	function() {
	22	var zp = function(x) { if (x < 10) return "0"+x; else return x; };
	23	var r = "date,parabola,line,another line,sine wave\n";
	24	for (var i=1; i<=31; i++) {
	25	r += "200610" + zp(i);
	26	r += "," + 10(i(31-i));
	27	r += "," + 10(8i);
	28	r += "," + 10(250 - 8i);
	29	r += "," + 10(125 + 125 Math.sin(0.3*i));
	30	r += "\n";
	31	}
	32	return r;
	33	},
	34	{
	35	strokeWidth: 2,
227b93cc	36	'parabola': {
46dde5f9 DV	37	strokeWidth: 0.0,
	38	drawPoints: true,
	39	pointSize: 4,
	40	highlightCircleSize: 6
	41	},
227b93cc	42	'line': {
46dde5f9 DV	43	strokeWidth: 1.0,
	44	drawPoints: true,
	45	pointSize: 1.5
	46	},
227b93cc	47	'sine wave': {
46dde5f9 DV	48	strokeWidth: 3,
	49	highlightCircleSize: 10
	50	}
	51	}
	52	);
	53	</script>
	54	</body>
	55	</html>