jqPlotOptions-txt.html
24.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><title>jqPlot Options</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad()"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>
<!-- Generated by Natural Docs, version 1.4 -->
<!-- http://www.naturaldocs.org -->
<!-- saved from url=(0026)http://www.naturaldocs.org -->
<div id=Content><div class="CSection"><div class=CTopic id=MainTopic><div class="CTitle logo"><div class="nav"><a class="nav" href="../../index.php"><span>></span>Home</a><a class="nav" href="../../tests/"><span>></span>Examples</a><a class="nav" href="../../docs/"><span>></span>Docs</a><a class="nav" href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>></span>Download</a><a class="nav" href="../../info.php"><span>></span>Info</a><a class="nav" href="../../donate.php"><span>></span>Donate</a></div><a name="jqPlot_Options"></a>jqPlot Options</div><div class=CBody><p><b>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.</b></p><p>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:</p><blockquote><pre>property: default, // notes</pre></blockquote><p>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 <a href="optionsTutorial-txt.html#Options_Tutorial" class=LSection id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">Options Tutorial</a> in the optionsTutorial.txt file.</p><blockquote><pre>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
}
}
}</pre></blockquote></div></div></div>
</div><!--Content-->
<div id=Footer>Copyright © 2009 - 2010 Chris Leonello · Updated November 12th, 2012 · <a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->
<div id=Menu><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Usage and Options</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="usage-txt.html">Usage</a></div></div><div class=MEntry><div class=MFile id=MSelected>jqPlot Options</div></div><div class=MEntry><div class=MFile><a href="optionsTutorial-txt.html">Options Tutorial</a></div></div><div class=MEntry><div class=MFile><a href="jqPlotCssStyling-txt.html">jqPlot CSS Customization</a></div></div><div class=MEntry><div class=MFile><a href="changes-txt.html">Change Log</a></div></div><div class=MEntry><div class=MLink><a href="../../tests/">Examples</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent4')">API Documentation</a><div class=MGroupContent id=MGroupContent4><div class=MEntry><div class=MFile><a href="jqplot-core-js.html">jqPlot Charts</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Core Renderers</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="jqplot-axisTickRenderer-js.html">Axis Tick Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasGridRenderer-js.html">Canvas Grid Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-divTitleRenderer-js.html">Div Title Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-linearAxisRenderer-js.html">Linear Axis Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-markerRenderer-js.html">Marker Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-shapeRenderer-js.html">Shape Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-shadowRenderer-js.html">Shadow Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-lineRenderer-js.html">Line Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-axisLabelRenderer-js.html">Axis Label Renderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-themeEngine-js.html">Theme Engine</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-toImage-js.html">fn</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Plugins</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="plugins/jqplot-barRenderer-js.html">jqplot.<wbr>BarRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-BezierCurveRenderer-js.html">jqplot.<wbr>BezierCurveRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-blockRenderer-js.html">jqplot.<wbr>BlockRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-bubbleRenderer-js.html">jqplot.<wbr>BubbleRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisLabelRenderer-js.html">jqplot.<wbr>CanvasAxisLabelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisTickRenderer-js.html">jqplot.<wbr>CanvasAxisTickRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidGridRenderer-js.html">jqplot.<wbr>CanvasGridRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasOverlay-js.html">jqplot.<wbr>CanvasOverlay</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-categoryAxisRenderer-js.html">jqplot.<wbr>CategoryAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ciParser-js.html">jqplot.<wbr>ciParser</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-cursor-js.html">jqplot.<wbr>Cursor</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dateAxisRenderer-js.html">jqplot.<wbr>DateAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-donutRenderer-js.html">jqplot.<wbr>DonutRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dragable-js.html">jqplot.<wbr>Dragable</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-enhancedLegendRenderer-js.html">jqplot.<wbr>enhancedLegendRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-funnelRenderer-js.html">jqplot.<wbr>FunnelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-highlighter-js.html">jqplot.<wbr>Highlighter</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-logAxisRenderer-js.html">jqplot.<wbr>LogAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoAxisRenderer-js.html">jqplot.<wbr>MekkoAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoRenderer-js.html">jqplot.<wbr>MekkoRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-meterGaugeRenderer-js.html">jqplot.<wbr>MeterGaugeRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ohlcRenderer-js.html">jqplot.<wbr>OHLCRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pieRenderer-js.html">jqplot.<wbr>PieRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pointLabels-js.html">jqplot.<wbr>PointLabels</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidAxisRenderer-js.html">jqplot.<wbr>pyramidAxisRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pyramidRenderer-js.html">jqplot.<wbr>pyramidRenderer.js</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-trendline-js.html">jqplot.<wbr>Trendline</a></div></div></div></div></div></div></div></div><div class=MEntry><div class=MFile><a href="gpl-2-0-txt.html">GPL License</a></div></div><div class=MEntry><div class=MFile><a href="MIT-LICENSE-txt.html">MIT License</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent5')">Index</a><div class=MGroupContent id=MGroupContent5><div class=MEntry><div class=MIndex><a href="../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Properties.html">Properties</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Hooks.html">Hooks</a></div></div><div class=MEntry><div class=MIndex><a href="../index/Files.html">Files</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Hooks">Hooks</option><option value="Properties">Properties</option></select></div><script language=JavaScript><!--
HideAllBut([1, 4, 5], 6);// --></script></div><!--Menu-->
<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CSection>This document will help you understand how jqPlot’s options relate to the API documentation and the jqPlot object itself. </div></div><!--END_ND_TOOLTIPS-->
<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>
<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>