$.jqplot.OHLCRenderer

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.

> 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