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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>Per-Series Properties</title>
    <script type="text/javascript" src="../dist/dygraph.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,
		series : {
                  '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,
                series: {
                  '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	<link rel="stylesheet" href="../dist/dygraph.css">
	5	<title>Per-Series Properties</title>
	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
	7
	8	</head>
	9	<body>
	10	<h2>Chart with per-series properties</h2>
	11	<div id="demodiv"></div>
	12	<h2>Chart with per-series properties with legend.</h2>
	13	<div id="demodiv2"></div>
	14	<script type="text/javascript">
	15	data = function() {
	16	var zp = function(x) { if (x < 10) return "0"+x; else return x; };
	17	var r = "date,parabola,line,another line,sine wave,sine wave2\n";
	18	for (var i=1; i<=31; i++) {
	19	r += "200610" + zp(i);
	20	r += "," + 10(i(31-i));
	21	r += "," + 10(8i);
	22	r += "," + 10(250 - 8i);
	23	r += "," + 10(125 + 125 Math.sin(0.3*i));
	24	r += "," + 10(125 + 125 Math.sin(0.3*i+Math.PI));
	25	r += "\n";
	26	}
	27	return r;
	28	};
	29	g = new Dygraph(
	30	document.getElementById("demodiv"),
	31	data,
	32	{
	33	strokeWidth: 2,
	34	series : {
	35	'parabola': {
	36	strokeWidth: 0.0,
	37	drawPoints: true,
	38	pointSize: 4,
	39	highlightCircleSize: 6
	40	},
	41	'line': {
	42	strokeWidth: 1.0,
	43	drawPoints: true,
	44	pointSize: 1.5
	45	},
	46	'sine wave': {
	47	strokeWidth: 3,
	48	highlightCircleSize: 10
	49	},
	50	'sine wave2': {
	51	strokePattern: [10, 2, 5, 2],
	52	strokeWidth: 2,
	53	highlightCircleSize: 3
	54	}
	55	}
	56	}
	57	);
	58	g2 = new Dygraph(
	59	document.getElementById("demodiv2"),
	60	data,
	61	{
	62	legend: 'always',
	63	strokeWidth: 2,
	64	series: {
	65	'parabola': {
	66	strokePattern: null,
	67	drawPoints: true,
	68	pointSize: 4,
	69	highlightCircleSize: 6
	70	},
	71	'line': {
	72	strokePattern: Dygraph.DASHED_LINE,
	73	strokeWidth: 1.0,
	74	drawPoints: true,
	75	pointSize: 1.5
	76	},
	77	'another line': {
	78	strokePattern: [25, 5]
	79	},
	80	'sine wave': {
	81	strokePattern: Dygraph.DOTTED_LINE,
	82	strokeWidth: 3,
	83	highlightCircleSize: 10
	84	},
	85	'sine wave2': {
	86	strokePattern: Dygraph.DOT_DASH_LINE,
	87	strokeWidth: 2,
	88	highlightCircleSize: 3
	89	}
	90	}
	91	}
	92	);
	93	</script>
	94	</body>
	95	</html>