133 lines
3.5 KiB
133 lines
3.5 KiB
<!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>
|
|
|