$.jqplot.OHLCRenderer

>Home >Examples >Docs >Download >Info >Donate

jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.

To use this plugin, include the renderer js file in your source:

<script type="text/javascript" src="plugins/jqplot.ohlcRenderer.js"></script>

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:

<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>

Then you set the renderer in the series options on your plot

series: [{renderer:$.jqplot.OHLCRenderer}]

For OHLC and candlestick charts, data should be specified like so:

dat = [['07/06/2009',138.7,139.68,135.18,135.4], ['06/29/2009',143.46,144.66,139.79,140.02], ...]

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:

dat = [['07/06/2009',139.68,135.18,135.4], ['06/29/2009',144.66,139.79,140.02], ...]

To generate a candlestick chart instead of an OHLC chart, set the “candlestick” option to true:

series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],

Summary

$.jqplot.OHLCRenderer	jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.
Properties
candleStick	true to render chart as candleStick.
tickLength	length of the line in pixels indicating open and close price.
bodyWidth	width of the candlestick body in pixels.
openColor	color of the open price tick mark.
closeColor	color of the close price tick mark.
wickColor	color of the hi-lo line thorugh the candlestick body.
fillUpBody	true to render an “up” day (close price greater than open price) with a filled candlestick body.
fillDownBody	true to render a “down” day (close price lower than open price) with a filled candlestick body.
upBodyColor	Color of candlestick body of an “up” day.
downBodyColor	Color of candlestick body on a “down” day.
hlc	true if is a hi-low-close chart (no open price).
lineWidth	Width of the hi-low line and open/close ticks.

Properties

candleStick

this.candleStick = false

true to render chart as candleStick. Must have an open price, cannot be a hlc chart.

tickLength

this.tickLength = 'auto'

length of the line in pixels indicating open and close price. Default will auto calculate based on plot width and number of points displayed.

bodyWidth

this.bodyWidth = 'auto'

width of the candlestick body in pixels. Default will auto calculate based on plot width and number of candlesticks displayed.

openColor

this.openColor = null

color of the open price tick mark. Default is series color.

closeColor

this.closeColor = null

color of the close price tick mark. Default is series color.

wickColor

this.wickColor = null

color of the hi-lo line thorugh the candlestick body. Default is the series color.

fillUpBody

this.fillUpBody = false

true to render an “up” day (close price greater than open price) with a filled candlestick body.

fillDownBody

this.fillDownBody = true

true to render a “down” day (close price lower than open price) with a filled candlestick body.

upBodyColor

this.upBodyColor = null

Color of candlestick body of an “up” day. Default is series color.

downBodyColor

this.downBodyColor = null

Color of candlestick body on a “down” day. Default is series color.

hlc

this.hlc = false

true if is a hi-low-close chart (no open price). This is determined automatically from the series data.

lineWidth

this.lineWidth = 1.5

Width of the hi-low line and open/close ticks. Must be set in the rendererOptions for the series.