forked from extern/egroupware
276 lines
14 KiB
Plaintext
276 lines
14 KiB
Plaintext
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
|
|
using the following convention:
|
|
|
|
{{{
|
|
property: default, // notes
|
|
}}}
|
|
|
|
This document is not complete! Not all options are shown! Also, Options marked
|
|
with ** in the notes are post 0.7.1 additions. They will be available in the next
|
|
release. 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.
|
|
|
|
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,
|
|
},
|
|
|
|
axesDefaults: {
|
|
show: false, // wether or not to renderer the axis. Determined automatically.
|
|
min: null, // minimum numerical value of the axis. Determined automatically.
|
|
max: null, // maximum numverical 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,
|
|
showGridline: true, // wether to draw a gridline (across the whole grid) at this 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, // wether to show the tick (mark and label),
|
|
showLabel: true, // wether to show the text label at the tick,
|
|
formatString: '', // format string to use with the axis tick formatter
|
|
}
|
|
showTicks: true, // wether or not to show the tick labels,
|
|
showTickMarks: true, // wether 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, // wether 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, // wether 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, // wether 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, // wether 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.
|
|
},
|
|
|
|
// 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 respecified
|
|
// (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, // nuber 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, // wether 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, // wether 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.
|
|
|
|
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 with even visiual (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
|
|
// 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
|
|
}
|
|
}
|
|
}
|
|
}}} |