[11222] | 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 | |
---|