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

Sets attributes of an element

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

Creates a circle element

Code examples

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

Clears the content of the jqxDraw widget.

Code examples

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

Gets element's attribute

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

Creates a line element

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

Estimates the size of a text element

Code examples

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

Adds an event handler to an element

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

Removes an event handler from an element

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

Creates a path element

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

Creates a pie slice element

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

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

Code examples

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

Creates a rectangle element

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

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.

Code examples

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

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.

Code examples

    $('#jqxDraw').jqxDraw('saveAsPNG', 'myImage.png', 'http://<my domain>/export_server/server.php');

Creates a text element

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