Simple Pie Chart with NVD3
An example of a simple pie chart drawn with NVD3
by Sampath
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
<div id="figure">
</div>
JavaScript
var h = 600;
var r = h / 2;
var arc = d3.svg.arc().outerRadius(r);
var data = [{
"label": "Colorectale levermetastase (n=336)",
"value": 74
},
{
"label": "Levensmetatase van andere origine (n=32)",
"value": 7
},
{
"label": "Beningne levertumor (n=34)",
"value": 7
},
{
"label": "Primaire maligne levertumor (n=56)",
"value": 12
}
];
var data1 = [{
"label": "Colorectale levermetastase (n=336)",
"value": 62
},
{
"label": "Levensmetatase van andere origine (n=32)",
"value": 7
},
{
"label": "Beningne levertumor (n=34)",
"value": 7
},
{
"label": "Primaire maligne levertumor (n=56)",
"value": 12
}
];
var data2 = [{
"label": "Colorectale levermetastase (n=336)",
"value": 52
},
{
"label": "Levensmetatase van andere origine (n=32)",
"value": 7
},
{
"label": "Beningne levertumor (n=34)",
"value": 7
},
{
"label": "Primaire maligne levertumor (n=56)",
"value": 12
}
];
var data3 = [{
"label": "Colorectale levermetastase (n=336)",
"value": 52
},
{
"label": "Levensmetatase van andere origine (n=32)",
"value": 7
},
{
"label": "Beningne levertumor (n=34)",
"value": 7
},
{
"label": "Primaire maligne levertumor (n=56)",
"value": 12
}
];
var data4 = [{
"label": "Colorectale levermetastase (n=336)",
"value": 52
},
{
"label": "Levensmetatase van andere origine (n=32)",
"value": 7
},
{
"label": "Beningne levertumor (n=34)",
"value": 7
},
{
"label": "Primaire maligne levertumor (n=56)",
"value": 12
}
];
//push all the data into a single array
var alldata = [];
alldata.push(data);
alldata.push(data1);
alldata.push(data2);
alldata.push(data3);
alldata.push(data4);
//alternatively just unify the data in such a structure for the forEach loop.
var colors = [
'rgb(178, 55, 56)',
'rgb(213, 69, 70)',
'rgb(230, 125, 126)',
'rgb(239, 183, 182)'
]
//go...