2013-10-24 22:24:26 +02:00
<!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 described using the following convention:< / p > < blockquote > < pre > property: default, // notes< / pre > < / blockquote > < p > This document is not complete! Not all options are shown! 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.
// when fillToZero is enabled, this sets the colors to use for portions of the line below zero.
negativeSeriesColors: [ " #498991" , " #C08840" , " #9F9274" , " #546D61" , " #646C4A" , " #6F6621" ,
" #6E3F5F" , " #4F64B0" , " #A89050" , " #C45923" , " #187399" , " #945381" ,
" #959E5C" , " #C7AF7B" , " #478396" , " #907294" ],
sortData : true, // if true, will sort the data passed in by the user.
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,
},
animate : false, // if true, the series will be animated on initial drawing.
// This support is renderer-dependent; the renderer must support animation.
animateReplot : false, // if true, the series will be animated after every replot() call.
// Use with caution! Replots can happen very frequently under
// certain circumstances (e.g. resizing, dragging points) and
// animation in these situations can cause problems.
captureRightClick : false, // if true, right-click events are intercepted and a jqplotRightClick
// event will be fired. This will also block the context menu.
dataRenderer : undefined, // A callable which can be used to preprocess data passed into the plot.
// Will be called with 3 arguments: the plot data, a reference to the plot,
// and the value of dataRendererOptions.
dataRendererOptions : undefined, // Options that will be passed to the dataRenderer,
// if that option is supplied. Can be of any type.
gridData : [], // array of grid coordinates corresponding to the data points;
// normally jqPlot will calculate this for you.
axesDefaults: {
show: false, // whether or not to render the axis. Determined automatically.
min: null, // minimum numerical value of the axis. Determined automatically.
max: null, // maximum numerical 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, // whether or not to show the mark on the axis
showGridline: true, // whether to draw a gridline (across the whole grid) at this tick
isMinorTick: false, // whether this is a minor 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, // whether to show the tick (mark and label)
showLabel: true, // whether to show the text label at the tick
prefix: '', // String to prepend to the tick label.
// Prefix is prepended to the formatted tick label
suffix: '', // String to append to the tick label.
// Suffix is appended to the formatted tick label
formatString: '', // format string to use with the axis tick formatter
fontFamily: '', // css spec for the font-size css attribute
fontSize: '', // css spec for the font-size css attribute
textColor: '', // css spec for the color attribute
escapeHTML: false // true to escape HTML entities in the label
}
showTicks: true, // whether or not to show the tick labels,
showTickMarks: true, // whether 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, // whether 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, // whether 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, // whether 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, // whether 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.
},
// Size of the grid containing the plot.
gridDimensions: {
height: null,
width: null
},
// Padding to apply around the grid containing the plot.
gridPadding: {
top: null,
bottom: null,
left: null,
right: null
},
noDataIndicator : object, // For setting up a mock plot with a data loading indicator if
// no data is specified. Must have .show=true, .axes, and a
// .indicator string that will be displayed.
// 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 re-specified
// (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, // number 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, // whether 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, // whether 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.
// (Note that 'dragable' is the name and spelling used by the plugin, even though
// the correct word is 'draggable'.)
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 ticks with even visual
// (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 is
// 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 > < h4 class = CHeading > Options to be described< / h4 > < h4 class = CHeading > lineRenderer< / h4 > < p > .markerOptions? bands fill fillAndStroke fillStyle highlightColor highlightMouseDown highlightMouseOver shadow shadowOffset showLine< / p > < h4 class = CHeading > shadowRenderer< / h4 > < p > alpha closePath depth fill fillRect fillStyle isarc lineCap lineJoin linePattern lineWidth offset strokeStyle< / p > < h4 class = CHeading > shapeRenderer< / h4 > < p > clearRect closePath fill fillRect fillStyle isarc lineCap lineJoin linePattern lineWidth strokeRect strokeStyle< / p > < h4 class = CHeading > jqplot.effects< / h4 > < p > options.duration ; options.complete< / p > < h4 class = CHeading > LinearAxisRenderer< / h4 > < p > .min, .max (?) numberTicks tickInternal forceTickAt0 : false, // If true, a tick will always be drawn at 0.< / p > < h4 class = CHeading > markerRenderer< / h4 > < p > color fillStyle strokeStyle< / p > < h4 class = CHeading > canvasGridRenderer< / h4 > < p > lineWidth< / p > < / div > < / div > < / div >
< / div > <!-- Content -->
< div id = Footer > Copyright © 2009 - 2010 Chris Leonello · Updated March 26th, 2013 · < 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 > <
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 > < ! - -
2011-08-10 01:10:50 +02:00
if (browserType) {if (browserVer) {document.write("< / div > "); }document.write("< / div > ");}// -->< / script > < / body > < / html >
