CODEWITHSUNDEEP
javascripthighchartsamchartsjscharts
techgyani
techgyani

Reputation: 555

3D Pie chart in Highcharts/Javascript

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,

Upvotes: 3

Views: 11350

Answers (4)

thierry
thierry

Reputation: 56

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

Hereby also a playground for all options.

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

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

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

Upvotes: 5

David Gilbert
David Gilbert

Reputation: 4477

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

Upvotes: 2

Amila Iddamalgoda
Amila Iddamalgoda

Reputation: 4286

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 :)

Upvotes: 5

Related Questions