The preferred approach would be to specify nested data and use navigation.initialDrilldown
to specify the initial view. This would allow the user to navigate the chart etc.
However, if you want two completely separate piecharts you can do that by creating two charts and for the second specifying parentChart
instead of container
.
See http://jsfiddle.net/bw1k5jc7/ for an example:
var data1 = {
"subvalues": [
{ "value": 25, "name": "Red apples" },
{ "value": 15, "name": "Yellow apples" },
{ "value": 10, "name": "Green apples" }]
};
var data2 = { "subvalues": [
{ "value": 10, "name": "Big oranges" },
{ "value": 9, "name": "Small oranges" },
{ "value": 7, "name": "Green oranges" },
{ "value": 4, "name": "Pink oranges" }]
};
var container = document.getElementById("demo");
var p1 = new PieChart({
container: container,
data: { preloaded: data1 },
pie: {
innerRadius: 72
}
});
var p2 = new PieChart({
parentChart: p1,
data: { preloaded: data2 },
area: {
height: container.offsetHeight,
width: container.offsetWidth
},
pie: {
radius: 70,
innerRadius: 0.5
},
labels: { enabled: false }
});