testDate.htm 2.85 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 53 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 91 92 93 94 95 96 97 98 99 100 101
		<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,
				}
			}, {
				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,
				}
			}, {
				data : d1,
				points : {
					show : true
				}
			}], options);
		</script>

	</body>

</hmtl>