Discussion on Flat Pie Charts and Progress Bars Templates

Discussion on Flat Pie Charts and Progress Bars Templates

Cart 261 sales

23 comments found.

Hi Cesgra, can I get something like this under “We have good experience to deliver success at scale”... I want to showcase my social media followers on my website.. and can I adjust the speed on donut charts, I want to make it little slow… one more thing how much this really cost for lifetime use?

Yes. One billion dollars in cash.

Will this let me have 3 charts on a page all with different colors? I know some change the colors globally only.

First I thaught it’s an HTML template, but as I have seen i can’t modify it, what’s the problem?


You can edit this template only in Adobe Edge Animate and save as html.

Kind regards, Serge

I never used Adobe Edge, I made a mistake as I thought is a HTML & JQuery script…Can I get an refund? I am really sorry

I’m able to edit the color and font in edge animate but it doesn’t stay like that in the saved file. How can I change the color of the font?


To change color you need to click on object, go to the Properties panel, find ‘Text’ tab, choose your color. Then click on ‘File’ menu on the top and select ‘Save as’ or you can select ‘Publish’ to export animation to html or oam format.

Kind regards, Serge

hi, there is no edge animate file in the download ??? ..only javascript files. how can i get the adobe adge animate files?


All Edge Animate file included in the download. Check out files with .an filename extension like: - - - etc.

Kind regards, Serge

THX for your fast reply. but adobe edge is not longer available on the market. so how can i open it in adobe animate CC?

Adobe Animate CC not supported Edge Animate .an files. But if you have Adobe CC subscription you still able to download Edge Animat from Creative Cloud.

Is this working for Edge Animate CC 2015?

Also, how do we change and customize the content? Is it all in edge animate stage or we have to go into javascipt or html code created by Edge Animate?

Como faço para adicionar mais de um chart na mesma página?

Hello. Just purchased this great looking template. But. It doesn’t seem to work on Edge 2014.1.1. Animation work fine, but the counter stays at zero during the animation (or any other value I give it).

Can you please tell me how to update the script?

Hello! Try to preview counter animation in browser.

Yep, that works. No problem. But I need publish the lot as Animate Deployment Package – I’m using the script in a Adobe Publishing Folio. And that does not seem possible?

Hi, how can I copy this in my existing edge animate project?

Looks good, but it has to be set to autoplay to work, no good on a 1 page website, unless your placing your infographic at the top of the page. The animation cannot be controlled by scroll motion…....


1eo Purchased

I have an official response from the edge animate team, looks like the latest update to edge animate requires additional code

1eo Purchased

Thanks for this pie chart/counter. Its very well built and easily customisable.

what code can I use to change the duration of the counter?


If mean animation duration you need to drag this transitions on timeline to the desired time.

If you mean how to change counter numbers you need to click on Action on the timeline and change the number on ten line. $({someValue: 0}).animate({someValue: 25}


1eo Purchased

Thanks for your help. In a simple animation changing the code in the time line trigger will enable the counter when the pie chart is converted to a symbol. However in a more complication animation where I had to import the symbol this wont work. It may be a edge animate bug, any suggestions ?


So if i change the number in the code the pie doesn’t react? Do i have to change the mask manually? I know how to change the counter but not the pie. Would be nice if you just changed the number and the pie changed accordingly, or have i missed that bit? :)

Thanks Ollie

Hello! This item comes with fixed numbers and pie chart animation. If you need different numbers you need to edit mask manually. I’m working on update with automatic changes. Regards, Serge.

Hi, Thanks for the reply. Ive worked it out now, best bet was to work on the mask in your 100% pie, just bring it back to the position you want, add a “stop” command, change the number and bosh, works like a charm. Great stuff by the way, easy to use and manage. Thanks again Ollie

You’re welcome! Please don’t forget to rate this item!

Your code below seems incomplete as it does not do what it says:

$({someValue: 0}).animate({someValue: 90}, { // match the animate duration property to the length of the timeline animation duration: dur,

duration: dur, updates the text but does not update the width of Progress_Bar_x matching the animate duration. Can you provide the missing properties so that when someValue changes so does the width of Progress_Bar_x.

For example if someValue is 90, as it is above and the timeline width is 1000px, then when it is published / previewed the width of the Progress_Bar_x matches the duration thus becoming 900px. If SomeValue is changed to 60 then Progress_Bar_x width becomes 600px.

This would be very helpful.

Thank you

Hey: Great little gadget. I’m totally new to this…so this question might seem very “simple”....but how do I make that counter have a “ ” sign after the number? So it will run from “0 ” to “25%” for example.

On the plus side…I sorta feel like a bit of a genius ‘cause I read and followed your instructions above to make the counter say what I wanted it to say.

Thanks in advance for any help.

for whatever reason, at times, the “percent sign” doesn’t appear to be showing up in my question.

Hello! To add some charasters you need to click on Actions Trigger on timeline and edit code opened in new window.

Chck out this FAQ

So, the numbers are changeable, but the charts don’t react to the changes? Really?

By default item have several ready-made charts templates (25, 50, 75, 100% etc.). You can also edit charts and numbers manually.

Hey but you can put your number eg 48

Hello! To set the value of the counter you need to double click on timeline action trigger and change the ‘Some Value’ parameter to the desired value.

For example from 0 to 48: $({someValue: 0}).animate({someValue: 48}


Hello, that’s so great. – It works nice and it’s so beautiful. Congrats ! Just a question please. I meet some difficulty to change value with a php variable like $result instead of someValue. Is that possible with php ? Thank you by advance

Hello and thank you! Sorry, I can’t help with php. You can change the value in Edge Animate, open trigger and change someValue (from and to) parametrs.

Hi there. I just purchased this and am getting this error message when trying to load it in edge animate: “This composition was saved by a newer version of edge animate., and cannot be opened by this version. Try using a newer version of edge animate.” The funny thing is, I am on Adobe Creative Cloud and have the most recent version of all Adobe products, including Edge Animate. Any thoughts?

Hello! Please check which version Edge Animate you are using. Files must work well with version 3.0 and above.

As I expected… it was an adobe issue. Thanks!


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey