Flot graph with line hover
HTML
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>
CSS
body {
font-family: sans-serif;
font-size: 16px;
margin: 50px;
max-width: 800px;
}
#flotTip {
}
JavaScript
//Tooltip plugin
(function ($) {
var options = {
tooltip: false,
//boolean
tooltipOpts: {
content: "%s | X: %x | Y: %y.2",
//%s -> series label, %x -> X value, %y -> Y value, %x.2 -> precision of X value
dateFormat: "%y-%0m-%0d",
shifts: {
x: 10,
y: 20
},
defaultTheme: true
}
};
function init(plot) {
var tipPosition = {
x: 0,
y: 0
};
var opts = plot.getOptions();
function updateTooltipPosition(pos) {
tipPosition.x = pos.x;
tipPosition.y = pos.y;
};
function onMouseMove(e) {
var pos = {
x: 0,
y: 0
};
pos.x = e.pageX;
pos.y = e.pageY;
updateTooltipPosition(pos);
};
function timestampToDate(tmst) {
var theDate = new Date(tmst);
return $.plot.formatDate(theDate, opts.tooltipOpts.dateFormat);
};
plot.hooks.bindEvents.push(function (plot, eventHolder) {
var to = opts.tooltipOpts;
var placeholder = plot.getPlaceholder();
var $tip;
if (opts.tooltip === false) return;
if ($('#flotTip').length > 0) {
$tip = $('#flotTip');
} else {
$tip = $('<div />').attr('id', 'flotTip');
$tip.appendTo('body').hide().css({
position: 'absolute'
});
if (to.defaultTheme) {
$tip.css({
'background': 'rgba(41, 41, 41, 0.9)',
'z-index': '4000',
'padding': '0',
'border-radius': '0.5em',
'font-size': '0.8em',
'border': 'none'
});
...