| blob | d2d1e68ccfe3c9ab326c054892bc10ed73999b06 |
1 Title: jqPlot Options
3 **This document is out of date. While the options described here should still be
4 relavent and valid, it has not been updated for many new options. Sorry for
5 this inconvenience.**
7 This document describes the options available to jqPlot. These are set with the
8 third argument to the $.jqplot('target', data, options) function. Options are
9 using the following convention:
11 {{{
12 property: default, // notes
13 }}}
15 This document is not complete! Not all options are shown! Also, Options marked
16 with ** in the notes are post 0.7.1 additions. They will be available in the next
17 release. Further information about the options can be found in the online API
18 documentation. For details on how the options relate to the API documentation,
19 see the <Options Tutorial> in the optionsTutorial.txt file.
21 {{{
22 options =
23 {
24 seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
25 "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // colors that will
26 // be assigned to the series. If there are more series than colors, colors
27 // will wrap around and start at the beginning again.
29 stackSeries: false, // if true, will create a stack plot.
30 // Currently supported by line and bar graphs.
32 title: '', // Title for the plot. Can also be specified as an object like:
34 title: {
35 text: '', // title for the plot,
36 show: true,
37 },
39 axesDefaults: {
40 show: false, // wether or not to renderer the axis. Determined automatically.
41 min: null, // minimum numerical value of the axis. Determined automatically.
42 max: null, // maximum numverical value of the axis. Determined automatically.
43 pad: 1.2, // a factor multiplied by the data range on the axis to give the
44 // axis range so that data points don't fall on the edges of the axis.
45 ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
46 // array of ticks to use. Computed automatically.
47 numberTicks: undefined,
48 renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis,
49 rendererOptions: {}, // options to pass to the renderer. LinearAxisRenderer
50 // has no options,
51 tickOptions: {
52 mark: 'outside', // Where to put the tick mark on the axis
53 // 'outside', 'inside' or 'cross',
54 showMark: true,
55 showGridline: true, // wether to draw a gridline (across the whole grid) at this tick,
56 markSize: 4, // length the tick will extend beyond the grid in pixels. For
57 // 'cross', length will be added above and below the grid boundary,
58 show: true, // wether to show the tick (mark and label),
59 showLabel: true, // wether to show the text label at the tick,
60 formatString: '', // format string to use with the axis tick formatter
61 }
62 showTicks: true, // wether or not to show the tick labels,
63 showTickMarks: true, // wether or not to show the tick marks
64 },
66 axes: {
67 xaxis: {
68 // same options as axesDefaults
69 },
70 yaxis: {
71 // same options as axesDefaults
72 },
73 x2axis: {
74 // same options as axesDefaults
75 },
76 y2axis: {
77 // same options as axesDefaults
78 }
79 },
81 seriesDefaults: {
82 show: true, // wether to render the series.
83 xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
84 yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
85 label: '', // label to use in the legend for this line.
86 color: '', // CSS color spec to use for the line. Determined automatically.
87 lineWidth: 2.5, // Width of the line in pixels.
88 shadow: true, // show shadow or not.
89 shadowAngle: 45, // angle (degrees) of the shadow, clockwise from x axis.
90 shadowOffset: 1.25, // offset from the line of the shadow.
91 shadowDepth: 3, // Number of strokes to make when drawing shadow. Each
92 // stroke offset by shadowOffset from the last.
93 shadowAlpha: 0.1, // Opacity of the shadow.
94 showLine: true, // whether to render the line segments or not.
95 showMarker: true, // render the data point markers or not.
96 fill: false, // fill under the line,
97 fillAndStroke: false, // **stroke a line at top of fill area.
98 fillColor: undefined, // **custom fill color for filled lines (default is line color).
99 fillAlpha: undefined, // **custom alpha to apply to fillColor.
100 renderer: $.jqplot.LineRenderer], // renderer used to draw the series.
101 rendererOptions: {}, // options passed to the renderer. LineRenderer has no options.
102 markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
103 // point markers.
104 markerOptions: {
105 show: true, // wether to show data point markers.
106 style: 'filledCircle', // circle, diamond, square, filledCircle.
107 // filledDiamond or filledSquare.
108 lineWidth: 2, // width of the stroke drawing the marker.
109 size: 9, // size (diameter, edge length, etc.) of the marker.
110 color: '#666666' // color of marker, set to color of line by default.
111 shadow: true, // wether to draw shadow on marker or not.
112 shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
113 shadowOffset: 1, // offset from the line of the shadow,
114 shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke
115 // offset by shadowOffset from the last.
116 shadowAlpha: 0.07 // Opacity of the shadow
117 }
118 },
120 series:[
121 {Each series has same options as seriesDefaults},
122 {You can override each series individually here}
123 ],
125 legend: {
126 show: false,
127 location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w.
128 xoffset: 12, // pixel offset of the legend box from the x (or x2) axis.
129 yoffset: 12, // pixel offset of the legend box from the y (or y2) axis.
130 },
132 grid: {
133 drawGridLines: true, // wether to draw lines across the grid or not.
134 gridLineColor: '#cccccc' // **Color of the grid lines.
135 background: '#fffdf6', // CSS color spec for background color of grid.
136 borderColor: '#999999', // CSS color spec for border around grid.
137 borderWidth: 2.0, // pixel width of border around grid.
138 shadow: true, // draw a shadow for grid.
139 shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
140 shadowOffset: 1.5, // offset from the line of the shadow.
141 shadowWidth: 3, // width of the stroke for the shadow.
142 shadowDepth: 3, // Number of strokes to make when drawing shadow.
143 // Each stroke offset by shadowOffset from the last.
144 shadowAlpha: 0.07 // Opacity of the shadow
145 renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
146 rendererOptions: {} // options to pass to the renderer. Note, the default
147 // CanvasGridRenderer takes no additional options.
148 },
150 // Plugin and renderer options.
152 // BarRenderer.
153 // With BarRenderer, you can specify additional options in the rendererOptions object
154 // on the series or on the seriesDefaults object. Note, some options are respecified
155 // (like shadowDepth) to override lineRenderer defaults from which BarRenderer inherits.
157 seriesDefaults: {
158 rendererOptions: {
159 barPadding: 8, // number of pixels between adjacent bars in the same
160 // group (same category or bin).
161 barMargin: 10, // number of pixels between adjacent groups of bars.
162 barDirection: 'vertical', // vertical or horizontal.
163 barWidth: null, // width of the bars. null to calculate automatically.
164 shadowOffset: 2, // offset from the bar edge to stroke the shadow.
165 shadowDepth: 5, // nuber of strokes to make for the shadow.
166 shadowAlpha: 0.8, // transparency of the shadow.
167 }
168 },
170 // Cursor
171 // Options are passed to the cursor plugin through the "cursor" object at the top
172 // level of the options object.
174 cursor: {
175 style: 'crosshair', // A CSS spec for the cursor type to change the
176 // cursor to when over plot.
177 show: true,
178 showTooltip: true, // show a tooltip showing cursor position.
179 followMouse: false, // wether tooltip should follow the mouse or be stationary.
180 tooltipLocation: 'se', // location of the tooltip either relative to the mouse
181 // (followMouse=true) or relative to the plot. One of
182 // the compass directions, n, ne, e, se, etc.
183 tooltipOffset: 6, // pixel offset of the tooltip from the mouse or the axes.
184 showTooltipGridPosition: false, // show the grid pixel coordinates of the mouse
185 // in the tooltip.
186 showTooltipUnitPosition: true, // show the coordinates in data units of the mouse
187 // in the tooltip.
188 tooltipFormatString: '%.4P', // sprintf style format string for tooltip values.
189 useAxesFormatters: true, // wether to use the same formatter and formatStrings
190 // as used by the axes, or to use the formatString
191 // specified on the cursor with sprintf.
192 tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like:
193 // [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes
194 // combinations with for the series in the plot are shown.
196 },
198 // Dragable
199 // Dragable options are specified with the "dragable" object at the top level
200 // of the options object.
202 dragable: {
203 color: undefined, // custom color to use for the dragged point and dragged line
204 // section. default will use a transparent variant of the line color.
205 constrainTo: 'none', // Constrain dragging motion to an axis: 'x', 'y', or 'none'.
206 },
208 // Highlighter
209 // Highlighter options are specified with the "highlighter" object at the top level
210 // of the options object.
212 highlighter: {
213 lineWidthAdjust: 2.5, // pixels to add to the size line stroking the data point marker
214 // when showing highlight. Only affects non filled data point markers.
215 sizeAdjust: 5, // pixels to add to the size of filled markers when drawing highlight.
216 showTooltip: true, // show a tooltip with data point values.
217 tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw.
218 fadeTooltip: true, // use fade effect to show/hide tooltip.
219 tooltipFadeSpeed: "fast"// slow, def, fast, or a number of milliseconds.
220 tooltipOffset: 2, // pixel offset of tooltip from the highlight.
221 tooltipAxes: 'both', // which axis values to display in the tooltip, x, y or both.
222 tooltipSeparator: ', ' // separator between values in the tooltip.
223 useAxesFormatters: true // use the same format string and formatters as used in the axes to
224 // display values in the tooltip.
225 tooltipFormatString: '%.5P' // sprintf format string for the tooltip. only used if
226 // useAxesFormatters is false. Will use sprintf formatter with
227 // this string, not the axes formatters.
228 },
230 // LogAxisRenderer
231 // LogAxisRenderer add 2 options to the axes object. These options are specified directly on
232 // the axes or axesDefaults object.
234 axesDefaults: {
235 base: 10, // the logarithmic base.
236 tickDistribution: 'even', // 'even' or 'power'. 'even' will produce with even visiual (pixel)
237 // spacing on the axis. 'power' will produce ticks spaced by
238 // increasing powers of the log base.
239 },
241 // PieRenderer
242 // PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object.
244 seriesDefaults: {
245 rendererOptions: {
246 diameter: undefined, // diameter of pie, auto computed by default.
247 padding: 20, // padding between pie and neighboring legend or plot margin.
248 sliceMargin: 0, // gap between slices.
249 fill: true, // render solid (filled) slices.
250 shadowOffset: 2, // offset of the shadow from the chart.
251 shadowDepth: 5, // Number of strokes to make when drawing shadow. Each stroke
252 // offset by shadowOffset from the last.
253 shadowAlpha: 0.07 // Opacity of the shadow
254 }
255 },
257 // Trendline
258 // Trendline takes options on the trendline object of the series or seriesDefaults object.
260 seriesDefaults: {
261 trendline: {
262 show: true, // show the trend line
263 color: '#666666', // CSS color spec for the trend line.
264 label: '', // label for the trend line.
265 type: 'linear', // 'linear', 'exponential' or 'exp'
266 shadow: true, // show the trend line shadow.
267 lineWidth: 1.5, // width of the trend line.
268 shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
269 shadowOffset: 1.5, // offset from the line of the shadow.
270 shadowDepth: 3, // Number of strokes to make when drawing shadow.
271 // Each stroke offset by shadowOffset from the last.
272 shadowAlpha: 0.07 // Opacity of the shadow
273 }
274 }
275 }
276 }}}