Pure JavaScript plotting plugin for jQuery.
jqPlot Charts | Pure JavaScript plotting plugin for jQuery. |
Version | version: 1.0.3 revision: 1117 |
Copyright & License | Copyright © 2009-2012 Chris Leonello jqPlot is currently available for use in all personal or commercial projects under both the MIT and GPL version 2.0 licenses. |
Introduction | jqPlot requires jQuery (1.4+ required for certain features). |
Usage | See jqPlot Usage |
Available Options | See jqPlot Options for a list of options available thorugh the options object (not complete yet!) |
Options Usage | See Options Tutorial |
Changes | See Change Log |
$.jqplot | jQuery function called by the user to create a plot. |
Hooks | |
jqPlot Pugin Hooks | |
Axis | An individual axis object. |
Properties | Axes options are specified within an axes object at the top level of the plot options like so: |
show | Wether to display the axis on the graph. |
tickRenderer | A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. |
tickOptions | Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options. |
labelRenderer | A class of a rendering engine for creating an axis label. |
labelOptions | Options passed to the label renderer. |
label | Label for the axis |
showLabel | true to show the axis label. |
min | minimum value of the axis (in data units, not pixels). |
max | maximum value of the axis (in data units, not pixels). |
autoscale | DEPRECATED the default scaling algorithm produces superior results. |
pad | Padding to extend the range above and below the data bounds. |
padMax | Padding to extend the range above data bounds. |
padMin | Padding to extend the range below data bounds. |
ticks | 1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis. |
numberTicks | Desired number of ticks. |
tickInterval | number of units between ticks. |
renderer | A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element. |
rendererOptions | renderer specific options. |
showTicks | Wether to show the ticks (both marks and labels) or not. |
showTickMarks | Wether to show the tick marks (line crossing grid) or not. |
showMinorTicks | Wether or not to show minor ticks. |
drawMajorGridlines | True to draw gridlines for major axis ticks. |
drawMinorGridlines | True to draw gridlines for minor ticks. |
drawMajorTickMarks | True to draw tick marks for major axis ticks. |
drawMinorTickMarks | True to draw tick marks for minor ticks. |
useSeriesColor | Use the color of the first series associated with this axis for the tick marks and line bordering this axis. |
borderWidth | width of line stroked at the border of the axis. |
borderColor | color of the border adjacent to the axis. |
scaleToHiddenSeries | True to include hidden series when computing axes bounds and scaling. |
syncTicks | true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up. |
tickSpacing | Approximate pixel spacing between ticks on graph. |
Legend | Legend object. |
Properties | |
show | Wether to display the legend on the graph. |
location | Placement of the legend. |
labels | Array of labels to use. |
showLabels | true to show the label text on the legend. |
showSwatch | true to show the color swatches on the legend. |
placement | “insideGrid” places legend inside the grid area of the plot. |
xoffset | DEPRECATED. |
yoffset | DEPRECATED. |
border | css spec for the border around the legend box. |
background | css spec for the background of the legend box. |
textColor | css color spec for the legend text. |
fontFamily | css font-family spec for the legend text. |
fontSize | css font-size spec for the legend text. |
rowSpacing | css padding-top spec for the rows in the legend. |
rendererOptions | renderer specific options passed to the renderer. |
predraw | Wether to draw the legend before the series or not. |
marginTop | CSS margin for the legend DOM element. |
marginRight | CSS margin for the legend DOM element. |
marginBottom | CSS margin for the legend DOM element. |
marginLeft | CSS margin for the legend DOM element. |
escapeHtml | True to escape special characters with their html entity equivalents in legend text. |
Title | Plot Title object. |
Properties | |
text | text of the title; |
show | wether or not to show the title |
fontFamily | css font-family spec for the text. |
fontSize | css font-size spec for the text. |
textAlign | css text-align spec for the text. |
textColor | css color spec for the text. |
renderer | A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer. |
rendererOptions | renderer specific options passed to the renderer. |
escapeHtml | True to escape special characters with their html entity equivalents in title text. |
Series | An individual data series object. |
Properties | Properties will be assigned from a series array at the top level of the options. |
show | wether or not to draw the series. |
xaxis | which x axis to use with this series, either ‘xaxis’ or ‘x2axis’. |
yaxis | which y axis to use with this series, either ‘yaxis’ or ‘y2axis’. |
renderer | A class of a renderer which will draw the series, see $.jqplot.LineRenderer. |
rendererOptions | Options to pass on to the renderer. |
label | Line label to use in the legend. |
showLabel | true to show label for this series in the legend. |
color | css color spec for the series |
negativeColor | css color spec used for filled (area) plots that are filled to zero and the “useNegativeColors” option is true. |
lineWidth | width of the line in pixels. |
lineJoin | Canvas lineJoin style between segments of series. |
lineCap | Canvas lineCap style at ends of line. |
linePattern | line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’ |
shadowAngle | Shadow angle in degrees |
shadowOffset | Shadow offset from line in pixels |
shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
shadowAlpha | Alpha channel transparency of shadow. |
breakOnNull | Wether line segments should be be broken at null value. |
markerRenderer | A class of a renderer which will draw marker (e.g. |
markerOptions | renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer. |
showLine | wether to actually draw the line or not. |
showMarker | wether or not to show the markers at the data points. |
index | 0 based index of this series in the plot series array. |
fill | true or false, wether to fill under lines or in bars. |
fillColor | CSS color spec to use for fill under line. |
fillAlpha | Alpha transparency to apply to the fill under the line. |
fillAndStroke | If true will stroke the line (with color this.color) as well as fill under it. |
disableStack | true to not stack this series with other series in the plot. |
neighborThreshold | how close or far (in pixels) the cursor must be from a point marker to detect the point. |
fillToZero | true will force bar and filled series to fill toward zero on the fill Axis. |
fillToValue | fill a filled series to this value on the fill axis. |
fillAxis | Either ‘x’ or ‘y’. |
useNegativeColors | true to color negative values differently in filled and bar charts. |
Grid | Object representing the grid on which the plot is drawn. |
Properties | |
drawGridlines | wether to draw the gridlines on the plot. |
gridLineColor | color of the grid lines. |
gridLineWidth | width of the grid lines. |
background | css spec for the background color. |
borderColor | css spec for the color of the grid border. |
borderWidth | width of the border in pixels. |
drawBorder | True to draw border around grid. |
shadow | wether to show a shadow behind the grid. |
shadowAngle | shadow angle in degrees |
shadowOffset | Offset of each shadow stroke from the border in pixels |
shadowWidth | width of the stoke for the shadow |
shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
shadowColor | an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form |
shadowAlpha | Alpha channel transparency of shadow. |
renderer | Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer. |
rendererOptions | Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer. |
jqPlot | Plot object returned by call to $.jqplot. |
Properties | These properties are specified at the top of the options object like so: |
animate | True to animate the series on initial plot draw (renderer dependent). |
animateReplot | True to animate series after a call to the replot() method. |
axes | up to 4 axes are supported, each with it’s own options, See Axis for axis specific options. |
data | user’s data. |
dataRenderer | A callable which can be used to preprocess data passed into the plot. |
dataRendererOptions | Options that will be passed to the dataRenderer. |
axesDefaults | default options that will be applied to all axes. |
seriesDefaults | default options that will be applied to all series. |
defaultAxisStart | 1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot. |
fillBetween | Fill between 2 line series in a plot. |
fontSize | css spec for the font-size attribute. |
grid | See Grid for grid specific options. |
legend | see <$.jqplot.TableLegendRenderer> |
noDataIndicator | Options to set up a mock plot with a data loading indicator if no data is specified. |
series | Array of series object options. |
seriesColors | Ann array of CSS color specifications that will be applied, in order, to the series in the plot. |
sortData | false to not sort the data passed in by the user. |
stackSeries | true or false, creates a stack or “mountain” plot. |
title | Title object. |
methods | |
init | sets the plot target, checks data and applies user options to plot. |
resetAxesScale | Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided. |
reInitialize | reinitialize plot for replotting. |
quickInit | Quick reinitialization plot for replotting. |
destroy | Releases all resources occupied by the plot |
replot | Does a reinitialization of the plot followed by a redraw. |
redraw | Empties the plot target div and redraws the plot. |
draw | Draws all elements of the plot into the container. |
drawSeries | Redraws all or just one series on the plot. |
moveSeriesToFront | This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases. |
moveSeriesToBack | This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases. |
restorePreviousSeriesOrder | This method requires jQuery 1.4+ Restore the series canvas order to its previous state. |
restoreOriginalSeriesOrder | This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created. |
Copyright © 2009-2012 Chris Leonello jqPlot is currently available for use in all personal or commercial projects under both the MIT and GPL version 2.0 licenses. This means that you can choose the license that best suits your project and use it accordingly.
See GPL Version 2 and MIT License contained within this distribution for further information.
The author would appreciate an email letting him know of any substantial use of jqPlot. You can reach the author at: chris at jqplot dot com or see http://www.jqplot.com/info.php. This is, of course, not required.
If you are feeling kind and generous, consider supporting the project by making a donation at: http://www.jqplot.com/donate.php.
version 2007.04.27 author Ash Searle http://hexmen.com/blog/2007/03/printf-sprintf/ http://hexmen.com/js/sprintf.js The author (Ash Searle) has placed this code in the public domain: “This code is unrestricted: you are free to use it however you like.”
jqPlot requires jQuery (1.4+ required for certain features). jQuery 1.4.2 is included in the distribution. To use jqPlot include jQuery, the jqPlot jQuery plugin, the jqPlot css file and optionally the excanvas script for IE support in your web page:
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
jqPlot can be customized by overriding the defaults of any of the objects which make up the plot. The general usage of jqplot is:
chart = $.jqplot('targetElemId', [dataArray,...], {optionsObject});
The options available to jqplot are detailed in jqPlot Options in the jqPlotOptions.txt file.
An actual call to $.jqplot() may look like the examples below:
chart = $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
or
dataArray = [34,12,43,55,77]; chart = $.jqplot('targetElemId', [dataArray, ...], {title:'My Plot', axes:{yaxis:{min:20, max:100}}});
For more inforrmation, see jqPlot Usage.
See jqPlot Usage
See jqPlot Options for a list of options available thorugh the options object (not complete yet!)
See Options Tutorial
See Change Log
jQuery function called by the user to create a plot.
target | ID of target element to render the plot into. |
data | an array of data series. |
options | user defined options object. See the individual classes for available options. |
config | object to hold configuration information for jqPlot plot object. |
enablePlugins | False to disable plugins by default. Plugins must then be explicitly enabled in the individual plot options. Default: false. This property sets the “show” property of certain plugins to true or false. Only plugins that can be immediately active upon loading are affected. This includes non-renderer plugins like cursor, dragable, highlighter, and trendline. |
defaultHeight | Default height for plots where no css height specification exists. This is a jqplot wide default. |
defaultWidth | Default height for plots where no css height specification exists. This is a jqplot wide default. |
An individual axis object. Cannot be instantiated directly, but created by the Plot oject. Axis properties can be set or overriden by the options passed in from the user.
Properties | Axes options are specified within an axes object at the top level of the plot options like so: |
show | Wether to display the axis on the graph. |
tickRenderer | A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. |
tickOptions | Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options. |
labelRenderer | A class of a rendering engine for creating an axis label. |
labelOptions | Options passed to the label renderer. |
label | Label for the axis |
showLabel | true to show the axis label. |
min | minimum value of the axis (in data units, not pixels). |
max | maximum value of the axis (in data units, not pixels). |
autoscale | DEPRECATED the default scaling algorithm produces superior results. |
pad | Padding to extend the range above and below the data bounds. |
padMax | Padding to extend the range above data bounds. |
padMin | Padding to extend the range below data bounds. |
ticks | 1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis. |
numberTicks | Desired number of ticks. |
tickInterval | number of units between ticks. |
renderer | A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element. |
rendererOptions | renderer specific options. |
showTicks | Wether to show the ticks (both marks and labels) or not. |
showTickMarks | Wether to show the tick marks (line crossing grid) or not. |
showMinorTicks | Wether or not to show minor ticks. |
drawMajorGridlines | True to draw gridlines for major axis ticks. |
drawMinorGridlines | True to draw gridlines for minor ticks. |
drawMajorTickMarks | True to draw tick marks for major axis ticks. |
drawMinorTickMarks | True to draw tick marks for minor ticks. |
useSeriesColor | Use the color of the first series associated with this axis for the tick marks and line bordering this axis. |
borderWidth | width of line stroked at the border of the axis. |
borderColor | color of the border adjacent to the axis. |
scaleToHiddenSeries | True to include hidden series when computing axes bounds and scaling. |
syncTicks | true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up. |
tickSpacing | Approximate pixel spacing between ticks on graph. |
Axes options are specified within an axes object at the top level of the plot options like so:
{ axes: { xaxis: {min: 5}, yaxis: {min: 2, max: 8, numberTicks:4}, x2axis: {pad: 1.5}, y2axis: {ticks:[22, 44, 66, 88]} } }
There are 2 x axes, ‘xaxis’ and ‘x2axis’, and 9 yaxes, ‘yaxis’, ‘y2axis’. ‘y3axis’, ... Any or all of which may be specified.
this.tickRenderer = $.jqplot.AxisTickRenderer
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
this.tickOptions = {}
Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
this.rendererOptions = {}
renderer specific options. See $.jqplot.LinearAxisRenderer for options.
Legend object. Cannot be instantiated directly, but created by the Plot oject. Legend properties can be set or overriden by the options passed in from the user.
Properties | |
show | Wether to display the legend on the graph. |
location | Placement of the legend. |
labels | Array of labels to use. |
showLabels | true to show the label text on the legend. |
showSwatch | true to show the color swatches on the legend. |
placement | “insideGrid” places legend inside the grid area of the plot. |
xoffset | DEPRECATED. |
yoffset | DEPRECATED. |
border | css spec for the border around the legend box. |
background | css spec for the background of the legend box. |
textColor | css color spec for the legend text. |
fontFamily | css font-family spec for the legend text. |
fontSize | css font-size spec for the legend text. |
rowSpacing | css padding-top spec for the rows in the legend. |
rendererOptions | renderer specific options passed to the renderer. |
predraw | Wether to draw the legend before the series or not. |
marginTop | CSS margin for the legend DOM element. |
marginRight | CSS margin for the legend DOM element. |
marginBottom | CSS margin for the legend DOM element. |
marginLeft | CSS margin for the legend DOM element. |
escapeHtml | True to escape special characters with their html entity equivalents in legend text. |
this.placement = "insideGrid"
”insideGrid” places legend inside the grid area of the plot. “outsideGrid” places the legend outside the grid but inside the plot container, shrinking the grid to accomodate the legend. “inside” synonym for “insideGrid”, “outside” places the legend ouside the grid area, but does not shrink the grid which can cause the legend to overflow the plot container.
Plot Title object. Cannot be instantiated directly, but created by the Plot oject. Title properties can be set or overriden by the options passed in from the user.
text | text of the title. |
Properties | |
text | text of the title; |
show | wether or not to show the title |
fontFamily | css font-family spec for the text. |
fontSize | css font-size spec for the text. |
textAlign | css text-align spec for the text. |
textColor | css color spec for the text. |
renderer | A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer. |
rendererOptions | renderer specific options passed to the renderer. |
escapeHtml | True to escape special characters with their html entity equivalents in title text. |
this.renderer = $.jqplot.DivTitleRenderer
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
An individual data series object. Cannot be instantiated directly, but created by the Plot oject. Series properties can be set or overriden by the options passed in from the user.
Properties | Properties will be assigned from a series array at the top level of the options. |
show | wether or not to draw the series. |
xaxis | which x axis to use with this series, either ‘xaxis’ or ‘x2axis’. |
yaxis | which y axis to use with this series, either ‘yaxis’ or ‘y2axis’. |
renderer | A class of a renderer which will draw the series, see $.jqplot.LineRenderer. |
rendererOptions | Options to pass on to the renderer. |
label | Line label to use in the legend. |
showLabel | true to show label for this series in the legend. |
color | css color spec for the series |
negativeColor | css color spec used for filled (area) plots that are filled to zero and the “useNegativeColors” option is true. |
lineWidth | width of the line in pixels. |
lineJoin | Canvas lineJoin style between segments of series. |
lineCap | Canvas lineCap style at ends of line. |
linePattern | line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’ |
shadowAngle | Shadow angle in degrees |
shadowOffset | Shadow offset from line in pixels |
shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
shadowAlpha | Alpha channel transparency of shadow. |
breakOnNull | Wether line segments should be be broken at null value. |
markerRenderer | A class of a renderer which will draw marker (e.g. |
markerOptions | renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer. |
showLine | wether to actually draw the line or not. |
showMarker | wether or not to show the markers at the data points. |
index | 0 based index of this series in the plot series array. |
fill | true or false, wether to fill under lines or in bars. |
fillColor | CSS color spec to use for fill under line. |
fillAlpha | Alpha transparency to apply to the fill under the line. |
fillAndStroke | If true will stroke the line (with color this.color) as well as fill under it. |
disableStack | true to not stack this series with other series in the plot. |
neighborThreshold | how close or far (in pixels) the cursor must be from a point marker to detect the point. |
fillToZero | true will force bar and filled series to fill toward zero on the fill Axis. |
fillToValue | fill a filled series to this value on the fill axis. |
fillAxis | Either ‘x’ or ‘y’. |
useNegativeColors | true to color negative values differently in filled and bar charts. |
Properties will be assigned from a series array at the top level of the options. If you had two series and wanted to change the color and line width of the first and set the second to use the secondary y axis with no shadow and supply custom labels for each:
{ series:[ {color: '#ff4466', lineWidth: 5, label:'good line'}, {yaxis: 'y2axis', shadow: false, label:'bad line'} ] }
this.renderer = $.jqplot.LineRenderer
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
this.markerRenderer = $.jqplot.MarkerRenderer
A class of a renderer which will draw marker (e.g. circle, square, ...) at the data points, see $.jqplot.MarkerRenderer.
this.markerOptions = {}
renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
this.disableStack = false
true to not stack this series with other series in the plot. To render properly, non-stacked series must come after any stacked series in the plot’s data series array. So, the plot’s data series array would look like:
[stackedSeries1, stackedSeries2, ..., nonStackedSeries1, nonStackedSeries2, ...]
disableStack will put a gap in the stacking order of series, and subsequent stacked series will not fill down through the non-stacked series and will most likely not stack properly on top of the non-stacked series.
Object representing the grid on which the plot is drawn. The grid in this context is the area bounded by the axes, the area which will contain the series. Note, the series are drawn on their own canvas. The Grid object cannot be instantiated directly, but is created by the Plot oject. Grid properties can be set or overriden by the options passed in from the user.
Properties | |
drawGridlines | wether to draw the gridlines on the plot. |
gridLineColor | color of the grid lines. |
gridLineWidth | width of the grid lines. |
background | css spec for the background color. |
borderColor | css spec for the color of the grid border. |
borderWidth | width of the border in pixels. |
drawBorder | True to draw border around grid. |
shadow | wether to show a shadow behind the grid. |
shadowAngle | shadow angle in degrees |
shadowOffset | Offset of each shadow stroke from the border in pixels |
shadowWidth | width of the stoke for the shadow |
shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
shadowColor | an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form |
shadowAlpha | Alpha channel transparency of shadow. |
renderer | Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer. |
rendererOptions | Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer. |
this.renderer = $.jqplot.CanvasGridRenderer
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
this.rendererOptions = {}
Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
Plot object returned by call to $.jqplot. Handles parsing user options, creating sub objects (Axes, legend, title, series) and rendering the plot.
Properties | These properties are specified at the top of the options object like so: |
animate | True to animate the series on initial plot draw (renderer dependent). |
animateReplot | True to animate series after a call to the replot() method. |
axes | up to 4 axes are supported, each with it’s own options, See Axis for axis specific options. |
data | user’s data. |
dataRenderer | A callable which can be used to preprocess data passed into the plot. |
dataRendererOptions | Options that will be passed to the dataRenderer. |
axesDefaults | default options that will be applied to all axes. |
seriesDefaults | default options that will be applied to all series. |
defaultAxisStart | 1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot. |
fillBetween | Fill between 2 line series in a plot. |
fontSize | css spec for the font-size attribute. |
grid | See Grid for grid specific options. |
legend | see <$.jqplot.TableLegendRenderer> |
noDataIndicator | Options to set up a mock plot with a data loading indicator if no data is specified. |
series | Array of series object options. |
seriesColors | Ann array of CSS color specifications that will be applied, in order, to the series in the plot. |
sortData | false to not sort the data passed in by the user. |
stackSeries | true or false, creates a stack or “mountain” plot. |
title | Title object. |
methods | |
init | sets the plot target, checks data and applies user options to plot. |
resetAxesScale | Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided. |
reInitialize | reinitialize plot for replotting. |
quickInit | Quick reinitialization plot for replotting. |
destroy | Releases all resources occupied by the plot |
replot | Does a reinitialization of the plot followed by a redraw. |
redraw | Empties the plot target div and redraws the plot. |
draw | Draws all elements of the plot into the container. |
drawSeries | Redraws all or just one series on the plot. |
moveSeriesToFront | This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases. |
moveSeriesToBack | This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases. |
restorePreviousSeriesOrder | This method requires jQuery 1.4+ Restore the series canvas order to its previous state. |
restoreOriginalSeriesOrder | This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created. |
this.axes = {xaxis: new Axis('xaxis'), yaxis: new Axis('yaxis'), x2axis: new Axis('x2axis'), y2axis: new Axis('y2axis'), y3axis: new Axis('y3axis'), y4axis: new Axis('y4axis'), y5axis: new Axis('y5axis'), y6axis: new Axis('y6axis'), y7axis: new Axis('y7axis'), y8axis: new Axis('y8axis'), y9axis: new Axis('y9axis'), yMidAxis: new Axis('yMidAxis')}
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
this.data = []
user’s data. Data should NOT be specified in the options object, but be passed in as the second argument to the $.jqplot() function. The data property is described here soley for reference. The data should be in the form of an array of 2D or 1D arrays like
[ [[x1, y1], [x2, y2],...], [y1, y2, ...] ].
default options that will be applied to all axes. see Axis for axes options.
seriesDefaults: {}, series:[] }
default options that will be applied to all series. see Series for series options.
this.fillBetween = { series1: null, series2: null, color: null, baseSeries: 0, fill: true }
Fill between 2 line series in a plot. Options object: { series1: first index (0 based) of series in fill series2: second index (0 based) of series in fill color: color of fill [default fillColor of series1] baseSeries: fill will be drawn below this series (0 based index) fill: false to turn off fill [default true]. }
this.grid = new Grid()
See Grid for grid specific options.
this.series = []
Array of series object options. see Series for series specific options.
this.seriesColors = $.jqplot.config.defaultColors
Ann array of CSS color specifications that will be applied, in order, to the series in the plot. Colors will wrap around so, if their are more series than colors, colors will be reused starting at the beginning. For pie charts, this specifies the colors of the slices.
this.title = new Title()
Title object. See Title for specific options. As a shortcut, you can specify the title option as just a string like: title: ‘My Plot’ and this will create a new title object with the specified text.
this.resetAxesScale = function( axes, options )
Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided.
axes | Boolean to reset or not reset all axes or an array or object of axis names to reset. |
this.replot = function( options )
Does a reinitialization of the plot followed by a redraw. Method could be used to interactively change plot characteristics and then replot.
options | Options used for replotting. |
clear | false to not clear (empty) the plot container before replotting (default: true). |
resetAxes | true to reset all axes min, max, numberTicks and tickInterval setting so axes will rescale themselves. optionally pass in list of axes to reset (e.g. [‘xaxis’, ‘y2axis’]) (default: false). |
this.redraw = function( clear )
Empties the plot target div and redraws the plot. This enables plot data and properties to be changed and then to comletely clear the plot and redraw. redraw will not reinitialize any plot elements. That is, axes will not be autoscaled and defaults will not be reapplied to any plot elements. redraw is used primarily with zooming.
clear | false to not clear (empty) the plot container before redrawing (default: true). |
this.drawSeries = function( options, idx )
Redraws all or just one series on the plot. No axis scaling is performed and no other elements on the plot are redrawn. options is an options object to pass on to the series renderers. It can be an empty object {}. idx is the series index to redraw if only one series is to be redrawn.
this.moveSeriesToFront = function ( idx )
This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases. This effectively “draws” the specified series on top of all other series, although it is performed through DOM manipulation, no redrawing is performed.
idx | 0 based index of the series to move. This will be the index of the series as it was first passed into the jqplot function. |
Wether to display the axis on the graph.
this.show = false
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
this.tickRenderer = $.jqplot.AxisTickRenderer
Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
this.tickOptions = {}
A class of a rendering engine for creating an axis label.
this.labelRenderer = $.jqplot.AxisLabelRenderer
Options passed to the label renderer.
this.labelOptions = {}
Label for the axis
this.label = null
true to show the axis label.
this.showLabel = true
minimum value of the axis (in data units, not pixels).
this.min = null
maximum value of the axis (in data units, not pixels).
this.max = null
DEPRECATED the default scaling algorithm produces superior results.
this.autoscale = false
Padding to extend the range above and below the data bounds.
this.pad = 1.2
Padding to extend the range above data bounds.
this.padMax = null
Padding to extend the range below data bounds.
this.padMin = null
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.
this.ticks = []
Desired number of ticks.
this.numberTicks
number of units between ticks.
this.tickInterval
A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
this.renderer = $.jqplot.LinearAxisRenderer
renderer specific options.
this.rendererOptions = {}
Wether to show the ticks (both marks and labels) or not.
this.showTicks = true
Wether to show the tick marks (line crossing grid) or not.
this.showTickMarks = true
Wether or not to show minor ticks.
this.showMinorTicks = true
True to draw gridlines for major axis ticks.
this.drawMajorGridlines = true
True to draw gridlines for minor ticks.
this.drawMinorGridlines = false
True to draw tick marks for major axis ticks.
this.drawMajorTickMarks = true
True to draw tick marks for minor ticks.
this.drawMinorTickMarks = true
Use the color of the first series associated with this axis for the tick marks and line bordering this axis.
this.useSeriesColor = false
width of line stroked at the border of the axis.
this.borderWidth = null
color of the border adjacent to the axis.
this.borderColor = null
True to include hidden series when computing axes bounds and scaling.
this.scaleToHiddenSeries = false
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.
this.syncTicks = null
Approximate pixel spacing between ticks on graph.
this.tickSpacing = 75
Wether to display the legend on the graph.
this.show = false
Placement of the legend.
this.location = 'ne'
Array of labels to use.
this.labels = []
true to show the label text on the legend.
this.showLabels = true
true to show the color swatches on the legend.
this.showSwatches = true
“insideGrid” places legend inside the grid area of the plot.
this.placement = "insideGrid"
DEPRECATED.
this.xoffset = 0
DEPRECATED.
this.yoffset = 0
css spec for the border around the legend box.
this.border
css spec for the background of the legend box.
this.background
css color spec for the legend text.
this.textColor
css font-family spec for the legend text.
this.fontFamily
css font-size spec for the legend text.
this.fontSize
css padding-top spec for the rows in the legend.
this.rowSpacing = '0.5em'
renderer specific options passed to the renderer.
this.rendererOptions = {}
CSS margin for the legend DOM element.
this.marginTop = null
CSS margin for the legend DOM element.
this.marginRight = null
CSS margin for the legend DOM element.
this.marginBottom = null
CSS margin for the legend DOM element.
this.marginLeft = null
True to escape special characters with their html entity equivalents in legend text.
this.escapeHtml = false
text of the title;
this.text = text
wether or not to show the title
this.show = true
css font-family spec for the text.
this.fontFamily
css font-size spec for the text.
this.fontSize
css text-align spec for the text.
this.textAlign
css color spec for the text.
this.textColor
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
this.renderer = $.jqplot.DivTitleRenderer
renderer specific options passed to the renderer.
this.rendererOptions = {}
True to escape special characters with their html entity equivalents in title text.
this.escapeHtml = false
wether or not to draw the series.
this.show = true
which x axis to use with this series, either ‘xaxis’ or ‘x2axis’.
this.xaxis = 'xaxis'
which y axis to use with this series, either ‘yaxis’ or ‘y2axis’.
this.yaxis = 'yaxis'
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
this.renderer = $.jqplot.LineRenderer
Options to pass on to the renderer.
this.rendererOptions = {}
Line label to use in the legend.
this.label = ''
true to show label for this series in the legend.
this.showLabel = true
css color spec for the series
this.color
css color spec used for filled (area) plots that are filled to zero and the “useNegativeColors” option is true.
this.negativeColor
width of the line in pixels.
this.lineWidth = 2.5
Canvas lineJoin style between segments of series.
this.lineJoin = 'round'
Canvas lineCap style at ends of line.
this.lineCap = 'round'
line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’
this.linePattern = 'solid'
Shadow angle in degrees
this.shadowAngle = 45
Shadow offset from line in pixels
this.shadowOffset = 1.25
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
Alpha channel transparency of shadow.
this.shadowAlpha = '0.1'
Wether line segments should be be broken at null value.
this.breakOnNull = false
A class of a renderer which will draw marker (e.g.
this.markerRenderer = $.jqplot.MarkerRenderer
renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
this.markerOptions = {}
wether to actually draw the line or not.
this.showLine = true
wether or not to show the markers at the data points.
this.showMarker = true
0 based index of this series in the plot series array.
this.index
true or false, wether to fill under lines or in bars.
this.fill = false
CSS color spec to use for fill under line.
this.fillColor
Alpha transparency to apply to the fill under the line.
this.fillAlpha
If true will stroke the line (with color this.color) as well as fill under it.
this.fillAndStroke = false
true to not stack this series with other series in the plot.
this.disableStack = false
how close or far (in pixels) the cursor must be from a point marker to detect the point.
this.neighborThreshold = 4
true will force bar and filled series to fill toward zero on the fill Axis.
this.fillToZero = false
fill a filled series to this value on the fill axis.
this.fillToValue = 0
Either ‘x’ or ‘y’.
this.fillAxis = 'y'
true to color negative values differently in filled and bar charts.
this.useNegativeColors = true
wether to draw the gridlines on the plot.
this.drawGridlines = true
color of the grid lines.
this.gridLineColor = '#cccccc'
width of the grid lines.
this.gridLineWidth = 1.0
css spec for the background color.
this.background = '#fffdf6'
css spec for the color of the grid border.
this.borderColor = '#999999'
width of the border in pixels.
this.borderWidth = 2.0
True to draw border around grid.
this.drawBorder = true
wether to show a shadow behind the grid.
this.shadow = true
shadow angle in degrees
this.shadowAngle = 45
Offset of each shadow stroke from the border in pixels
this.shadowOffset = 1.5
width of the stoke for the shadow
this.shadowWidth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form
this.shadowColor = null
Alpha channel transparency of shadow.
this.shadowAlpha = '0.07'
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
this.renderer = $.jqplot.CanvasGridRenderer
Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
this.rendererOptions = {}
True to animate the series on initial plot draw (renderer dependent).
this.animate = false
True to animate series after a call to the replot() method.
this.animateReplot = false
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
this.axes = {xaxis: new Axis('xaxis'), yaxis: new Axis('yaxis'), x2axis: new Axis('x2axis'), y2axis: new Axis('y2axis'), y3axis: new Axis('y3axis'), y4axis: new Axis('y4axis'), y5axis: new Axis('y5axis'), y6axis: new Axis('y6axis'), y7axis: new Axis('y7axis'), y8axis: new Axis('y8axis'), y9axis: new Axis('y9axis'), yMidAxis: new Axis('yMidAxis')}
user’s data.
this.data = []
A callable which can be used to preprocess data passed into the plot.
this.dataRenderer
Options that will be passed to the dataRenderer.
this.dataRendererOptions
default options that will be applied to all series.
seriesDefaults: {}, series:[] }
1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.
this.defaultAxisStart = 1
Fill between 2 line series in a plot.
this.fillBetween = { series1: null, series2: null, color: null, baseSeries: 0, fill: true }
css spec for the font-size attribute.
this.fontSize
See Grid for grid specific options.
this.grid = new Grid()
see $.jqplot.TableLegendRenderer
this.legend = new Legend()
Array of series object options.
this.series = []
Ann array of CSS color specifications that will be applied, in order, to the series in the plot.
this.seriesColors = $.jqplot.config.defaultColors
false to not sort the data passed in by the user.
this.sortData = true
true or false, creates a stack or “mountain” plot.
this.stackSeries = false
Title object.
this.title = new Title()
sets the plot target, checks data and applies user options to plot.
this.init = function( target, data, options )
Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided.
this.resetAxesScale = function( axes, options )
reinitialize plot for replotting.
this.reInitialize = function ( data, opts )
Quick reinitialization plot for replotting.
this.quickInit = function ()
Releases all resources occupied by the plot
this.destroy = function()
Does a reinitialization of the plot followed by a redraw.
this.replot = function( options )
Empties the plot target div and redraws the plot.
this.redraw = function( clear )
Draws all elements of the plot into the container.
this.draw = function()
Redraws all or just one series on the plot.
this.drawSeries = function( options, idx )
This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases.
this.moveSeriesToFront = function ( idx )
This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
this.moveSeriesToBack = function ( idx )
This method requires jQuery 1.4+ Restore the series canvas order to its previous state.
this.restorePreviousSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
this.restoreOriginalSeriesOrder = function ()