How to display the data point data popup in the fleet graph?
I got a graph generated by the fleet. What I wanted to internalize was to get some kind of information when the user clicks on it with the cursor - it would be best to display the data (x and y axis) as a javascript popup.
This is probably a trivial question, but I can't figure it out ...
Right now my javascript looks like this:
<script id="source" language="javascript" type="text/javascript">
$(function () {
var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]]
$.plot($("#graph_placeholder"), [ data ], {
xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", },
lines: { show: true },
points: { show: false },
} );
});
</script>
Your best x: 1251756000000 y: 122.68
bet would be to get the hovering point (x: 1251756000000, y: any). Or even have a value x
formatted as defined in timeformat
(2009/11/14).
source to share
This example shows how to enable tooltip (if you select the Enable tooltip checkbox). Here's a starting point using the example code:
<script id="source" language="javascript" type="text/javascript">
$(function () {
var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]]
$.plot($("#graph_placeholder"), [ data ], {
xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", },
lines: { show: true },
points: { show: true },
grid: { hoverable: true },
} );
});
var previousPoint = null;
$("#graph_placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
showTooltip(item.pageX, item.pageY, '(' + item.datapoint[0] + ', ' + item.datapoint[1]+')');
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
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>
source to share