Community

Map service won't draw using InfoWindowChart example

631
3
Jump to solution
03-04-2014 05:25 PM
JosieBock1
by
New Contributor III
‎03-04-2014 05:25 PM
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>
0 Kudos
1 Solution

Accepted Solutions
ManishkumarPatel
by
Occasional Contributor II
‎03-04-2014 06:06 PM
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>


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

View solution in original post

0 Kudos
3 Replies
ManishkumarPatel
by
Occasional Contributor II
‎03-04-2014 06:06 PM
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>


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
0 Kudos
JosieBock1
by
New Contributor III
‎03-04-2014 06:09 PM
Oh my goodness. Thank you, Manish. I knew I had to be missing something simple.
0 Kudos
ManishkumarPatel
by
Occasional Contributor II
‎03-04-2014 07:19 PM
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
0 Kudos