Pure JavaScript plotting plugin for jQuery.

Summary
jqPlot ChartsPure JavaScript plotting plugin for jQuery.
Version0.9.7r635
Copyright & License
IntroductionjqPlot requires jQuery (1.4+ required for certain features).
UsageSee jqPlot Usage
Available OptionsSee jqPlot Options for a list of options available thorugh the options object (not complete yet!)
Options UsageSee Options Tutorial
ChangesSee Change Log
$.jqplotjQuery function called by the user to create a plot.
Hooks
jqPlot Pugin Hooks
AxisAn individual axis object.
PropertiesAxes options are specified within an axes object at the top level of the plot options like so:
showWether to display the axis on the graph.
tickRendererA class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
tickOptionsOptions that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
labelRendererA class of a rendering engine for creating an axis label.
labelOptionsOptions passed to the label renderer.
labelLabel for the axis
showLabeltrue to show the axis label.
minminimum value of the axis (in data units, not pixels).
maxmaximum value of the axis (in data units, not pixels).
autoscaleAutoscale the axis min and max values to provide sensible tick spacing.
padPadding to extend the range above and below the data bounds.
padMaxPadding to extend the range above data bounds.
padMinPadding to extend the range below data bounds.
ticks1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.
numberTicksDesired number of ticks.
tickIntervalnumber of units between ticks.
rendererA class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
rendererOptionsrenderer specific options.
showTicksWether to show the ticks (both marks and labels) or not.
showTickMarksWether to show the tick marks (line crossing grid) or not.
showMinorTicksWether or not to show minor ticks.
useSeriesColorUse the color of the first series associated with this axis for the tick marks and line bordering this axis.
borderWidthwidth of line stroked at the border of the axis.
borderColorcolor of the border adjacent to the axis.
syncTickstrue to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.
tickSpacingApproximate pixel spacing between ticks on graph.
LegendLegend object.
Properties
showWether to display the legend on the graph.
locationPlacement of the legend.
labelsArray of labels to use.
showLabelstrue to show the label text on the legend.
showSwatchtrue to show the color swatches on the legend.
placement“insideGrid” places legend inside the grid area of the plot.
xoffsetDEPRECATED.
yoffsetDEPRECATED.
bordercss spec for the border around the legend box.
backgroundcss spec for the background of the legend box.
textColorcss color spec for the legend text.
fontFamilycss font-family spec for the legend text.
fontSizecss font-size spec for the legend text.
rowSpacingcss padding-top spec for the rows in the legend.
rendererOptionsrenderer specific options passed to the renderer.
predrawWether to draw the legend before the series or not.
marginTopCSS margin for the legend DOM element.
marginRightCSS margin for the legend DOM element.
marginBottomCSS margin for the legend DOM element.
marginLeftCSS margin for the legend DOM element.
TitlePlot Title object.
Properties
texttext of the title;
showwether or not to show the title
fontFamilycss font-family spec for the text.
fontSizecss font-size spec for the text.
textAligncss text-align spec for the text.
textColorcss color spec for the text.
rendererA class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
rendererOptionsrenderer specific options passed to the renderer.
SeriesAn individual data series object.
PropertiesProperties will be assigned from a series array at the top level of the options.
showwether or not to draw the series.
xaxiswhich x axis to use with this series, either ‘xaxis’ or ‘x2axis’.
yaxiswhich y axis to use with this series, either ‘yaxis’ or ‘y2axis’.
rendererA class of a renderer which will draw the series, see $.jqplot.LineRenderer.
rendererOptionsOptions to pass on to the renderer.
labelLine label to use in the legend.
showLabeltrue to show label for this series in the legend.
colorcss color spec for the series
lineWidthwidth of the line in pixels.
shadowwether or not to draw a shadow on the line
shadowAngleShadow angle in degrees
shadowOffsetShadow offset from line in pixels
shadowDepthNumber of times shadow is stroked, each stroke offset shadowOffset from the last.
shadowAlphaAlpha channel transparency of shadow.
breakOnNullNot implemented.
markerRendererA class of a renderer which will draw marker (e.g.
markerOptionsrenderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
showLinewether to actually draw the line or not.
showMarkerwether or not to show the markers at the data points.
index0 based index of this series in the plot series array.
filltrue or false, wether to fill under lines or in bars.
fillColorCSS color spec to use for fill under line.
fillAlphaAlpha transparency to apply to the fill under the line.
fillAndStrokeIf true will stroke the line (with color this.color) as well as fill under it.
disableStacktrue to not stack this series with other series in the plot.
neighborThresholdhow close or far (in pixels) the cursor must be from a point marker to detect the point.
fillToZerotrue will force bar and filled series to fill toward zero on the fill Axis.
fillToValuefill a filled series to this value on the fill axis.
fillAxisEither ‘x’ or ‘y’.
useNegativeColorstrue to color negative values differently in filled and bar charts.
GridObject representing the grid on which the plot is drawn.
Properties
drawGridlineswether to draw the gridlines on the plot.
gridLineColorcolor of the grid lines.
gridLineWidthwidth of the grid lines.
backgroundcss spec for the background color.
borderColorcss spec for the color of the grid border.
borderWidthwidth of the border in pixels.
drawBorderTrue to draw border around grid.
shadowwether to show a shadow behind the grid.
shadowAngleshadow angle in degrees
shadowOffsetOffset of each shadow stroke from the border in pixels
shadowWidthwidth of the stoke for the shadow
shadowDepthNumber of times shadow is stroked, each stroke offset shadowOffset from the last.
shadowColoran optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form
shadowAlphaAlpha channel transparency of shadow.
rendererInstance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
rendererOptionsOptions to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
jqPlotPlot object returned by call to $.jqplot.
PropertiesThese properties are specified at the top of the options object like so:
datauser’s data.
axesDefaultsdefault options that will be applied to all axes.
seriesDefaultsdefault options that will be applied to all series.
seriesArray of series object options.
axesup to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
gridSee Grid for grid specific options.
legendsee <$.jqplot.TableLegendRenderer>
seriesColorsAnn array of CSS color specifications that will be applied, in order, to the series in the plot.
sortDatafalse to not sort the data passed in by the user.
fontSizecss spec for the font-size attribute.
titleTitle object.
stackSeriestrue or false, creates a stack or “mountain” plot.
defaultAxisStart1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.
methods
initsets the plot target, checks data and applies user options to plot.
resetAxesScaleReset 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.
reInitializereinitialize plot for replotting.
replotDoes a reinitialization of the plot followed by a redraw.
redrawEmpties the plot target div and redraws the plot.
drawDraws all elements of the plot into the container.
drawSeriesRedraws all or just one series on the plot.
moveSeriesToFrontThis method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases.
moveSeriesToBackThis method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
restorePreviousSeriesOrderThis method requires jQuery 1.4+ Restore the series canvas order to its previous state.
restoreOriginalSeriesOrderThis method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.

Version

0.9.7r635

Copyright & License

Copyright © 20092010 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.

jqPlot includes `date instance methods and printf/sprintf functions by other authors

Date instance methods

author Ken Snyder (ken d snyder at gmail dot com) date 2008-09-10 version 2.0.2 (http://kendsnyder.com/sandbox/date/) license Creative Commons Attribution License 3.0 (http://creativecommons.org/licenses/by/3.0/)

JavaScript printf/sprintf functions

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.”

Introduction

jqPlot requires jQuery (1.4+ required for certain features). jQuery 1.4.1 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 IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery-1.4.2.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.

Usage

Available Options

See jqPlot Options for a list of options available thorugh the options object (not complete yet!)

Options Usage

Changes

$.jqplot

jQuery function called by the user to create a plot.

Parameters

targetID of target element to render the plot into.
dataan array of data series.
optionsuser defined options object.  See the individual classes for available options.

Properties

configobject to hold configuration information for jqPlot plot object.

attributes

enablePluginsFalse 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.
defaultHeightDefault height for plots where no css height specification exists.  This is a jqplot wide default.
defaultWidthDefault height for plots where no css height specification exists.  This is a jqplot wide default.

Hooks

jqPlot Pugin Hooks

$.jqplot.preInitHookscalled before initialization.
$.jqplot.postInitHookscalled after initialization.
$.jqplot.preParseOptionsHookscalled before user options are parsed.
$.jqplot.postParseOptionsHookscalled after user options are parsed.
$.jqplot.preDrawHookscalled before plot draw.
$.jqplot.postDrawHookscalled after plot draw.
$.jqplot.preDrawSeriesHookscalled before each series is drawn.
$.jqplot.postDrawSeriesHookscalled after each series is drawn.
$.jqplot.preDrawLegendHookscalled before the legend is drawn.
$.jqplot.addLegendRowHookscalled at the end of legend draw, so plugins can add rows to the legend table.
$.jqplot.preSeriesInitHookscalled before series is initialized.
$.jqplot.postSeriesInitHookscalled after series is initialized.
$.jqplot.preParseSeriesOptionsHookscalled before series related options are parsed.
$.jqplot.postParseSeriesOptionsHookscalled after series related options are parsed.
$.jqplot.eventListenerHookscalled at the end of plot drawing, binds listeners to the event canvas which lays on top of the grid area.
$.jqplot.preDrawSeriesShadowHookscalled before series shadows are drawn.
$.jqplot.postDrawSeriesShadowHookscalled after series shadows are drawn.

Axis

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.

Summary
PropertiesAxes options are specified within an axes object at the top level of the plot options like so:
showWether to display the axis on the graph.
tickRendererA class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
tickOptionsOptions that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
labelRendererA class of a rendering engine for creating an axis label.
labelOptionsOptions passed to the label renderer.
labelLabel for the axis
showLabeltrue to show the axis label.
minminimum value of the axis (in data units, not pixels).
maxmaximum value of the axis (in data units, not pixels).
autoscaleAutoscale the axis min and max values to provide sensible tick spacing.
padPadding to extend the range above and below the data bounds.
padMaxPadding to extend the range above data bounds.
padMinPadding to extend the range below data bounds.
ticks1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.
numberTicksDesired number of ticks.
tickIntervalnumber of units between ticks.
rendererA class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
rendererOptionsrenderer specific options.
showTicksWether to show the ticks (both marks and labels) or not.
showTickMarksWether to show the tick marks (line crossing grid) or not.
showMinorTicksWether or not to show minor ticks.
useSeriesColorUse the color of the first series associated with this axis for the tick marks and line bordering this axis.
borderWidthwidth of line stroked at the border of the axis.
borderColorcolor of the border adjacent to the axis.
syncTickstrue to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.
tickSpacingApproximate pixel spacing between ticks on graph.

Properties

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 4 axes, ‘xaxis’, ‘yaxis’, ‘x2axis’, ‘y2axis’.  Any or all of which may be specified.

show

this.show = false

Wether to display the axis on the graph.

tickRenderer

this.tickRenderer = $.jqplot.AxisTickRenderer

A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.

tickOptions

this.tickOptions = {}

Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.

labelRenderer

this.labelRenderer = $.jqplot.AxisLabelRenderer

A class of a rendering engine for creating an axis label.

labelOptions

this.labelOptions = {}

Options passed to the label renderer.

label

this.label = null

Label for the axis

showLabel

this.showLabel = true

true to show the axis label.

min

this.min=null

minimum value of the axis (in data units, not pixels).

max

this.max=null

maximum value of the axis (in data units, not pixels).

autoscale

this.autoscale = false

Autoscale the axis min and max values to provide sensible tick spacing.  If axis min or max are set, autoscale will be turned off.  The numberTicks, tickInterval and pad options do work with autoscale, although tickInterval has not been tested yet. padMin and padMax do nothing when autoscale is on.

pad

this.pad = 1.2

Padding to extend the range above and below the data bounds.  The data range is multiplied by this factor to determine minimum and maximum axis bounds.  A value of 0 will be interpreted to mean no padding, and pad will be set to 1.0.

padMax

this.padMax = null

Padding to extend the range above data bounds.  The top of the data range is multiplied by this factor to determine maximum axis bounds.  A value of 0 will be interpreted to mean no padding, and padMax will be set to 1.0.

padMin

this.padMin = null

Padding to extend the range below data bounds.  The bottom of the data range is multiplied by this factor to determine minimum axis bounds.  A value of 0 will be interpreted to mean no padding, and padMin will be set to 1.0.

ticks

this.ticks = []

1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.  If no label is specified, the value is formatted into an appropriate label.

numberTicks

this.numberTicks

Desired number of ticks.  Default is to compute automatically.

tickInterval

this.tickInterval

number of units between ticks.  Mutually exclusive with numberTicks.

renderer

this.renderer = $.jqplot.LinearAxisRenderer

A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.

rendererOptions

this.rendererOptions = {}

renderer specific options.  See $.jqplot.LinearAxisRenderer for options.

showTicks

this.showTicks = true

Wether to show the ticks (both marks and labels) or not.  Will not override showMark and showLabel options if specified on the ticks themselves.

showTickMarks

this.showTickMarks = true

Wether to show the tick marks (line crossing grid) or not.  Overridden by showTicks and showMark option of tick itself.

showMinorTicks

this.showMinorTicks = true

Wether or not to show minor ticks.  This is renderer dependent.  The default $.jqplot.LinearAxisRenderer does not have minor ticks.

useSeriesColor

this.useSeriesColor = false

Use the color of the first series associated with this axis for the tick marks and line bordering this axis.

borderWidth

this.borderWidth = null

width of line stroked at the border of the axis.  Defaults to the width of the grid boarder.

borderColor

this.borderColor = null

color of the border adjacent to the axis.  Defaults to grid border color.

syncTicks

this.syncTicks = null

true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.  This has an impact on autoscaling algorithm, however.  In general, autoscaling an individual axis will work better if it does not have to sync ticks.

tickSpacing

this.tickSpacing = 75

Approximate pixel spacing between ticks on graph.  Used during autoscaling.  This number will be an upper bound, actual spacing will be less.

Legend

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.

Summary
Properties
showWether to display the legend on the graph.
locationPlacement of the legend.
labelsArray of labels to use.
showLabelstrue to show the label text on the legend.
showSwatchtrue to show the color swatches on the legend.
placement“insideGrid” places legend inside the grid area of the plot.
xoffsetDEPRECATED.
yoffsetDEPRECATED.
bordercss spec for the border around the legend box.
backgroundcss spec for the background of the legend box.
textColorcss color spec for the legend text.
fontFamilycss font-family spec for the legend text.
fontSizecss font-size spec for the legend text.
rowSpacingcss padding-top spec for the rows in the legend.
rendererOptionsrenderer specific options passed to the renderer.
predrawWether to draw the legend before the series or not.
marginTopCSS margin for the legend DOM element.
marginRightCSS margin for the legend DOM element.
marginBottomCSS margin for the legend DOM element.
marginLeftCSS margin for the legend DOM element.

Properties

show

this.show = false

Wether to display the legend on the graph.

location

this.location = 'ne'

Placement of the legend.  one of the compass directions: nw, n, ne, e, se, s, sw, w

labels

this.labels = []

Array of labels to use.  By default the renderer will look for labels on the series.  Labels specified in this array will override labels specified on the series.

showLabels

this.showLabels = true

true to show the label text on the legend.

showSwatch

this.showSwatches = true

true to show the color swatches on the legend.

placement

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.

xoffset

this.xoffset = 0

DEPRECATED.  Set the margins on the legend using the marginTop, marginLeft, etc. properties or via CSS margin styling of the .jqplot-table-legend class.

yoffset

this.yoffset = 0

DEPRECATED.  Set the margins on the legend using the marginTop, marginLeft, etc. properties or via CSS margin styling of the .jqplot-table-legend class.

border

this.border

css spec for the border around the legend box.

background

this.background

css spec for the background of the legend box.

textColor

this.textColor

css color spec for the legend text.

fontFamily

this.fontFamily

css font-family spec for the legend text.

fontSize

this.fontSize

css font-size spec for the legend text.

rowSpacing

this.rowSpacing = '0.5em'

css padding-top spec for the rows in the legend.

rendererOptions

this.rendererOptions = {}

renderer specific options passed to the renderer.

predraw

Wether to draw the legend before the series or not.  Used with series specific legend renderers for pie, donut, mekko charts, etc.

marginTop

this.marginTop = null

CSS margin for the legend DOM element.  This will set an element CSS style for the margin which will override any style sheet setting.  The default will be taken from the stylesheet.

marginRight

this.marginRight = null

CSS margin for the legend DOM element.  This will set an element CSS style for the margin which will override any style sheet setting.  The default will be taken from the stylesheet.

marginBottom

this.marginBottom = null

CSS margin for the legend DOM element.  This will set an element CSS style for the margin which will override any style sheet setting.  The default will be taken from the stylesheet.

marginLeft

this.marginLeft = null

CSS margin for the legend DOM element.  This will set an element CSS style for the margin which will override any style sheet setting.  The default will be taken from the stylesheet.

Title

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.

Parameters

texttext of the title.
Summary
Properties
texttext of the title;
showwether or not to show the title
fontFamilycss font-family spec for the text.
fontSizecss font-size spec for the text.
textAligncss text-align spec for the text.
textColorcss color spec for the text.
rendererA class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
rendererOptionsrenderer specific options passed to the renderer.

Properties

text

this.text = text

text of the title;

show

this.show = true

wether or not to show the title

fontFamily

this.fontFamily

css font-family spec for the text.

fontSize

this.fontSize

css font-size spec for the text.

textAlign

this.textAlign

css text-align spec for the text.

textColor

this.textColor

css color spec for the text.

renderer

this.renderer = $.jqplot.DivTitleRenderer

A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.

rendererOptions

this.rendererOptions = {}

renderer specific options passed to the renderer.

Series

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.

Summary
PropertiesProperties will be assigned from a series array at the top level of the options.
showwether or not to draw the series.
xaxiswhich x axis to use with this series, either ‘xaxis’ or ‘x2axis’.
yaxiswhich y axis to use with this series, either ‘yaxis’ or ‘y2axis’.
rendererA class of a renderer which will draw the series, see $.jqplot.LineRenderer.
rendererOptionsOptions to pass on to the renderer.
labelLine label to use in the legend.
showLabeltrue to show label for this series in the legend.
colorcss color spec for the series
lineWidthwidth of the line in pixels.
shadowwether or not to draw a shadow on the line
shadowAngleShadow angle in degrees
shadowOffsetShadow offset from line in pixels
shadowDepthNumber of times shadow is stroked, each stroke offset shadowOffset from the last.
shadowAlphaAlpha channel transparency of shadow.
breakOnNullNot implemented.
markerRendererA class of a renderer which will draw marker (e.g.
markerOptionsrenderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
showLinewether to actually draw the line or not.
showMarkerwether or not to show the markers at the data points.
index0 based index of this series in the plot series array.
filltrue or false, wether to fill under lines or in bars.
fillColorCSS color spec to use for fill under line.
fillAlphaAlpha transparency to apply to the fill under the line.
fillAndStrokeIf true will stroke the line (with color this.color) as well as fill under it.
disableStacktrue to not stack this series with other series in the plot.
neighborThresholdhow close or far (in pixels) the cursor must be from a point marker to detect the point.
fillToZerotrue will force bar and filled series to fill toward zero on the fill Axis.
fillToValuefill a filled series to this value on the fill axis.
fillAxisEither ‘x’ or ‘y’.
useNegativeColorstrue to color negative values differently in filled and bar charts.

Properties

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'}
   ]
}

show

this.show = true

wether or not to draw the series.

xaxis

this.xaxis = 'xaxis'

which x axis to use with this series, either ‘xaxis’ or ‘x2axis’.

yaxis

this.yaxis = 'yaxis'

which y axis to use with this series, either ‘yaxis’ or ‘y2axis’.

renderer

this.renderer = $.jqplot.LineRenderer

A class of a renderer which will draw the series, see $.jqplot.LineRenderer.

rendererOptions

this.rendererOptions = {}

Options to pass on to the renderer.

label

this.label = ''

Line label to use in the legend.

showLabel

this.showLabel = true

true to show label for this series in the legend.

color

this.color

css color spec for the series

lineWidth

this.lineWidth = 2.5

width of the line in pixels.  May have different meanings depending on renderer.

shadow

this.shadow = true

wether or not to draw a shadow on the line

shadowAngle

this.shadowAngle = 45

Shadow angle in degrees

shadowOffset

this.shadowOffset = 1.25

Shadow offset from line in pixels

shadowDepth

this.shadowDepth = 3

Number of times shadow is stroked, each stroke offset shadowOffset from the last.

shadowAlpha

this.shadowAlpha = '0.1'

Alpha channel transparency of shadow.  0 = transparent.

breakOnNull

this.breakOnNull = false

Not implemented. wether line segments should be be broken at null value.  False will join point on either side of line.

markerRenderer

this.markerRenderer = $.jqplot.MarkerRenderer

A class of a renderer which will draw marker (e.g. circle, square, ...) at the data points, see $.jqplot.MarkerRenderer.

markerOptions

this.markerOptions = {}

renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.

showLine

this.showLine = true

wether to actually draw the line or not.  Series will still be renderered, even if no line is drawn.

showMarker

this.showMarker = true

wether or not to show the markers at the data points.

index

this.index

0 based index of this series in the plot series array.

fill

this.fill = false

true or false, wether to fill under lines or in bars.  May not be implemented in all renderers.

fillColor

this.fillColor

CSS color spec to use for fill under line.  Defaults to line color.

fillAlpha

this.fillAlpha

Alpha transparency to apply to the fill under the line.  Use this to adjust alpha separate from fill color.

fillAndStroke

this.fillAndStroke = false

If true will stroke the line (with color this.color) as well as fill under it.  Applies only when fill is true.

disableStack

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.

neighborThreshold

this.neighborThreshold = 4

how close or far (in pixels) the cursor must be from a point marker to detect the point.

fillToZero

this.fillToZero = false

true will force bar and filled series to fill toward zero on the fill Axis.

fillToValue

this.fillToValue = 0

fill a filled series to this value on the fill axis.  Works in conjunction with fillToZero, so that must be true.

fillAxis

this.fillAxis = 'y'

Either ‘x’ or ‘y’.  Which axis to fill the line toward if fillToZero is true.  ‘y’ means fill up/down to 0 on the y axis for this series.

useNegativeColors

this.useNegativeColors = true

true to color negative values differently in filled and bar charts.

Grid

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.

Summary
Properties
drawGridlineswether to draw the gridlines on the plot.
gridLineColorcolor of the grid lines.
gridLineWidthwidth of the grid lines.
backgroundcss spec for the background color.
borderColorcss spec for the color of the grid border.
borderWidthwidth of the border in pixels.
drawBorderTrue to draw border around grid.
shadowwether to show a shadow behind the grid.
shadowAngleshadow angle in degrees
shadowOffsetOffset of each shadow stroke from the border in pixels
shadowWidthwidth of the stoke for the shadow
shadowDepthNumber of times shadow is stroked, each stroke offset shadowOffset from the last.
shadowColoran optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form
shadowAlphaAlpha channel transparency of shadow.
rendererInstance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
rendererOptionsOptions to pass on to the renderer, see $.jqplot.CanvasGridRenderer.

Properties

drawGridlines

this.drawGridlines = true

wether to draw the gridlines on the plot.

gridLineColor

this.gridLineColor = '#cccccc'

color of the grid lines.

gridLineWidth

this.gridLineWidth = 1.0

width of the grid lines.

background

this.background = '#fffdf6'

css spec for the background color.

borderColor

this.borderColor = '#999999'

css spec for the color of the grid border.

borderWidth

this.borderWidth = 2.0

width of the border in pixels.

drawBorder

this.drawBorder = true

True to draw border around grid.

shadow

this.shadow = true

wether to show a shadow behind the grid.

shadowAngle

this.shadowAngle = 45

shadow angle in degrees

shadowOffset

this.shadowOffset = 1.5

Offset of each shadow stroke from the border in pixels

shadowWidth

this.shadowWidth = 3

width of the stoke for the shadow

shadowDepth

this.shadowDepth = 3

Number of times shadow is stroked, each stroke offset shadowOffset from the last.

shadowColor

this.shadowColor = null

an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form

shadowAlpha

this.shadowAlpha = '0.07'

Alpha channel transparency of shadow.  0 = transparent.

renderer

this.renderer = $.jqplot.CanvasGridRenderer

Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.

rendererOptions

this.rendererOptions = {}

Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.

jqPlot

Plot object returned by call to $.jqplot.  Handles parsing user options, creating sub objects (Axes, legend, title, series) and rendering the plot.

Summary
PropertiesThese properties are specified at the top of the options object like so:
datauser’s data.
axesDefaultsdefault options that will be applied to all axes.
seriesDefaultsdefault options that will be applied to all series.
seriesArray of series object options.
axesup to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
gridSee Grid for grid specific options.
legendsee <$.jqplot.TableLegendRenderer>
seriesColorsAnn array of CSS color specifications that will be applied, in order, to the series in the plot.
sortDatafalse to not sort the data passed in by the user.
fontSizecss spec for the font-size attribute.
titleTitle object.
stackSeriestrue or false, creates a stack or “mountain” plot.
defaultAxisStart1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.
methods
initsets the plot target, checks data and applies user options to plot.
resetAxesScaleReset 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.
reInitializereinitialize plot for replotting.
replotDoes a reinitialization of the plot followed by a redraw.
redrawEmpties the plot target div and redraws the plot.
drawDraws all elements of the plot into the container.
drawSeriesRedraws all or just one series on the plot.
moveSeriesToFrontThis method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases.
moveSeriesToBackThis method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
restorePreviousSeriesOrderThis method requires jQuery 1.4+ Restore the series canvas order to its previous state.
restoreOriginalSeriesOrderThis method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.

Properties

These properties are specified at the top of the options object like so:

{
    axesDefaults:{min:0},
    series:[{color:'#6633dd'}],
    title: 'A Plot'
}

data

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, ...] ].

axesDefaults

default options that will be applied to all axes. see Axis for axes options.

seriesDefaults

seriesDefaults: {}, gridPadding: {top:10, right:10, bottom:23, left:10}, series:[] }

default options that will be applied to all series. see Series for series options.

series

this.series = []

Array of series object options. see Series for series specific options.

axes

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')}

up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.

grid

this.grid = new Grid()

See Grid for grid specific options.

legend

this.legend = new Legend()

see <$.jqplot.TableLegendRenderer>

seriesColors

this.seriesColors = [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"]

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.

sortData

this.sortData = true

false to not sort the data passed in by the user.  Many bar, stakced and other graphs as well as many plugins depend on having sorted data.

fontSize

this.fontSize

css spec for the font-size attribute.  Default for the entire plot.

title

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.

stackSeries

this.stackSeries = false

true or false, creates a stack or “mountain” plot.  Not all series renderers may implement this option.

defaultAxisStart

this.defaultAxisStart = 1

1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.  This is the default starting value for the missing x or y value.  The added data will be a monotonically increasing series (e.g.  [1, 2, 3, ...]) starting at this value.

methods

init

this.init = function(target,
data,
options)

sets the plot target, checks data and applies user options to plot.

resetAxesScale

this.resetAxesScale = function(axes)

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.

Parameters

axesBoolean to reset or not reset all axes or an array or object of axis names to reset.

reInitialize

this.reInitialize = function ()

reinitialize plot for replotting. not called directly.

replot

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.

Parameters

optionsOptions used for replotting.

Properties

clearfalse to not clear (empty) the plot container before replotting (default: true).
resetAxestrue 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).

redraw

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.

Parameters

clearfalse to not clear (empty) the plot container before redrawing (default: true).

draw

this.draw = function()

Draws all elements of the plot into the container.  Does not clear the container before drawing.

drawSeries

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.

moveSeriesToFront

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.

Parameters

idx0 based index of the series to move.  This will be the index of the series as it was first passed into the jqplot function.

moveSeriesToBack

this.moveSeriesToBack = function (idx)

This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.

Parameters

idx0 based index of the series to move.  This will be the index of the series as it was first passed into the jqplot function.

restorePreviousSeriesOrder

this.restorePreviousSeriesOrder = function ()

This method requires jQuery 1.4+ Restore the series canvas order to its previous state.  Useful to put a series back where it belongs after moving it to the front.

restoreOriginalSeriesOrder

this.restoreOriginalSeriesOrder = function ()

This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.

This document is out of date.
This document will help you understand how jqPlot’s options relate to the API documentation and the jqPlot object itself.
this.show = false
Wether to display the axis on the graph.
this.tickRenderer = $.jqplot.AxisTickRenderer
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
A “tick” object showing the value of a tick/gridline on the plot.
this.tickOptions = {}
Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
this.labelRenderer = $.jqplot.AxisLabelRenderer
A class of a rendering engine for creating an axis label.
this.labelOptions = {}
Options passed to the label renderer.
this.label = null
Label for the axis
this.showLabel = true
true to show the axis label.
this.min=null
minimum value of the axis (in data units, not pixels).
this.max=null
maximum value of the axis (in data units, not pixels).
this.autoscale = false
Autoscale the axis min and max values to provide sensible tick spacing.
this.pad = 1.2
Padding to extend the range above and below the data bounds.
this.padMax = null
Padding to extend the range above data bounds.
this.padMin = null
Padding to extend the range below data bounds.
this.ticks = []
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.
this.numberTicks
Desired number of ticks.
this.tickInterval
number of units between ticks.
this.renderer = $.jqplot.LinearAxisRenderer
A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
this.rendererOptions = {}
renderer specific options.
this.showTicks = true
Wether to show the ticks (both marks and labels) or not.
this.showTickMarks = true
Wether to show the tick marks (line crossing grid) or not.
this.showMinorTicks = true
Wether or not to show minor ticks.
this.useSeriesColor = false
Use the color of the first series associated with this axis for the tick marks and line bordering this axis.
this.borderWidth = null
width of line stroked at the border of the axis.
this.borderColor = null
color of the border adjacent to the axis.
this.syncTicks = null
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.
this.tickSpacing = 75
Approximate pixel spacing between ticks on graph.
this.show = false
Wether to display the legend on the graph.
this.location = 'ne'
Placement of the legend.
this.labels = []
Array of labels to use.
this.showLabels = true
true to show the label text on the legend.
this.showSwatches = true
true to show the color swatches on the legend.
this.placement = "insideGrid"
“insideGrid” places legend inside the grid area of the plot.
this.xoffset = 0
DEPRECATED.
this.yoffset = 0
DEPRECATED.
this.border
css spec for the border around the legend box.
this.background
css spec for the background of the legend box.
this.textColor
css color spec for the legend text.
this.fontFamily
css font-family spec for the legend text.
this.fontSize
css font-size spec for the legend text.
this.rowSpacing = '0.5em'
css padding-top spec for the rows in the legend.
this.rendererOptions = {}
renderer specific options passed to the renderer.
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
CSS margin for the legend DOM element.
this.text = text
text of the title;
this.show = true
wether or not to show the title
this.fontFamily
css font-family spec for the text.
this.fontSize
css font-size spec for the text.
this.textAlign
css text-align spec for the text.
this.textColor
css color spec for the text.
this.renderer = $.jqplot.DivTitleRenderer
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
The default title renderer for jqPlot.
this.rendererOptions = {}
renderer specific options passed to the renderer.
this.show = true
wether or not to draw the series.
this.xaxis = 'xaxis'
which x axis to use with this series, either ‘xaxis’ or ‘x2axis’.
this.yaxis = 'yaxis'
which y axis to use with this series, either ‘yaxis’ or ‘y2axis’.
this.renderer = $.jqplot.LineRenderer
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
The default line renderer for jqPlot, this class has no options beyond the Series class.
this.rendererOptions = {}
Options to pass on to the renderer.
this.label = ''
Line label to use in the legend.
this.showLabel = true
true to show label for this series in the legend.
this.color
css color spec for the series
this.lineWidth = 2.5
width of the line in pixels.
this.shadow = true
wether or not to draw a shadow on the line
this.shadowAngle = 45
Shadow angle in degrees
this.shadowOffset = 1.25
Shadow offset from line in pixels
this.shadowDepth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowAlpha = '0.1'
Alpha channel transparency of shadow.
this.breakOnNull = false
Not implemented.
this.markerRenderer = $.jqplot.MarkerRenderer
A class of a renderer which will draw marker (e.g.
this.markerOptions = {}
renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
The default jqPlot marker renderer, rendering the points on the line.
this.showLine = true
wether to actually draw the line or not.
this.showMarker = true
wether or not to show the markers at the data points.
this.index
0 based index of this series in the plot series array.
this.fill = false
true or false, wether to fill under lines or in bars.
this.fillColor
CSS color spec to use for fill under line.
this.fillAlpha
Alpha transparency to apply to the fill under the line.
this.fillAndStroke = false
If true will stroke the line (with color this.color) as well as fill under it.
this.disableStack = false
true to not stack this series with other series in the plot.
this.neighborThreshold = 4
how close or far (in pixels) the cursor must be from a point marker to detect the point.
this.fillToZero = false
true will force bar and filled series to fill toward zero on the fill Axis.
this.fillToValue = 0
fill a filled series to this value on the fill axis.
this.fillAxis = 'y'
Either ‘x’ or ‘y’.
this.useNegativeColors = true
true to color negative values differently in filled and bar charts.
this.drawGridlines = true
wether to draw the gridlines on the plot.
this.gridLineColor = '#cccccc'
color of the grid lines.
this.gridLineWidth = 1.0
width of the grid lines.
this.background = '#fffdf6'
css spec for the background color.
this.borderColor = '#999999'
css spec for the color of the grid border.
this.borderWidth = 2.0
width of the border in pixels.
this.drawBorder = true
True to draw border around grid.
this.shadow = true
wether to show a shadow behind the grid.
this.shadowAngle = 45
shadow angle in degrees
this.shadowOffset = 1.5
Offset of each shadow stroke from the border in pixels
this.shadowWidth = 3
width of the stoke for the shadow
this.shadowDepth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowColor = null
an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form
this.shadowAlpha = '0.07'
Alpha channel transparency of shadow.
this.renderer = $.jqplot.CanvasGridRenderer
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
The default jqPlot grid renderer, creating a grid on a canvas element.
this.rendererOptions = {}
Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
this.data = []
user’s data.
seriesDefaults: {}, gridPadding: {top:10, right:10, bottom:23, left:10}, series:[] }
default options that will be applied to all series.
this.series = []
Array of series object 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')}
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
An individual axis object.
this.grid = new Grid()
See Grid for grid specific options.
Object representing the grid on which the plot is drawn.
this.legend = new Legend()
see $.jqplot.TableLegendRenderer
this.seriesColors = [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"]
Ann array of CSS color specifications that will be applied, in order, to the series in the plot.
this.sortData = true
false to not sort the data passed in by the user.
this.fontSize
css spec for the font-size attribute.
this.title = new Title()
Title object.
this.stackSeries = false
true or false, creates a stack or “mountain” plot.
this.defaultAxisStart = 1
1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.
this.init = function(target,
data,
options)
sets the plot target, checks data and applies user options to plot.
this.resetAxesScale = function(axes)
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.reInitialize = function ()
reinitialize plot for replotting.
this.replot = function(options)
Does a reinitialization of the plot followed by a redraw.
this.redraw = function(clear)
Empties the plot target div and redraws the plot.
this.draw = function()
Draws all elements of the plot into the container.
this.drawSeries = function(options,
idx)
Redraws all or just one series on the plot.
this.moveSeriesToFront = function (idx)
This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases.
this.moveSeriesToBack = function (idx)
This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
this.restorePreviousSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its previous state.
this.restoreOriginalSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
GNU GENERAL PUBLIC LICENSE Version 2, June 1991
The default jqPlot axis renderer, creating a numeric axis.
An individual data series object.
Plot Title object.
Close