[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
	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	<h2>Chart with per-series properties with legend.</h2>
	20	<div id="demodiv2"></div>
	21	<script type="text/javascript">
	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	};
	36	g = new Dygraph(
	37	document.getElementById("demodiv"),
	38	data,
	39	{
	40	strokeWidth: 2,
	41	'parabola': {
	42	strokeWidth: 0.0,
	43	drawPoints: true,
	44	pointSize: 4,
	45	highlightCircleSize: 6
	46	},
	47	'line': {
	48	strokeWidth: 1.0,
	49	drawPoints: true,
	50	pointSize: 1.5
	51	},
	52	'sine wave': {
	53	strokeWidth: 3,
	54	highlightCircleSize: 10
	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
	93	}
	94	}
	95	);
	96
	97	</script>
	98	</body>
	99	</html>