Pie Charts

SarojThapa1 · ‎11-22-2016

I have two tabs in an Info Window Popup. Each tab displays a piechart with two options - % complete and % incomplete. When a feature layer is clicked, the popup window shows up. But the first tab does not display a piechart. However, the 2nd tab displays the piechart. If I click the first tab after I click the 2nd tab, the pie chart shows up. The piechart does not show up in the first tab when a feature layer is clicked. Please help me with this.

The codes:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Pie Chart</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .chart {
            width:200px;
            height:200px;
            padding:0 !important;
        }
    </style>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        var map;
        // Try other themes: Julie, CubanShirts, PrimaryColors, Charged, BlueDusk, Bahamation, Harmony, Shrooms, Minty, Tom
        var theme = "PrimaryColors";
        require([
            "esri/map", "esri/layers/FeatureLayer",
            "esri/dijit/InfoWindow", "esri/InfoTemplate",
            "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
            "dijit/layout/ContentPane", "dijit/layout/TabContainer",
            "dojox/charting/Chart2D", "dojox/charting/plot2d/Pie",
            "dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip",
            "dojox/charting/themes/" + theme,
            "dojo/dom-construct", "dojo/dom-class",
            "dojo/number", "dojo/domReady!"
        ], function(
                Map, FeatureLayer,
                InfoWindow, InfoTemplate,
                SimpleFillSymbol, SimpleRenderer,
                ContentPane, TabContainer,
                Chart2D, Pie,
                Highlight, MoveSlice, Tooltip,
                dojoxTheme,
                domConstruct, domClass,
                number, parser
        ) {
            // Use the info window instead of the popup.
            var infoWindow = new InfoWindow(null, domConstruct.create("div"));
            infoWindow.startup();

            map = new Map("map", {
                basemap: "topo",
                center: [-113.405, 43.521],
                infoWindow: infoWindow,
                zoom: 5
            });
            map.infoWindow.resize(275, 275);

            var template = new esri.InfoTemplate();
            template.setTitle("<b>${Instl_Name}</b>");
            template.setContent(getWindowContent);

            var layer = new FeatureLayer("RESTUrl/FeatureServer/0", {
                mode: FeatureLayer.MODE_ONDEMAND,
                infoTemplate: template,
                outFields: ["*"]
            });

            map.addLayer(layer);

            function getWindowContent(graphic) {
                // Make a tab container.
                var tc = new TabContainer({
                    style: "width:100%;height:100%;"
                }, domConstruct.create("div"));

                // Display first pie chart for Collection.
                var cp1 = new ContentPane({
                   title: "Collection"
                });
                tc.addChild(cp1);

                var c1 = domConstruct.create("div",{
                    id: "Collection"
                }, domConstruct.create("div"));
                var chart1 = new Chart2D(c1);
                domClass.add(chart1, "chart1");

                chart1.setTheme(dojoxTheme);
                chart1.addPlot("default", {
                    type: "Pie",
                    radius: 70,
                    htmlLabels: true
                });

                tc.watch("selectedChildWidget", function(name, oldVal, newVal) {
                    if (newVal.title === "Collection") {
                        chart1.resize(180, 180);
                    }
                });

                // Calculate percent complete/ incomplete.
                var total1 = 100;
                var complete_collection = number.round(graphic.attributes.Data_Collection);
                var incomplete_collection = total1 - complete_collection;
                chart1.addSeries("% Complete", [{
                    y: incomplete_collection,
                    tooltip: incomplete_collection,
                    text: "% Incomplete",
                    color: "red"
                }, {

                    y: complete_collection,
                    tooltip: complete_collection,
                    text: "% Complete",
                    color: "green"
                }]);
                //highlight the chart and display tooltips when you mouse over a slice.
                new Highlight(chart1, "default");
                new Tooltip(chart1, "default");
                new MoveSlice(chart1, "default");

                cp1.set("content", chart1.node);


                // Display a dojo pie chart for the complete/incomplete percentage for the 2nd tab.
                var cp2 = new ContentPane({
                    title: "Processing"
                });

                tc.addChild(cp2);

                // Create the chart that will display in the second tab.
                var c = domConstruct.create("div", {
                    id: "Processing"
                }, domConstruct.create("div"));
                var chart = new Chart2D(c);
                domClass.add(chart, "chart");

                // Apply a color theme to the chart.
                chart.setTheme(dojoxTheme);
                chart.addPlot("default", {
                    type: "Pie",
                    radius: 70,
                    htmlLabels: true
                });
                tc.watch("selectedChildWidget", function(name, oldVal, newVal) {
                    if (newVal.title === "Processing") {
                        chart.resize(180, 180);
                    }
                });

                // Calculate percent complete/ incomplete.
                var total = 100;
                var complete_processing = number.round(graphic.attributes.Data_Development);
                var incomplete = total - complete_processing;
                chart.addSeries("% Complete", [{
                    y: incomplete,
                    tooltip: incomplete,
                    text: "% Incomplete",
                    color: "red"
                }, {

                    y: complete_processing,
                    tooltip: complete_processing,
                    text: "% Complete",
                    color: "green"
                }]);
                //highlight the chart and display tooltips when you mouse over a slice.
                new Highlight(chart, "default");
                new Tooltip(chart, "default");
                new MoveSlice(chart, "default");

                // cp1.set("content", chart.node);
                cp2.set("content", chart.node);

                return tc.domNode;
            }
        });
    </script>
</head>

<body class="claro">
<div id="map"></div>
</body>
</html>