Search code examples
csssvgsvg-animate

Animate infographic SVG with CSS (donut chart)


I'd like to make a 'dashboard' page and show some figures in a graphical nice way.

My idea is to use an Illustrator design, export it as SVG and change the charts with CSS according to the values from the database.

Like these elements: http://graphicriver.net/item/infographic-elements/2656503?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=REDPENCILMEDIA

I would like to use those donut charts to visualize percentages. But how do I adjust the graphic with CSS (or jQuery).

Found some tutorials on d3.js and other libraries, but I'd like to use the Illustator design instead of generating the graph. Been on Google for 2 days now..

Any tips, hints, links, etc are welcome! Thanks :)


Solution

  • I think this is what you've been looking for: http://www.chartjs.org/ It's a lightweight js-library that allows you to make piecharts, doughnutcharts, .. easily. Pretty easy to customize too. Customization is always a pain in the ass for such things, but starting from scratch is much harder, so i highly recommend this.