Vue UI Components Documentation

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.

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
    :renderEngine="''"
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
    }
  }
</script>

Sets attributes of an element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      this.$refs.myDraw.attr(textElement, { fill: 'lightblue', stroke: 'darkblue' });
    }
  }
</script>

Creates a circle element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.circle(85,300, 50, {});
    }
  }
</script>

Clears the content of the jqxDraw widget

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      this.$refs.myDraw.clear();
    }
  }
</script>

Gets element's attribute

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.getAttr(circleElement, 'fill');
    }
  }
</script>

Method: getSize

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.getSize();
    }
  }
</script>

Creates a line element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.line(85,100,85,200, { stroke: 'blue', 'stroke-width': 6 });
    }
  }
</script>

Estimates the size of a text element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.measureText('My text', 45, { 'class': 'smallText' });
    }
  }
</script>

Adds an event handler to an element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      this.$refs.myDraw.on(circleElement, 'click', () => { alert('Clicked The Big Circle!') });
    }
  }
</script>

Removes an event handler from an element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      this.$refs.myDraw.off(pathDown,'click',moveCircle(false));
    }
  }
</script>

Creates a path element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.path('M10 160 L 160 160 L80 320 Z', { fill: 'transparent', stroke: 'blue', 'stroke-width': 1 });
    }
  }
</script>

Creates a pie slice element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.pieslice(50, 350, 50, 100, 15, 95, 0, {fill: 'yellow'});
    }
  }
</script>

Refreshes / re-draws the content of the jqxDraw widget

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      this.$refs.myDraw.refresh();
    }
  }
</script>

Creates a rectangle element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.rect(20,280,130,50, { stroke: 'blue', fill: 'transparent' });
    }
  }
</script>

Exports the content as JPEG image

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      this.$refs.myDraw.saveAsJPEG('myImage.jpeg', 'http:///export_server/server.php');
    }
  }
</script>

Exports the chart's content as PNG image

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      this.$refs.myDraw.saveAsPNG('myImage.png', 'http:///export_server/server.php');
    }
  }
</script>

Creates a text element

<template>
  <JqxDraw ref="myDraw" style="width: 850px; height: 500px;"
   
  />
</template>
 
<script>
  import JqxDraw from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdraw.vue';
 
  export default {
    components: {
      JqxDraw
    },
    mounted: function () {
      const size = this.$refs.myDraw.getSize();
      const borderElement = this.$refs.myDraw.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.$refs.myDraw.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.$refs.myDraw.circle(85, 150, 50, {});
      this.$refs.myDraw.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.$refs.myDraw.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.$refs.myDraw.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.$refs.myDraw.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.$refs.myDraw.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.$refs.myDraw.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.$refs.myDraw.getAttr(circleElement, 'cy')); 
        this.$refs.myDraw.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.$refs.myDraw.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.$refs.myDraw.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.$refs.myDraw.on(pathDown, 'click', () => { moveCircle(false); });
      const value = this.$refs.myDraw.text('Some More Text!', 30, 280, undefined, undefined, 0, { 'class': 'largeText', fill: 'blue', stroke: 'blue' }, false, 'center', 'center', 'centermiddle');
    }
  }
</script>