Properties

Name Type Default
renderEngine String ''

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.

Code examples

 
 $('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});
 $('#jqxDraw').jqxDraw('refresh');

Events

Name Arguments

Methods

Name Arguments Return Value
attr element, attributes none

Sets attributes of an element

Parameter Type Description
element Object
attributes(optional) Object
Return Value
Object

Code examples


 $('#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' });
circle cx, cy, r, {optional attributes} element object

Creates a circle element

Parameter Type Description
cy Number
r Number
attributes Object
Return Value
Object

Code examples


 $('#container').jqxDraw();
 var renderer = $('#container').jqxDraw('getInstance');
 
 // create a circle
 // params: cx, cy, radius, attributes
 var circleElement = renderer.circle(250, 150, 50, {});
clear None None

Clears the content of the jqxDraw widget.

Parameter Type Description
None
Return Value
None

Code examples


 $('#container').jqxDraw('clear');
getAttr element, attribute name string

Gets element's attribute

Parameter Type Description
element Object
attributes(optional) Object
Return Value
String

Code examples


 $('#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');
line x1, y1, x2, y2, {optional attributes} element object

Creates a line element

Parameter Type Description
x1 Number
y1 Number
x2 Number
y2 Number
attributes(optional) Object
Return Value
Object

Code examples


 $('#container').jqxDraw();
 var renderer = $('#container').jqxDraw('getInstance');
 
 // params: x1, y1, x2, y2, attributes
 renderer.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
measureText text, angle, {optional attributes} {width, height}

Estimates the size of a text element

Parameter Type Description
text String
angle Number
attributes(optional) Object
Return Value
Object - object.width and object.height Number properties.

Code examples


 $('#container').jqxDraw();
 var renderer = $('#container').jqxDraw('getInstance');
 // params: text, angle, attributes
 var textSize = renderer.measureText('My text', 45, { 'class': 'smallText' });
on element, event, function none

Adds an event handler to an element

Parameter Type Description
element Object
event String
function Object
Return Value
None

Code examples


 $('#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; });
 });
off element, event, function none

Removes an event handler from an element

Parameter Type Description
element Object
event String
function Object
Return Value
None

Code examples


 $('#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);
path line command , {optional attributes} element object

Creates a path element

Parameter Type Description
path String
attributes(optional) Object
Return Value
Object

Code examples


 $('#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
 */
pieslice cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes} element object

Creates a pie slice element

Parameter Type Description
cx Number
cy Number
innerRadius Number
fromAngle Number
endAngle Number
centerOffset Number
attributes(optional) Object
Return Value
Object

Code examples


 $('#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'});
refresh None None

Refreshes / re-draws the content of the jqxDraw widget.

Parameter Type Description
None
Return Value
None

Code examples


 $('#container').jqxDraw('refresh');
rect x, y, width, height, {optional attributes} element object

Creates a rectangle element

Parameter Type Description
x Number
y Number
width Number
height Number
attributes(optional) Object
Return Value
Object

Code examples


 $('#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' });
saveAsJPEG fileName, exportServer boolean

Exports the content as JPEG image.
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.

Parameter Type Description
image String
url String
Return Value
None

Code examples

 
 $('#jqxDraw').jqxDraw('saveAsJPEG', 'myImage.jpeg', 'http://<my domain>/export_server/server.php');
saveAsPNG fileName, exportServer boolean

Exports the chart's content as PNG image.
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.

Parameter Type Description
image String
url String
Return Value
None

Code examples


 $('#jqxDraw').jqxDraw('saveAsPNG', 'myImage.png', 'http://<my domain>/export_server/server.php');
text text, x, y, width, height, angle, attributes, clip, halign, valign, rotateAround element object

Creates a text element

Parameter Type Description
x Number
y Number
width Number
height Number
angle Number
attributes Array
clip Boolean
halign String
valign String
rotateAround String
Return Value
Object

Code examples


 $('#container').jqxDraw();
 var renderer = $('#container').jqxDraw('getInstance');
 // params: text, x, y, width, height, angle, attributes, clip, horizontal alignment('center', 'left', 'right'), vertical alignment('middle', 'top', 'bottom'), rotate around point
 renderer.text(
 "Drawing shapes", // text
 50, // x
 20, // y 
 undefined, // width
 undefined, // height
 0, // angle
 { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, // attributes
 false, // clip
 'center', // horizontal alignment
 'center', // vertical alignment
 'centermiddle'); // rotate around point

AltStyle によって変換されたページ (->オリジナル) /