<!-- saved from url=(0026)http://www.naturaldocs.org -->
<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><divclass="CTitle logo"><divclass="nav"><aclass="nav"href="../../../index.php"><span>></span>Home</a><aclass="nav"href="../../../tests/"><span>></span>Examples</a><aclass="nav"href="../../../docs/"><span>></span>Docs</a><aclass="nav"href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>></span>Download</a><aclass="nav"href="../../../info.php"><span>></span>Info</a><aclass="nav"href="../../../donate.php"><span>></span>Donate</a></div><aname="$.jqplot.Highlighter"></a>$.jqplot.<wbr>Highlighter</div><divclass=CBody><p>Plugin which will highlight data points when they are moused over.</p><p>To use this plugin, include the js file in your source:</p><blockquote><pre><script type="text/javascript" src="plugins/jqplot.highlighter.js"></script></pre></blockquote><p>A tooltip providing information about the data point is enabled by default. To disable the tooltip, set “showTooltip” to false.</p><p>You can control what data is displayed in the tooltip with various options. The “tooltipAxes” option controls wether the x, y or both data values are displayed.</p><p>Some chart types (e.g. hi-low-close) have more than one y value per data point. To display the additional values in the tooltip, set the “yvalues” option to the desired number of y values present (3 for a hlc chart).</p><p>By default, data values will be formatted with the same formatting specifiers as used to format the axis ticks. A custom format code can be supplied with the tooltipFormatString option. This will apply to all values in the tooltip.</p><p>For more complete control, the “formatString” option can be set. This Allows conplete control over tooltip formatting. Values are passed to the format string in an order determined by the “tooltipAxes” and “yvalues” options. So, if you have a hi-low-close chart and you just want to display the hi-low-close values in the tooltip, you could set a formatString like:</p><blockquote><pre>highlighter: {
}</pre></blockquote><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#$.jqplot.Highlighter">$.jqplot.<wbr>Highlighter</a></td><tdclass=SDescription>Plugin which will highlight data points when they are moused over.</td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.show"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">show</a></td><tdclass=SDescription>true to show the highlight.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.markerRenderer"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">markerRenderer</a></td><tdclass=SDescription>Renderer used to draw the marker of the highlighted point. </td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.showMarker"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">showMarker</a></td><tdclass=SDescription>true to show the marker</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.lineWidthAdjust"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">lineWidthAdjust</a></td><tdclass=SDescription>Pixels to add to the lineWidth of the highlight.</td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.sizeAdjust"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">sizeAdjust</a></td><tdclass=SDescription>Pixels to add to the overall size of the highlight.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.showTooltip"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">showTooltip</a></td><tdclass=SDescription>Show a tooltip with data point values.</td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.tooltipLocation"id=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">tooltipLocation</a></td><tdclass=SDescription>Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.fadeTooltip"id=link8onMouseOver="ShowTip(event, 'tt8', 'link8')"onMouseOut="HideTip('tt8')">fadeTooltip</a></td><tdclass=SDescription>true = fade in/out tooltip, flase = show/hide tooltip</td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.tooltipFadeSpeed"id=link9onMouseOver="ShowTip(event, 'tt9', 'link9')"onMouseOut="HideTip('tt9')">tooltipFadeSpeed</a></td><tdclass=SDescription>‘slow’, ‘def’, ‘fast’, or number of milliseconds.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.tooltipOffset"id=link10onMouseOver="ShowTip(event, 'tt10', 'link10')"onMouseOut="HideTip('tt10')">tooltipOffset</a></td><tdclass=SDescription>Pixel offset of tooltip from the highlight.</td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.tooltipAxes"id=link11onMouseOver="ShowTip(event, 'tt11', 'link11')"onMouseOut="HideTip('tt11')">tooltipAxes</a></td><tdclass=SDescription>Which axes to display in tooltip, ‘x’, ‘y’ or ‘both’, ‘xy’ or ‘yx’‘both’ and ‘xy’ are equivalent, ‘yx’ reverses order of labels.</td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.Highlighter.useAxesFormatters"id=link12onMouseOver="ShowTip(event, 'tt12', 'link12')"onMouseOut="HideTip('tt12')">useAxesForma
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.show"></a>show</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.show = $.jqplot.config.enablePlugins</td></tr></table></blockquote><p>true to show the highlight.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.markerRenderer"></a>markerRenderer</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>this.markerRenderer = new $.jqplot.MarkerRenderer(</td><tdclass=PParameternowrap>{shadow:false}</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Renderer used to draw the marker of the highlighted point. Renderer will assimilate attributes from the data point being highlighted, so no attributes need set on the renderer directly. Default is to turn off shadow drawing on the highlighted point.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.showMarker"></a>showMarker</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.showMarker = true</td></tr></table></blockquote><p>true to show the marker</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.lineWidthAdjust"></a>lineWidthAdjust</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.lineWidthAdjust = 2.5</td></tr></table></blockquote><p>Pixels to add to the lineWidth of the highlight.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.sizeAdjust"></a>sizeAdjust</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.sizeAdjust = 5</td></tr></table></blockquote><p>Pixels to add to the overall size of the highlight.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.showTooltip"></a>showTooltip</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.showTooltip = true</td></tr></table></blockquote><p>Show a tooltip with data point values.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.tooltipLocation"></a>tooltipLocation</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipLocation = 'nw'</td></tr></table></blockquote><p>Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.tooltipFadeSpeed"></a>tooltipFadeSpeed</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipFadeSpeed = "fast"</td></tr></table></blockquote><p>’slow’, ‘def’, ‘fast’, or number of milliseconds.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.tooltipOffset"></a>tooltipOffset</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipOffset = 2</td></tr></table></blockquote><p>Pixel offset of tooltip from the highlight.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.tooltipAxes"></a>tooltipAxes</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipAxes = 'both'</td></tr></table></blockquote><p>Which axes to display in tooltip, ‘x’, ‘y’ or ‘both’, ‘xy’ or ‘yx’‘both’ and ‘xy’ are equivalent, ‘yx’ reverses order of labels.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.useAxesFormatters"></a>useAxesFormatters</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.useAxesFormatters = true</td></tr></table></blockquote><p>Use the x and y axes formatters to format the text in the tooltip.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.tooltipFormatString"></a>tooltipFormatString</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipFormatString = '%.5P'</td></tr></table></blockquote><p>sprintf format string for the tooltip. Uses Ash Searle’s javascript sprintf implementation found here: <ahref="http://hexmen.com/blog/2007/03/printf-sprintf/"class=LURLtarget=_top>http://hexmen.com/blog/2007/03/printf-sprintf/</a> See <ahref="http://perldoc.perl.org/functions/sprintf.html"class=LURLtarget=_top>http://perldoc.perl.org/functions/sprintf.html</a> for reference. Additional “p” and “P” format specifiers added by Chris Leonello.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.formatString"></a>formatString</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.formatString = null</td></tr></table></blockquote><p>alternative to tooltipFormatString will format the whole tooltip text, populating with x, y values as indicated by tooltipAxes option. So, you could have a tooltip like: ‘Date: %s, number of cats: %d’ to format the whole tooltip at one go. If useAxesFormatters is true, values will be formatted according to Axes formatters and you can populate your tooltip string with %s placeholders.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.yvalues"></a>yvalues</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.yvalues = 1</td></tr></table></blockquote><p>Number of y values to expect in the data point array. Typically this is 1. Certain plots, like OHLC, will have more y values in each data point array.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.Highlighter.bringSeriesToFront"></a>bringSeriesToFront</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.bringSeriesToFront = false</td></tr></table></blockquote><p>This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series.</p></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.show = $.jqplot.config.enablePlugins</td></tr></table></blockquote>true to show the highlight.</div></div><divclass=CToolTipid="tt2"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>this.markerRenderer = new $.jqplot.MarkerRenderer(</td><tdclass=PParameternowrap>{shadow:false}</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Renderer used to draw the marker of the highlighted point. </div></div><divclass=CToolTipid="tt3"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.showMarker = true</td></tr></table></blockquote>true to show the marker</div></div><divclass=CToolTipid="tt4"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.lineWidthAdjust = 2.5</td></tr></table></blockquote>Pixels to add to the lineWidth of the highlight.</div></div><divclass=CToolTipid="tt5"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.sizeAdjust = 5</td></tr></table></blockquote>Pixels to add to the overall size of the highlight.</div></div><divclass=CToolTipid="tt6"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.showTooltip = true</td></tr></table></blockquote>Show a tooltip with data point values.</div></div><divclass=CToolTipid="tt7"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipLocation = 'nw'</td></tr></table></blockquote>Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’</div></div><divclass=CToolTipid="tt8"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.fadeTooltip = true</td></tr></table></blockquote>true = fade in/out tooltip, flase = show/hide tooltip</div></div><divclass=CToolTipid="tt9"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipFadeSpeed = "fast"</td></tr></table></blockquote>‘slow’, ‘def’, ‘fast’, or number of milliseconds.</div></div><divclass=CToolTipid="tt10"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipOffset = 2</td></tr></table></blockquote>Pixel offset of tooltip from the highlight.</div></div><divclass=CToolTipid="tt11"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipAxes = 'both'</td></tr></table></blockquote>Which axes to display in tooltip, ‘x’, ‘y’ or ‘both’, ‘xy’ or ‘yx’‘both’ and ‘xy’ are equivalent, ‘yx’ reverses order of labels.</div></div><divclass=CToolTipid="tt12"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.useAxesFormatters = true</td></tr></table></blockquote>Use the x and y axes formatters to format the text in the tooltip.</div></div><divclass=CToolTipid="tt13"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tooltipFormatString = '%.5P'</td></tr></table></blockquote>sprintf format string for the tooltip. </div></div><divclass=CToolTipid="tt14"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.formatString = null</td></tr></table></blockquote>alternative to tooltipFormatString will format the whole tooltip text, populating with x, y values as indicated by tooltipAxes option. </div></div><divclass=CToolTip
