--- a/lib/graphs.inc.php +++ b/lib/graphs.inc.php @@ -6,6 +6,7 @@ <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.pie.js"></script> + <script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.selection.js"></script> '; $includedFlot = true; @@ -18,6 +19,7 @@ ?> <center><div id="cndist" style="width:900px;height:550px"></div></center> <script type="text/javascript"> + var placeholder = $("#cndist"); $(function () { var d1 = []; @@ -36,21 +38,69 @@ }; ?> - var placeholder = $("#cndist"); - - var plot = $.plot(placeholder, [ +var data = [ { data: d1, +series: { + lines: { show: true }, + points: { show: true } + }, bars: { show: true } }, - ], - { + ]; + var options = + { grid: { hoverable: true, clickable: true, labelMargin: 17 }, + selection: { mode: "x" } + }; + +placeholder.bind("plotselected", function (event, ranges) { + plot = $.plot(placeholder, data, + $.extend(true, {}, options, { + xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to } + })); }); - + 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.dataIndex) { + previousPoint = item.dataIndex; + + $("#tooltip").remove(); + var x = item.datapoint[0].toFixed(2), + y = item.datapoint[1].toFixed(2); + + showTooltip(item.pageX, item.pageY, + item.series.label + " of " + x + " = " + y); + } + } + else { + $("#tooltip").remove(); + previousPoint = null; + } + }); + + var plot = $.plot(placeholder, data, + options); }); + function showTooltip(x, y, contents) { + $('<div id="tooltip">' + contents + '</div>').css( { + position: 'absolute', + display: 'none', + top: y + 5, + left: x + 5, + border: '1px solid #fdd', + padding: '2px', + 'background-color': '#fee', + opacity: 0.80 + }).appendTo("body").fadeIn(200); + } + </script> <?php } @@ -428,3 +478,4 @@ } ?> +