Click here to Skip to main content
15,886,110 members
Articles / Web Development / HTML

Dynamic JQPlot

Rate me:
Please Sign up or sign in to vote.
5.00/5 (5 votes)
12 Feb 2013CPOL8 min read 40.4K   1K   9  
How to dynamically build a JQPlot graph through the code behind.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>$.jqplot.Highlighter</title><link rel="stylesheet" type="text/css" href="../../styles/main.css"><script language=JavaScript src="../../javascript/main.js"></script><script language=JavaScript src="../../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad()"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.4 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CClass"><div class=CTopic id=MainTopic><div class="CTitle logo"><div class="nav"><a class="nav" href="../../../index.php"><span>&gt;</span>Home</a><a class="nav"  href="../../../tests/"><span>&gt;</span>Examples</a><a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a><a class="nav"  href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>&gt;</span>Download</a><a class="nav" href="../../../info.php"><span>&gt;</span>Info</a><a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a></div><a name="$.jqplot.Highlighter"></a>$.jqplot.<wbr>Highlighter</div><div class=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>&lt;script type=&quot;text/javascript&quot; src=&quot;plugins/jqplot.highlighter.js&quot;&gt;&lt;/script&gt;</pre></blockquote><p>A tooltip providing information about the data point is enabled by default.&nbsp; To disable the tooltip, set &ldquo;showTooltip&rdquo; to false.</p><p>You can control what data is displayed in the tooltip with various options.&nbsp;  The &ldquo;tooltipAxes&rdquo; 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.&nbsp; To display the additional values in the tooltip, set the &ldquo;yvalues&rdquo; 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.&nbsp;  A custom format code can be supplied with the tooltipFormatString option.&nbsp;  This will apply to all values in the tooltip.</p><p>For more complete control, the &ldquo;formatString&rdquo; option can be set.&nbsp;  This Allows conplete control over tooltip formatting.&nbsp;  Values are passed to the format string in an order determined by the &ldquo;tooltipAxes&rdquo; and &ldquo;yvalues&rdquo; options.&nbsp;  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: {
    tooltipAxes: 'y',
    yvalues: 3,
    formatString:'&lt;table class=&quot;jqplot-highlighter&quot;&gt;
        &lt;tr&gt;&lt;td&gt;hi:&lt;/td&gt;&lt;td&gt;%s&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;low:&lt;/td&gt;&lt;td&gt;%s&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;close:&lt;/td&gt;&lt;td&gt;%s&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'
}</pre></blockquote><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#$.jqplot.Highlighter" >$.jqplot.<wbr>Highlighter</a></td><td class=SDescription>Plugin which will highlight data points when they are moused over.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#$.jqplot.Highlighter.Properties" >Properties</a></td><td class=SDescription></td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.Highlighter.show" id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">show</a></td><td class=SDescription>true to show the highlight.</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.Highlighter.markerRenderer" id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">markerRenderer</a></td><td class=SDescription>Renderer used to draw the marker of the highlighted point. </td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.Highlighter.showMarker" id=link3 onMouseOver="ShowTip(event, 'tt3', 'link3')" onMouseOut="HideTip('tt3')">showMarker</a></td><td class=SDescription>true to show the marker</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.Highlighter.lineWidthAdjust" id=link4 onMouseOver="ShowTip(event, 'tt4', 'link4')" onMouseOut="HideTip('tt4')">lineWidthAdjust</a></td><td class=SDescription>Pixels to add to the lineWidth of the highlight.</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.Highlighter.sizeAdjust" id=link5 onMouseOver="ShowTip(event, 'tt5', 'link5')" onMouseOut="HideTip('tt5')">sizeAdjust</a></td><td class=SDescription>Pixels to add to the overall size of the highlight.</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.Highlighter.showTooltip" id=link6 onMouseOver="ShowTip(event, 'tt6', 'link6')" onMouseOut="HideTip('tt6')">showTooltip</a></td><td class=SDescription>Show a tooltip with data point values.</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.Highlighter.tooltipLocation" id=link7 onMouseOver="ShowTip(event, 'tt7', 'link7')" onMouseOut="HideTip('tt7')">tooltipLocation</a></td><td class=SDescription>Where to position tooltip, &lsquo;n&rsquo;, &lsquo;ne&rsquo;, &lsquo;e&rsquo;, &lsquo;se&rsquo;, &lsquo;s&rsquo;, &lsquo;sw&rsquo;, &lsquo;w&rsquo;, &lsquo;nw&rsquo;</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.Highlighter.fadeTooltip" id=link8 onMouseOver="ShowTip(event, 'tt8', 'link8')" onMouseOut="HideTip('tt8')">fadeTooltip</a></td><td class=SDescription>true = fade in/out tooltip, flase = show/hide tooltip</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.Highlighter.tooltipFadeSpeed" id=link9 onMouseOver="ShowTip(event, 'tt9', 'link9')" onMouseOut="HideTip('tt9')">tooltipFadeSpeed</a></td><td class=SDescription>&lsquo;slow&rsquo;, &lsquo;def&rsquo;, &lsquo;fast&rsquo;, or number of milliseconds.</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.Highlighter.tooltipOffset" id=link10 onMouseOver="ShowTip(event, 'tt10', 'link10')" onMouseOut="HideTip('tt10')">tooltipOffset</a></td><td class=SDescription>Pixel offset of tooltip from the highlight.</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.Highlighter.tooltipAxes" id=link11 onMouseOver="ShowTip(event, 'tt11', 'link11')" onMouseOut="HideTip('tt11')">tooltipAxes</a></td><td class=SDescription>Which axes to display in tooltip, &lsquo;x&rsquo;, &lsquo;y&rsquo; or &lsquo;both&rsquo;, &lsquo;xy&rsquo; or &lsquo;yx&rsquo; &lsquo;both&rsquo; and &lsquo;xy&rsquo; are equivalent, &lsquo;yx&rsquo; reverses order of labels.</td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.Highlighter.useAxesFormatters" id=link12 onMouseOver="ShowTip(event, 'tt12', 'link12')" onMouseOut="HideTip('tt12')">useAxesFormatters</a></td><td class=SDescription>Use the x and y axes formatters to format the text in the tooltip.</td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.Highlighter.tooltipFormatString" id=link13 onMouseOver="ShowTip(event, 'tt13', 'link13')" onMouseOut="HideTip('tt13')">tooltipFormatString</a></td><td class=SDescription>sprintf format string for the tooltip. </td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.Highlighter.formatString" id=link14 onMouseOver="ShowTip(event, 'tt14', 'link14')" onMouseOut="HideTip('tt14')">formatString</a></td><td class=SDescription>alternative to tooltipFormatString will format the whole tooltip text, populating with x, y values as indicated by tooltipAxes option. </td></tr><tr class="SProperty SIndent2 SMarked"><td class=SEntry><a href="#$.jqplot.Highlighter.yvalues" id=link15 onMouseOver="ShowTip(event, 'tt15', 'link15')" onMouseOut="HideTip('tt15')">yvalues</a></td><td class=SDescription>Number of y values to expect in the data point array. </td></tr><tr class="SProperty SIndent2"><td class=SEntry><a href="#$.jqplot.Highlighter.bringSeriesToFront" id=link16 onMouseOver="ShowTip(event, 'tt16', 'link16')" onMouseOut="HideTip('tt16')">bringSeriesToFront</a></td><td class=SDescription>This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.Properties"></a>Properties</h3></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.show"></a>show</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.show = $.jqplot.config.enablePlugins</td></tr></table></blockquote><p>true to show the highlight.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.markerRenderer"></a>markerRenderer</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>this.markerRenderer = new $.jqplot.MarkerRenderer(</td><td class=PParameter nowrap>{shadow:false}</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Renderer used to draw the marker of the highlighted point.&nbsp; Renderer will assimilate attributes from the data point being highlighted, so no attributes need set on the renderer directly.&nbsp; Default is to turn off shadow drawing on the highlighted point.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.showMarker"></a>showMarker</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.showMarker = true</td></tr></table></blockquote><p>true to show the marker</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.lineWidthAdjust"></a>lineWidthAdjust</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=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>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.sizeAdjust"></a>sizeAdjust</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=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>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.showTooltip"></a>showTooltip</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.showTooltip = true</td></tr></table></blockquote><p>Show a tooltip with data point values.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.tooltipLocation"></a>tooltipLocation</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipLocation = 'nw'</td></tr></table></blockquote><p>Where to position tooltip, &lsquo;n&rsquo;, &lsquo;ne&rsquo;, &lsquo;e&rsquo;, &lsquo;se&rsquo;, &lsquo;s&rsquo;, &lsquo;sw&rsquo;, &lsquo;w&rsquo;, &lsquo;nw&rsquo;</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.fadeTooltip"></a>fadeTooltip</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.fadeTooltip = true</td></tr></table></blockquote><p>true = fade in/out tooltip, flase = show/hide tooltip</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.tooltipFadeSpeed"></a>tooltipFadeSpeed</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipFadeSpeed = &quot;fast&quot;</td></tr></table></blockquote><p>&rsquo;slow&rsquo;, &lsquo;def&rsquo;, &lsquo;fast&rsquo;, or number of milliseconds.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.tooltipOffset"></a>tooltipOffset</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipOffset = 2</td></tr></table></blockquote><p>Pixel offset of tooltip from the highlight.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.tooltipAxes"></a>tooltipAxes</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipAxes = 'both'</td></tr></table></blockquote><p>Which axes to display in tooltip, &lsquo;x&rsquo;, &lsquo;y&rsquo; or &lsquo;both&rsquo;, &lsquo;xy&rsquo; or &lsquo;yx&rsquo; &lsquo;both&rsquo; and &lsquo;xy&rsquo; are equivalent, &lsquo;yx&rsquo; reverses order of labels.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.useAxesFormatters"></a>useAxesFormatters</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=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>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.tooltipFormatString"></a>tooltipFormatString</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipFormatString = '%.5P'</td></tr></table></blockquote><p>sprintf format string for the tooltip.&nbsp; Uses Ash Searle&rsquo;s javascript sprintf implementation found here: <a href="http://hexmen.com/blog/2007/03/printf-sprintf/" class=LURL target=_top>http://hexmen.com/blog/2007/03/printf-sprintf/</a> See <a href="http://perldoc.perl.org/functions/sprintf.html" class=LURL target=_top>http://perldoc.perl.org/functions/sprintf.html</a> for reference.&nbsp; Additional &ldquo;p&rdquo; and &ldquo;P&rdquo; format specifiers added by Chris Leonello.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.formatString"></a>formatString</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=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.&nbsp;  So, you could have a tooltip like: &lsquo;Date: %s, number of cats: %d&rsquo; to format the whole tooltip at one go.&nbsp; 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>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.yvalues"></a>yvalues</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.yvalues = 1</td></tr></table></blockquote><p>Number of y values to expect in the data point array.&nbsp; Typically this is 1.&nbsp;  Certain plots, like OHLC, will have more y values in each data point array.</p></div></div></div>

<div class="CProperty"><div class=CTopic><h3 class=CTitle><a name="$.jqplot.Highlighter.bringSeriesToFront"></a>bringSeriesToFront</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class=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>

</div><!--Content-->


<div id=Footer>Copyright &copy; 2009 - 2010 Chris Leonello&nbsp; &middot;&nbsp; Updated November 9th, 2011&nbsp; &middot;&nbsp; <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Usage and Options</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="../usage-txt.html">Usage</a></div></div><div class=MEntry><div class=MFile><a href="../jqPlotOptions-txt.html">jqPlot Options</a></div></div><div class=MEntry><div class=MFile><a href="../optionsTutorial-txt.html">Options Tutorial</a></div></div><div class=MEntry><div class=MFile><a href="../jqPlotCssStyling-txt.html">jqPlot CSS Customization</a></div></div><div class=MEntry><div class=MFile><a href="../changes-txt.html">Change Log</a></div></div><div class=MEntry><div class=MLink><a href="../../tests/">Examples</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent4')">API Documentation</a><div class=MGroupContent id=MGroupContent4><div class=MEntry><div class=MFile><a href="../jqplot-core-js.html">jqPlot Charts</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Core Renderers</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="../jqplot-axisTickRenderer-js.html">Axis Tick Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-canvasGridRenderer-js.html">Canvas Grid Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-divTitleRenderer-js.html">Div Title Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-linearAxisRenderer-js.html">Linear Axis Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-markerRenderer-js.html">Marker Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-shapeRenderer-js.html">Shape Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-shadowRenderer-js.html">Shadow Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-lineRenderer-js.html">Line Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-axisLabelRenderer-js.html">Axis Label Renderer</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-themeEngine-js.html">Theme Engine</a></div></div><div class=MEntry><div class=MFile><a href="../jqplot-toImage-js.html">fn</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Plugins</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="jqplot-barRenderer-js.html">jqplot.<wbr>BarRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-BezierCurveRenderer-js.html">jqplot.<wbr>BezierCurveRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-blockRenderer-js.html">jqplot.<wbr>BlockRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-bubbleRenderer-js.html">jqplot.<wbr>BubbleRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasAxisLabelRenderer-js.html">jqplot.<wbr>CanvasAxisLabelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasAxisTickRenderer-js.html">jqplot.<wbr>CanvasAxisTickRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pyramidGridRenderer-js.html">jqplot.<wbr>CanvasGridRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasOverlay-js.html">jqplot.<wbr>CanvasOverlay</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-categoryAxisRenderer-js.html">jqplot.<wbr>CategoryAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-ciParser-js.html">jqplot.<wbr>ciParser</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-cursor-js.html">jqplot.<wbr>Cursor</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-dateAxisRenderer-js.html">jqplot.<wbr>DateAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-donutRenderer-js.html">jqplot.<wbr>DonutRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-dragable-js.html">jqplot.<wbr>Dragable</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-enhancedLegendRenderer-js.html">jqplot.<wbr>enhancedLegendRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-funnelRenderer-js.html">jqplot.<wbr>FunnelRenderer</a></div></div><div class=MEntry><div class=MFile id=MSelected>jqplot.<wbr>Highlighter</div></div><div class=MEntry><div class=MFile><a href="jqplot-logAxisRenderer-js.html">jqplot.<wbr>LogAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-mekkoAxisRenderer-js.html">jqplot.<wbr>MekkoAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-mekkoRenderer-js.html">jqplot.<wbr>MekkoRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-meterGaugeRenderer-js.html">jqplot.<wbr>MeterGaugeRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-ohlcRenderer-js.html">jqplot.<wbr>OHLCRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pieRenderer-js.html">jqplot.<wbr>PieRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pointLabels-js.html">jqplot.<wbr>PointLabels</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pyramidAxisRenderer-js.html">jqplot.<wbr>pyramidAxisRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-pyramidRenderer-js.html">jqplot.<wbr>pyramidRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-trendline-js.html">jqplot.<wbr>Trendline</a></div></div></div></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../gpl-2-0-txt.html">GPL License</a></div></div><div class=MEntry><div class=MFile><a href="../MIT-LICENSE-txt.html">MIT License</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent5')">Index</a><div class=MGroupContent id=MGroupContent5><div class=MEntry><div class=MIndex><a href="../../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Properties.html">Properties</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Hooks.html">Hooks</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Files.html">Files</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Hooks">Hooks</option><option value="Properties">Properties</option></select></div><script language=JavaScript><!--
HideAllBut([3, 4], 6);// --></script></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.show = $.jqplot.config.enablePlugins</td></tr></table></blockquote>true to show the highlight.</div></div><div class=CToolTip id="tt2"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>this.markerRenderer = new $.jqplot.MarkerRenderer(</td><td class=PParameter nowrap>{shadow:false}</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Renderer used to draw the marker of the highlighted point. </div></div><div class=CToolTip id="tt3"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.showMarker = true</td></tr></table></blockquote>true to show the marker</div></div><div class=CToolTip id="tt4"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.lineWidthAdjust = 2.5</td></tr></table></blockquote>Pixels to add to the lineWidth of the highlight.</div></div><div class=CToolTip id="tt5"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.sizeAdjust = 5</td></tr></table></blockquote>Pixels to add to the overall size of the highlight.</div></div><div class=CToolTip id="tt6"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.showTooltip = true</td></tr></table></blockquote>Show a tooltip with data point values.</div></div><div class=CToolTip id="tt7"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipLocation = 'nw'</td></tr></table></blockquote>Where to position tooltip, &lsquo;n&rsquo;, &lsquo;ne&rsquo;, &lsquo;e&rsquo;, &lsquo;se&rsquo;, &lsquo;s&rsquo;, &lsquo;sw&rsquo;, &lsquo;w&rsquo;, &lsquo;nw&rsquo;</div></div><div class=CToolTip id="tt8"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.fadeTooltip = true</td></tr></table></blockquote>true = fade in/out tooltip, flase = show/hide tooltip</div></div><div class=CToolTip id="tt9"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipFadeSpeed = &quot;fast&quot;</td></tr></table></blockquote>&lsquo;slow&rsquo;, &lsquo;def&rsquo;, &lsquo;fast&rsquo;, or number of milliseconds.</div></div><div class=CToolTip id="tt10"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipOffset = 2</td></tr></table></blockquote>Pixel offset of tooltip from the highlight.</div></div><div class=CToolTip id="tt11"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipAxes = 'both'</td></tr></table></blockquote>Which axes to display in tooltip, &lsquo;x&rsquo;, &lsquo;y&rsquo; or &lsquo;both&rsquo;, &lsquo;xy&rsquo; or &lsquo;yx&rsquo; &lsquo;both&rsquo; and &lsquo;xy&rsquo; are equivalent, &lsquo;yx&rsquo; reverses order of labels.</div></div><div class=CToolTip id="tt12"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=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><div class=CToolTip id="tt13"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.tooltipFormatString = '%.5P'</td></tr></table></blockquote>sprintf format string for the tooltip. </div></div><div class=CToolTip id="tt14"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=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><div class=CToolTip id="tt15"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.yvalues = 1</td></tr></table></blockquote>Number of y values to expect in the data point array. </div></div><div class=CToolTip id="tt16"><div class=CProperty><blockquote><table border=0 cellspacing=0 cellpadding=0 class=Prototype><tr><td>this.bringSeriesToFront = false</td></tr></table></blockquote>This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series.</div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
V.
Software Developer
Belgium Belgium
Graduate Computer Sciences.
My interests go out to music and movies.
Author of the infamous MQOTD
Creator of this video

Comments and Discussions