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>