Where do I make a circular charts like Chartbeat.com in jQuery?

Question

I am planning on making an analytics dashboard and would like to implement circular charts like the image attached to this question: enter image description here

and I would like to do it using jQuery. Do you guys have any usefull links to resources or to other SO questions? Would be awesome!

Thanks!

score 4 · Accepted Answer · answered Aug 24 '12 at 19:07

4

You can also take a look at :

http://bernii.github.com/gauge.js/

http://www.justgage.com/

Both of them look really good and seems pretty easy to use.

answered Aug 24 '12 at 19:07

lethargicpanda

873
1
10
18

score 2 · Answer 2 · edited May 23 '17 at 12:30

2

The easiest way would probably be to create an SVG that mimics the appearance you want, and then use JavaScript/jQuery to modify the source of the SVG. The design you're requesting could probably be acheived by simply placing two arcs on top of one another.

Deriving from this excellent answer on calculating arcs, creating two overlapping ones could look something like this, which also demonstrates updating the arc dynamically.

edited May 23 '17 at 12:30

Community

1
1

answered May 21 '12 at 06:47

David Hedlund

128,221
31
203
222

Hey David! Thanks for the answer. After finding out that these type of charts are actually called "Donuts" it was easier to find some nice resources. Interesting sources: http://mtibben.github.com/jquery.donutchart/example.html http://wijmo.com/widgets/wijmo-complete/charts-pie-chart/ – Ismailp May 21 '12 at 06:53

score 0 · Answer 3 · answered Apr 10 '14 at 06:43

0

lethargicpanda's suggestions are cool. Check out jQuery Knob too. It also allows user input.

answered Apr 10 '14 at 06:43

Deepak Thomas

3,355
4
37
39

Where do I make a circular charts like Chartbeat.com in jQuery?

3 Answers3