How to unroll a donut chart from 0° to a specific angle by JavaScript

[Dario de Judicibus]

I am a former Flash developer. I recently decided to start using Animate Pro CC 2017 to develop some animation to be included in a web site. I am experimenting with infographics now. The first experiment is the following:

1. to create a simple donut chart like this:

2. to define the end angle E by using an external JSON file

3. to create a small jQuery script to animate the donut chart so that the end angle moves from 0° to E

4. to use JavaScript to show the E value as the animation ends

5. to export it to HTLM5 to embed it in a web page

I cannot find any tutorial on that and looking at the application I have some difficulties to find the commands that I need to do that.

Any help appreciated.

Thank you in advance.

[kglad]

you can use the graphics class to do draw, EaselJS v1.0.0 API Documentation : Graphics

i'd use regular jquery to load the json file.  (if you add a component to your library, jquery will be included in your published files if you don't want to do that manually.)

[Dario de Judicibus]

OK, but there is no drawPrimitiveOval in that class...

[kglad]

because you want to animate you would use lineTo repeatedly while increasing the angle and the lineTo point:

graphics.lineTo(startX+radius*Math.cos(angle*Math.PI/180),startY+radius*Math.sin(angle*Math.PI/180));

angle++;

if(angle>E){

remove your ticker listener

}