<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>flot.tooltip plugin example page</title>
<meta name="author" content="@krzysu, myviews.pl">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/jquery.flot.js"></script>
<script src="../js/jquery.flot.tooltip.min.js"></script>
<style type="text/css">
body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
h4, ul {margin: 0;}
#flotTip {white-space: nowrap; border: 1px solid #111; padding: 3px 8px; background:#fff; font-size:12px;}
</style>
</head>
<body>
<h1>flot.tooltip plugin example page</h1>
<div id="placeholder" style="width: 825px; height: 150px;"></div>
<script>
$(function() {
var container = $("#placeholder");
// Determine how many data points to keep based on the placeholder's initial size;
// this gives us a nice high-res plot while avoiding more than one point per pixel.
var maximum = 10;// container.outerWidth() / 2 || 300;
//
var data = [];
function getRandomData() {
if (data.length) {
data = data.slice(1);
}
while (data.length < maximum) {
var previous = data.length ? data[data.length - 1] : 70;
var y = previous + Math.random() * 10 - 5;
data.push(y < 0 ? 0 : y > 100 ? 100 : y);
}
// zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
//
series = [{
data: getRandomData(),
bars: {
show: true,
lineWidth: 1,
fill: true,
fillColor: { colors: [ { opacity: 0.8 }, { opacity: 0.6 } ] },
barWidth: 0.8,
align: 'center',
horizontal: false
}
}];
//
var plot = $.plot(container, series, {
grid: {
borderWidth: 1,
minBorderMargin: 20,
labelMargin: 10,
backgroundColor: {
colors: ["#fff", "#e4f4f4"]
},
hoverable: true,
mouseActiveRadius: 50,
margin: {
top: 8,
bottom: 20,
left: 20
},
markings: function(axes) {
var markings = [];
var xaxis = axes.xaxis;
for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
markings.push({ xaxis: { from: x, to: x + xaxis.tickSize }, color: "rgba(232, 232, 255, 0.2)" });
}
return markings;
}
},
yaxis: {
min: 0,
max: 110
},
legend: {
show: true
},
tooltip: {
show: true,
content: "X is %x | Y is %y"
}
});
setInterval(function updateRandom() {
series[0].data = getRandomData();
plot.setData(series);
plot.draw();
}, 1000);
});
</script>
</body>
</html>