Skip to content

C
CurvedLines
Switch branch/tag
Find file
Normal viewHistoryPermalink
testTooltip.htm 3.17 KB
Newer Older
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
1 2 3 4 
<hmtl>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>CurvedLines Plugin for flot</title>
Michael Zinsmaier's avatar
Added new hermite spline interpolatin and docu. Changed tests to be based on...
045ab982
 
Michael Zinsmaier committed
5 
		<script language="javascript" type="text/javascript" src="../flot/jquery.min.js"></script>
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
6 
		<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
Michael Zinsmaier's avatar
Added new hermite spline interpolatin and docu. Changed tests to be based on...
045ab982
 
Michael Zinsmaier committed
7 
		<script language="javascript" type="text/javascript" src="../flot/jquery.flot.min.js"></script>
Kuhan Muniam's avatar
fixed tests
f6fbc590
 
Kuhan Muniam committed
8 
		<script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
Michael Zinsmaier's avatar
Added new auto parameter testbox to all tests
aa088307
 
Michael Zinsmaier committed
9 10 
		<script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
		<link rel="stylesheet" type="text/css" href="_TestSetup.css"></link>
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
11 12 13 
	</head>
	<body>
		<div id="placeholder" style="width: 800;height: 400;"></div>
Michael Zinsmaier's avatar
Added new auto parameter testbox to all tests
aa088307
 
Michael Zinsmaier committed
14 
		<div id="parameters" style="width: 800"></div>
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
15 16 17 18 

<script language="javascript" type="text/javascript">
$(function () {
Michael Zinsmaier's avatar
Added new auto parameter testbox to all tests
aa088307
 
Michael Zinsmaier committed
19 
	//data
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
20 21 22 23 24 25 26 27 28 29 30 
	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]],
		}
	];
Michael Zinsmaier's avatar
Added new auto parameter testbox to all tests
aa088307
 
Michael Zinsmaier committed
31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 
	//general plot 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}
	};
	
					//curved line paramters
				var defaultParameters = {
					apply : true,
					legacyOverride : true
				}
				
								//plot function
				function replot(parameters) {
					$.plot($("#placeholder"), [
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
52 53 54 
					{
					  	data: data[0].data,
					 	label: data[0].label,
Michael Zinsmaier's avatar
Added new auto parameter testbox to all tests
aa088307
 
Michael Zinsmaier committed
55 
					 	curvedLines: defaultParameters,
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
56 57 58 59 60 61 62 63 64 65 66 67 68 69 
					 	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}
					 }
Michael Zinsmaier's avatar
Added new auto parameter testbox to all tests
aa088307
 
Michael Zinsmaier committed
70 71 
					], options);
				}
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
72 73
Michael Zinsmaier's avatar
Added new auto parameter testbox to all tests
aa088307
 
Michael Zinsmaier committed
74 75 76 
			//combine everything
			TestSetup($("#parameters"), defaultParameters, [replot]);
michael's avatar
added a test / example for tool tips
27ea9749
 
michael committed
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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 
	var placeholder = $("#placeholder");
	
    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>