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.OHLCRendererjqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.
Properties
candleSticktrue to render chart as candleStick.
tickLengthlength of the line in pixels indicating open and close price.
bodyWidthwidth of the candlestick body in pixels.
openColorcolor of the open price tick mark.
closeColorcolor of the close price tick mark.
wickColorcolor of the hi-lo line thorugh the candlestick body.
fillUpBodytrue to render an “up” day (close price greater than open price) with a filled candlestick body.
fillDownBodytrue to render a “down” day (close price lower than open price) with a filled candlestick body.
upBodyColorColor of candlestick body of an “up” day.
downBodyColorColor of candlestick body on a “down” day.
hlctrue if is a hi-low-close chart (no open price).
lineWidthWidth 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.

this.candleStick = false
true to render chart as candleStick.
this.tickLength = 'auto'
length of the line in pixels indicating open and close price.
this.bodyWidth = 'auto'
width of the candlestick body in pixels.
this.openColor = null
color of the open price tick mark.
this.closeColor = null
color of the close price tick mark.
this.wickColor = null
color of the hi-lo line thorugh the candlestick body.
this.fillUpBody = false
true to render an “up” day (close price greater than open price) with a filled candlestick body.
this.fillDownBody = true
true to render a “down” day (close price lower than open price) with a filled candlestick body.
this.upBodyColor = null
Color of candlestick body of an “up” day.
this.downBodyColor = null
Color of candlestick body on a “down” day.
this.hlc = false
true if is a hi-low-close chart (no open price).
this.lineWidth = 1.5
Width of the hi-low line and open/close ticks.
Close