jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,041 lines (1,015 loc) • 52.9 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, Draw, Ad hoc drawing, SVG drawing, HTML5 drawing, VML drawing" />
<meta name="description" content="This page represents the help documentation of the jqxDraw widget." />
<title>jqxDraw 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 id="Div1">
<h2>Properties</h2>
<table class="documentation-table" style="padding-bottom: 20px;">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<!-- renderEngine -->
<tr>
<td class="documentation-option-type-click">
<span>renderEngine</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'.
When the property is not set jqxDraw will automatically select an optimal rendering engine depending on the browser capabilities.
</p>
<h4>Code examples</h4>
<pre><code>
$('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});
$('#jqxDraw').jqxDraw('refresh');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/F74Sk/">renderEngine is set to 'HTML5'</a>
</div>
</div>
</td>
</tr>
<!-- end of renderEngine -->
</table>
<br />
</div>
<div id="events" style="display: none;">
<h2>Events</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Arguments
</th>
<th></th>
</tr>
<!-- mouseover -->
<!-- mouseout -->
<!-- click -->
</table>
</div>
<div id="methods">
<h2 class="documentation-top-header">Methods</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Arguments
</th>
<th>Return Value
</th>
</tr>
<!-- attr -->
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>attr</span>
</td>
<td>
<span>element, attributes</span>
</td>
<td>none
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets attributes of an element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>element</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>attributes(optional)</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// create a circle
// params: cx, cy, radius, params
var circleElement = renderer.circle(250, 150, 50, {});
// set the fill color and border color of the circle
// params: element, attributes
renderer.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m9mzY/">invoke the 'attr' method</a>
</div>
</div>
</td>
</tr>
<!-- circle -->
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>circle</span>
</td>
<td>
<span>cx, cy, r, {optional attributes}</span>
</td>
<td>element object
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Creates a circle element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>cy</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>r</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>attributes</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// create a circle
// params: cx, cy, radius, attributes
var circleElement = renderer.circle(250, 150, 50, {});
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xv5u8/">invoke the 'circle' method</a>
</div>
</div>
</td>
</tr>
<!-- clear -->
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>clear</span>
</td>
<td>
<span>None</span>
</td>
<td>None
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears the content of the jqxDraw widget.<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw('clear');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/raMw9/">invoke the 'clear' method</a>
</div>
</div>
</td>
</tr>
<!-- getAttr -->
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>getAttr</span>
</td>
<td>
<span>element, attribute name</span>
</td>
<td>string
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets element's attribute<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>element</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>attributes(optional)</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>String</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// create a circle
// params: cx, cy, radius, params
var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'}});
// get the fill color of the circle
// params: element, attribute name
var fillColor = renderer.getAttr(circleElement, 'fill');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bd64X/">invoke the 'getAttr' method</a>
</div>
</div>
</td>
</tr>
<!-- line -->
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>line</span>
</td>
<td>
<span>x1, y1, x2, y2, {optional attributes}</span>
</td>
<td>element object
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Creates a line element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>x1</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>y1</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>x2</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>y2</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>attributes(optional)</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// params: x1, y1, x2, y2, attributes
renderer.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N2PHz/">invoke the 'line' method</a>
</div>
</div>
</td>
</tr>
<!-- measureText -->
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>measureText</span>
</td>
<td>
<span>text, angle, {optional attributes}</span>
</td>
<td>{width, height}
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Estimates the size of a text element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>text</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>angle</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>attributes(optional)</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em> - object.width and object.height Number properties.
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// params: text, angle, attributes
var textSize = renderer.measureText('My text', 45, { 'class': 'smallText' });
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7Vvj8/">invoke the 'measureText' method</a>
</div>
</div>
</td>
</tr>
<!-- on -->
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>on</span>
</td>
<td>
<span>element, event, function</span>
</td>
<td>none
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Adds an event handler to an element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>element</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>event</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>function</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// create a circle
// params: cx, cy, radius, params
var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});
renderer.on(circleElement, 'click', function ()
{
// get the Y coordinate of the circle's center
var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
// move the circle 10 pixels down
renderer.attr(circleElement, { cy: circleY + 10; });
});
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5yRPa/">invoke the 'on' method</a>
</div>
</div>
</td>
</tr>
<!-- off -->
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>off</span>
</td>
<td>
<span>element, event, function</span>
</td>
<td>none
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Removes an event handler from an element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>element</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>event</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>function</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// create a circle
// params: cx, cy, radius, params
var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});
var moveCircle = function() {
var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
renderer.attr(circleElement, { cy: circleY + 10 });
}
// add event handler
renderer.on(circleElement, 'click', moveCircle);
// remove event handler
renderer.off(circleElement, 'click', moveCircle);
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3LXyU/">invoke the 'off' method</a>
</div>
</div>
</td>
</tr>
<!-- path -->
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>path</span>
</td>
<td>
<span>line command , {optional attributes}</span>
</td>
<td>element object
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Creates a path element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>path</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>attributes(optional)</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// draw a path
// params: line command ('d'), attributes
var path = renderer.path("M 100,100 L 150,130 C 130,130 180,190 150,150", { stroke: '#777777', fill: 'red' });
/* Supported line commands:
MoveTo: M x,y
LineTo: L x,y
Cubic curve: C x1,y1,x2,y2,x,y
Close path: Z
*/
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j4d2Q/">invoke the 'path' method</a>
</div>
</div>
</td>
</tr>
<!-- pieslice -->
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>pieslice</span>
</td>
<td>
<span>cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}</span>
</td>
<td>element object
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Creates a pie slice element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>cx</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>cy</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>innerRadius</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>fromAngle</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>endAngle</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>centerOffset</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>attributes(optional)</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// create a pie slice
// params: cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}
var piesliceElement = renderer.pieslice(250, 150, 50, 100, 15, 95, 0, {fill: 'yellow'});
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N4fLM/">invoke the 'pieslice' method</a>
</div>
</div>
</td>
</tr>
<!-- refresh -->
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>refresh</span>
</td>
<td>
<span>None</span>
</td>
<td>None
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Refreshes / re-draws the content of the jqxDraw widget.<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XN8Xw/">invoke the 'refresh' method</a>
</div>
</div>
</td>
</tr>
<!-- rect -->
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>rect</span>
</td>
<td>
<span>x, y, width, height, {optional attributes}</span>
</td>
<td>element object
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Creates a rectangle element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>x</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>y</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>width</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>height</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>attributes(optional)</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
// params: x, y, width, height, attributes
var rectElement = renderer.rect(0, 0, 200, 100, { stroke: '#777777', fill: 'transparent' });
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tXQrf/">invoke the 'rect' method</a>
</div>
</div>
</td>
</tr>
<!-- saveAsJPEG -->
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>saveAsJPEG</span>
</td>
<td>
<span>fileName, exportServer</span>
</td>
<td>boolean
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Exports the content as JPEG image.<br />
The browser must support HTML5 Canvas and the device must be able to connect to the export server.
If you don't setup your own export server the default server is jqwidgets.com.<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>image</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>url</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#jqxDraw').jqxDraw('saveAsJPEG', 'myImage.jpeg', 'http://<my domain>/export_server/server.php');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/y4DzZ/">invoke the 'saveAsJPEG' method</a>
</div>
</div>
</td>
</tr>
<!-- saveAsPNG -->
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>saveAsPNG</span>
</td>
<td>
<span>fileName, exportServer</span>
</td>
<td>boolean
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Exports the chart's content as PNG image.<br />
The browser must support HTML5 Canvas and the device must be able to connect to the export server.
If you don't setup your own export server the default server is jqwidgets.com.<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>image</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>url</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
</p>
<pre>
<code>
$('#jqxDraw').jqxDraw('saveAsPNG', 'myImage.png', 'http://<my domain>/export_server/server.php');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Mx2s7/">invoke the 'saveAsPNG' method</a>
</div>
</div>
</td>
</tr>
<!-- text -->
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>text</span>
</td>
<td>
<span>text, x, y, width, height, angle, attributes, clip, halign, valign, rotateAround</span>
</td>
<td>element object
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Creates a text element<br />
<br />
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>x</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>y</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>width</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>height</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>angle</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>attributes</