Pie charts as network chart nodes

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

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

//No CSS for this example 

    var sliceColors = ["#6f52b8","#ffd618","#2fc32f", "#de672c", "#eab404", "#de672c"];
    function getPieChartDimensions(node) {
        var dimensions = netChart.getNodeDimensions(node);
        var output = {
            area: {
                left: dimensions.x - dimensions.radius,
                top: dimensions.y - dimensions.radius,
                width: dimensions.radius * 2,
                height: dimensions.radius * 2
            },
            pie: {
                radius: dimensions.radius,
                innerRadius: dimensions.radius * 0.6
            }
        };
        return output;
    }

    function movePieCharts() {
        var nodes = netChart.nodes();
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (!pieCharts[node.id])
                continue;
            var settings = getPieChartDimensions(node);
            var lastSettings = pieCharts[node.id].settings;
            if ( lastSettings.area.left === settings.area.left && lastSettings.area.top === settings.area.top && lastSettings.pie.radius === settings.pie.radius )
                continue;

            pieCharts[node.id].chart.updateSettings(settings);
            pieCharts[node.id].settings = settings;
        }
    }

    var pieCharts = new Object(null);
    var updatePieCharts = function () {
        var oldCharts = pieCharts;
        pieCharts = new Object(null);

        var nodes = netChart.nodes();
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (!node.data.categories) {
                continue;
            }
            if (oldCharts[node.id]) {
                pieCharts[node.id] = oldCharts[node.id];
                delete oldCharts[node.id];
            }
            else {
                var settings = getPieChartDimensions(node);
                settings.parentChart = netChart;
                settings.data = { preloaded: { subvalues: node.data.categories } };
                settings.labels = { enabled: false };
                settings.advanced = { initialAnimation: false };
                settings.pie = {
                    style: {
                        sliceColors: sliceColors
                    }
                };
                pieCharts[node.id] = { chart: new PieChart(settings), settings: settings };
            }
        }
        var keys = Object.keys(oldCharts);
        for (var i = 0; i < keys.length; i++)
            oldCharts[keys[i]].chart.remove();
    };

    var netChart = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        events: {
            onPositionChange: movePieCharts,
            onChartUpdate: updatePieCharts
        },
        style: {
            node: {
                fillColor: "rgba(86,185,247,1)",
                radius: 30
            },
            nodeStyleFunction: function (node) {
                node.label = node.data.name;
            }
        },
        data: {
            preloaded: {
                nodes: [
                    {
                        id: 0,
                        name: "Node with Piechart (multi-level)",
                        categories: [
                            {
                                id: 1,
                                name: "Grapes",
                                value: 10,
                                subvalues: [
                                    { value: 2, name: "Sweet grapes" },
                                    { value: 5, name: "Sour grapes" },
                                    { value: 3, name: "Other grapes" }
                                ]
                            },
                            {
                                id: 2,
                                name: "Other fruits",
                                value: 5
                            }
                        ]
                    },
                    {
                        id: 1,
                        name: "Node",
                        categories: [
                            {
                                id: 1,
                                name: "Grapes",
                                value: 3,
                                subvalues: [
                                    { value: 2, name: "Sweet grapes" },
                                    { value: 1, name: "Sour grapes" },
                                    { value: 3, name: "Other grapes" },
                                    { value: 4, name: "Red grapes" }
                                ]
                            },
                            {
                                id: 2,
                                name: "Other fruits",
                                value: 7
                            }
                        ]
                    },
                    {
                        id: 2,
                        name: "Node with Piechart",
                        categories: [
                            {
                                id: 1,
                                name: "Fruits",
                                value: 20
                            },
                            {
                                id: 2,
                                name: "Sweets",
                                value: 90
                            },
                            {
                                id: 3,
                                name: "Beverages",
                                value: 45
                            }

                        ]
                    }
                ],
                links: [
                    { id: "l0", from: 0, to: 1 },
                    { id: "l1", from: 1, to: 2 }
                ]
            }
        }
    });

//No separate data for this example