You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.5 KiB
134 lines
3.5 KiB
1 year ago
|
<!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>
|