Pie Chart - donut, 3d (raised) theme, hierarchical
Car manufacturers, totals, year 2012
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
Download 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;