|
POST
|
Hey Niladri, Are you using the default Geometry Server of ArcGIS? If you have your own Geometry Service, replace the default ArcGIS Geometry Service with yours in the following codes. esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); // Replace this with your own Geometry Service. See if it will work. Goodluck.
... View more
11-28-2016
07:49 AM
|
0
|
1
|
2351
|
|
POST
|
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? Somebody please help me out with this. <!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/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>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
... View more
11-28-2016
07:08 AM
|
0
|
0
|
2090
|
|
POST
|
You can create a .sde db. In arccatalog, you can Export Single/ Multiple features using a tool called Export. All the data schema, domains will be exported.
... View more
11-23-2016
10:38 AM
|
2
|
0
|
4609
|
|
POST
|
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>
... View more
11-22-2016
01:38 PM
|
1
|
0
|
1474
|
|
POST
|
I am trying to create two tabs in Info Window and display pie charts. The second tab displays the pie chart, but I could not create and load a pie chart in the first tab. Thanks. <!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 attribute information.
var cp1 = new ContentPane({
title: "Collection"
});
tc.addChild(cp1);
//Codes to create a tab for the first pie chart
// 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: "demoChart"
}, 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");
cp2.set("content", chart.node);
return tc.domNode;
}
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
... View more
11-21-2016
02:32 PM
|
0
|
7
|
3644
|
|
POST
|
How can I assign the colors to each sector in a pie chart using the parameters? chart.addSeries("% Complete", [{
y: complete_processing,
tooltip: complete_processing,
text: "% Complete"
}
... View more
11-21-2016
08:55 AM
|
0
|
0
|
860
|
|
POST
|
You can label it yourself programmatically. I use ArcGIS API 3.18 because I work with 2D maps and I need Editing functionalities that are fully supported by version 3.18. I am not sure about 4.1 as far as labeling programatically is concerned. But I would guess the codes should be very similar in 3.18 and 4.11.
... View more
11-21-2016
07:58 AM
|
1
|
1
|
1071
|
|
POST
|
Have a look at this sample. Labeling features on the client | ArcGIS API for JavaScript 3.18 I usually label the features before publishing the maps in the ArcGIS Server. That way I can call all the maps along with labels using ArcGISDynamicMapServiceLayer module.
... View more
11-21-2016
06:52 AM
|
0
|
3
|
1071
|
|
POST
|
Use UniqueValueRenderer in a very similar way. This sample should help you. Unique Value Renderer
... View more
11-20-2016
10:12 AM
|
2
|
9
|
3587
|
|
POST
|
Try the above codes in your MapImageLayer and see if the colors change or not.
... View more
11-19-2016
07:01 PM
|
1
|
12
|
3587
|
|
POST
|
Sabbiu, Try this code. Why are you using MapImageLayer instead of FeatureLayer? permitsLyr.setRenderer(new SimpleRenderer(new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([(0,128,0, 1]), 3) ) );
... View more
11-19-2016
04:03 PM
|
1
|
14
|
3587
|
|
POST
|
Thanks Robert. I have decided to try a slightly different approach than this sample.
... View more
11-18-2016
09:39 AM
|
0
|
1
|
1044
|
|
POST
|
I was looking at the Attribute Inspector sample for ArcGIS API for JavaScript 3.18. ArcGIS API for JavaScript Sandbox I changed the feature layer Url and fieldNames in the fieldInfos. I also added Geometry Service, but when I click on the features, it does not show up the attributes. I am working on creating an editing where a user can only edit attributes. Thanks.
... View more
11-17-2016
02:55 PM
|
0
|
3
|
1562
|
|
POST
|
In my understanding, you loaded the simple data of 8 points, but when you try to view the ArcGIS API JavaScript map, you don't see those points. Can you still see your basemap? If your basemap is loading, xmin,ymin,xmax,ymax, should not be NaNs. Also, check the opacity/transparency you assigned to those points. Also, check if your ArcGIS Service is failing.
... View more
11-17-2016
08:51 AM
|
0
|
0
|
1434
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 08-02-2017 12:54 PM | |
| 1 | 08-11-2017 12:04 PM | |
| 1 | 07-20-2017 06:45 AM | |
| 1 | 12-27-2016 11:28 AM | |
| 1 | 01-09-2018 07:36 AM |
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:25 AM
|