AnsweredAssumed Answered

Show query results with a Dojo chart

Question asked by chyang0107 on Apr 29, 2014
Latest reply on Apr 30, 2014 by JUihlein-esristaff
Hi all,

Thank you for your time in advance. I followed the example and changed the data layer in new esri.tasks.QueryTask() from Census Block polygon (given in the example) to Census Block Points (the data of my interest). I can see the points layer displayed; however, the popout window only showed "No information available." when I clicked on these points. I have tried to figure out this question by changing the options in "spatialRelationship". But it did not work. Please let me know if you have any opinions.


<!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>Popup with Chart</title>      <link rel="stylesheet" href="">     <link rel="stylesheet" href="">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       #mapDiv{padding:0;}     </style>          <script>var dojoConfig = {parseOnLoad: true};</script>     <script src=""></script>     <script src="javascript/basemapgallery.js"></script>     <script src="javascript/ovmap.js"></script>     <script>       dojo.require("");       dojo.require("esri.tasks.query");       dojo.require("esri.tasks.geometry");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dojox.charting.Chart");       // Make sure you include the theme you want here       dojo.require("dojox.charting.themes.Julie");        dojo.ready(pageReady);        var map, queryTask, query, template;        function pageReady() {         map = new esri.Map("mapDiv", {           basemap: "streets",           center: [-117.252, 34.067],           zoom: 12         });          dojo.connect(map, "onLoad", mapReady);          var censusLayer = new esri.layers.ArcGISDynamicMapServiceLayer("");         map.addLayer(censusLayer);       }        function mapReady(map) {         map.infoWindow.resize(270, 225);         dojo.connect(map, "onClick", executeQueryTask);          queryTask = new esri.tasks.QueryTask("");          query = new esri.tasks.Query();         query.returnGeometry = true;         query.outFields = ["*"];        query.outSpatialReference = map.spatialReference;               query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_TOUCHES;          //Reference the chart theme here too         template = new esri.dijit.PopupTemplate({           title: "The site in {STATE_FIPS }",           mediaInfos: [             {               type: "barchart",               value: {                  fields: [                    "POP2000", "HOUSEHOLDS"                  ],                 theme: "Julie"               }             }           ]         });                  //Add the overview map and basemap gallery to the app         addBasemapGallery(map);         addOverview(map);                  //resize the map when the browser resizes         dojo.connect(dijit.byId('mapDiv'), 'resize', map,map.resize);       }        function executeQueryTask(evt) {         query.geometry = evt.mapPoint;                 var deferred = queryTask.execute(query);          deferred.addCallback(function(response) {           // response is a FeatureSet           // Let's return an array of features.           return, function(feature) {             feature.setInfoTemplate(template);             return feature;           });         });                  // InfoWindow expects an array of features from each deferred         // object that you pass. If the response from the task execution          // above is not an array of features, then you need to add a callback         // like the one above to post-process the response and return an         // array of features.         map.infoWindow.setFeatures([ deferred ]);;       }     </script>   </head>   <body class="claro" >     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:'false'" style="width: 100%; height: 100%;">       <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">       </div>     </div>   </body> </html>