Metric Driven Animations - Profile Completion Dial

[ryandewitt]

Hello all. Hope you're doing ok. I would like to share some tips and connect with others about creating real-time data visualizations in communities. Basically, graphics or animations that are driven by community metrics.  

One way we've accomplished this is using a single endpoint (Macro) with Rest that populates graphics in real time. 

Here's a video attempt on how a Profile Completion Dial Component can be created and implemented driven by metrics. It takes 5 User metrics to get 100% with the animated doughnut.

vid link

https://youtu.be/aAu5AdAToEM

What other successes have you had with this ? I'd love to discuss and learn more. 

Metrics needed with Badge Rule (the script animates and the rule issues badge) 

• setting.profile.signature != 'default' AND
• setting.profile.name_first != 'default' AND
• setting.profile.name_last != 'default' AND
• setting.profile.location != 'default' AND
• setting.user.max_consecutive_logins >= 1 AND
• setting.profile.biography != 'default' AND
• setting.profile.title!= 'default'

@ryandewitt

[lilim · Accepted solution]

Neat idea, @ryandewitt - thanks for sharing!

I'd love to see more visualizations like this OOTB. It would really help spruce up the user profile and amplify gamification within the community. 👍

[Wendy_S]

Pretty cool! Thanks for sharing.

@fuenteso @Parshant You might like this too.

Cheers

[ryandewitt]

Thanks for the reply. 

[Parshant]

Thanks for mentioning over here @Wendy_S ,

 @lilim We have created this type of same functionality and animation first time way back four years ago in 2016 to one of our customer community.

Here are some of the examples on the same that we have created similar to this.

Here are some examples videos on that:

https://share.vidyard.com/watch/mzB8c7fRxjQYaVuTXwStkd?

https://share.vidyard.com/watch/CXfstNGJ7XUFCoGcXrmbBN?

Screenshots

Example 1:

Example 2:

Example 3:

We have also build up these things for gamification, for users to achieve to next level and also at what stage points he is in, and numbers of points which required to reach for next level.

[ryandewitt]

Thanks for sharing my video shows how to do it If others are interested in creating similar metric driven animations

I really like your style in your dial and be tight face nice job @Parshant 

Do you have any documentation or Scripts online for others to do this type of animation?