We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Read more about our Privacy Policy and Cookie Policy
{"chart":{"zIndex":0,"enabled":true,"type":"column","title":{"zIndex":80,"enabled":true,"maxLength":null,"fontSize":14,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#757575","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"Frog Column","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":10,"right":0},"background":{"zIndex":0,"enabled":false}},"background":{"zIndex":0.5,"enabled":true,"fill":"#fff"},"tooltip":{"enabled":true,"title":{"zIndex":1,"enabled":true,"maxLength":null,"fontSize":14,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#616161","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"left","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"left","orientation":"top","rotation":0,"text":"","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":0,"right":0},"background":{"enabled":false}},"separator":{"zIndex":1,"enabled":true,"fill":{"color":"#9e9e9e","opacity":0.4},"stroke":"none","width":"100%","height":1,"orientation":"top","margin":{"left":0,"top":10,"bottom":10,"right":0}},"background":{"zIndex":0,"enabled":true}},"margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":15,"top":20,"bottom":15,"right":25},"a11y":{"enabled":true,"mode":"chart-elements"},"autoRedraw":true,"bounds":{},"contextMenu":{"enabled":true},"credits":{"text":"AnyChart","url":"https://www.anychart.com/?utm_source=registered","alt":"AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}","imgAlt":"AnyChart - JavaScript Charts","logoSrc":"https://static.anychart.com/logo.png","enabled":false},"selectRectangleMarqueeFill":{"color":"#d3d3d3","opacity":0.4},"selectRectangleMarqueeStroke":"#d3d3d3","legend":{"zIndex":200,"enabled":false,"fontSize":12,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#757575","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"bottom","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"...","selectable":false,"disablePointerEvents":false,"useHtml":false,"inverted":false,"itemsLayout":"horizontal","iconSize":15,"width":null,"height":null,"maxWidth":null,"maxHeight":null,"position":"top","positionMode":"outside","drag":false,"itemsFormat":null,"titleFormat":null,"itemsHAlign":"left","itemsSpacing":15,"itemsSourceMode":"default","hoverCursor":"pointer","iconTextSpacing":5,"align":"center","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":10,"top":0,"bottom":10,"right":10},"background":{"enabled":false},"title":{"enabled":false,"maxLength":null,"fontSize":15,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#757575","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"Title text","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":0,"right":0},"background":{"enabled":false}},"titleSeparator":{"zIndex":1,"enabled":false,"fill":{"color":"#9e9e9e","opacity":0.4},"stroke":"none","width":"100%","height":1,"orientation":"top","margin":{"left":0,"top":5,"bottom":5,"right":0}},"paginator":{"zIndex":30,"enabled":true,"fontSize":12,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#545f69","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"orientation":"right","layout":"horizontal","background":{"enabled":false},"padding":{"left":5,"top":0,"bottom":0,"right":0},"margin":{"left":0,"top":0,"bottom":0,"right":0}},"tooltip":{"enabled":false,"title":{"zIndex":1,"enabled":false,"maxLength":null,"fontSize":14,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#616161","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"left","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"left","orientation":"top","rotation":0,"text":"","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":0,"right":0},"background":{"enabled":false}},"separator":{"zIndex":1,"enabled":false,"fill":{"color":"#9e9e9e","opacity":0.4},"stroke":"none","width":"100%","height":1,"orientation":"top","margin":{"left":0,"top":10,"bottom":10,"right":0}},"background":{"zIndex":0,"enabled":true}}},"interactivity":{"spotRadius":2,"multiSelectOnClick":false,"unselectOnClickOutOfPoint":true,"hoverMode":"single","selectionMode":"multi-select"},"defaultSeriesType":"column","maxBubbleSize":"20%","minBubbleSize":"5%","maxPointWidth":"100%","minPointLength":0,"baseline":0,"palette":{"type":"distinct","items":["#a9e1d4","#54dbdf","#15a9c7","#207fbf","#c0aca5","#8b8a92","#dbcb8f","#dba869","#ffab00","#00897b"]},"markerPalette":{"items":["circle","diamond","square","triangle-down","triangle-up","diagonal-cross","pentagon","cross","v-line","star5","star4","trapezium","star7","star6","star10"]},"hatchFillPalette":{"items":[{"type":"backward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"forward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"horizontal","color":"black 0.5","thickness":1,"size":10},{"type":"vertical","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-backward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"grid","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-forward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-horizontal","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-vertical","color":"black 0.5","thickness":1,"size":10},{"type":"diagonal-cross","color":"black 0.5","thickness":1,"size":10},{"type":"diagonal-brick","color":"black 0.5","thickness":1,"size":10},{"type":"divot","color":"black 0.5","thickness":1,"size":10},{"type":"horizontal-brick","color":"black 0.5","thickness":1,"size":10},{"type":"vertical-brick","color":"black 0.5","thickness":1,"size":10},{"type":"checker-board","color":"black 0.5","thickness":1,"size":10},{"type":"confetti","color":"black 0.5","thickness":1,"size":10},{"type":"plaid","color":"black 0.5","thickness":1,"size":10},{"type":"solid-diamond","color":"black 0.5","thickness":1,"size":10},{"type":"zig-zag","color":"black 0.5","thickness":1,"size":10},{"type":"weave","color":"black 0.5","thickness":1,"size":10},{"type":"percent-05","color":"black 0.5","thickness":1,"size":10},{"type":"percent-10","color":"black 0.5","thickness":1,"size":10},{"type":"percent-20","color":"black 0.5","thickness":1,"size":10},{"type":"percent-25","color":"black 0.5","thickness":1,"size":10},{"type":"percent-30","color":"black 0.5","thickness":1,"size":10},{"type":"percent-40","color":"black 0.5","thickness":1,"size":10},{"type":"percent-50","color":"black 0.5","thickness":1,"size":10},{"type":"percent-60","color":"black 0.5","thickness":1,"size":10},{"type":"percent-70","color":"black 0.5","thickness":1,"size":10},{"type":"percent-75","color":"black 0.5","thickness":1,"size":10},{"type":"percent-80","color":"black 0.5","thickness":1,"size":10},{"type":"percent-90","color":"black 0.5","thickness":1,"size":10}]},"normal":{"labels":{"enabled":false},"minLabels":{"enabled":null},"maxLabels":{"enabled":null}},"hovered":{"labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null}},"selected":{"labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null}},"barGroupsPadding":0.8,"barsPadding":0.4,"xScale":0,"yScale":1,"series":[{"enabled":true,"seriesType":"column","clip":true,"tooltip":{"format":"Value: {%Value}"},"legendItem":{"enabled":true,"iconStroke":"none"},"error":{"mode":"both","xError":null,"valueError":null,"xErrorWidth":10,"valueErrorWidth":10},"color":null,"pointWidth":null,"isVertical":false,"normal":{"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":false,"disablePointerEvents":false,"position":"value","anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":4},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"hovered":{"fill":"pink","hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":null,"size":6},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"selected":{"fill":"#CDE5B2","negativeFill":{"color":"#333","opacity":0.85},"risingFill":{"color":"#333","opacity":0.85},"fallingFill":{"color":"#333","opacity":0.85},"stroke":{"color":"#333","opacity":0.85},"lowStroke":{"color":"#333","opacity":0.85},"highStroke":{"color":"#333","opacity":0.85},"lowFill":{"color":"#333","opacity":0.85},"highFill":{"color":"#333","opacity":0.85},"negativeStroke":{"color":"#333","opacity":0.85},"risingStroke":{"color":"#333","opacity":0.85},"fallingStroke":{"color":"#333","opacity":0.85},"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":null,"size":6},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"a11y":{"enabled":false,"titleFormat":"Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"},"xMode":"ordinal","data":[15,17,25,14,19,10,21],"xScale":0,"yScale":1}],"isVertical":false,"xAxes":[{"enabled":true,"width":null,"drawFirstLabel":true,"drawLastLabel":true,"overlapMode":"no-overlap","stroke":{"color":"#9e9e9e","opacity":0.4},"staggerMode":false,"staggerMaxLines":2,"staggerLines":null,"orientation":"bottom","value":null,"title":{"zIndex":35,"enabled":false,"maxLength":null,"fontSize":13,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#545f69","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"X-Axis","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":5,"bottom":0,"right":0},"background":{"enabled":false}},"labels":{"zIndex":35,"enabled":true},"minorLabels":{"zIndex":35,"enabled":false},"ticks":{"zIndex":35,"enabled":true,"stroke":{"color":"#9e9e9e","opacity":0.4},"length":6,"position":"outside"},"minorTicks":{"zIndex":35,"enabled":false,"stroke":{"color":"#bdbdbd","opacity":0.4},"length":4,"position":"outside"},"scale":0}],"yAxes":[{"enabled":true,"width":null,"drawFirstLabel":true,"drawLastLabel":true,"overlapMode":"no-overlap","stroke":{"color":"#9e9e9e","opacity":0.4},"staggerMode":false,"staggerMaxLines":2,"staggerLines":null,"orientation":"left","value":null,"title":{"zIndex":35,"enabled":false,"maxLength":null,"fontSize":13,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#545f69","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"Y-Axis","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":5,"right":0},"background":{"enabled":false}},"labels":{"zIndex":35,"enabled":true},"minorLabels":{"zIndex":35,"enabled":false},"ticks":{"zIndex":35,"enabled":true,"stroke":{"color":"#9e9e9e","opacity":0.4},"length":6,"position":"outside"},"minorTicks":{"zIndex":35,"enabled":false,"stroke":{"color":"#bdbdbd","opacity":0.4},"length":4,"position":"outside"},"scale":1}],"crosshair":{"zIndex":41,"enabled":false,"xStroke":"#969EA5","yStroke":"#969EA5","displayMode":"float","xLabels":[{"enabled":true,"fontSize":12,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#ffffff","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":400,"letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":true,"useHtml":false,"text":"Label text","width":null,"height":null,"anchor":null,"offsetX":0,"offsetY":0,"rotation":0,"adjustFontSize":{"width":false,"height":false},"minFontSize":8,"maxFontSize":16,"background":{"zIndex":0,"enabled":true},"padding":{"left":10,"top":5,"bottom":5,"right":10},"axisIndex":0}],"yLabels":[{"enabled":true,"fontSize":12,"fontFamily":"\"Lucida Console\", Monaco, monospace","fontColor":"#ffffff","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":400,"letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":true,"useHtml":false,"text":"Label text","width":null,"height":null,"anchor":null,"offsetX":0,"offsetY":0,"rotation":0,"adjustFontSize":{"width":false,"height":false},"minFontSize":8,"maxFontSize":16,"background":{"zIndex":0,"enabled":true},"padding":{"left":10,"top":5,"bottom":5,"right":10},"axisIndex":0}]},"scales":[{"type":"ordinal","inverted":false,"ticks":{"maxCount":100},"mode":"discrete"},{"type":"linear","inverted":false,"maximum":null,"minimum":0,"minimumGap":0.1,"maximumGap":0.1,"softMinimum":null,"softMaximum":null,"alignMinimum":true,"alignMaximum":true,"maxTicksCount":1000,"ticks":{"mode":"linear","base":0,"allowFractional":true,"interval":5},"minorTicks":{"mode":"linear","base":0,"allowFractional":true,"count":5},"stackMode":"none","stackDirection":"direct","stickToZero":true,"comparisonMode":"none"}],"crossing":{"stroke":"none"},"quarters":{},"yCrossAxes":[0],"xCrossAxes":[0],"xScroller":{"zIndex":35,"enabled":false,"height":16,"minHeight":null,"maxHeight":null,"orientation":"bottom","inverted":false,"autoHide":false,"fill":"#e9e6e3","selectedFill":"#dcd8d4","outlineStroke":"none","allowRangeChange":true,"thumbs":{"normal":{"fill":"#E9E9E9","stroke":"#7c868e"},"hovered":{"fill":"#bdc8ce","stroke":"#e9e4e4"},"enabled":true,"autoHide":false},"position":"after-axes"},"yScroller":{"zIndex":35,"enabled":false,"height":16,"minHeight":null,"maxHeight":null,"orientation":"left","inverted":false,"autoHide":false,"fill":"#e9e6e3","selectedFill":"#dcd8d4","outlineStroke":"none","allowRangeChange":true,"thumbs":{"normal":{"fill":"#E9E9E9","stroke":"#7c868e"},"hovered":{"fill":"#bdc8ce","stroke":"#e9e4e4"},"enabled":true,"autoHide":false},"position":"after-axes"},"xZoom":{"startRatio":0,"endRatio":1,"continuous":true},"yZoom":{"startRatio":0,"endRatio":1,"continuous":true}}}
<html><head><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/themes/sea.min.js"></script><linkhref="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css"type="text/css"rel="stylesheet"><linkhref="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css"type="text/css"rel="stylesheet"><styletype="text/css">html,
body,
#container{width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><divid="container"></div><script>
anychart.onDocumentReady(function(){// set chart theme
anychart.theme('sea');var chart = anychart.column();
chart.title('Frog Column');
chart.background().fill('#fff');var series = chart.column([15,17,25,14,19,10,21]);
series.hovered().fill('pink');
series.selected().fill('#CDE5B2');
series
.tooltip().titleFormat(function(){return'Frog '+++this.index;}).format('Value: {%Value}');// get shapesvar shapes = series.rendering().shapes();// add 'rect-transparent' shape to shapes group
shapes.push({// shape name
name:'rect-transparent',// shape type ('path', 'circle', 'ellipse' or 'rect')
shapeType:'path',// ZIndex for the balance of shapes relative to each other
zIndex:1});// add 'hands' shape to shapes group
shapes.push({// shape name
name:'hands',// shape type ('path', 'circle', 'ellipse' or 'rect')
shapeType:'path',// set fill settings
fillName:'fill',// set stroke settings
strokeName:'stroke',// enabled hover/select state
canBeHoveredSelected:true,// ZIndex for the balance of shapes relative to each other
zIndex:2});// add 'eyes' shape to shapes group
shapes.push({// shape name
name:'eyes',// shape type ('path', 'circle', 'ellipse' or 'rect')
shapeType:'path',// set fill settings
fillName:'fill',// set stroke settings
strokeName:'stroke',// enabled hover/select state
canBeHoveredSelected:true,// ZIndex for the balance of shapes relative to each other
zIndex:2});// add 'pupils' shape to shapes group
shapes.push({// shape name
name:'pupils',// shape type ('path', 'circle', 'ellipse' or 'rect')
shapeType:'path',// set fill settings
fillName:'fill',// set stroke settings
strokeName:'stroke',// enabled hover/select state
canBeHoveredSelected:true,// ZIndex for the balance of shapes relative to each other
zIndex:2});
chart.yScale().minimum(0);
chart.yScale().ticks().interval(5);// set rendering settings
series
.rendering()// set point function to drawing.point(drawer)// set update point function to drawing, change the point shape when the state changes.updatePoint(drawer)// set shapes.shapes(shapes);// set container id for the chart
chart.container('container');// initiate chart drawing
chart.draw();// listen point select
chart.listen('pointsselect',function(e){if(!e.point.selected()){
flag =true;}});});var flag =true;var deviationHandsFinal;var deviationPupilsFinal;var intervalFirst =null;var intervalSecond =null;functiondrawer(){// if missing (not correct data), then skipping this point drawingif(this.missing){return;}// get shapes groupvar shapes =this.shapes ||this.getShapesGroup(this.pointState);// calculate the left value of the x-axisvar leftX =this.x -this.pointWidth /2;// calculate the right value of the x-axisvar rightX = leftX +this.pointWidth;// calculate the half of point widthvar rx =this.pointWidth /2;var deviationPupils =1;var deviationHands =1;var that =this;// calculate gapvar gap = Math.floor(this.pointWidth /this.series.data().getRowsCount());if(gap >10){
gap =10;}// if pointState > 0, then hover or select point stateif(this.pointState >0){
shapes.path
// resets all 'path' operations.clear()// draw column (body).moveTo(leftX,this.zero).lineTo(leftX,this.value + rx).lineTo(rightX,this.value + rx).lineTo(rightX,this.zero)// close by connecting the last point with the first straight line.close()// draw circular arc (head).moveTo(leftX,this.value).circularArc(this.x,this.value + rx - gap, rx, rx,180,180)// close by connecting the last point with the first straight line.close();
shapes['rect-transparent']// draw transparent rectangle (mouth).moveTo(leftX -5,this.value + rx -1).lineTo(leftX -5,this.value - gap + rx +1).lineTo(rightX +5,this.value - gap + rx +1).lineTo(rightX +5,this.value + rx -1).fill('#fff').stroke('#fff')// close by connecting the last point with the first straight line.close();
shapes.hands
// resets all 'hands' operations.clear().stroke('1 #546269')// draw path hands.moveTo(leftX - rx /2,this.value + rx).lineTo(leftX,this.value +2* rx).circularArc(
leftX - rx /2,this.value + rx,
rx /5,
rx /5,-210,180).fill('red')// close by connecting the last point with the first straight line.close()// draw wrist.moveTo(rightX + rx /2,this.value + rx).lineTo(rightX,this.value +2* rx).circularArc(
rightX + rx /2,this.value + rx,
rx /5,
rx /5,210,180)// close by connecting the last point with the first straight line.close();
shapes.eyes
// resets all 'eyes' operations.clear()// draw eyes.moveTo(leftX,this.value + rx).circularArc(this.x - rx /2,this.value + rx /4- gap,
rx /4,
rx /3,360,360).moveTo(rightX,this.value + rx).circularArc(this.x + rx /2,this.value + rx /4- gap,
rx /4,
rx /3,360,360).stroke('#546269').fill('#fff');// select point stateif(this.pointState ===2){if(!flag){
shapes.pupils
// resets all 'pupils' operations.clear()// draw pupils.moveTo(leftX,this.value + rx).circularArc(this.x - rx /2,this.value + rx /4- deviationPupilsFinal - gap /2,
rx /6,
rx /6,360,360).moveTo(rightX, that.value + rx).circularArc(this.x + rx /2,this.value + rx /4- deviationPupilsFinal - gap /2,
rx /6,
rx /6,360,360).fill('#DD3F2A').stroke('1 #546269');
shapes.hands
// resets all 'hands' operations.clear()// draw hands.moveTo(
leftX - rx /2+ deviationHandsFinal,this.value + rx - deviationHandsFinal
).lineTo(leftX,this.value +2* rx).circularArc(
leftX - rx /2+ deviationHandsFinal,this.value + rx - deviationHandsFinal,
rx /5,
rx /5,-210+ deviationHandsFinal,180)// close by connecting the last point with the first straight line.close()// draw wrist.moveTo(
rightX + rx /2- deviationHandsFinal,this.value + rx - deviationHandsFinal
).lineTo(rightX,this.value +2* rx).circularArc(
rightX + rx /2- deviationHandsFinal,this.value + rx - deviationHandsFinal,
rx /5,
rx /5,210- deviationHandsFinal,180)// close by connecting the last point with the first straight line.close();return;}if(intervalFirst ===null){
intervalFirst =setInterval(function(){
deviationPupils +=1;
shapes.pupils
// resets all 'pupils' operations.clear()// draw pupils.moveTo(leftX, that.value + rx).circularArc(
that.x - rx /2,
that.value + rx /4- deviationPupils - gap /2,
rx /6,
rx /6,360,360).moveTo(rightX, that.value + rx).circularArc(
that.x + rx /2,
that.value + rx /4- deviationPupils - gap /2,
rx /6,
rx /6,360,360).fill('#DD3F2A').stroke('1 #546269');if(deviationPupils >= rx /5){clearInterval(intervalFirst);
intervalFirst =null;
deviationPupilsFinal = deviationPupils;
flag =false;}},10);}if(intervalSecond ===null){
intervalSecond =setInterval(function(){
deviationHands +=1;
shapes.hands
// resets all 'hands' operations.clear()// draw hands.moveTo(
leftX - rx /2+ deviationHands,
that.value + rx - deviationHands
).lineTo(leftX, that.value +2* rx).circularArc(
leftX - rx /2+ deviationHands,
that.value + rx - deviationHands,
rx /5,
rx /5,-210+ deviationHands,180)// close by connecting the last point with the first straight line.close()// draw wrist.moveTo(
rightX + rx /2- deviationHands,
that.value + rx - deviationHands
).lineTo(rightX, that.value +2* rx).circularArc(
rightX + rx /2- deviationHands,
that.value + rx - deviationHands,
rx /5,
rx /5,210- deviationHands,180)// close by connecting the last point with the first straight line.close();if(deviationHands >= rx /5){clearInterval(intervalSecond);
intervalSecond =null;
deviationHandsFinal = deviationHands;
flag =false;}},10);}}else{// hover point state
shapes.pupils
// resets all 'pupils' operations.clear()// draw pupils.moveTo(leftX,this.value + rx).circularArc(this.x - rx /2,this.value + rx /4- gap /2,
rx /6,
rx /6,360,360).moveTo(rightX,this.value + rx).circularArc(this.x + rx /2,this.value + rx /4- gap /2,
rx /6,
rx /6,360,360).stroke('1 #546269').fill('#DD3F2A');}}else{// pointState === 0, then normal point state
shapes.path
// resets all 'path' operations.clear()// draw path (body).moveTo(leftX,this.zero).lineTo(leftX,this.value + rx).lineTo(rightX,this.value + rx).lineTo(rightX,this.zero)// close by connecting the last point with the first straight line.close()// draw path (head).moveTo(leftX,this.value).circularArc(this.x,this.value + rx, rx, rx,180,180)// close by connecting the last point with the first straight line.close();
shapes['rect-transparent']// resets all 'rect-transparent' operations.clear();
shapes.hands
// resets all 'hands' operations.clear()// draw hands.stroke('1 #546269').moveTo(leftX,this.value +2* rx).lineTo(leftX - rx /2,this.value +3* rx).circularArc(
leftX - rx /2,this.value +3* rx,
rx /5,
rx /5,30,180)// close by connecting the last point with the first straight line.close()// draw wrist.moveTo(rightX,this.value +2* rx).lineTo(rightX + rx /2,this.value +3* rx).circularArc(
rightX + rx /2,this.value +3* rx,
rx /5,
rx /5,-30,180).fill('blue 0.5')// close by connecting the last point with the first straight line.close();
shapes.eyes
// resets all 'eyes' operations.clear()// draw eyes.moveTo(leftX,this.value + rx).circularArc(this.x - rx /2,this.value + rx /4,
rx /4,
rx /3,360,360).moveTo(rightX,this.value + rx).circularArc(this.x + rx /2,this.value + rx /4,
rx /4,
rx /3,360,360).stroke('#546269').fill('#fff');
shapes.pupils
// resets all 'pupils' operations.clear()// draw pupils.moveTo(leftX,this.value + rx).circularArc(this.x - rx /2,this.value + rx /4,
rx /6,
rx /6,360,360).moveTo(rightX,this.value + rx).circularArc(this.x + rx /2,this.value + rx /4,
rx /6,
rx /6,360,360).fill('blue 0.5').stroke('1 #546269');}}</script></body></html>