JavaScript/jQuery: Manipulate number in chart tooltip
In this example, if you hover over a point on the chart, the value of x is displayed in a tooltip. I want the value of x*2 to be displayed in the tooltip.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http:////cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/krzysu/flot.tooltip/master/js/jquery.flot.tooltip.min.js"></script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
var format = {
grid: {
show: true,
aboveData: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20
},
series: {
lines: {
show: true,
},
points: {
show: true
}
},
xaxis: {
show: true
},
yaxis: {
show: true
},
tooltip: true,
tooltipOpts: {
content: "%x * 2 = ???",
shifts: {
x: -30,
y: -50
}
}
};
$(document)
.ready(function () {
var d1 = [];
for(var i = 0; i < 61; i++)
d1.push([i, Math.sin(i)]);
$.plot($('#placeholder'), [{
label: "Example",
data: d1,
}], format);
});
</script>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.