You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
18 KiB
391 lines
18 KiB
Title: jqPlot Options |
|
|
|
**This document is out of date. While the options described here should still be |
|
relavent and valid, it has not been updated for many new options. Sorry for |
|
this inconvenience.** |
|
|
|
This document describes the options available to jqPlot. These are set with the |
|
third argument to the $.jqplot('target', data, options) function. Options are |
|
described using the following convention: |
|
|
|
{{{ |
|
property: default, // notes |
|
}}} |
|
|
|
This document is not complete! Not all options are shown! |
|
Further information about the options can be found in the online API |
|
documentation. For details on how the options relate to the API documentation, |
|
see the <Options Tutorial> in the optionsTutorial.txt file. |
|
|
|
{{{ |
|
options = |
|
{ |
|
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", |
|
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // colors that will |
|
// be assigned to the series. If there are more series than colors, colors |
|
// will wrap around and start at the beginning again. |
|
|
|
// when fillToZero is enabled, this sets the colors to use for portions of the line below zero. |
|
negativeSeriesColors: [ "#498991", "#C08840", "#9F9274", "#546D61", "#646C4A", "#6F6621", |
|
"#6E3F5F", "#4F64B0", "#A89050", "#C45923", "#187399", "#945381", |
|
"#959E5C", "#C7AF7B", "#478396", "#907294"], |
|
|
|
sortData : true, // if true, will sort the data passed in by the user. |
|
stackSeries: false, // if true, will create a stack plot. |
|
// Currently supported by line and bar graphs. |
|
|
|
title: '', // Title for the plot. Can also be specified as an object like: |
|
|
|
title: { |
|
text: '', // title for the plot, |
|
show: true, |
|
}, |
|
|
|
animate : false, // if true, the series will be animated on initial drawing. |
|
// This support is renderer-dependent; the renderer must support animation. |
|
animateReplot : false, // if true, the series will be animated after every replot() call. |
|
// Use with caution! Replots can happen very frequently under |
|
// certain circumstances (e.g. resizing, dragging points) and |
|
// animation in these situations can cause problems. |
|
captureRightClick : false, // if true, right-click events are intercepted and a jqplotRightClick |
|
// event will be fired. This will also block the context menu. |
|
dataRenderer : undefined, // A callable which can be used to preprocess data passed into the plot. |
|
// Will be called with 3 arguments: the plot data, a reference to the plot, |
|
// and the value of dataRendererOptions. |
|
|
|
dataRendererOptions : undefined, // Options that will be passed to the dataRenderer, |
|
// if that option is supplied. Can be of any type. |
|
|
|
gridData : [], // array of grid coordinates corresponding to the data points; |
|
// normally jqPlot will calculate this for you. |
|
|
|
axesDefaults: { |
|
show: false, // whether or not to render the axis. Determined automatically. |
|
min: null, // minimum numerical value of the axis. Determined automatically. |
|
max: null, // maximum numerical value of the axis. Determined automatically. |
|
pad: 1.2, // a factor multiplied by the data range on the axis to give the |
|
// axis range so that data points don't fall on the edges of the axis. |
|
ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...] |
|
// array of ticks to use. Computed automatically. |
|
numberTicks: undefined, |
|
renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis, |
|
rendererOptions: {}, // options to pass to the renderer. LinearAxisRenderer |
|
// has no options, |
|
tickOptions: { |
|
mark: 'outside', // Where to put the tick mark on the axis |
|
// 'outside', 'inside' or 'cross' |
|
showMark: true, // whether or not to show the mark on the axis |
|
showGridline: true, // whether to draw a gridline (across the whole grid) at this tick |
|
isMinorTick: false, // whether this is a minor tick |
|
markSize: 4, // length the tick will extend beyond the grid in pixels. For |
|
// 'cross', length will be added above and below the grid boundary |
|
show: true, // whether to show the tick (mark and label) |
|
showLabel: true, // whether to show the text label at the tick |
|
prefix: '', // String to prepend to the tick label. |
|
// Prefix is prepended to the formatted tick label |
|
suffix: '', // String to append to the tick label. |
|
// Suffix is appended to the formatted tick label |
|
formatString: '', // format string to use with the axis tick formatter |
|
fontFamily: '', // css spec for the font-size css attribute |
|
fontSize: '', // css spec for the font-size css attribute |
|
textColor: '', // css spec for the color attribute |
|
escapeHTML: false // true to escape HTML entities in the label |
|
} |
|
showTicks: true, // whether or not to show the tick labels, |
|
showTickMarks: true, // whether or not to show the tick marks |
|
}, |
|
|
|
axes: { |
|
xaxis: { |
|
// same options as axesDefaults |
|
}, |
|
yaxis: { |
|
// same options as axesDefaults |
|
}, |
|
x2axis: { |
|
// same options as axesDefaults |
|
}, |
|
y2axis: { |
|
// same options as axesDefaults |
|
} |
|
}, |
|
|
|
seriesDefaults: { |
|
show: true, // whether to render the series. |
|
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'. |
|
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'. |
|
label: '', // label to use in the legend for this line. |
|
color: '', // CSS color spec to use for the line. Determined automatically. |
|
lineWidth: 2.5, // Width of the line in pixels. |
|
shadow: true, // show shadow or not. |
|
shadowAngle: 45, // angle (degrees) of the shadow, clockwise from x axis. |
|
shadowOffset: 1.25, // offset from the line of the shadow. |
|
shadowDepth: 3, // Number of strokes to make when drawing shadow. Each |
|
// stroke offset by shadowOffset from the last. |
|
shadowAlpha: 0.1, // Opacity of the shadow. |
|
showLine: true, // whether to render the line segments or not. |
|
showMarker: true, // render the data point markers or not. |
|
fill: false, // fill under the line, |
|
fillAndStroke: false, // stroke a line at top of fill area. |
|
fillColor: undefined, // custom fill color for filled lines (default is line color). |
|
fillAlpha: undefined, // custom alpha to apply to fillColor. |
|
renderer: $.jqplot.LineRenderer], // renderer used to draw the series. |
|
rendererOptions: {}, // options passed to the renderer. LineRenderer has no options. |
|
markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data |
|
// point markers. |
|
markerOptions: { |
|
show: true, // whether to show data point markers. |
|
style: 'filledCircle', // circle, diamond, square, filledCircle. |
|
// filledDiamond or filledSquare. |
|
lineWidth: 2, // width of the stroke drawing the marker. |
|
size: 9, // size (diameter, edge length, etc.) of the marker. |
|
color: '#666666' // color of marker, set to color of line by default. |
|
shadow: true, // whether to draw shadow on marker or not. |
|
shadowAngle: 45, // angle of the shadow. Clockwise from x axis. |
|
shadowOffset: 1, // offset from the line of the shadow, |
|
shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke |
|
// offset by shadowOffset from the last. |
|
shadowAlpha: 0.07 // Opacity of the shadow |
|
} |
|
}, |
|
|
|
series:[ |
|
{Each series has same options as seriesDefaults}, |
|
{You can override each series individually here} |
|
], |
|
|
|
legend: { |
|
show: false, |
|
location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w. |
|
xoffset: 12, // pixel offset of the legend box from the x (or x2) axis. |
|
yoffset: 12, // pixel offset of the legend box from the y (or y2) axis. |
|
}, |
|
|
|
grid: { |
|
drawGridLines: true, // whether to draw lines across the grid or not. |
|
gridLineColor: '#cccccc' // Color of the grid lines. |
|
background: '#fffdf6', // CSS color spec for background color of grid. |
|
borderColor: '#999999', // CSS color spec for border around grid. |
|
borderWidth: 2.0, // pixel width of border around grid. |
|
shadow: true, // draw a shadow for grid. |
|
shadowAngle: 45, // angle of the shadow. Clockwise from x axis. |
|
shadowOffset: 1.5, // offset from the line of the shadow. |
|
shadowWidth: 3, // width of the stroke for the shadow. |
|
shadowDepth: 3, // Number of strokes to make when drawing shadow. |
|
// Each stroke offset by shadowOffset from the last. |
|
shadowAlpha: 0.07 // Opacity of the shadow |
|
renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. |
|
rendererOptions: {} // options to pass to the renderer. Note, the default |
|
// CanvasGridRenderer takes no additional options. |
|
}, |
|
|
|
// Size of the grid containing the plot. |
|
gridDimensions: { |
|
height: null, |
|
width: null |
|
}, |
|
|
|
// Padding to apply around the grid containing the plot. |
|
gridPadding: { |
|
top: null, |
|
bottom: null, |
|
left: null, |
|
right: null |
|
}, |
|
|
|
noDataIndicator : object, // For setting up a mock plot with a data loading indicator if |
|
// no data is specified. Must have .show=true, .axes, and a |
|
// .indicator string that will be displayed. |
|
|
|
// Plugin and renderer options. |
|
|
|
// BarRenderer. |
|
// With BarRenderer, you can specify additional options in the rendererOptions object |
|
// on the series or on the seriesDefaults object. Note, some options are re-specified |
|
// (like shadowDepth) to override lineRenderer defaults from which BarRenderer inherits. |
|
|
|
seriesDefaults: { |
|
rendererOptions: { |
|
barPadding: 8, // number of pixels between adjacent bars in the same |
|
// group (same category or bin). |
|
barMargin: 10, // number of pixels between adjacent groups of bars. |
|
barDirection: 'vertical', // vertical or horizontal. |
|
barWidth: null, // width of the bars. null to calculate automatically. |
|
shadowOffset: 2, // offset from the bar edge to stroke the shadow. |
|
shadowDepth: 5, // number of strokes to make for the shadow. |
|
shadowAlpha: 0.8, // transparency of the shadow. |
|
} |
|
}, |
|
|
|
// Cursor |
|
// Options are passed to the cursor plugin through the "cursor" object at the top |
|
// level of the options object. |
|
|
|
cursor: { |
|
style: 'crosshair', // A CSS spec for the cursor type to change the |
|
// cursor to when over plot. |
|
show: true, |
|
showTooltip: true, // show a tooltip showing cursor position. |
|
followMouse: false, // whether tooltip should follow the mouse or be stationary. |
|
tooltipLocation: 'se', // location of the tooltip either relative to the mouse |
|
// (followMouse=true) or relative to the plot. One of |
|
// the compass directions, n, ne, e, se, etc. |
|
tooltipOffset: 6, // pixel offset of the tooltip from the mouse or the axes. |
|
showTooltipGridPosition: false, // show the grid pixel coordinates of the mouse |
|
// in the tooltip. |
|
showTooltipUnitPosition: true, // show the coordinates in data units of the mouse |
|
// in the tooltip. |
|
tooltipFormatString: '%.4P', // sprintf style format string for tooltip values. |
|
useAxesFormatters: true, // whether to use the same formatter and formatStrings |
|
// as used by the axes, or to use the formatString |
|
// specified on the cursor with sprintf. |
|
tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like: |
|
// [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes |
|
// combinations with for the series in the plot are shown. |
|
|
|
}, |
|
|
|
// Dragable |
|
// Dragable options are specified with the "dragable" object at the top level |
|
// of the options object. |
|
// (Note that 'dragable' is the name and spelling used by the plugin, even though |
|
// the correct word is 'draggable'.) |
|
|
|
dragable: { |
|
color: undefined, // custom color to use for the dragged point and dragged line |
|
// section. default will use a transparent variant of the line color. |
|
constrainTo: 'none', // Constrain dragging motion to an axis: 'x', 'y', or 'none'. |
|
}, |
|
|
|
// Highlighter |
|
// Highlighter options are specified with the "highlighter" object at the top level |
|
// of the options object. |
|
|
|
highlighter: { |
|
lineWidthAdjust: 2.5, // pixels to add to the size line stroking the data point marker |
|
// when showing highlight. Only affects non filled data point markers. |
|
sizeAdjust: 5, // pixels to add to the size of filled markers when drawing highlight. |
|
showTooltip: true, // show a tooltip with data point values. |
|
tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw. |
|
fadeTooltip: true, // use fade effect to show/hide tooltip. |
|
tooltipFadeSpeed: "fast"// slow, def, fast, or a number of milliseconds. |
|
tooltipOffset: 2, // pixel offset of tooltip from the highlight. |
|
tooltipAxes: 'both', // which axis values to display in the tooltip, x, y or both. |
|
tooltipSeparator: ', ' // separator between values in the tooltip. |
|
useAxesFormatters: true // use the same format string and formatters as used in the axes to |
|
// display values in the tooltip. |
|
tooltipFormatString: '%.5P' // sprintf format string for the tooltip. only used if |
|
// useAxesFormatters is false. Will use sprintf formatter with |
|
// this string, not the axes formatters. |
|
}, |
|
|
|
// LogAxisRenderer |
|
// LogAxisRenderer add 2 options to the axes object. These options are specified directly on |
|
// the axes or axesDefaults object. |
|
|
|
axesDefaults: { |
|
base: 10, // the logarithmic base. |
|
tickDistribution: 'even', // 'even' or 'power'. 'even' will produce ticks with even visual |
|
// (pixel) spacing on the axis. 'power' will produce ticks spaced by |
|
// increasing powers of the log base. |
|
}, |
|
|
|
// PieRenderer |
|
// PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object. |
|
|
|
seriesDefaults: { |
|
rendererOptions: { |
|
diameter: undefined, // diameter of pie, auto computed by default. |
|
padding: 20, // padding between pie and neighboring legend or plot margin. |
|
sliceMargin: 0, // gap between slices. |
|
fill: true, // render solid (filled) slices. |
|
shadowOffset: 2, // offset of the shadow from the chart. |
|
shadowDepth: 5, // Number of strokes to make when drawing shadow. Each stroke is |
|
// offset by shadowOffset from the last. |
|
shadowAlpha: 0.07 // Opacity of the shadow |
|
} |
|
}, |
|
|
|
// Trendline |
|
// Trendline takes options on the trendline object of the series or seriesDefaults object. |
|
|
|
seriesDefaults: { |
|
trendline: { |
|
show: true, // show the trend line |
|
color: '#666666', // CSS color spec for the trend line. |
|
label: '', // label for the trend line. |
|
type: 'linear', // 'linear', 'exponential' or 'exp' |
|
shadow: true, // show the trend line shadow. |
|
lineWidth: 1.5, // width of the trend line. |
|
shadowAngle: 45, // angle of the shadow. Clockwise from x axis. |
|
shadowOffset: 1.5, // offset from the line of the shadow. |
|
shadowDepth: 3, // Number of strokes to make when drawing shadow. |
|
// Each stroke offset by shadowOffset from the last. |
|
shadowAlpha: 0.07 // Opacity of the shadow |
|
} |
|
} |
|
} |
|
}}} |
|
|
|
|
|
Options to be described: |
|
|
|
lineRenderer: |
|
.markerOptions? |
|
bands |
|
fill |
|
fillAndStroke |
|
fillStyle |
|
highlightColor |
|
highlightMouseDown |
|
highlightMouseOver |
|
shadow |
|
shadowOffset |
|
showLine |
|
|
|
shadowRenderer: |
|
alpha |
|
closePath |
|
depth |
|
fill |
|
fillRect |
|
fillStyle |
|
isarc |
|
lineCap |
|
lineJoin |
|
linePattern |
|
lineWidth |
|
offset |
|
strokeStyle |
|
|
|
shapeRenderer: |
|
clearRect |
|
closePath |
|
fill |
|
fillRect |
|
fillStyle |
|
isarc |
|
lineCap |
|
lineJoin |
|
linePattern |
|
lineWidth |
|
strokeRect |
|
strokeStyle |
|
|
|
jqplot.effects: |
|
options.duration ; options.complete |
|
|
|
LinearAxisRenderer: |
|
.min, .max (?) |
|
numberTicks |
|
tickInternal |
|
forceTickAt0 : false, // If true, a tick will always be drawn at 0. |
|
|
|
markerRenderer: |
|
color |
|
fillStyle |
|
strokeStyle |
|
|
|
canvasGridRenderer: |
|
lineWidth |
|
|
|
|