Lottie-web: Is it possible to create dynamic graph bar with text?

[yigitersoy87]

Hi there, I just wonder if we can do dynamic statistic animations with Lottie? For example bar graph, i would like to change text number via editor and same time bar graph will change too. Is this possible thing with Lottie and bodymovin?

[Inventsable]

Sure. Connect the bar graph value to an expression control like a slider, then update the value via Lottie API (separate repo on hernan's profile)

[yigitersoy87]

Sure. Connect the bar graph value to an expression control like a slider, then update the value via Lottie API (separate repo on hernan's profile)

Thank you for your help. I guess this is the Lottie API you mentioned right? https://github.com/bodymovin/lottie-api

[Danjuanlab]

Sure. Connect the bar graph value to an expression control like a slider, then update the value via Lottie API (separate repo on hernan's profile)

Thank you for your help. I guess this is the Lottie API you mentioned right? https://github.com/bodymovin/lottie-api

Simple bar charts can make it happen. because the data can be mapped to the height of the rectangle. But line charts can't. Because line charts require the use of “creatpath()" expressions, the expressions for constructing paths are not currently supported by bodymovin. And if you need to achieve a more ideal state, you also need to support bodymovin CSV data format, so that it is reasonable when the front-end data filling.

[Inventsable]

Hi @yigitersoy87, I created a demo repository for you as a proof of concept and to demonstrate a quick way to do this with a very simple graph.

You can see a live demo of it here, if on browser then you can smoothly use the knobs as if After Effects rotation controls, but if mobile then you may only be able to tap and not drag so the result may look a bit choppy. Regardless it does work, and I have some annotation on the readme and in the code itself to explain along with the AEP used.

I'm sure there's a better way to do all of it, especially the graph rectangles themselves instead of offsetting the position by half the height.

Also:

Thank you for your help. I guess this is the Lottie API you mentioned right? https://github.com/bodymovin/lottie-api

Yep, that's the one. Check the "example lottie api registration" link on the readme to see where and how I do this in the demo, just make sure you have lottie-api included as a script tag somewhere prior to creating the lottie animation. Including it in your index.html alone is enough to expose the lottie_api global object

[yigitersoy87]

Hi @yigitersoy87, I created a demo repository for you as a proof of concept and to demonstrate a quick way to do this with a very simple graph.

You can see a live demo of it here, if on browser then you can smoothly use the knobs as if After Effects rotation controls, but if mobile then you may only be able to tap and not drag so the result may look a bit choppy. Regardless it does work, and I have some annotation on the readme and in the code itself to explain along with the AEP used.

I'm sure there's a better way to do all of it, especially the graph rectangles themselves instead of offsetting the position by half the height.

Also:

Thank you for your help. I guess this is the Lottie API you mentioned right? https://github.com/bodymovin/lottie-api

Yep, that's the one. Check the "example lottie api registration" link on the readme to see where and how I do this in the demo, just make sure you have lottie-api included as a script tag somewhere prior to creating the lottie animation. Including it in your index.html alone is enough to expose the lottie_api global object

Thank you very much @Inventsable This is so helpful, you are great!

[ziggy6792]

"Simple bar charts can make it happen. because the data can be mapped to the height of the rectangle."

What about a pie chart?
I would like a pie chart to appear out of an animation. So there is some initial animation and the final segment sizes in the chart are adaptive to some specified amounts.

Is this possible?