How to create an animated pie chart in Intuiface

I’ve recently worked on a project that required to dynamically animate pie charts based on certain user responses. Since I found a solution that works well in Intuiface, I thought to share how I did it.

Here is a demo that explains all the necessary steps (10MB).

You can create a pie chart using a combination of an empty circular panel collection, an ellipse element and, optionally, some graphics. In the above example, I used toggle buttons to filter an Excel database of color values, icons and percentage numbers.

The animation is the result of a binding between the Collection Size property and the X coordinate of a small moving red square at the bottom of the scene. A Linear Converter transforms the X decimal value into degrees. By animating the square through actions and triggers, you get the smooth effect of the pie chart filling the rim. Enjoy!

8 Likes

This is awesome. Thanks Paolo!

1 Like

@Frank.Yoder my pleasure!