$.jqplot.BlockRenderer

Plugin renderer to draw a x-y block chart. A Block chart has data points displayed as colored squares with a text label inside. Data must be supplied in the form:

>     [[x1, y1, "label 1", {css}], [x2, y2, "label 2", {css}], ...]

The label and css object are optional. If the label is ommitted, the box will collapse unless a css height and/or width is specified.

The css object is an object specifying css properties such as:

>     {background:'#4f98a5', border:'3px solid gray', padding:'1px'}

Note that css properties specified with the data point override defaults specified with the series.

Summary

$.jqplot.BlockRenderer | Plugin renderer to draw a x-y block chart.
Properties |
css | default css styles that will be applied to all data blocks.
escapeHtml | true to escape html in the box label.
insertBreaks | true to turn spaces in data block label into html breaks <br />.
varyBlockColors | true to vary the color of each block in this series according to the seriesColors array.
Methods |
moveBlock | Moves an individual block.

### Properties

### css

> this.css = {padding:'2px', border:'1px solid #999', textAlign:'center'}

default css styles that will be applied to all data blocks. these values will be overridden by css styles supplied with the individulal data points.

### escapeHtml

> this.escapeHtml = false

true to escape html in the box label.

### insertBreaks

> this.insertBreaks = true

true to turn spaces in data block label into html breaks <br />.

### varyBlockColors

> this.varyBlockColors = false

true to vary the color of each block in this series according to the seriesColors array. False to set each block to the color specified on this series. This has no effect if a css background color option is specified in the renderer css options.

### Methods

### moveBlock

> this.moveBlock = function ( | idx,
> | x,
> | y,
> | duration | )

Moves an individual block. More efficient than redrawing the whole series by calling plot.drawSeries(). Properties: idx - the 0 based index of the block or point in this series. x - the x coordinate in data units (value on x axis) to move the block to. y - the y coordinate in data units (value on the y axis) to move the block to. duration - optional parameter to create an animated movement. Can be a number (higher is slower animation) or ‘fast’, ‘normal’ or ‘slow’. If not provided, the element is moved without any animation.

> this.css = {padding:'2px', border:'1px solid #999', textAlign:'center'}

default css styles that will be applied to all data blocks.

> this.escapeHtml = false

true to escape html in the box label.

> this.insertBreaks = true

true to turn spaces in data block label into html breaks br /.

> this.varyBlockColors = false

true to vary the color of each block in this series according to the seriesColors array.

> this.moveBlock = function ( | idx,
> | x,
> | y,
> | duration | )

Moves an individual block.
Close