added a test / example for tool tips

13 years ago · 27ea9749e5
parent 84d7785c7a
commit 27ea9749e5
1 changed files with 105 additions and 0 deletions
--- a/tests/testTooltip.htm
+++ b/tests/testTooltip.htm
@ -0,0 +1,105 @@
+<hmtl>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+		<title>CurvedLines Plugin for flot</title>
+		<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
+		<script type="text/javascript" src="jquery-ui-1.8.12.custom.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.js"></script>
+		<script language="JavaScript" type="text/javascript" src="curvedLines.js"></script>
+	</head>
+	<body>
+		<div id="placeholder" style="width: 800;height: 400;"></div>
+
+<script language="javascript" type="text/javascript">
+$(function () {
+	
+	
+	var data = [
+		{
+			label: [["Label 1"], ["Label 2"], ["Label 3"]],
+			data: [[10, 10], [20, 14], [30, 12]],
+		},
+		{
+			label: [["Label 1_2"], ["Label 2_2"], ["Label 3_2"]],
+			data: [[8, 12], [22, 18], [25, 12]],
+		}
+	];
+	
+	var series = [
+					{
+					  	data: data[0].data,
+					 	label: data[0].label,
+					 	curvedLines: {apply: true},
+					 	clickable: false,
+					 	hoverable: false
+					},
+					{
+					 	data: data[0].data,
+					 	label: data[0].label,
+					 	points: {show : true}
+					 },
+					 {
+					 	data: data[1].data,
+					 	label: data[1].label,
+					 	lines: {show : true},
+					 	points: {show : true}
+					 }
+					];
+	
+	//general options
+	var options = {
+		series: {curvedLines : {
+						active : true
+					},
+		lines: { lineWidth: 5},
+		points: { radius: 4 }
+		},
+		legend: { show: false },
+		grid: { borderWidth: 2, clickable: true, hoverable: true, autoHighlight: true}
+	};
+	
+	var placeholder = $("#placeholder");
+	
+	var plot = $.plot(placeholder, series, options);
+
+    function showTooltip(x, y, contents) {
+        $('<div id="tooltip">' + contents + '</div>').css( {
+            position: 'absolute',
+            display: 'none',
+            top: y - 32,
+            left: x,
+            border: 'none',
+            padding: '4px',
+            'background-color': '#000',
+			'color':'#fff',
+            opacity: 0.80
+        }).appendTo("body").fadeIn(20);
+    }
+
+    var previousPoint = null;
+    $("#placeholder").bind("plothover", function (event, pos, item) {
+        $("#x").text(pos.x.toFixed(2));
+        $("#y").text(pos.y.toFixed(2));
+        if (item) {
+            if (previousPoint != item.datapoint) {
+                previousPoint = item.datapoint;
+                 $("#tooltip").remove();
+                var x = item.datapoint[0].toFixed(2),
+                    y = item.datapoint[1].toFixed(2);
+                 	showTooltip(item.pageX, item.pageY, item.series.label[item.dataIndex]);
+            }
+        }
+        else {
+            $("#tooltip").remove();
+            previousPoint = null;
+        }
+	});
+});
+</script>
+	</body>
+
+</hmtl>
+
+
+