$.jqplot.BlockRenderer

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

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.