how to build a 3d donut chart

Question

I wonder if it's possible to build a 3d donut chart in html. I have found a interesting link here but infortunatly i need to add links (or javascript event) when clicking to launch a ajax request.

Have you ever done such a thing ?

Thanks for your answers

Answer 1

See the following example I've just made:

http://jsfiddle.net/baQCD/3/embedded/result/

The key point (pun intended) is to add a url key for each row (object) in the data array, and use it in the 'click' event handler:

point: {
    events: {
        click: function(e) {
            location.href = e.point.url;
            e.preventDefault();
        }
    }
},

In your case instead of opening a new url, you could do your ajax request or do anything else. In my example I've shown how to manipulate the data and title.

click: function(e) {
    if (this.name == "Randomize!") {
        sliceK = getRandomInt(0,chart.series[0].data.length-1);
        chart.options.series[0].data[sliceK].y = getRandomInt(1,30);
        chart = new Highcharts.Chart(chart.options);
    } else if (this.name == "Link") {
        location.href = this.url;
        e.preventDefault();
    } else {
        chart.setTitle(null,{text:this.name + " clicked"});
    }
}

You can immediately see, 2 features I very like in Highcharts, the ability to print or download the chart, and the ability to disable part of the data (removing it from the chart) by clicking on the legend.

---

This is based on the code shown in:

http://birdchan.com/home/2012/09/07/highcharts-pie-charts-can-have-url-links/ http://www.highcharts.com/demo/3d-pie-donut/

Answer 2

this is a simple 3d Axonometric class i wrote for testing, its very simple it puts the canvas transformation into a plane of zy or zx or yx... it uses canvas setTransform you first have to call the axionometric class with phi and theta the angles of view get_bd is a function where you can enter x,y,z coordinates and the method returns an object with b and d value... b is the x of the screen and d is the y of the screen.

i have appended and example, you just have to put a canvas tag in the html with id canvasView

//3d Maths - Axonometric -- Artner Thorsten -- Austria -- Wiener Neustadt

var context=document.getElementById("canvasView").getContext("2d");

function Axonometric (phi,theta)
    {
    var cosPHI=Math.cos(phi);
    var sinPHI=Math.sin(phi);
    var cosTHETA=Math.cos(theta);
    var sinTHETA=Math.sin(theta);

    this.cosPHI=cosPHI;
    this.sinPHI=sinPHI;
    this.cosTHETA=cosTHETA;
    this.sinTHETA=sinTHETA;

    this.phi=phi;
    this.theta=theta;
    }

Axonometric.prototype.get_bd=function (x,y,z)
    {
    var b=y*this.cosPHI-x*this.sinPHI-500;
    var d=x*this.cosPHI*this.cosTHETA+y*this.sinPHI*this.cosTHETA-z*this.sinTHETA+500;
    return {b:b,d:d};
    }

Axonometric.prototype.plane_zy=function (x)
    {
    context.setTransform (0,this.sinTHETA,-this.cosPHI,this.sinPHI*this.cosTHETA,500+x*this.sinPHI,500+x*this.cosPHI*this.cosTHETA);
    }

Axonometric.prototype.plane_zx=function (y)
    {
    context.setTransform (this.sinPHI,this.cosPHI*this.cosTHETA,0,this.sinTHETA,500+y*-this.cosPHI,500+y*this.sinPHI*this.cosTHETA);
    }

Axonometric.prototype.plane_yx=function (z)
    {
    context.setTransform (this.sinPHI,this.cosPHI*this.cosTHETA,-this.cosPHI,this.sinPHI*this.cosTHETA,500,500-z*this.sinTHETA);
    }

Axonometric.prototype.draw_axis=function (length)
    {
    var O=this.get_bd (0,0,0);
    var X=this.get_bd (length,0,0);
    var Y=this.get_bd (0,length,0);
    var Z=this.get_bd (0,0,length);
    context.save;
    context.beginPath ();
    context.textAlign="top";
    context.fillText ("X",-X.b,X.d);
    context.moveTo (-O.b,O.d);
    context.lineTo (-X.b,X.d);
    context.strokeStyle="red";
    context.stroke ();
    context.beginPath ();
    context.fillText ("Y",-Y.b,Y.d);
    context.moveTo (-O.b,O.d);
    context.lineTo (-Y.b,Y.d);
    context.strokeStyle="green";
    context.stroke ();
    context.beginPath ();
    context.fillText ("Z",-Z.b,Z.d);
    context.moveTo (-O.b,O.d);
    context.lineTo (-Z.b,Z.d);
    context.strokeStyle="blue";
    context.stroke ();
    context.restore ();
    }

// example
var Viewer=new Axonometric (Math.PI/4, Math.PI/8);
Viewer.draw_axis (400);

Viewer.plane_yx (0);
context.beginPath ();
context.fillStyle="red";
context.fillRect (0,0,200,200);

Viewer.plane_zx (0);
context.beginPath ();
context.fillStyle="lightgrey";
context.fillRect (0,0,200,-200);

Viewer.plane_zy (0);
context.beginPath ();
context.arc (-100,100,100,0,2*Math.PI);
context.fillStyle="black";
context.fill();

Answer 3

Using an existing library is an easy solution. If I'm understanding your question properly, you would like users to be able to click on a slice to open a new URL.

This can be achieved in ZingChart by setting up a "pie3d" type, and then including "url" and "target" in the series.

Here's how I did it:

    {
    "graphset":[
        {
            "type":"pie3d",
            "plot":{
                "slice":45
            },
            "plotarea":{
                "margin-top":"35px"
            },
            "series":[
                {
                    "text":"Apples",
                    "values":[5],
                    "url":"http://www.google.com",
                    "target":"_blank"
                },
                {
                    "text":"Oranges",
                    "values":[8]
                },
                {
                    "text":"Bananas",
                    "values":[22]
                },
                {
                    "text":"Grapes",
                    "values":[16]
                },
                {
                    "text":"Cherries",
                    "values":[12]
                }
            ]
        }
    ]
}

Answer 4

Expanding on Merrily's answer, you can also use ZingChart's API to track chart interaction and call any functions you like.

var ZCwindow;
function openWindow() {
ZCwindow = window.open("http://zingchart.com/docs/chart-types/pie/", "ZingChart Pie Charts");
}    

zingchart.node_click = function(e){
    if(e.value == 5) openWindow();
};

You can view a live demo here.

I am part of the ZingChart team. You can reach out to us for assistance via support@zingchart.com

Answer 5

For the past few months I have been working with Google Visualization charts, and I think it may be exactly what you're looking for. Here is the link to the documentation.

This will give you a donut chart (though I am not sure if you can make it 3-D or not, I believe you can) and you can add event handlers for when the user clicks on a slice. Here's what it looks like:

I highly recommend trying the charts, I have found them to be extraordinarily useful. Good luck!

EDIT: My apologies, after re-reading the section on donut charts it appears the new API does not yet support 3-D donut charts. Does it absolutely have to be three-dimensional? If not this is still an excellent choice.

Answer 6

It's not 3D, but you should have a look at chart.js