topic Re: Show query results with a Dojo chart in ArcGIS JavaScript Maps SDK Questions

Show query results with a Dojo chart

Chang-HengYang — Tue, 29 Apr 2014 16:40:49 GMT

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.

Thanks,
Hank

<!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="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       #mapDiv{padding:0;}     </style>          <script>var dojoConfig = {parseOnLoad: true};</script>     <script src="http://js.arcgis.com/3.9/"></script>     <script src="javascript/basemapgallery.js"></script>     <script src="javascript/ovmap.js"></script>     <script>       dojo.require("esri.map");       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("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");         map.addLayer(censusLayer);       }        function mapReady(map) {         map.infoWindow.resize(270, 225);         dojo.connect(map, "onClick", executeQueryTask);          queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");          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 dojo.map(response.features, 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 ]);         map.infoWindow.show(evt.mapPoint);       }     </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>

Re: Show query results with a Dojo chart

JonathanUihlein — Sat, 11 Dec 2021 13:52:09 GMT

Hi Hank,

That sample is tailored specifically for that type of data.

I would use a featureLayer in your case.

Pseudo Code Below:

_______

featureLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0", {
        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"],
        visible: true
      });
map.addLayer(featureLayer);

_______
dojo.connect(map, "onClick", executeQueryTask);
_______
template = new esri.dijit.PopupTemplate({
  title: "The site in {STATE_FIPS}",
  mediaInfos: [
    {
      type: "barchart",
      value: { 
        fields: [ 
          "POP2000", "HOUSEHOLDS" 
        ],
        theme: "Julie"
      }
    }
  ]
});
_______
 function executeQueryTask(evt) {
   // not using a query, but you can still use a query if you wish
        if(evt.graphic){
          evt.graphic.setInfoTemplate(template);
          map.infoWindow.setFeatures([ evt.graphic ]);
          map.infoWindow.show(evt.graphic.geometry);
        }
}
_______

Re: Show query results with a Dojo chart

Chang-HengYang — Sat, 11 Dec 2021 13:52:12 GMT

Hi jonathan,

Thank you for the information. I followed your instruction and put my private layer after the esri.layers.FeatureLayer. I can see my points displayed and popout window as well when I clicked on the features. However, there is nothing inside the popout window after I clicked the points. Please let me know your opinions.

My web application: http://granite.nmt.edu/~hyang/NMBG/querydojochart/index.html#

<!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="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #mapDiv{padding:0;}
    </style>
    
    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script src="javascript/basemapgallery.js"></script>
    <script src="javascript/ovmap.js"></script>
    <script>
      dojo.require("esri.map");
      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");
   dojo.require("esri.layers.FeatureLayer")
      // Make sure you include the theme you want here
      dojo.require("dojox.charting.themes.Julie");
      
      dojo.ready(pageReady);

      var map, featureLayer, infoWindow,template;

      function pageReady() {
        map = new esri.Map("mapDiv", {
          basemap: "streets",
          center: [-106.9048, 34.0665],
          zoom: 7,
    infoWindow: infoWindow
        });

        dojo.connect(map, "onLoad", mapReady);

       var featureLayer = new esri.layers.FeatureLayer("http://129.138.12.83:6080/arcgis/rest/services/aasg_geothermal/WaterMAp1/FeatureServer/1", {
        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"],
        visible: true,
  infoTemplate:template
      });
        map.addLayer(featureLayer);
      }

      function mapReady(map) {
        map.infoWindow.resize(270, 225);
        dojo.connect(map, "onClick", executeQueryTask);

       
        //Reference the chart theme here too
    var template = new esri.dijit.PopupTemplate({
  title: "The site in {SpecimenCo}",
  fieldInfos: [{ //define field infos so we can specify an alias
            fieldName: "Br_mgL",
            label: "Br(mgL)"
          },{
            fieldName: "F_mgL",
            label: "F"
          },{
            fieldName: "Li_mgL",
            label: "Li"
          }],
  mediaInfos: [
    {
      type: "piechart",
      value: { 
        fields: [ "F_mgL", "Br_mgL","Li_mgL"],
        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) {
        if(evt.graphic){
          evt.graphic.setInfoTemplate(template);
          map.infoWindow.setFeatures([evt.graphic]);
          map.infoWindow.show(evt.graphic.geometry);
        }
       }
       
        // 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 ]);
       // map.infoWindow.show(evt.mapPoint);
      
    </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>

Re: Show query results with a Dojo chart

JonathanUihlein — Tue, 29 Apr 2014 20:17:13 GMT

Looks like a scope issue.

You define the template object in another function, so executeQueryTask() has no access to it.

Re: Show query results with a Dojo chart

Chang-HengYang — Tue, 29 Apr 2014 20:27:48 GMT

Hi jonathan,

Could you please provide more details about how to fix this scope issue?

Thanks,
Hank

Re: Show query results with a Dojo chart

JonathanUihlein — Tue, 29 Apr 2014 20:30:54 GMT

In this particular case, you can make your template variable a global and it would work.

Scope is a fundamental part of programming. Read this article as soon as you can:
http://ryanmorr.com/understanding-scope-and-context-in-javascript/

Re: Show query results with a Dojo chart

Chang-HengYang — Wed, 30 Apr 2014 16:52:43 GMT

Hi all,

I am wondering if anyone has used the example to show you query result with the chart by clicking the "point feature" rather than "polygon feature". Could anyone tell me why I can not use this sample to process the point feature? Jonathan provided another method (feature layer) to have a dojo chart when users clicked on the point feature in the previous replies. I am wondering if anyone has successfully used the QueryTask to process the point feature and has the dojo chart in popout window.

Many thanks,
Hank

Re: Show query results with a Dojo chart

JonathanUihlein — Wed, 30 Apr 2014 16:58:25 GMT

In that specific example, it is not using the specific geometry of a particular feature in the query.

It is setting the query geometry to the point where the user clicked the map.

 query.geometry = evt.mapPoint;

Because evt.mapPoint is not exactly equal to the geometry of one of your features, the queryTask will return nothing (e.g: 4.00001 does not equal 4, return nothing).

If you were to pass the geometry of your feature to the queryTask, it would return that feature as a graphic.

However, if you were to have that feature information already, you probably wouldn't need to run a query at all.