Flot tooltip on hover
Question
I have the following code showing the graph using Flot. I want to get the mouse hover to show a tooltip with the values of days/quota
<?php
include("connect.php");
$FundName=$_POST["FundName"];
$mes=$_POST["mes"];
$cnpj=$_POST["cnpj"];
?>
<?php
$query = "SELECT Dia, Quota FROM CDVM WHERE Competence='$mes' AND FundName='$FundName' AND Quota > 0";
$result = mysql_query($query);
?>
<?php
$points = "";
while($row = mysql_fetch_assoc($result))
{
$quota = str_replace(',', '.', $row['Quota']);
$points .= "[{$row['Dia']}, {$quota}], ";
}
$points = rtrim($points, ", ");
?>
<div id="placeholder" style="width:500px;height:200px"></div>
<script type="text/javascript">
$(function() {
$.plot("#placeholder", [[ <?php echo $points ?> ],
{
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
});
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
"Dia=" + x + ", Quota=" + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$("<div id='tooltip'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 5,
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
});
</script>
I alo have call the jquery from flot website in the head of the file. I just have problems copying the whole code on to here. Thanks again for the help!
3 answers
solution1
2 ACCPTED 2013-05-15 00:31:46
You need to create an element for the tooltip (a span or div), and then bind plothover to it. I used the example on their website "Interacting with the data points" on my own website.
The below code uses the showTooltip function to create the tooltip div, triggered with the call to .bind("plothover"). This enables hovering to trigger the tooltip and populate it with the relevant data item.
Here's my code modified for a complete working version. Just make sure your database string is in there before "while($row = mysql_fetch_assoc($result))"
<html>
<head>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
</head>
<body>
<?php
$points = "";
while($row = mysql_fetch_assoc($result))
{
$quota = str_replace(',', '.', $row['Quota']);
$points .= "[{$row['Dia']}, {$quota}], ";
}
$points = rtrim($points, ", ");
?>
<div id="placeholder" style="width:500px;height:200px"></div>
<script type="text/javascript">
$(function() {
$.plot("#placeholder", [[ <?php echo $points ?> ]],
{
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
});
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
"Dia=" + x + ", Quota=" + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$("<div id='tooltip'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 5,
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
});
</script>
</body>
</html>
solution2
0 2013-05-17 11:31:36
I'm pretty sure that the other graphics don't draw because of the following code:
while($row3 = mysql_fetch_assoc($result3))
{
$quota3 = $row3['TDC'];
$points3 = "[{$row3['Dia']}, {$tdc}], ";
}
$points3 = rtrim($points, ", ");
I changed the variables to $name3... An example of a TDC value in the DB is as follows:4.504.801,65 Could it be with comma/dot?
Thank you!
solution3
0 2013-05-20 14:41:41
<?php
$points3 = "";
while($row3 = mysql_fetch_assoc($result3))
{
$tdc3 = str_replace('.', ',', $row3['TDC']);
$points3 .= "[{$row3['Dia']}, {$tdc3}], ";
}
$points3 = rtrim($points3, ". ");
echo $points3;
?>
<div id="placeholder3" style="width:500px;height:200px"></div>
<script type="text/javascript">
$(function() {
$.plot("#placeholder3", [[ <?php echo $points3 ?> ]],
{
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
});
$("#placeholder3").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip3").remove();
var x = item.datapoint[0].toFixed(2);
var y = item.datapoint[1].toFixed(4);
showTooltip(item.pageX, item.pageY,
"Dia=" + x + ", TDC=" + y);
}
} else {
$("#tooltip3").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$("<div id='tooltip3'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 5,
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.