[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>

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