<!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.pie.js"></script>
<script src="../js/jquery.flot.tooltip.js"></script>
<style type="text/css">
body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
h4, ul {margin: 0;}
.flotTip
{
padding: 3px 5px;
background-color: #000;
z-index: 100;
color: #fff;
box-shadow: 0 0 10px #555;
opacity: .7;
filter: alpha(opacity=70);
border: 2px solid #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>flot.tooltip plugin example page</h1>
<div id="placeholder" style="width: 500px; height: 400px;"></div>
<script>
$(function () {
var data = [
{ label: "Series 0", data: 1 },
{ label: "Series 1", data: 3 },
{ label: "Series 2", data: 9 },
{ label: "Series 3", data: 20 }
];
var plotObj = $.plot($("#placeholder"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3/4,
// formatter: labelFormatter,
background: {
opacity: 0.5,
color: '#000'
}
}
}
},
grid: {
hoverable: true
},
tooltip: {
show: true,
content: "%p.0%, %s, n=%n", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
});
</script>
</body>
</html>