Stacked / Nested / Overlapping pie chart and donut chart with javascript

1
votes

I am not sure if anyone has come across this scenario or has even made a solution but basically I am able to create simple Pie and Donut charts using Flot Charts. What I am looking for though is a scenario where there is a pie chart in the center and it is surrounded by a Donut Chart. Very similar to this question but that question is now 3 years old and was never really answered.

I tried creating two charts using the same DIV but then one just overwrites the other. I thought of creating two different charts on two different DIVs and having them overlap but that just doesnt seem like a clean approach that will also accommodate responsive behavior.

Any thoughts / suggestions are welcome.

Thanks in advance

1
javascriptchartsflot
Two overlapping DIVs/Canvases sounds like the easiest approach. Why would this not accommodate "responsive" behavior? You'll just have to size everything together. – Mark
You can try to look at every js library which has donut charts on this page: socialcompare.com/en/comparison/… But I have never seen such charts and it is most probably that you will have to write your own plugin for an existing library. – vortexwolf

1 Answers

0
votes

The answer to this is not simple as some of the comments have already indicated but I did find something that comes pretty close - HighCharts. They do have a con-centric donut chart that gives exactly the look and feel desired - infact LinkedIn uses them to display their dashboard statistics. The downside to Highcharts is that it is a paid library and its not cheap if you are planning to deploy on a commercial web application

The alternative is to use MorrisCharts - http://morrisjs.github.io/morris.js/donuts.html

They do have some good donut charts that come pretty close to the need.