nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Show query results with a Dojo chart

Chang-HengYang

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>

Najděte více příspěvků označených jako

Accepted answers

JonathanUihlein

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/

All comments

JonathanUihlein

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);
        }
}
_______

Chang-HengYang

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>

JonathanUihlein

Looks like a scope issue.

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

Chang-HengYang

Hi jonathan,

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

Thanks,
Hank

JonathanUihlein

Chang-HengYang

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

JonathanUihlein

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.

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.