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

<html>
  <head>
    <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>
    <br/><br/>
    <div id="demodiv2"></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	<html>
	2	<head>
	3	<title>Per-Series Properties</title>
	4	<!--[if IE]>
	5	<script type="text/javascript" src="../excanvas.js"></script>
	6	<![endif]-->
	7	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	8	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	9	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	10	<script type="text/javascript" src="../dygraph.js"></script>
	11	</head>
	12	<body>
	13	<h2>Chart with per-series properties</h2>
	14	<div id="demodiv"></div>
	15	<br/><br/>
	16	<div id="demodiv2"></div>
	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,
	36	'parabola': {
	37	strokeWidth: 0.0,
	38	drawPoints: true,
	39	pointSize: 4,
	40	highlightCircleSize: 6
	41	},
	42	'line': {
	43	strokeWidth: 1.0,
	44	drawPoints: true,
	45	pointSize: 1.5
	46	},
	47	'sine wave': {
	48	strokeWidth: 3,
	49	highlightCircleSize: 10
	50	}
	51	}
	52	);
	53	</script>
	54	</body>
	55	</html>