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 | using the following convention: |
---|
10 | |
---|
11 | {{{ |
---|
12 | property: default, // notes |
---|
13 | }}} |
---|
14 | |
---|
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. |
---|
20 | |
---|
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. |
---|
28 | |
---|
29 | stackSeries: false, // if true, will create a stack plot. |
---|
30 | // Currently supported by line and bar graphs. |
---|
31 | |
---|
32 | title: '', // Title for the plot. Can also be specified as an object like: |
---|
33 | |
---|
34 | title: { |
---|
35 | text: '', // title for the plot, |
---|
36 | show: true, |
---|
37 | }, |
---|
38 | |
---|
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 | }, |
---|
65 | |
---|
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 | }, |
---|
80 | |
---|
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 | }, |
---|
119 | |
---|
120 | series:[ |
---|
121 | {Each series has same options as seriesDefaults}, |
---|
122 | {You can override each series individually here} |
---|
123 | ], |
---|
124 | |
---|
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 | }, |
---|
131 | |
---|
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 | }, |
---|
149 | |
---|
150 | // Plugin and renderer options. |
---|
151 | |
---|
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. |
---|
156 | |
---|
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 | }, |
---|
169 | |
---|
170 | // Cursor |
---|
171 | // Options are passed to the cursor plugin through the "cursor" object at the top |
---|
172 | // level of the options object. |
---|
173 | |
---|
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. |
---|
195 | |
---|
196 | }, |
---|
197 | |
---|
198 | // Dragable |
---|
199 | // Dragable options are specified with the "dragable" object at the top level |
---|
200 | // of the options object. |
---|
201 | |
---|
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 | }, |
---|
207 | |
---|
208 | // Highlighter |
---|
209 | // Highlighter options are specified with the "highlighter" object at the top level |
---|
210 | // of the options object. |
---|
211 | |
---|
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 | }, |
---|
229 | |
---|
230 | // LogAxisRenderer |
---|
231 | // LogAxisRenderer add 2 options to the axes object. These options are specified directly on |
---|
232 | // the axes or axesDefaults object. |
---|
233 | |
---|
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 | }, |
---|
240 | |
---|
241 | // PieRenderer |
---|
242 | // PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object. |
---|
243 | |
---|
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 | }, |
---|
256 | |
---|
257 | // Trendline |
---|
258 | // Trendline takes options on the trendline object of the series or seriesDefaults object. |
---|
259 | |
---|
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 | }}} |
---|