Back

Pie Chart - donut, 3d (raised) theme, hierarchical

Pie chart with a 3D effect, which was enabled using 'theme: PieChart.themes.raised'.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    function success(data) {
        var data = data.subvalues;
        t = new PieChart(
            settings = {
                theme: PieChart.themes.raised,
                container: document.getElementById("demo"),
                data: {
                    dataFunction: function (id, limit, offset, success, error) {
                        var r = { subvalues: [] };
                        if (!id) {
                            for (var k in data) {
                                if (offset && k < offset) {
                                    continue;
                                }
                                if (data[k][1]) {
                                    r.subvalues.push({ id: k, value: !isNaN(data[k][2]) ? data[k][2] : 0, name: data[k][1] });
                                }
                            }
                        } else {
                            var labels = ["Cars", "Light Commercial Vehicles",
                            "Heavy Trucks", "Heavy Bus"];
                            for (var i = 3; i <= 6; i++) {
                                r.subvalues.push({
                                    id: id + "-" + i, value: !isNaN(data[id][i]) ? data[id][i] : 0,
                                    style: { expandable: false },
                                    name: labels[i - 3]
                                });
                            }
                        }
                        success(r);
                    }
                },
                slice: {
                    styleFunction: function (slice, data) {
                        var name = data.name;
                        slice.insideLabel.text = (slice.percent.toFixed()) + "%";
                        if (data.name) {
                            slice.label.text = data.name + ": " + data.value + " units";
                        }
                    }
                },
                interaction: { resizing: { enabled: false } }
            }
        );
    }
    // using a custom library to load CSV data
    loadCSV("/dvsl/data/pie-chart/total-cars-produced-2012.csv", null, [
            { type: "decimal", name: "rank" },
            { type: "string", name: "group" },
            { type: "decimal", name: "total" },
            { type: "decimal", name: "cars" },
            { type: "decimal", name: "light commercial vehicles" },
            { type: "decimal", name: "heavy trucks" },
            { type: "decimal", name: "heavy bus" }
    ], ";", function (data) {
        success(data);
    });

Data

Data 
1;Toyota;10104424;8381968;1448107;268377;5972;
2;GM;9285425;6608567;2658612;7558;10688;
3;Volkswagen;9254742;8576964;486544;169064;22170;
4;Hyundai;7126413;6761074;279579;70290;15470;
5;Ford;5595483;3123340;2394221;77922;;
6;Nissan;4889379;3830954;1022974;35451;;
7;Honda;4110857;4078376;32481;;;
8;PSA;2911764;2554059;357705;;;
9;Suzuki;2893602;2483721;409881;;;
10;Renault;2676226;2302769;373457;;;
11;Chrysler;2371427;656892;1702235;12300;;
12;Daimler AG;2195152;1455650;257496;450622;31384;
13;FIAT;2127295;1501979;498984;85513;40819;
14;BMW;2065477;2065216;261;;;
15;SAIC;1783548;1523398;190848;67805;1497;
16;Tata;1241239;744067;314399;165171;17602;
17;Mazda;1189283;1097661;91622;;;
18;Dongfeng Motor;1137950;539845;245641;337545;14919;
19;Mitsubishi;1109731;980001;127435;2295;;
20;Changan;1063721;835334;166727;59978;1682;
21;Geely;922906;922906;;;;
22;Fuji;753320;734959;18361;;;
23;BAIC;720828;83033;285081;348659;4055;
24;FAW;706012;480443;52983;168793;3793;
25;Great Wall;624426;487704;136722;;;
26;Mahindra;606418;429101;173083;3461;773;
27;Isuzu;600470;;32309;565617;2544;
28;Chery;563951;550565;13386;;;
29;AvtoVAZ;553232;553232;;;;
30;Brilliance;489770;231527;231862;26381;;
31;JAC;476356;200278;114864;145811;15403;
32;BYD;455444;455444;;;;
33;Chongqing Lifan;272657;183750;24035;64872;;
34;Volvo;234680;;;224000;10680;
35;Proton;162455;134934;27521;;;
36;China National Heavy Duty Truck;127792;;1224;125792;776;
37;Paccar;125336;;;125336;;
38;GAZ;125319;;88899;21561;14859;
39;Ashok Leyland;117738;;30776;61519;25443;
40;Hunan Jiangnan Automobile Manufacturing Co.;117051;117051;;;;
41;GAC Group;114157;87408;25611;;1138;
42;Shannxi;86283;8044;166;77808;265;
43;Porsche;86083;86083;;;;
44;Soueaste(Fujian);85515;81512;4003;;;
45;Navistar;83371;;;72005;11366;
46;XiamenKing Long;78226;;36451;;41775;
47;UAZ;70434;32469;37965;;;
48;Tangjun Ou Ling;69167;;16459;52708;;
49;Hebei Zhongxing;63221;4955;58266;;;
50;Sichuan Nanjun;60743;;18296;41602;845;
Download Data