1 | Title: jqPlot Options |
---|
2 | |
---|
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.** |
---|
6 | |
---|
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 | described using the following convention: |
---|
10 | |
---|
11 | {{{ |
---|
12 | property: default, // notes |
---|
13 | }}} |
---|
14 | |
---|
15 | This document is not complete! Not all options are shown! |
---|
16 | Further information about the options can be found in the online API |
---|
17 | documentation. For details on how the options relate to the API documentation, |
---|
18 | see the <Options Tutorial> in the optionsTutorial.txt file. |
---|
19 | |
---|
20 | {{{ |
---|
21 | options = |
---|
22 | { |
---|
23 | seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", |
---|
24 | "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // colors that will |
---|
25 | // be assigned to the series. If there are more series than colors, colors |
---|
26 | // will wrap around and start at the beginning again. |
---|
27 | |
---|
28 | // when fillToZero is enabled, this sets the colors to use for portions of the line below zero. |
---|
29 | negativeSeriesColors: [ "#498991", "#C08840", "#9F9274", "#546D61", "#646C4A", "#6F6621", |
---|
30 | "#6E3F5F", "#4F64B0", "#A89050", "#C45923", "#187399", "#945381", |
---|
31 | "#959E5C", "#C7AF7B", "#478396", "#907294"], |
---|
32 | |
---|
33 | sortData : true, // if true, will sort the data passed in by the user. |
---|
34 | stackSeries: false, // if true, will create a stack plot. |
---|
35 | // Currently supported by line and bar graphs. |
---|
36 | |
---|
37 | title: '', // Title for the plot. Can also be specified as an object like: |
---|
38 | |
---|
39 | title: { |
---|
40 | text: '', // title for the plot, |
---|
41 | show: true, |
---|
42 | }, |
---|
43 | |
---|
44 | animate : false, // if true, the series will be animated on initial drawing. |
---|
45 | // This support is renderer-dependent; the renderer must support animation. |
---|
46 | animateReplot : false, // if true, the series will be animated after every replot() call. |
---|
47 | // Use with caution! Replots can happen very frequently under |
---|
48 | // certain circumstances (e.g. resizing, dragging points) and |
---|
49 | // animation in these situations can cause problems. |
---|
50 | captureRightClick : false, // if true, right-click events are intercepted and a jqplotRightClick |
---|
51 | // event will be fired. This will also block the context menu. |
---|
52 | dataRenderer : undefined, // A callable which can be used to preprocess data passed into the plot. |
---|
53 | // Will be called with 3 arguments: the plot data, a reference to the plot, |
---|
54 | // and the value of dataRendererOptions. |
---|
55 | |
---|
56 | dataRendererOptions : undefined, // Options that will be passed to the dataRenderer, |
---|
57 | // if that option is supplied. Can be of any type. |
---|
58 | |
---|
59 | gridData : [], // array of grid coordinates corresponding to the data points; |
---|
60 | // normally jqPlot will calculate this for you. |
---|
61 | |
---|
62 | axesDefaults: { |
---|
63 | show: false, // whether or not to render the axis. Determined automatically. |
---|
64 | min: null, // minimum numerical value of the axis. Determined automatically. |
---|
65 | max: null, // maximum numerical value of the axis. Determined automatically. |
---|
66 | pad: 1.2, // a factor multiplied by the data range on the axis to give the |
---|
67 | // axis range so that data points don't fall on the edges of the axis. |
---|
68 | ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...] |
---|
69 | // array of ticks to use. Computed automatically. |
---|
70 | numberTicks: undefined, |
---|
71 | renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis, |
---|
72 | rendererOptions: {}, // options to pass to the renderer. LinearAxisRenderer |
---|
73 | // has no options, |
---|
74 | tickOptions: { |
---|
75 | mark: 'outside', // Where to put the tick mark on the axis |
---|
76 | // 'outside', 'inside' or 'cross' |
---|
77 | showMark: true, // whether or not to show the mark on the axis |
---|
78 | showGridline: true, // whether to draw a gridline (across the whole grid) at this tick |
---|
79 | isMinorTick: false, // whether this is a minor tick |
---|
80 | markSize: 4, // length the tick will extend beyond the grid in pixels. For |
---|
81 | // 'cross', length will be added above and below the grid boundary |
---|
82 | show: true, // whether to show the tick (mark and label) |
---|
83 | showLabel: true, // whether to show the text label at the tick |
---|
84 | prefix: '', // String to prepend to the tick label. |
---|
85 | // Prefix is prepended to the formatted tick label |
---|
86 | suffix: '', // String to append to the tick label. |
---|
87 | // Suffix is appended to the formatted tick label |
---|
88 | formatString: '', // format string to use with the axis tick formatter |
---|
89 | fontFamily: '', // css spec for the font-size css attribute |
---|
90 | fontSize: '', // css spec for the font-size css attribute |
---|
91 | textColor: '', // css spec for the color attribute |
---|
92 | escapeHTML: false // true to escape HTML entities in the label |
---|
93 | } |
---|
94 | showTicks: true, // whether or not to show the tick labels, |
---|
95 | showTickMarks: true, // whether or not to show the tick marks |
---|
96 | }, |
---|
97 | |
---|
98 | axes: { |
---|
99 | xaxis: { |
---|
100 | // same options as axesDefaults |
---|
101 | }, |
---|
102 | yaxis: { |
---|
103 | // same options as axesDefaults |
---|
104 | }, |
---|
105 | x2axis: { |
---|
106 | // same options as axesDefaults |
---|
107 | }, |
---|
108 | y2axis: { |
---|
109 | // same options as axesDefaults |
---|
110 | } |
---|
111 | }, |
---|
112 | |
---|
113 | seriesDefaults: { |
---|
114 | show: true, // whether to render the series. |
---|
115 | xaxis: 'xaxis', // either 'xaxis' or 'x2axis'. |
---|
116 | yaxis: 'yaxis', // either 'yaxis' or 'y2axis'. |
---|
117 | label: '', // label to use in the legend for this line. |
---|
118 | color: '', // CSS color spec to use for the line. Determined automatically. |
---|
119 | lineWidth: 2.5, // Width of the line in pixels. |
---|
120 | shadow: true, // show shadow or not. |
---|
121 | shadowAngle: 45, // angle (degrees) of the shadow, clockwise from x axis. |
---|
122 | shadowOffset: 1.25, // offset from the line of the shadow. |
---|
123 | shadowDepth: 3, // Number of strokes to make when drawing shadow. Each |
---|
124 | // stroke offset by shadowOffset from the last. |
---|
125 | shadowAlpha: 0.1, // Opacity of the shadow. |
---|
126 | showLine: true, // whether to render the line segments or not. |
---|
127 | showMarker: true, // render the data point markers or not. |
---|
128 | fill: false, // fill under the line, |
---|
129 | fillAndStroke: false, // stroke a line at top of fill area. |
---|
130 | fillColor: undefined, // custom fill color for filled lines (default is line color). |
---|
131 | fillAlpha: undefined, // custom alpha to apply to fillColor. |
---|
132 | renderer: $.jqplot.LineRenderer], // renderer used to draw the series. |
---|
133 | rendererOptions: {}, // options passed to the renderer. LineRenderer has no options. |
---|
134 | markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data |
---|
135 | // point markers. |
---|
136 | markerOptions: { |
---|
137 | show: true, // whether to show data point markers. |
---|
138 | style: 'filledCircle', // circle, diamond, square, filledCircle. |
---|
139 | // filledDiamond or filledSquare. |
---|
140 | lineWidth: 2, // width of the stroke drawing the marker. |
---|
141 | size: 9, // size (diameter, edge length, etc.) of the marker. |
---|
142 | color: '#666666' // color of marker, set to color of line by default. |
---|
143 | shadow: true, // whether to draw shadow on marker or not. |
---|
144 | shadowAngle: 45, // angle of the shadow. Clockwise from x axis. |
---|
145 | shadowOffset: 1, // offset from the line of the shadow, |
---|
146 | shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke |
---|
147 | // offset by shadowOffset from the last. |
---|
148 | shadowAlpha: 0.07 // Opacity of the shadow |
---|
149 | } |
---|
150 | }, |
---|
151 | |
---|
152 | series:[ |
---|
153 | {Each series has same options as seriesDefaults}, |
---|
154 | {You can override each series individually here} |
---|
155 | ], |
---|
156 | |
---|
157 | legend: { |
---|
158 | show: false, |
---|
159 | location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w. |
---|
160 | xoffset: 12, // pixel offset of the legend box from the x (or x2) axis. |
---|
161 | yoffset: 12, // pixel offset of the legend box from the y (or y2) axis. |
---|
162 | }, |
---|
163 | |
---|
164 | grid: { |
---|
165 | drawGridLines: true, // whether to draw lines across the grid or not. |
---|
166 | gridLineColor: '#cccccc' // Color of the grid lines. |
---|
167 | background: '#fffdf6', // CSS color spec for background color of grid. |
---|
168 | borderColor: '#999999', // CSS color spec for border around grid. |
---|
169 | borderWidth: 2.0, // pixel width of border around grid. |
---|
170 | shadow: true, // draw a shadow for grid. |
---|
171 | shadowAngle: 45, // angle of the shadow. Clockwise from x axis. |
---|
172 | shadowOffset: 1.5, // offset from the line of the shadow. |
---|
173 | shadowWidth: 3, // width of the stroke for the shadow. |
---|
174 | shadowDepth: 3, // Number of strokes to make when drawing shadow. |
---|
175 | // Each stroke offset by shadowOffset from the last. |
---|
176 | shadowAlpha: 0.07 // Opacity of the shadow |
---|
177 | renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. |
---|
178 | rendererOptions: {} // options to pass to the renderer. Note, the default |
---|
179 | // CanvasGridRenderer takes no additional options. |
---|
180 | }, |
---|
181 | |
---|
182 | // Size of the grid containing the plot. |
---|
183 | gridDimensions: { |
---|
184 | height: null, |
---|
185 | width: null |
---|
186 | }, |
---|
187 | |
---|
188 | // Padding to apply around the grid containing the plot. |
---|
189 | gridPadding: { |
---|
190 | top: null, |
---|
191 | bottom: null, |
---|
192 | left: null, |
---|
193 | right: null |
---|
194 | }, |
---|
195 | |
---|
196 | noDataIndicator : object, // For setting up a mock plot with a data loading indicator if |
---|
197 | // no data is specified. Must have .show=true, .axes, and a |
---|
198 | // .indicator string that will be displayed. |
---|
199 | |
---|
200 | // Plugin and renderer options. |
---|
201 | |
---|
202 | // BarRenderer. |
---|
203 | // With BarRenderer, you can specify additional options in the rendererOptions object |
---|
204 | // on the series or on the seriesDefaults object. Note, some options are re-specified |
---|
205 | // (like shadowDepth) to override lineRenderer defaults from which BarRenderer inherits. |
---|
206 | |
---|
207 | seriesDefaults: { |
---|
208 | rendererOptions: { |
---|
209 | barPadding: 8, // number of pixels between adjacent bars in the same |
---|
210 | // group (same category or bin). |
---|
211 | barMargin: 10, // number of pixels between adjacent groups of bars. |
---|
212 | barDirection: 'vertical', // vertical or horizontal. |
---|
213 | barWidth: null, // width of the bars. null to calculate automatically. |
---|
214 | shadowOffset: 2, // offset from the bar edge to stroke the shadow. |
---|
215 | shadowDepth: 5, // number of strokes to make for the shadow. |
---|
216 | shadowAlpha: 0.8, // transparency of the shadow. |
---|
217 | } |
---|
218 | }, |
---|
219 | |
---|
220 | // Cursor |
---|
221 | // Options are passed to the cursor plugin through the "cursor" object at the top |
---|
222 | // level of the options object. |
---|
223 | |
---|
224 | cursor: { |
---|
225 | style: 'crosshair', // A CSS spec for the cursor type to change the |
---|
226 | // cursor to when over plot. |
---|
227 | show: true, |
---|
228 | showTooltip: true, // show a tooltip showing cursor position. |
---|
229 | followMouse: false, // whether tooltip should follow the mouse or be stationary. |
---|
230 | tooltipLocation: 'se', // location of the tooltip either relative to the mouse |
---|
231 | // (followMouse=true) or relative to the plot. One of |
---|
232 | // the compass directions, n, ne, e, se, etc. |
---|
233 | tooltipOffset: 6, // pixel offset of the tooltip from the mouse or the axes. |
---|
234 | showTooltipGridPosition: false, // show the grid pixel coordinates of the mouse |
---|
235 | // in the tooltip. |
---|
236 | showTooltipUnitPosition: true, // show the coordinates in data units of the mouse |
---|
237 | // in the tooltip. |
---|
238 | tooltipFormatString: '%.4P', // sprintf style format string for tooltip values. |
---|
239 | useAxesFormatters: true, // whether to use the same formatter and formatStrings |
---|
240 | // as used by the axes, or to use the formatString |
---|
241 | // specified on the cursor with sprintf. |
---|
242 | tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like: |
---|
243 | // [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes |
---|
244 | // combinations with for the series in the plot are shown. |
---|
245 | |
---|
246 | }, |
---|
247 | |
---|
248 | // Dragable |
---|
249 | // Dragable options are specified with the "dragable" object at the top level |
---|
250 | // of the options object. |
---|
251 | // (Note that 'dragable' is the name and spelling used by the plugin, even though |
---|
252 | // the correct word is 'draggable'.) |
---|
253 | |
---|
254 | dragable: { |
---|
255 | color: undefined, // custom color to use for the dragged point and dragged line |
---|
256 | // section. default will use a transparent variant of the line color. |
---|
257 | constrainTo: 'none', // Constrain dragging motion to an axis: 'x', 'y', or 'none'. |
---|
258 | }, |
---|
259 | |
---|
260 | // Highlighter |
---|
261 | // Highlighter options are specified with the "highlighter" object at the top level |
---|
262 | // of the options object. |
---|
263 | |
---|
264 | highlighter: { |
---|
265 | lineWidthAdjust: 2.5, // pixels to add to the size line stroking the data point marker |
---|
266 | // when showing highlight. Only affects non filled data point markers. |
---|
267 | sizeAdjust: 5, // pixels to add to the size of filled markers when drawing highlight. |
---|
268 | showTooltip: true, // show a tooltip with data point values. |
---|
269 | tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw. |
---|
270 | fadeTooltip: true, // use fade effect to show/hide tooltip. |
---|
271 | tooltipFadeSpeed: "fast"// slow, def, fast, or a number of milliseconds. |
---|
272 | tooltipOffset: 2, // pixel offset of tooltip from the highlight. |
---|
273 | tooltipAxes: 'both', // which axis values to display in the tooltip, x, y or both. |
---|
274 | tooltipSeparator: ', ' // separator between values in the tooltip. |
---|
275 | useAxesFormatters: true // use the same format string and formatters as used in the axes to |
---|
276 | // display values in the tooltip. |
---|
277 | tooltipFormatString: '%.5P' // sprintf format string for the tooltip. only used if |
---|
278 | // useAxesFormatters is false. Will use sprintf formatter with |
---|
279 | // this string, not the axes formatters. |
---|
280 | }, |
---|
281 | |
---|
282 | // LogAxisRenderer |
---|
283 | // LogAxisRenderer add 2 options to the axes object. These options are specified directly on |
---|
284 | // the axes or axesDefaults object. |
---|
285 | |
---|
286 | axesDefaults: { |
---|
287 | base: 10, // the logarithmic base. |
---|
288 | tickDistribution: 'even', // 'even' or 'power'. 'even' will produce ticks with even visual |
---|
289 | // (pixel) spacing on the axis. 'power' will produce ticks spaced by |
---|
290 | // increasing powers of the log base. |
---|
291 | }, |
---|
292 | |
---|
293 | // PieRenderer |
---|
294 | // PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object. |
---|
295 | |
---|
296 | seriesDefaults: { |
---|
297 | rendererOptions: { |
---|
298 | diameter: undefined, // diameter of pie, auto computed by default. |
---|
299 | padding: 20, // padding between pie and neighboring legend or plot margin. |
---|
300 | sliceMargin: 0, // gap between slices. |
---|
301 | fill: true, // render solid (filled) slices. |
---|
302 | shadowOffset: 2, // offset of the shadow from the chart. |
---|
303 | shadowDepth: 5, // Number of strokes to make when drawing shadow. Each stroke is |
---|
304 | // offset by shadowOffset from the last. |
---|
305 | shadowAlpha: 0.07 // Opacity of the shadow |
---|
306 | } |
---|
307 | }, |
---|
308 | |
---|
309 | // Trendline |
---|
310 | // Trendline takes options on the trendline object of the series or seriesDefaults object. |
---|
311 | |
---|
312 | seriesDefaults: { |
---|
313 | trendline: { |
---|
314 | show: true, // show the trend line |
---|
315 | color: '#666666', // CSS color spec for the trend line. |
---|
316 | label: '', // label for the trend line. |
---|
317 | type: 'linear', // 'linear', 'exponential' or 'exp' |
---|
318 | shadow: true, // show the trend line shadow. |
---|
319 | lineWidth: 1.5, // width of the trend line. |
---|
320 | shadowAngle: 45, // angle of the shadow. Clockwise from x axis. |
---|
321 | shadowOffset: 1.5, // offset from the line of the shadow. |
---|
322 | shadowDepth: 3, // Number of strokes to make when drawing shadow. |
---|
323 | // Each stroke offset by shadowOffset from the last. |
---|
324 | shadowAlpha: 0.07 // Opacity of the shadow |
---|
325 | } |
---|
326 | } |
---|
327 | } |
---|
328 | }}} |
---|
329 | |
---|
330 | |
---|
331 | Options to be described: |
---|
332 | |
---|
333 | lineRenderer: |
---|
334 | .markerOptions? |
---|
335 | bands |
---|
336 | fill |
---|
337 | fillAndStroke |
---|
338 | fillStyle |
---|
339 | highlightColor |
---|
340 | highlightMouseDown |
---|
341 | highlightMouseOver |
---|
342 | shadow |
---|
343 | shadowOffset |
---|
344 | showLine |
---|
345 | |
---|
346 | shadowRenderer: |
---|
347 | alpha |
---|
348 | closePath |
---|
349 | depth |
---|
350 | fill |
---|
351 | fillRect |
---|
352 | fillStyle |
---|
353 | isarc |
---|
354 | lineCap |
---|
355 | lineJoin |
---|
356 | linePattern |
---|
357 | lineWidth |
---|
358 | offset |
---|
359 | strokeStyle |
---|
360 | |
---|
361 | shapeRenderer: |
---|
362 | clearRect |
---|
363 | closePath |
---|
364 | fill |
---|
365 | fillRect |
---|
366 | fillStyle |
---|
367 | isarc |
---|
368 | lineCap |
---|
369 | lineJoin |
---|
370 | linePattern |
---|
371 | lineWidth |
---|
372 | strokeRect |
---|
373 | strokeStyle |
---|
374 | |
---|
375 | jqplot.effects: |
---|
376 | options.duration ; options.complete |
---|
377 | |
---|
378 | LinearAxisRenderer: |
---|
379 | .min, .max (?) |
---|
380 | numberTicks |
---|
381 | tickInternal |
---|
382 | forceTickAt0 : false, // If true, a tick will always be drawn at 0. |
---|
383 | |
---|
384 | markerRenderer: |
---|
385 | color |
---|
386 | fillStyle |
---|
387 | strokeStyle |
---|
388 | |
---|
389 | canvasGridRenderer: |
---|
390 | lineWidth |
---|
391 | |
---|