<!DOCTYPE html>
<html>
<head>
<title>Data Point Highlighting, Tooltips and Cursor Tracking</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="examples.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="../jquery.min.js"></script>
</head>
<body>
<div class="logo">
<div class="nav">
<a class="nav" href="../../../index.php"><span>></span>Home</a>
<a class="nav" href="../../../docs/"><span>></span>Docs</a>
<a class="nav" href="../../download/"><span>></span>Download</a>
<a class="nav" href="../../../info.php"><span>></span>Info</a>
<a class="nav" href="../../../donate.php"><span>></span>Donate</a>
</div>
</div>
<div class="example-content">
<div class="example-nav">
<a href="candlestick.html">Previous</a> <a href="./">Examples</a> <a href="customHighlighterCursorTrendline.html">Next</a></div>
<!-- Example scripts go here -->
<p>The Highlighter plugin will highlight data points near the mouse and display an optional tooltip with the data point value. By default, the tooltip values will be formatted with the same formatter as used to display the axes tick values. The text format can be customized with an optional sprintf style format string.</p>
<div id="chart1" style="height:300px; width:600px;"></div>
<pre class="code prettyprint brush: js"></pre>
<p>The Cursor plugin changes the mouse cursor when it enters the graph area and displays an optional tooltip with the mouse position. The tooltip can be in a fixed location, or it can follow the mouse. The pointer style, set to "crosshair" by default, can also be customized. Tooltip values are formatted similar to the Highlighter plugin. By default they use the axes formatters, but can be customized with a sprintf format string.</p>
<div id="chart2" style="height:300px; width:600px;"></div>
<pre class="code prettyprint brush: js"></pre>
<script class="code" type="text/javascript">
$(document).ready(function(){
var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
var plot1 = $.jqplot('chart1', [line1], {
title:'Data Point Highlighting',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
}
},
yaxis:{
tickOptions:{
formatString:'$%.2f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
}
});
});
</script>
<script class="code" type="text/javascript">
$(document).ready(function(){
var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
var plot2 = $.jqplot('chart2', [line1], {
title:'Mouse Cursor Tracking',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
}
},
yaxis:{
tickOptions:{
formatString:'$%.2f'
}
}
},
highlighter: {
show: false
},
cursor: {
show: true,
tooltipLocation:'sw'
}
});
});
</script>
<!-- End example scripts -->
<!-- Don't touch this! -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- End Don't touch this! -->
<!-- Additional plugins go here -->
<script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<!-- End additional plugins -->
</div>
<script type="text/javascript" src="example.min.js"></script>
</body>
</html>
Submit an article or tip