3

I need to draw 3d pie chart in javascript. It should look like below :- 3d Pie chart

There are various example present in the Google charts, amcharts and jscharts for 3d pie Graphs but none looks like the below image.

Links :- http://www.amcharts.com/demos/3d-pie-chart/

In PHP I found one solution here http://www.advsofteng.com/doc/cdphpdoc/multidepthpie.htm but I want something interactive with tooltips support.

Please suggest any javascript library for this. I love to use highcharts but it do not support even simple 3d Pie charts.

Thanks,

techgyani
  • 535
  • 8
  • 24
  • 3
    1) I am not aware of any javascript or php solution that will make graphics that look like that, with that level of polish. 2) despite being a pretty picture, that type of chart is literally about the worst way you could choose to show your data. Much better to dress your page up with pretty graphics, and show your data on a chart that is simple, straightforward and shows what it should actually show. FWIW. – jlbriggs Mar 13 '14 at 13:44
  • I agree that level of transparency is almost impossible to build on Javascript.I just want to display a multidepth 3D pie chart like [Multidepth Pie](http://www.advsofteng.com/doc/cdphpdoc/multidepthpie.htm). Using [Pchart](http://www.pchart.net/) I was also able to get the same output. Problem is that it is not interactive like its JS counterparts. – techgyani Mar 13 '14 at 15:43

4 Answers4

5

It's the top most requested feature in Highcharts.

http://highcharts.uservoice.com/forums/55896-general and it looks like we have to wait some time!

Does it support 3D pie chart?

But using Google visualization API you can achieve this very easily. enter image description here

code

   <html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

See documentation for more features https://developers.google.com/chart/interactive/docs/gallery/piechart

Hope I helped you :)

Community
  • 1
  • 1
Amila Iddamalgoda
  • 4,166
  • 11
  • 46
  • 85
  • Thanks Amila this is very helpful but it looks like Google charts do not support multidepth in piecharts. – techgyani Mar 13 '14 at 15:48
5

Well, we are right now working on 3D charts, see:

Edit: It's already released with Highcharts 4.x version, see samples.

Paweł Fus
  • 44,795
  • 3
  • 61
  • 77
  • Thanks Pawel. I think you are making very good progress and with a little more effort I can get exactly what I want. :-) – techgyani Mar 13 '14 at 15:35
2

Orson Charts for HTML5 does 3D pie charts (amongst others), but not with the multiple levels that you show in the example (what do the levels indicate?). Charts can be rotated at any angle (see live demos), tooltip and mouse event support is on the way.

Sample pie chart

David Gilbert
  • 4,427
  • 14
  • 22
0

Shameless plug, I recently wrote this Open Source 3D pie chart in Babylon.js (JavaScript) : Candy Pie

Hereby also a playground for all options.

thierry
  • 46
  • 3