Issue18.htm

<hmtl>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>CurvedLines Plugin for flot</title>
		<script language="javascript" type="text/javascript" src="../flot/jquery.min.js"></script>
		<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]-->
		<script language="javascript" type="text/javascript" src="../flot/jquery.flot.min.js"></script>
		<script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.time.min.js"></script>
		<script language="JavaScript" type="text/javascript" src="../flot/jquery.flot.navigate.min.js"></script>
		<script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
		<script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
		<link rel="stylesheet" type="text/css" href="_TestSetup.css">
		</link>
	</head>
	<body>
		<div id="placeholder" style="width: 800;height: 400;"></div>
		<div id="parameters" style="width: 800"></div>

		<script id="source" language="javascript" type="text/javascript">
			$(function() {
				//data
				var dataSet = [[1385490600000, 150], [1386009000000, 450], [1392834600000, 444], [1393266600000, 100], [1393353000000, 147], [1393439400000, 105], [1393525800000, 179.5], [1393612200000, 85], [1393871400000, 107.5]];

				//general plot options
				var options = {
					series : {
						curvedLines : {
							active : true
						}
					},
					xaxis : {
						mode : "time",
						tickSize : [1, "day"],
						timezone : "browser",
						timeformat : "%m/%d%a",
						min : 1393396200000,
						max : 1394073000000,
						tickLength : 0,
						panRange : [1378809000000, 1394505000000],
						dayNames : ["S", "M", "T", "W", "T", "F", "S"]
					},
					yaxis : {
						panRange : [0, 500],
						ticks : ['0', '70', '130', '180', '200', '300', '400', '500'],
						tickLength : 0,
						tickDecimals : 0
					},
					pan : {
						interactive : true
					}
				}

				//curved line paramters
				var defaultParameters = {
					apply : true,
					legacyOverride : {
						fitPointDist : 86400,
						curvePointFactor : 40,
						fit : true
					}
				};

				//plot function
				function replot(parameters) {
					$.plot($("#placeholder"), [{
						data : dataSet,
						lines : {
							show : true,
						},
						curvedLines : parameters
					}, {
						data : dataSet,
						points : {
							show : true,
						},
						curvedLines : parameters
					}, {
						data : dataSet,
						points : {
							show : true
						}
					}], options);
				}

				//combine everything
				TestSetup($("#parameters"), defaultParameters, [replot])

			});
		</script>
	</body>
</hmtl>