topic Re: Map service won't draw using InfoWindowChart example in ArcGIS JavaScript Maps SDK Questions

Map service won't draw using InfoWindowChart example

JosieBock1 — Wed, 05 Mar 2014 01:25:44 GMT

I am trying to use the InfoWindowChart sample that allows you to customize the info window with graphs and charts. However, when I try and use my map service the layer won't display. Can anyone help me understand what I'm doing wrong. It's probably something very simple that I'm overlooking, at least I hope that's all it is. Here is my code:

<html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--The viewport meta tag is used to improve the presentation and behavior     of the samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Info Window 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, #map {         height: 100%;         width: 100%;         margin: 0;         padding: 0;       }       .chart {         width:200px;         height:200px;         padding:0px !important;       }     </style>     <script>var dojoConfig = { parseOnLoad: true };</script>     <script src="http://js.arcgis.com/3.8/"></script>     <script>       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.layers.FeatureLayer");       dojo.require("esri.dijit.InfoWindow");       dojo.require("dojox.charting.Chart2D");       dojo.require("dojox.charting.plot2d.Pie");       dojo.require("dojox.charting.action2d.Highlight");       dojo.require("dojox.charting.action2d.MoveSlice");       dojo.require("dojox.charting.action2d.Tooltip");       dojo.require("dojo.number");       dojo.require("dijit.layout.TabContainer");        var map;        //try other themes (Julie,CubanShirts, PrimaryColors, Charged, BlueDusk, Bahamation,Harmony,Shrooms)       var theme = 'Wetland';       dojo.require("dojox.charting.themes." + theme);         function init() {          //use the info window instead of the popup          var infoWindow = new esri.dijit.InfoWindow(null, dojo.create("div"));         infoWindow.startup();                 map = new esri.Map("map", {           basemap: "streets",           center: [-96, 37],           infoWindow: infoWindow,           zoom: 4         });          var template = new esri.InfoTemplate();         //flag icons are from http://twitter.com/thefella, released under creative commons         template.setTitle("Info<b>${StoreNum}</b>");         template.setContent(getWindowContent);          var storesLayer = new esri.layers.FeatureLayer("http://gis-server.greatriv.com/ArcGIS/rest/services/ShamrockMktg/StoreLocations/MapServer/0", {           mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,           outFields: ["*"],     infoTemplate: template,         });               var symbol = new esri.symbol.SimpleFillSymbol();         storesLayer.setRenderer(new esri.renderer.SimpleRenderer(symbol));          map.addLayer(storesLayer);          map.infoWindow.resize(275, 375);       }          function getWindowContent(graphic) {         //make a tab container          var tc = new dijit.layout.TabContainer({           style: "width:100%;height:100%;"         }, dojo.create("div"));          //display attribute information         var cp1 = new dijit.layout.ContentPane({           title: "Details",           content: "Store Number: " + graphic.attributes.STORENUM + "<br />DC: " + graphic.attributes.DC_1 + "<br />DIV: " + graphic.attributes.DIV_1 + "<br />REG: " + graphic.attributes.REG_1 + "<br />DIST: " + graphic.attributes.DIST_1 + "<br />STORE MANAGER: " + graphic.attributes.StoreManage + "<br />ADDRESS: " + graphic.attributes.Address         });          //display a dojo pie chart for the male/female percentage         var cp2 = new dijit.layout.ContentPane({           title: "Pie Chart"         });          tc.addChild(cp1);         tc.addChild(cp2);          //create the chart that will display in the second tab         var c = dojo.create("div", {           id: "demoChart"         }, dojo.create('div'));          var chart = new dojox.charting.Chart2D(c);          dojo.addClass(chart, 'chart');          //apply a color theme to the chart         chart.setTheme(dojo.getObject("dojox.charting.themes." + theme));          chart.addPlot("default", {           type: "Pie",           radius: 70,           htmlLabels: true         });         dojo.connect(tc,'selectChild',function(tabItem){           if(tabItem.title === "Pie Chart"){           chart.resize(180,180);           }         });          //get percent male/female           var storenum = graphic.attributes.STORENUM;   var eiksalesPYTD = dojo.number.round(graphic.attributes.EIK_SALES_2012);   var eiksalesYTD = dojo.number.round(graphic.attributes.EIK_SALES_2013);   var eiksalesdistYTD = dojo.number.round(graphic.attributes.EIK_SALES_DA_2013);   var eiksalescmpyYTD = dojo.number.round(graphic.attributes.EIK_SALES_CA_2013);   chart.addSeries("Sales", [{   y: eiksalesPYTD,   tooltip: eiksalesPYTD,   text: 'EIK Sales 2012'   }, {   y: eiksalesYTD,   tooltip: eiksalesYTD,   text: 'EIK Sales 2013'   }, {   y: eiksalesdistYTD,   tooltip: eiksalesdistYTD,   text: 'EIK Sales Dist 2013'   }, {   y: eiksalescmpyYTD,   tooltip: eiksalescmpyYTD,   text: 'EIK Sales Cmpy 2013'            }]);         //highlight the chart and display tooltips when you mouse over a slice.         new dojox.charting.action2d.Highlight(chart, "default");         new dojox.charting.action2d.Tooltip(chart, "default");         new dojox.charting.action2d.MoveSlice(chart, "default");          cp2.set('content', chart.node);         return tc.domNode;       }        dojo.ready(init);     </script>   </head>      <body class="claro">     <div id="map"></div>   </body> </html>

Re: Map service won't draw using InfoWindowChart example

ManishkumarPatel — Wed, 05 Mar 2014 02:06:21 GMT

<html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--The viewport meta tag is used to improve the presentation and behavior     of the samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Info Window 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, #map {         height: 100%;         width: 100%;         margin: 0;         padding: 0;       }       .chart {         width:200px;         height:200px;         padding:0px !important;       }     </style>     <script>var dojoConfig = { parseOnLoad: true };</script>     <script src="http://js.arcgis.com/3.8/"></script>     <script>       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.layers.FeatureLayer");       dojo.require("esri.dijit.InfoWindow");       dojo.require("dojox.charting.Chart2D");       dojo.require("dojox.charting.plot2d.Pie");       dojo.require("dojox.charting.action2d.Highlight");       dojo.require("dojox.charting.action2d.MoveSlice");       dojo.require("dojox.charting.action2d.Tooltip");       dojo.require("dojo.number");       dojo.require("dijit.layout.TabContainer");        var map;        //try other themes (Julie,CubanShirts, PrimaryColors, Charged, BlueDusk, Bahamation,Harmony,Shrooms)       var theme = 'Wetland';       dojo.require("dojox.charting.themes." + theme);         function init() {          //use the info window instead of the popup          var infoWindow = new esri.dijit.InfoWindow(null, dojo.create("div"));         infoWindow.startup();                          map = new esri.Map("map", {           basemap: "streets",           center: [-96, 37],           infoWindow: infoWindow,           zoom: 4         });          var template = new esri.InfoTemplate();         //flag icons are from http://twitter.com/thefella, released under creative commons         template.setTitle("Info<b>${StoreNum}</b>");         template.setContent(getWindowContent);          var storesLayer = new esri.layers.FeatureLayer("http://gis-server.greatriv.com/ArcGIS/rest/services/ShamrockMktg/StoreLocations/MapServer/0", {           mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,           outFields: ["*"],           infoTemplate: template,         });                           var symbol = new esri.symbol.SimpleFillSymbol();         storesLayer.setRenderer(new esri.renderer.SimpleRenderer(symbol));          map.addLayer(storesLayer);          map.infoWindow.resize(275, 375);       }          function getWindowContent(graphic) {         //make a tab container          var tc = new dijit.layout.TabContainer({           style: "width:100%;height:100%;"         }, dojo.create("div"));          //display attribute information         var cp1 = new dijit.layout.ContentPane({           title: "Details",           content: "Store Number: " + graphic.attributes.STORENUM + "<br />DC: " + graphic.attributes.DC_1 + "<br />DIV: " + graphic.attributes.DIV_1 + "<br />REG: " + graphic.attributes.REG_1 + "<br />DIST: " + graphic.attributes.DIST_1 + "<br />STORE MANAGER: " + graphic.attributes.StoreManage + "<br />ADDRESS: " + graphic.attributes.Address         });          //display a dojo pie chart for the male/female percentage         var cp2 = new dijit.layout.ContentPane({           title: "Pie Chart"         });          tc.addChild(cp1);         tc.addChild(cp2);          //create the chart that will display in the second tab         var c = dojo.create("div", {           id: "demoChart"         }, dojo.create('div'));          var chart = new dojox.charting.Chart2D(c);          dojo.addClass(chart, 'chart');          //apply a color theme to the chart         chart.setTheme(dojo.getObject("dojox.charting.themes." + theme));          chart.addPlot("default", {           type: "Pie",           radius: 70,           htmlLabels: true         });         dojo.connect(tc,'selectChild',function(tabItem){           if(tabItem.title === "Pie Chart"){           chart.resize(180,180);           }         });          //get percent male/female                 var storenum = graphic.attributes.STORENUM;         var eiksalesPYTD = dojo.number.round(graphic.attributes.EIK_SALES_2012);         var eiksalesYTD = dojo.number.round(graphic.attributes.EIK_SALES_2013);         var eiksalesdistYTD = dojo.number.round(graphic.attributes.EIK_SALES_DA_2013);         var eiksalescmpyYTD = dojo.number.round(graphic.attributes.EIK_SALES_CA_2013);         chart.addSeries("Sales", [{         y: eiksalesPYTD,         tooltip: eiksalesPYTD,         text: 'EIK Sales 2012'         }, {         y: eiksalesYTD,         tooltip: eiksalesYTD,         text: 'EIK Sales 2013'         }, {         y: eiksalesdistYTD,         tooltip: eiksalesdistYTD,         text: 'EIK Sales Dist 2013'         }, {         y: eiksalescmpyYTD,         tooltip: eiksalescmpyYTD,         text: 'EIK Sales Cmpy 2013'                  }]);         //highlight the chart and display tooltips when you mouse over a slice.         new dojox.charting.action2d.Highlight(chart, "default");         new dojox.charting.action2d.Tooltip(chart, "default");         new dojox.charting.action2d.MoveSlice(chart, "default");          cp2.set('content', chart.node);         return tc.domNode;       }        dojo.ready(init);     </script>   </head>      <body class="claro">     <div id="map"></div>   </body> </html>

Hi Josie,

The code looks absolutely fine. Just one small thing you might have missed out is that the layer you trying to load is of the type Point (Geometry) and the symbol you assigning to the Featurelayer is that of a polygon.

you could do either comment out the line where you set the renderer or you can use the below:

//var symbol = new esri.symbol.SimpleFillSymbol(); //can be used if the geometry is polygon
var symbol = new esri.symbol.SimpleMarkerSymbol(); //can be used for point geometry.

I have tested at my end and works just fine.

Hope this helps.

Best Regards,
Manish

Re: Map service won't draw using InfoWindowChart example

JosieBock1 — Wed, 05 Mar 2014 02:09:37 GMT

Oh my goodness. Thank you, Manish. I knew I had to be missing something simple.

Re: Map service won't draw using InfoWindowChart example

ManishkumarPatel — Wed, 05 Mar 2014 03:19:23 GMT

Oh my goodness. Thank you, Manish. I knew I had to be missing something simple.

Glad to help. You can mark this as answered. Thanks