testDate.htm 2.9 KB
Newer Older
1 2 3 4
<hmtl>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>CurvedLines Plugin for flot</title>
Kuhan Muniam's avatar
Kuhan Muniam committed
5
		 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
6 7
		<!--[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.js"></script>
8
		<script language="javascript" type="text/javascript" src="../flot/jquery.flot.time.js"></script>
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
		<script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
	</head>
	<body>
		<div id="placeholder" style="width: 800;height: 400;"></div>
		<div id="placeholder2" style="width: 800;height: 400;"></div>

		<script id="source" language="javascript" type="text/javascript">
			var d1 = [[new Date(1360735200000), 2], [new Date(1360648800000), 21], [new Date(1360562400000), 3], [new Date(1360303200000), 3], [new Date(1360216800000), 3], [new Date(1360130400000), 5], [new Date(1360044000000), 0], [new Date(1359957600000), 0], [new Date(1359698400000), 0], [new Date(1359612000000), 1], [new Date(1359525600000), 2], [new Date(1359439200000), 3], [new Date(1359352800000), 1], [new Date(1359093600000), 2], [new Date(1359007200000), 1], [new Date(1358920800000), 5], [new Date(1358834400000), 13], [new Date(1358748000000), 12], [new Date(1358488800000), 10], [new Date(1358402400000), 11], [new Date(1358316000000), 5], [new Date(1358229600000), 4], [new Date(1358143200000), 3]];

			d1.sort(sortfunction)

			function sortfunction(a, b){
				if (a[0] < b[0]) {
					return -1;
				}
				if (a[0] > b[0]) {
					return 1;
				}
				return 0;
			}

			var options = {
				series : {
					curvedLines : {
						active : true
					}
				},
				xaxis : {
					mode : "time",
					minTickSize : [1, "hour"]
				},
				yaxis : {
            min : -10,
            max : 60
				}
			};

			$.plot($("#placeholder"), [{
				data : d1,
				lines : {
					show : true
				},
				curvedLines : {
					apply : true,
53
					legacyOverride: true
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
				}
			}, {
				data : d1,
				points : {
					show : true
				}
			}], options);
		</script>

		<script id="source" language="javascript" type="text/javascript">
			var d1 = [[20, new Date(2000, 1, 1, 10)], [30, new Date(2000, 1, 1, 8)], [50, new Date(2000, 1, 1, 14)], [80, new Date(2000, 1, 1, 22)]];

			var options = {
				series : {
					curvedLines : {
						active : true
					}
				},
				yaxis : {
					mode : "time",
					minTickSize : [1, "hour"],
					min : (new Date(2000, 1, 1)),
					max : (new Date(2000, 1, 2))
				},
				xaxis : {
					min : 10,
					max : 90
				}
			};

			$.plot($("#placeholder2"), [{
				data : d1,
				lines : {
					show : true
				},
				curvedLines : {
					apply : true,
91
					legacyOverride: true
92 93 94 95 96 97 98 99 100 101 102 103
				}
			}, {
				data : d1,
				points : {
					show : true
				}
			}], options);
		</script>

	</body>

</hmtl>