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

<!DOCTYPE html>
<html>
  <head>
    <title>Per-Series Properties</title>
    <!--
    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>
    <h2>First graph, using old-style series specification.</h2>
    <div id="demodiv3"></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
                  }
                }
              }
          );
      g3 = new Dygraph(
              document.getElementById("demodiv3"),
              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
                  }
                }
              }
          );

    </script>
</body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<title>Per-Series Properties</title>
	5	<!--
	6	For production (minified) code, use:
	7	<script type="text/javascript" src="dygraph-combined.js"></script>
	8	-->
	9	<script type="text/javascript" src="../dygraph-dev.js"></script>
	10
	11	</head>
	12	<body>
	13	<h2>Chart with per-series properties</h2>
	14	<div id="demodiv"></div>
	15	<h2>Chart with per-series properties with legend.</h2>
	16	<div id="demodiv2"></div>
	17	<h2>First graph, using old-style series specification.</h2>
	18	<div id="demodiv3"></div>
	19	<script type="text/javascript">
	20	data = function() {
	21	var zp = function(x) { if (x < 10) return "0"+x; else return x; };
	22	var r = "date,parabola,line,another line,sine wave,sine wave2\n";
	23	for (var i=1; i<=31; i++) {
	24	r += "200610" + zp(i);
	25	r += "," + 10(i(31-i));
	26	r += "," + 10(8i);
	27	r += "," + 10(250 - 8i);
	28	r += "," + 10(125 + 125 Math.sin(0.3*i));
	29	r += "," + 10(125 + 125 Math.sin(0.3*i+Math.PI));
	30	r += "\n";
	31	}
	32	return r;
	33	};
	34	g = new Dygraph(
	35	document.getElementById("demodiv"),
	36	data,
	37	{
	38	strokeWidth: 2,
	39	series : {
	40	'parabola': {
	41	strokeWidth: 0.0,
	42	drawPoints: true,
	43	pointSize: 4,
	44	highlightCircleSize: 6
	45	},
	46	'line': {
	47	strokeWidth: 1.0,
	48	drawPoints: true,
	49	pointSize: 1.5
	50	},
	51	'sine wave': {
	52	strokeWidth: 3,
	53	highlightCircleSize: 10
	54	},
	55	'sine wave2': {
	56	strokePattern: [10, 2, 5, 2],
	57	strokeWidth: 2,
	58	highlightCircleSize: 3
	59	}
	60	}
	61	}
	62	);
	63	g2 = new Dygraph(
	64	document.getElementById("demodiv2"),
	65	data,
	66	{
	67	legend: 'always',
	68	strokeWidth: 2,
	69	series: {
	70	'parabola': {
	71	strokePattern: null,
	72	drawPoints: true,
	73	pointSize: 4,
	74	highlightCircleSize: 6
	75	},
	76	'line': {
	77	strokePattern: Dygraph.DASHED_LINE,
	78	strokeWidth: 1.0,
	79	drawPoints: true,
	80	pointSize: 1.5
	81	},
	82	'another line': {
	83	strokePattern: [25, 5]
	84	},
	85	'sine wave': {
	86	strokePattern: Dygraph.DOTTED_LINE,
	87	strokeWidth: 3,
	88	highlightCircleSize: 10
	89	},
	90	'sine wave2': {
	91	strokePattern: Dygraph.DOT_DASH_LINE,
	92	strokeWidth: 2,
	93	highlightCircleSize: 3
	94	}
	95	}
	96	}
	97	);
	98	g3 = new Dygraph(
	99	document.getElementById("demodiv3"),
	100	data,
	101	{
	102	strokeWidth: 2,
	103	series: {
	104	'parabola': {
	105	strokeWidth: 0.0,
	106	drawPoints: true,
	107	pointSize: 4,
	108	highlightCircleSize: 6
	109	},
	110	'line': {
	111	strokeWidth: 1.0,
	112	drawPoints: true,
	113	pointSize: 1.5
	114	},
	115	'sine wave': {
	116	strokeWidth: 3,
	117	highlightCircleSize: 10
	118	},
	119	'sine wave2': {
	120	strokePattern: [10, 2, 5, 2],
	121	strokeWidth: 2,
	122	highlightCircleSize: 3
	123	}
	124	}
	125	}
	126	);
	127
	128	</script>
	129	</body>
	130	</html>