Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how you can use query task results to construct a chart with theGoogle Chart API. When you run the sample, click on a county to see a chart of its demographic data appear in a dismissible InfoWindow.
The function init creates a Map, QueryTask and a Query. Notice that the constructor for the QueryTask requires the URL of a layer in a map service (https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3). The number 3 at the end of the URL is the index of the counties layer in the map table of contents. To find out the URL to your own map service and its layer indexes, use theServices Directory
The Query object contains the conditions for the query such as what geometry to query, whether or not to return the geometry so it can be displayed on the map, and which fields should be queried.
The following event listener detects when someone clicks the map:
dojo.connect(map, "onClick", doQuery);The doQuery function in the above listener captures the location of the map click and sets it as the query.Geometry. The county that this point intersects will be queried. The following line runs the query task:
queryTask.execute(query);When the query task completes, another event fires, calling the getChart function:
dojo.connect(queryTask, "onComplete", getChart);getChart reads the query results, which are originally returned as a FeatureSet. The function parses the demographic totals, calculates percentages for each demographic group, and constructs the required URL syntax for the Google Chart API. This function also symbolizes the queried feature with a red dashed outline and displays the InfoWindow after the chart is created.
Code
<!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>Demographic Charts</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map, queryTask, query, click;
var wd = 240;
var ht = 110;
var chartParams = { cht:"p3", chl:"White|Black|Hispanic|Asian|Other" };
function init() {
map = new esri.Map("map", {
basemap: "streets-vector",
center: [-111.494, 35.47],
zoom: 7
});
map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", { opacity:0.4 }));
dojo.connect(map, "onClick", doQuery);
queryTask = new esri.tasks.QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1");
dojo.connect(queryTask, "onComplete", getChart);
dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});
query = new esri.tasks.Query();
query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
query.outFields = ["FIPS", "WHITE", "BLACK", "ASIAN", "HISPANIC", "OTHER"];
query.returnGeometry = true;
query.outSpatialReference = {"wkid":102100};
map.infoWindow.resize(275,150);
}
function doQuery(evt) {
click = query.geometry = evt.mapPoint;
queryTask.execute(query);
}
function getChart(featureSet) {
map.graphics.clear();
var features = featureSet.features;
var feature, attributes, white, black, asian, hispanic, other, total;
for (var i=0; i<features.length; i++) {
feature = features[i];
attributes = feature.attributes;
white = parseInt(attributes.WHITE, 10);
black = parseInt(attributes.BLACK, 10);
asian = parseInt(attributes.ASIAN, 10);
hispanic = parseInt(attributes.HISPANIC, 10);
other = parseInt(attributes.OTHER, 10);
total = white + black + asian + hispanic + other;
white = (white / total) * 100;
black = (black / total) * 100;
asian = (asian / total) * 100;
hispanic = (hispanic / total) * 100;
other = (other / total) * 100;
var params = dojo.mixin({
chf:"bg,s,FFFFFF50",
chs:wd + "x" + ht,
chd: "t:" + white + "," + black + "," + hispanic + "," + asian + "," + other
}, chartParams);
var mySymbol = new esri.symbol.SimpleFillSymbol("none", new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2.5), new dojo.Color([255,255,0,0.25]));
feature.setSymbol(mySymbol);
map.graphics.add(feature);
map.infoWindow.setTitle(attributes["FIPS"]);
console.log("infowindow");
map.infoWindow.setContent("<img src=\"" + "https://chart.googleapis.com/chart?"
+ decodeURIComponent(dojo.objectToQuery(params)) + "\" />");
map.infoWindow.show(map.toScreen(click),map.getInfoWindowAnchor(map.toScreen(click)));
}
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<span style="font-size:200%; font-weight:bold;">USA County Demographics</span>
<div id="map" style="width:1000px; height:500px; border:1px solid #000;"></div>
</body>
</html>