<!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>
Solved! Go to Solution.
_______ 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); } } _______
<!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>
query.geometry = evt.mapPoint;