egroupware_official/phpgwapi/js/jquery/jqplot/docs/files/jqPlotOptions-txt.html
2011-08-09 23:10:50 +00:00

292 lines
24 KiB
HTML

<!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>&gt;</span>Home</a><a class="nav" href="../../tests/"><span>&gt;</span>Examples</a><a class="nav" href="../../docs/"><span>&gt;</span>Docs</a><a class="nav" href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>&gt;</span>Download</a><a class="nav" href="../../info.php"><span>&gt;</span>Info</a><a class="nav" href="../../donate.php"><span>&gt;</span>Donate</a></div><a name="jqPlot_Options"></a>jqPlot Options</div><div class=CBody><p><b>This document is out of date.&nbsp; While the options described here should still be relavent and valid, it has not been updated for many new options.&nbsp; Sorry for this inconvenience.</b></p><p>This document describes the options available to jqPlot.&nbsp; These are set with the third argument to the $.jqplot(&lsquo;target&rsquo;, data, options) function.&nbsp; Options are using the following convention:</p><blockquote><pre>property: default, // notes</pre></blockquote><p>This document is not complete!&nbsp; Not all options are shown!&nbsp; Also, Options marked with * in the notes are post 0.7.1 additions.&nbsp; They will be available in the next release.&nbsp; Further information about the options can be found in the online API documentation.&nbsp; 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: [ &quot;#4bb2c5&quot;, &quot;#c5b47f&quot;, &quot;#EAA228&quot;, &quot;#579575&quot;, &quot;#839557&quot;, &quot;#958c12&quot;,
&quot;#953579&quot;, &quot;#4b5de4&quot;, &quot;#d8b83f&quot;, &quot;#ff5800&quot;, &quot;#0085cc&quot;], // 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 &quot;cursor&quot; 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 &quot;dragable&quot; 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 &quot;highlighter&quot; 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: &quot;fast&quot;// 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 &copy; 2009 - 2010 Chris Leonello&nbsp; &middot;&nbsp; Updated June 21st, 2011&nbsp; &middot;&nbsp; <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">AxisTickRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-canvasGridRenderer-js.html">CanvasGridRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-divTitleRenderer-js.html">DivTitleRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-linearAxisRenderer-js.html">LinearAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-markerRenderer-js.html">MarkerRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-shapeRenderer-js.html">ShapeRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-shadowRenderer-js.html">ShadowRenderer</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">AxisLabelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="jqplot-themeEngine-js.html">ThemeEngine</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">BarRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-BezierCurveRenderer-js.html">BezierCurveRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-blockRenderer-js.html">BlockRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-bubbleRenderer-js.html">BubbleRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisLabelRenderer-js.html">CanvasAxisLabelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasAxisTickRenderer-js.html">CanvasAxisTickRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-canvasOverlay-js.html">CanvasOverlay</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-categoryAxisRenderer-js.html">CategoryAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ciParser-js.html">ciParser</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-cursor-js.html">Cursor</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dateAxisRenderer-js.html">DateAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-donutRenderer-js.html">DonutRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-dragable-js.html">Dragable</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-enhancedLegendRenderer-js.html">EnhancedLegendRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-funnelRenderer-js.html">FunnelRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-highlighter-js.html">Highlighter</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-logAxisRenderer-js.html">LogAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoAxisRenderer-js.html">MekkoAxisRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-mekkoRenderer-js.html">MekkoRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-meterGaugeRenderer-js.html">MeterGaugeRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-ohlcRenderer-js.html">OHLCRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pieRenderer-js.html">PieRenderer</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-pointLabels-js.html">PointLabels</a></div></div><div class=MEntry><div class=MFile><a href="plugins/jqplot-trendline-js.html">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&rsquo;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>