jQuery Draw API

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');` Try it: renderEngine is set to 'HTML5'

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' });

Try it: invoke the 'attr' method

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, {});

Try it: invoke the 'circle' method

clear None None

Clears the content of the jqxDraw widget.

Parameter	Type	Description
None

Return Value
None

Code examples


    $('#container').jqxDraw('clear');

Try it: invoke the 'clear' method

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');

Try it: invoke the 'getAttr' method

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 });

Try it: invoke the 'line' method

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' });

Try it: invoke the 'measureText' method

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; });
        });

Try it: invoke the 'on' method

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);

Try it: invoke the 'off' method

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
    */

Try it: invoke the 'path' method

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'});

Try it: invoke the 'pieslice' method

refresh None None

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

Parameter	Type	Description
None

Return Value
None

Code examples


    $('#container').jqxDraw('refresh');

Try it: invoke the 'refresh' method

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' });

Try it: invoke the 'rect' method

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');

Try it: invoke the 'saveAsJPEG' method

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');

Try it: invoke the 'saveAsPNG' method

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

Try it: invoke the 'text' method

¿´¿´Å·ÃÀÒ»¼¶ÊÓÆµ¿á¹·

Properties

Code examples

Events

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples