<!-- 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.OHLCRenderer"></a>$.jqplot.<wbr>OHLCRenderer</div><divclass=CBody><p>jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.</p><p>To use this plugin, include the renderer js file in your source:</p><blockquote><pre><script type="text/javascript" src="plugins/jqplot.ohlcRenderer.js"></script></pre></blockquote><p>You will most likely want to use a date axis renderer for the x axis also, so include the date axis render js file also:</p><blockquote><pre><script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script></pre></blockquote><h4class=CHeading>Then you set the renderer in the series options on your plot</h4><blockquote><pre>series: [{renderer:$.jqplot.OHLCRenderer}]</pre></blockquote><p>For OHLC and candlestick charts, data should be specified like so:</p><blockquote><pre>dat = [['07/06/2009',138.7,139.68,135.18,135.4], ['06/29/2009',143.46,144.66,139.79,140.02], ...]</pre></blockquote><p>If the data array has only 4 values per point instead of 5, the renderer will create a Hi Low Close chart instead. In that case, data should be supplied like:</p><blockquote><pre>dat = [['07/06/2009',139.68,135.18,135.4], ['06/29/2009',144.66,139.79,140.02], ...]</pre></blockquote><p>To generate a candlestick chart instead of an OHLC chart, set the “candlestick” option to true:</p><blockquote><pre>series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],</pre></blockquote><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#$.jqplot.OHLCRenderer">$.jqplot.<wbr>OHLCRenderer</a></td><tdclass=SDescription>jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.</td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#$.jqplot.OHLCRenderer.Properties">Properties</a></td><tdclass=SDescription></td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.OHLCRenderer.candleStick"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">candleStick</a></td><tdclass=SDescription>true to render chart as candleStick. </td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.OHLCRenderer.tickLength"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">tickLength</a></td><tdclass=SDescription>length of the line in pixels indicating open and close price. </td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.OHLCRenderer.bodyWidth"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">bodyWidth</a></td><tdclass=SDescription>width of the candlestick body in pixels. </td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.OHLCRenderer.openColor"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">openColor</a></td><tdclass=SDescription>color of the open price tick mark. </td></tr><trclass="SProperty SIndent2 SMarked"><tdclass=SEntry><ahref="#$.jqplot.OHLCRenderer.closeColor"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">closeColor</a></td><tdclass=SDescription>color of the close price tick mark. </td></tr><trclass="SProperty SIndent2"><tdclass=SEntry><ahref="#$.jqplot.OHLCRenderer.wickColor"id=link6onMouseOver="ShowTip(event,'
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.candleStick"></a>candleStick</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.candleStick = false</td></tr></table></blockquote><p>true to render chart as candleStick. Must have an open price, cannot be a hlc chart.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.tickLength"></a>tickLength</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tickLength = 'auto'</td></tr></table></blockquote><p>length of the line in pixels indicating open and close price. Default will auto calculate based on plot width and number of points displayed.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.bodyWidth"></a>bodyWidth</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.bodyWidth = 'auto'</td></tr></table></blockquote><p>width of the candlestick body in pixels. Default will auto calculate based on plot width and number of candlesticks displayed.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.openColor"></a>openColor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.openColor = null</td></tr></table></blockquote><p>color of the open price tick mark. Default is series color.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.closeColor"></a>closeColor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.closeColor = null</td></tr></table></blockquote><p>color of the close price tick mark. Default is series color.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.wickColor"></a>wickColor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.wickColor = null</td></tr></table></blockquote><p>color of the hi-lo line thorugh the candlestick body. Default is the series color.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.fillUpBody"></a>fillUpBody</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.fillUpBody = false</td></tr></table></blockquote><p>true to render an “up” day (close price greater than open price) with a filled candlestick body.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.fillDownBody"></a>fillDownBody</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.fillDownBody = true</td></tr></table></blockquote><p>true to render a “down” day (close price lower than open price) with a filled candlestick body.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.upBodyColor"></a>upBodyColor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.upBodyColor = null</td></tr></table></blockquote><p>Color of candlestick body of an “up” day. Default is series color.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.downBodyColor"></a>downBodyColor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.downBodyColor = null</td></tr></table></blockquote><p>Color of candlestick body on a “down” day. Default is series color.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.hlc"></a>hlc</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.hlc = false</td></tr></table></blockquote><p>true if is a hi-low-close chart (no open price). This is determined automatically from the series data.</p></div></div></div>
<divclass="CProperty"><divclass=CTopic><h3class=CTitle><aname="$.jqplot.OHLCRenderer.lineWidth"></a>lineWidth</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.lineWidth = 1.5</td></tr></table></blockquote><p>Width of the hi-low line and open/close ticks. Must be set in the rendererOptions for the series.</p></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.candleStick = false</td></tr></table></blockquote>true to render chart as candleStick. </div></div><divclass=CToolTipid="tt2"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.tickLength = 'auto'</td></tr></table></blockquote>length of the line in pixels indicating open and close price. </div></div><divclass=CToolTipid="tt3"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.bodyWidth = 'auto'</td></tr></table></blockquote>width of the candlestick body in pixels. </div></div><divclass=CToolTipid="tt4"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.openColor = null</td></tr></table></blockquote>color of the open price tick mark. </div></div><divclass=CToolTipid="tt5"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.closeColor = null</td></tr></table></blockquote>color of the close price tick mark. </div></div><divclass=CToolTipid="tt6"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.wickColor = null</td></tr></table></blockquote>color of the hi-lo line thorugh the candlestick body. </div></div><divclass=CToolTipid="tt7"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.fillUpBody = false</td></tr></table></blockquote>true to render an “up” day (close price greater than open price) with a filled candlestick body.</div></div><divclass=CToolTipid="tt8"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.fillDownBody = true</td></tr></table></blockquote>true to render a “down” day (close price lower than open price) with a filled candlestick body.</div></div><divclass=CToolTipid="tt9"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.upBodyColor = null</td></tr></table></blockquote>Color of candlestick body of an “up” day. </div></div><divclass=CToolTipid="tt10"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.downBodyColor = null</td></tr></table></blockquote>Color of candlestick body on a “down” day. </div></div><divclass=CToolTipid="tt11"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.hlc = false</td></tr></table></blockquote>true if is a hi-low-close chart (no open price). </div></div><divclass=CToolTipid="tt12"><divclass=CProperty><blockquote><tableborder=0cellspacing=0cellpadding=0class=Prototype><tr><td>this.lineWidth = 1.5</td></tr></table></blockquote>Width of the hi-low line and open/close ticks. </div></div><!--END_ND_TOOLTIPS-->
