AnsweredAssumed Answered

Map service won't draw using InfoWindowChart example

Question asked by jadamssl on Mar 4, 2014
Latest reply on Mar 4, 2014 by manish_patel
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>

Outcomes