AnyChart sample

by jpeter06

HTML

<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/latest/graphics.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
<div id="container"></div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

stage = acgraph.create("container");
var start;
var finish;
// a layer for green squares to be reused each new generation
var rectLayer = stage.layer();

function update(){
		requestAnimationFrame(update);
    stage.suspend();
	  if(rectLayer.numChildren()==0){
      for (var i = 0; i < 5; i++) {
        var left = Math.random() * 300;
        var qwer = Math.random() * 300;
        var rect = rectLayer.rect(left, qwer, 10, 10);
        rect.fill('green');
      }
      var aux=acgraph.vector.primitives.donut(stage, 100, 50, 75, 25, 0, 100)
      aux.fill(['red', 'orange']).stroke('5 orange 1');
      aux.listen('mouseover',function(){this.fill(['orange', 'red']).scale(2)})
      aux.listen('mouseout',function(){this.fill(['red', 'orange'])})
    }else{
    	rectLayer.forEachChild(function (element) {
    			return element.translate(Math.random()*2-1,Math.random()*2-1);
			})
    }
    stage.resume();
}
// this is to be performed on a click

update();
//setInterval(update, 100);