Properties

NameTypeDefault
renderEngine DrawRenderEngine ''
DrawRenderEngine: "SVG" | "VML" | "HTML5"

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. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
        renderEngine={''}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

Methods

NameArgumentsReturn Type
attr element, attributes

Sets attributes of an element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.attr(textElement, { fill: 'lightblue', stroke: 'darkblue' });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
circle cx, cy, r, attributes

Creates a circle element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.circle(85,300, 50, {});
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
clear None

Clears the content of the jqxDraw widget

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.clear();
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getAttr element, attributes

Gets element's attribute

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.getAttr(circleElement, 'fill');
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getSize None

Method: getSize

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.getSize();
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
line x1, y1, x2, y2, attributes

Creates a line element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.line(85,100,85,200, { stroke: 'blue', 'stroke-width': 6 });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
measureText text, angle, attributes

Estimates the size of a text element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.measureText('My text', 45, { 'class': 'smallText' });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
on element, event, func

Adds an event handler to an element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.on(circleElement, 'click', () => { alert('Clicked The Big Circle!') });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
off element, event, func

Removes an event handler from an element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.off(pathDown,'click',moveCircle(false));
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
path path, attributes

Creates a path element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.path('M10 160 L 160 160 L80 320 Z', { fill: 'transparent', stroke: 'blue', 'stroke-width': 1 });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
pieslice cx, xy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, attributes

Creates a pie slice element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.pieslice(50, 350, 50, 100, 15, 95, 0, {fill: 'yellow'});
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
refresh None

Refreshes / re-draws the content of the jqxDraw widget

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.refresh();
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rect x, y, width, height, attributes

Creates a rectangle element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.rect(20,280,130,50, { stroke: 'blue', fill: 'transparent' });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
saveAsJPEG image, url

Exports the content as JPEG image

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.saveAsJPEG('myImage.jpeg', 'http:///export_server/server.php');
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
saveAsPNG image, url

Exports the chart's content as PNG image

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.saveAsPNG('myImage.png', 'http:///export_server/server.php');
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
text text, x, y, width, height, angle, attributes, clip, halign, valign, rotateAround

Creates a text element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.text('Some More Text!', 30, 280, undefined, undefined, 0, { 'class': 'largeText', fill: 'blue', stroke: 'blue' }, false, 'center', 'center', 'centermiddle');
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.