jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
786 lines (778 loc) • 68.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, Chart, Chart plugin, Data Visualization, Help Documentation" />
<meta name="description" content="This page represents the help documentation of the jqxGauge widget." />
<title>jqxGauge API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div>
<div id="Div2">
<h2 class="documentation-top-header">Properties</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>animationDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>400
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets jqxGauge's animation duration [ms].
</p>
<h4>Code examples</h4>
<p>
Set the <code>animationDuration</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ animationDuration: 300 });</code></pre>
<p>
Get the <code>animationDuration</code> property.
</p>
<pre><code>var animationDuration = $('#jqxGauge').jqxGauge('animationDuration');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BLHrh/">animationDuration is set to 3000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>border</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ size: '10%', style: { stroke: '#cccccc'}, visible: true, showGradient: true }
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's properties for it's border.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'size'-specifies the size of the border. Border's size can be set in percentage or in pixels</code></pre>
<pre><code>'visible'-indicates if the border will be visible</code></pre>
<pre><code>'style'-sets border style (color and thickness)</code></pre>
<pre><code>'showGradient' - whether a gradient background will be used</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>border</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ border: { size: '11%', style: { stroke: '#898989'}, visible: true }});</code></pre>
<p>
Get the <code>border</code> property.
</p>
<pre><code>var border = $('#jqxGauge').jqxGauge('border');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vC3v9/">border is set to { size: '11%', style: { stroke: '#898989'}, visible: true }</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>caption</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ value: '', position: 'bottom', offset: [0, 0], visible: true }
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's properties for it's caption.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'value' - specifies the text</code></pre>
<pre><code>'position' - specifies the caption position. There four different positions - top, bottom, left and right. You can customize the position using the offset property described bellow</code></pre>
<pre><code>'offset' - array with two number elements. The first one indicates the left offset and the second one the top offset</code></pre>
<pre><code>'visible' - indicates whether the caption will be visible</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>caption</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ caption: { value: 'jQWidgets', position: 'bottom', offset: [0, 10], visible: true }});</code></pre>
<p>
Get the <code>caption</code> property.
</p>
<pre><code>var caption = $('#jqxGauge').jqxGauge('caption');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/77N8L/">border is set to { value: 'jQWidgets', position: 'bottom', offset: [0, 10], visible: true }</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>cap</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ size: '4%', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' } , visible: true }
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's properties for it's cap.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'size' - specifies the gauge's size. This property can be set as percentage or in pixels</code></pre>
<pre><code>'visible' - indicates whether the cap will be visible</code></pre>
<pre><code>'style' - specifies the gauge's cap styles. Here you can set it's fill or stroke colors</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>cap</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ cap: { size: '5%', style: { fill: '#ff0000', stroke: '#00ff00' } , visible: true }});</code></pre>
<p>
Get the <code>cap</code> property.
</p>
<pre><code>var cap = $('#jqxGauge').jqxGauge('cap');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6VVsa/">cap is set to { size: '5%', style: { fill: '#ff0000', stroke: '#00ff00' } , visible: true }</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>colorScheme</span>
</td>
<td>
<span>String</span>
</td>
<td>'scheme01'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the gauge's color pallete. jqxGauge suppports 11 color schemes from 'scheme01'
to 'scheme11'.
</p>
<h4>Code examples</h4>
<p>
Set the <code>colorScheme</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ colorScheme: 10 });</code></pre>
<p>
Get the <code>colorScheme</code> property.
</p>
<pre><code>var colorScheme = $('#jqxGauge').jqxGauge('colorScheme');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/w4MdU/">colorScheme is set to 'scheme01'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>disabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the jqxGauge is disabled.
</p>
<h4>Code examples</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ disabled: true });</code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxGauge').jqxGauge('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LMYcJ/">disabled is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>easing</span>
</td>
<td>
<span>String</span>
</td>
<td>linear
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets jqxGauge's animation easing.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'linear'</code></pre>
<pre><code>'easeOutBack'</code></pre>
<pre><code>'easeInQuad'</code></pre>
<pre><code>'easeInOutCirc'</code></pre>
<pre><code>'easeInOutSine'</code></pre>
<pre><code>'easeOutCubic'</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>easing</code> property.
</p>
<pre><code> $('#jqxGauge').jqxGauge({ easing: 300 });</code></pre>
<p>
Get the <code>easing</code> property.
</p>
<pre><code>var easing = $('#jqxGauge').jqxGauge('easing');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TA3Hb/">easing is set to 'easeInOutSine'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>endAngle</span>
</td>
<td>
<span>Number</span>
</td>
<td>270
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets gauge's endAngle. This property specifies the end of the gauge's scale and is measured in degrees.
</p>
<h4>Code examples</h4>
<p>
Set the <code>endAngle</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ endAngle: 70 });</code></pre>
<p>
Get the <code>endAngle</code> property.
</p>
<pre><code>var endAngle = $('#jqxGauge').jqxGauge('endAngle');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jMUtT/">endAngle is set to 250</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>height</span>
</td>
<td>
<span>Number</span>
</td>
<td>350
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's height. This property accepts size in pixels and percentage.
</p>
<h4>Code examples</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ height: 400 });</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxGauge').jqxGauge('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CDvpF/">height is set to 400</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>int64</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables the jqxGauge 64-bit number support.
</p>
<p>
<em>Note:</em> If this property is set to true, the properties <strong>value</strong>,
<strong>min</strong>, <strong>max</strong>, ranges.<strong>startValue</strong>,
ranges.<strong>endValue</strong>, ticksMinor.<strong>interval</strong>, ticksMajor.<strong>interval</strong>
and labels.<strong>interval</strong> should be set to <em>string</em> values.
</p>
<h4>Code examples</h4>
<p>
Set the <code>int64</code> property.
</p>
<pre>
<code>$('#jqxGauge').jqxGauge({ int64: true });</code></pre>
<p>
Get the <code>int64</code> property.
</p>
<pre><code>var int64 = $('#jqxGauge').jqxGauge('int64');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ee9d23yy/">int64
is set to true
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span39'>labels</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ distance: '38%', position: 'none', interval: 20, offset: [0, -10], visible: true, formatValue: function (value) {
return value;
}}
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's properties for it's labels.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'distance' - specifies the labels distance from the gauge's center. This value could be set in percents ('0%' - '100%') or using pixels. This property is with lower priority than the position property</code></pre>
<pre><code>'position' - specifies the gauge's labels position. Possible values for this property are 'inside', 'outside' and 'none' (if you want to use the distance property). If it's value is inside the labels are going to be shown inside the scale otherwise they will be shown outside. This property is with higher priority than the distance property</code></pre>
<pre><code>'interval' - specifies labels's frequency</code></pre>
<pre><code>'offset' - specifies labels's offset. This property is array with two elements. The first one is the left offset and the second one is the top offset</code></pre>
<pre><code>'style' - specifies the gauge's pointer style. Here you can set it's fill or stroke color</code></pre>
<pre><code>'formatValue' - callback used for formatting the label. This function accepts a single parameter which the user can format and return to the labels renderer</code></pre>
<pre><code>'visible' - indicates whether the labels will be visible</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>labels</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ labels: { distance: '50px', position: 'inside', interval: 20, offset: [0, -10], visible: true, formatValue: function (value) {return value;}}});
</code></pre>
<p>
Get the <code>labels</code> property.
</p>
<pre><code>var labels = $('#jqxGauge').jqxGauge('labels');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KXDjt/">labels is set to { distance: '50px', position: 'inside', interval: 20, offset: [0, -10], visible: true, formatValue: function (value) {return value;}</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>min</span>
</td>
<td>
<span>Number</span>
</td>
<td>0
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets gauge's minimum value.
</p>
<h4>Code examples</h4>
<p>
Set the <code>min</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ min: 10 });</code></pre>
<p>
Get the <code>min</code> property.
</p>
<pre><code>var min = $('#jqxGauge').jqxGauge('min');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2JYQH/">min is set to 10</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>max</span>
</td>
<td>
<span>Number</span>
</td>
<td>220
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets jqxGauge's max value.
</p>
<h4>Code examples</h4>
<p>
Set the <code>max</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ max: 20 });</code></pre>
<p>
Get the <code>max</code> property.
</p>
<pre><code>var max = $('#jqxGauge').jqxGauge('max');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4kmT6/">max is set to 210</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>pointer</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ pointerType: 'default', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' }, length: '70%', width: '2%', visible: true }
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's properties for it's pointer.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'pointerType' - specifies the pointer type. Possible values for this property are - 'default' and 'rectangle'. If it's value is 'default' the pointer will be arrow otherwise it'll be rectangle</code></pre>
<pre><code>'style' - specifies the gauge's pointer style. Here you can set it's fill or stroke color</code></pre>
<pre><code>'width' - specifies pointer's width. This property can be set in percents ('0%' - '100%') or in pixels</code></pre>
<pre><code>'length' - specifies pointer's length. This property can be set in percents ('0%' - '100%') or in pixels</code></pre>
<pre><code>'visible' - indicates whether the pointer will be visible</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>pointer</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ pointer: { pointerType: 'default', style: { fill: '#ff0000', stroke: '#ff0000' }, length: '80%', width: '3%', visible: true }});</code></pre>
<p>
Get the <code>pointer</code> property.
</p>
<pre><code>var pointer = $('#jqxGauge').jqxGauge('pointer');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KwwjJ/">pointer is set to { pointerType: 'default', style: { fill: '#ff0000', stroke: '#ff0000' }, length: '80%', width: '3%', visible: true }</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>radius</span>
</td>
<td>
<span>Number</span>
</td>
<td>'50%'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets gauge's radius. This property accepts size in pixels and percentage.
</p>
<h4>Code examples</h4>
<p>
Set the <code>radius</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ radius: 200 });</code></pre>
<p>
Get the <code>radius</code> property.
</p>
<pre><code>var radius = $('#jqxGauge').jqxGauge('radius');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NuXHd/">radius is set to 150</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>ranges</span>
</td>
<td>
<span>Array</span>
</td>
<td>[]
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This property is array of objects. Each object is different range. The range is colored area with specified size.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'startValue'-the value from which the range will start</code></pre>
<pre><code>'endValue'-the value where the current range will end</code></pre>
<pre><code>'startWidth'-the width of the range in it's start</code></pre>
<pre><code>'endWidth'-the end width of the range</code></pre>
<pre><code>'startDistance [optional]'-this property is measured in pixels or percentage. It indicates the distance from the gauge's outer boundary to the start of the range</code></pre>
<pre><code>'endDistance [optional]'-this property is measured in pixels or percentage. It indicates the distance from the gauge's outer boundary to the end of the range</code></pre>
<pre><code>'style'-this property is object containing style information for the range. It accepts properties like 'fill', 'stroke', etc.</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>showRanges</code> property.
</p>
<pre><code>
var ranges = [{
startValue: 0,
endValue: 35,
startWidth: 1,
endWidth: 5,
startDistance: '5%',
endDistance: '5%',
style: {
fill: '#dddddd',
stroke: '#dddddd'
}
},
{
startValue: 35,
endValue: 55,
startWidth: 5,
endWidth: 10,
startDistance: '5%',
endDistance: '5%',
style: {
fill: '#dddddd',
stroke: '#dddddd'
}
}];
$('#jqxGauge').jqxGauge({ ranges: ranges });
</code></pre>
<p>
Get the <code>ranges</code> property.
</p>
<pre><code>var ranges = $('#jqxGauge').jqxGauge('ranges');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NkeHv/">ranges is set to a custom array</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>startAngle</span>
</td>
<td>
<span>Number</span>
</td>
<td>30
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets gauge's startAngle. This property specifies the beggining of the gauge's scale and is measured in degrees.
</p>
<h4>Code examples</h4>
<p>
Set the <code>startAngle</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ startAngle: 10 });</code></pre>
<p>
Get the <code>startAngle</code> property.
</p>
<pre><code>var startAngle = $('#jqxGauge').jqxGauge('startAngle');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FsCfG/">startAngle is set to 40</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>showRanges</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This property indicates whether the gauge's ranges will be visible.
</p>
<h4>Code examples</h4>
<p>
Set the <code>showRanges</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ showRanges: false });</code></pre>
<p>
Get the <code>showRanges</code> property.
</p>
<pre><code>var showRanges = $('#jqxGauge').jqxGauge('showRanges');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4SAb8/">showRanges is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>style</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ fill: '#ffffff', stroke: '#ffffff' }
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's style.
</p>
<h4>Code examples</h4>
<p>
Set the <code>style</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ style: { fill: '#cccccc', stroke: '#cccccc' }});</code></pre>
<p>
Get the <code>style</code> property.
</p>
<pre><code>var style = $('#jqxGauge').jqxGauge('style');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cPs87/">style is set to a custom object</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>ticksMajor</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's properties for it's major ticks.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'size'-specifies the length of the tick. This property is measured in pixels or percentage</code></pre>
<pre><code>'interval'-specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a major tick</code></pre>
<pre><code>'visible'-indicates if the major ticks will be visible</code></pre>
<pre><code>'style'-sets ticks style (color and thickness)</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>ticksMajor</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ ticksMajor: { size: '10px', interval: 15, style: { stroke: '#898989'}, visible: true }});</code></pre>
<p>
Get the <code>ticksMajor</code> property.
</p>
<pre><code>var ticksMajor = $('#jqxGauge').jqxGauge('ticksMajor');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zUTEC/">ticksMajor is set to {interval: 10, size: '9%' }</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span33'>ticksMinor</span>
</td>
<td>
<span>Object</span>
</td>
<td>{ size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the gauge's properties for it's minor ticks.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'size'-specifies the length of the tick. This property can be set in pixels or in percentag</code></pre>
<pre><code>'interval'-specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a minor tick</code></pre>
<pre><code>'visible'-indicates if the minor ticks will be visible</code></pre>
<pre><code>'style'-sets ticks style (color and thickness)</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>ticksMinor</code> property.
</p>
<pre><code>$('#jqxGauge').jqxGauge({ ticksMinor: { size: '5%', interval: 15, style: { stroke: '#898989'}, visible: true }});</code></pre>
<p>
Get the <code>ticksMinor</code> property.
</p>
<pre><code>var ticksMinor = $('#jqxGauge').jqxGauge('ticksMinor');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/L5JyJ/">ticksMinor is set to {interval: 5, size: '5%' }</a>