1

I have two tabs on my Info Window Popup. My code is based on the sample ArcGIS API for JavaScript Sandbox.

The only change compared to this sample is: I want to display pie charts on both the tabs. The issue I am facing is:

The tab1 is selected when the popup appears but its content is not displayed. But if I click the tab2, the content (pie chart) is displayed. If I click the tab1 after I click the tab2, the pie chart in tab1 is displayed at this time.

I am trying to get the pie chart displayed in tab1 when the user clicks the feature layer on the map.

How can I fix the issue?

<!DOCTYPE html>
<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/dijit/Popup",
        "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/parser","dojo/domReady!"
    ], function(
            Map, FeatureLayer,
            InfoWindow, InfoTemplate, Popup,
            SimpleFillSymbol, SimpleRenderer,
            ContentPane, TabContainer,
            Chart2D, Pie,
            Highlight, MoveSlice, Tooltip,
            dojoxTheme,
            domConstruct, domClass,
            number, parser
    ) {

        parser.parse();
        // 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("RESTUrlEndpoints/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 1st pie chart.
            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.
            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>

1 Answer 1

0

Here is my experience: select all the child in the tabcontainer's loop. and set every tab content as below:

          for(i=0;i<  tc.getChildren().length;i++)
        {
            var subTab = dijit.byId( tc.getChildren()[i].id);
            tc.selectChild(subTab);
            subTab.set("content", grids[i]);

        }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.