Back

Piechart on netchart

Simple example that loads piechart on netchart node onclick

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 

    var lastPieChartNode;
    var lastSettings;
    
    var sliceColors = ["#6f52b8","#ffd618","#2fc32f", "#b0dc0b", "#eab404", "#de672c"];
    
    function hidePieChart() {
        pieChart.updateSettings({
            area: { left: -100, top: -100, width: 0, height: 0 }
        });
        lastSettings = null;
        lastPieChartNode = null;
    }

    function updatePieChart() {
        var selectedNodes = netChart.selection();
        if (selectedNodes.length === 0) {
            hidePieChart();
            return;
        }

        var currentNode = selectedNodes[0];
        if (currentNode.data.categories == null || currentNode.data.categories.length === 0) {
            hidePieChart();
            return;
        }

        if (currentNode === lastPieChartNode) {
            return;
        }
        lastPieChartNode = currentNode;
        var pieChartSettings = getPieChartDimensions(currentNode);
        pieChartSettings.data = { preloaded: { subvalues: currentNode.data.categories } };

        // required so that PieChart drilldown level is reset.
        pieChartSettings.navigation = {};

        pieChart.updateSettings(pieChartSettings);
    }

    function getPieChartDimensions(node) {
        var dimensions = netChart.getNodeDimensions(node);
        var output = {
            area: {
                left: dimensions.x - dimensions.radius * 5,
                top: dimensions.y - dimensions.radius * 5,
                width: dimensions.radius * 10,
                height: dimensions.radius * 10
            },
            pie: {
                radius: dimensions.radius + 40,
                innerRadius: dimensions.radius
            }
        };
        return output;
    }

    function movePieChart() {
        var selectedNodes = netChart.selection();
        if (selectedNodes.length === 0) {
            return;
        }
        var currentNode = selectedNodes[0];
        if (currentNode.data.categories == null || currentNode.data.categories.length === 0) {
            return;
        }

        var settings = getPieChartDimensions(currentNode);
        var currentArea = settings.area;
        if (lastSettings
                && lastSettings.area.left === currentArea.left
                && lastSettings.area.top === currentArea.top
                && lastSettings.pie.radius === settings.pie.radius) {
            return;
        }
        lastSettings = settings;
        pieChart.updateSettings(settings);
    }

    var netChart = new NetChart({
        container: document.getElementById("demo"),
        area: { height: 450 },
        events: {
            onSelectionChange: updatePieChart,
            onPositionChange: movePieChart
        },
        style: {
            nodeLabel:{
                padding: 1,
                textStyle:{font:"8px Arial", fillColor: "white"},
                backgroundStyle:{fillColor:"rgba(47,195,47,1)"}
            },
            nodeStyleFunction: function (node) {
                node.label = node.selected && node.data.categories ? '' : node.data.name;
                var radius = 30;
                node.fillColor = "rgba(86,185,247,0.8)";
                if (node.data.categories) {
                    for (var i = 0; i < node.data.categories.length; i++) {
                        radius += node.data.categories[i].value;
                    }
                }
                node.radius = radius;
            },
            selection: {
                sizeConstant: 0,
                sizeProportional: 0
            }
        },
        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: "Default Node"
                    },
                    {
                        id: 2,
                        name: "Node with Piechart (single slice)",
                        categories: [
                            {
                                id: 1,
                                name: "Fruits",
                                value: 20
                            }
                        ]
                    },
                    {
                        id: 3,
                        name: "Node with Piechart (single level)",
                        categories: [
                            {
                                id: 1,
                                name: "Clothes",
                                value: 6
                            },
                            {
                                id: 2,
                                name: "Electronics",
                                value: 4
                            },
                            {
                                id: 3,
                                name: "Entertainment",
                                value: 12
                            },
                            {
                                id: 4,
                                name: "Software",
                                value: 8
                            },
                            {
                                id: 5,
                                name: "Food",
                                value: 18
                            }




                        ]
                    }

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

    var pieChart = new PieChart({
        parentChart: netChart,
        data: {
            preloaded: {
                subvalues: []
            }
        },
        pie: {
            style: {
                sliceColors: sliceColors
            }
        },
        labels: {
            enabled: false
        }
    });

Data

Data 
//No separate data for this example