Latest Contributions by SteveCole

‎10-15-2012

Hey Derek (or anyone else for that matter)- If I may ask a question about the ESRI sample that I linked in my last post in this thread- I can't seem to understand why in ESRI's example, a call to chart.render() isn't required. In EVERY javascript code example I've looked over, the chart creation code ends with a call to chart.render(). In my current situation, if I don't include that line, my code runs without error but the chart doesn't appear. The ESRI example doesn't have it and yet the chart does appear. Can you elaborate on that? THANKS! Steve

‎10-15-2012

Awesome news, thanks! Now if it actually gets fixed.....

‎10-15-2012

Just to add to Pramod's code, you just need to add a dojo.connect() listener in your map's init() function similar to this: // Listener event to retrieve the recordID of the record in the datagrid that the user clicked on dojo.connect(dijit.byId("grid"), 'onRowClick', function(e) { var rowdata = grid.getItem(e.rowIndex); var theId = rowdata.OBJECTID; theFeatureLayer.clearSelection(); var query = new esri.tasks.Query(); query.objectIds = [theId]; theFeatureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,onRowClickHandler); });

‎10-13-2012

Being the weekend, I don't have my code in front of me but in one of the apps I've been developing, I've added a dojo.connect listener event tied to the row click event of a dataGrid I have in my app (it zooms to the extent of the feature listed in the dataGrid). I suppose you get get the FID of the feature, query it using queryTask, and then manually trigger the infoWindow, passing the feature returned by the queryTask to the infoWindow. I'm just thinking out loud, though. 😄

‎10-11-2012

Well, shoot. I moved my return statement up in the function to just before the chart creation code is and the popup displays and displays correctly (the various DIVs created are present). I'll have to study this example since it most closely matches my current chart creating code. Thanks anyways, Steve

‎10-11-2012

Thanks Derek for the suggestions. I inserted them as you suggested: //cp1.containerNode.appendChild(cp2.domNode); //cp1.containerNode.appendChild(cp3.domNode); cp2.placeAt(cp1.domNode); cp3.placeAt(cp1.domNode); //var theChartDiv = dojo.place("<div></div>",cp3.containerNode); //var theLegendDiv = dojo.place("<div></div>",cp3.containerNode); var theChartDiv = dojo.place(dojo.create("div"),cp3.containerNode); var theLegendDiv = dojo.place(dojo.create("div"),cp3.containerNode); But they made no difference. I stepped through the code in my function line by line and everything runs fine until it hits this line: pieChart.render(); at that point, it throws an ambiguous "object error" message with no line number. It's followed immediately by the other error I originally described. I should note that nothing appears in the popup except "undefined".

‎10-11-2012

Wouldn't this be it?..

‎10-11-2012

Two steps forward, one step back..... Just discovered that my use of dojo charts is not working in IE8 (but does work in Chrome, Firefox, and IE9). This ESRI Sample does work on my test machine with IE8 so I added the following HTML bits into my app to see if it would get it to work: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" /> . . It didn't. My page will load without any errors (browser: IE8, document: IE7), and all my other dojo stuff looks and operates as it should. I'm using my charts in infoWindows and here is the code from one of my content generating functions: function raceByBlockgroupContent(graphic) { //make a tab container var theTextContent; theTextContent = "<table cellpadding=\"3\"><tr><td colspan=\"3\" style=\"background:#5495D6; font-weight:bold;font-size:125%;color:white\">" + graphic.attributes.pctMinor + "% of the population within this block group identified with a race other than white.</td></tr>"; theTextContent = theTextContent + "<tr><td>1.</td><td>White Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001004) + "</td></tr>"; theTextContent = theTextContent + "<tr><td>2.</td><td>Black or African American Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001007) + "</td></tr>"; theTextContent = theTextContent + "<tr><td>3.</td><td>American Indian and Alaska Native Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001010) + "</td></tr>"; theTextContent = theTextContent + "<tr><td>4.</td><td>Asian Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001013) + "</td></tr>"; theTextContent = theTextContent + "<tr><td>5.</td><td>Native Hawaiian and Other Pacific Islander Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001016) + "</td></tr>"; theTextContent = theTextContent + "<tr><td>6.</td><td>Some Other Race Alone:</td><td>" + dojo.number.format(graphic.attributes.B02001019) + "</td></tr>"; theTextContent = theTextContent + "<tr><td>7.</td><td>Two or More Races:</td><td>" + dojo.number.format(graphic.attributes.B02001022) + "</td></tr>"; theTextContent = theTextContent + "<tr><td>8.</td><td>Two Races Including Some Other Race:</td><td>" + dojo.number.format(graphic.attributes.B02001025) + "</td></tr>"; theTextContent = theTextContent + "<tr><td>9.</td><td style=\"border-bottom: 1px solid #000000\">Two Races Excluding Some Other Race, and Three or More Races:</td><td style=\"border-bottom: 1px solid #000000\">" + dojo.number.format(graphic.attributes.B02001028) + "</td></tr>"; theTextContent = theTextContent + "<tr><td colspan=\"2\" style=\"font-weight:bold;font-style:italic;font-size:115%\">TOTAL POPULATION:</td><td style=\"font-weight:bold;font-style:italic;font-size:115%\">" + dojo.number.format(graphic.attributes.B02001001) + "</td></tr></table>"; var cp1 = new dijit.layout.ContentPane({ title: "Details", style: "height: 100%; width: 97%" }); //Left Panel (population table) var cp2 = new dijit.layout.ContentPane({ title: "Details", style: "height: 100%; width: 47%; background: #D6EAFF; border: 4px solid #478FB2; float: left", content: theTextContent }); //Right Panel (percentage pie chart) var cp3 = new dijit.layout.ContentPane({ title: "Details 2", style: "height: 100%; width: 48%; float:right", content: "" }); cp1.containerNode.appendChild(cp2.domNode); cp1.containerNode.appendChild(cp3.domNode); var theChartDiv = dojo.place("<div></div>",cp3.containerNode); var theLegendDiv = dojo.place("<div></div>",cp3.containerNode); //create the chart var pieChart = new dojox.charting.Chart2D(theChartDiv, { title: "Breakdown of Total Population By Race", titlePos: "top", titleGap: 20, titleFont: "bold normal normal 15pt Arial", titleFontColor: "black" }); //set the theme pieChart.setTheme(dojox.charting.themes.Distinctive); //add plot pieChart.addPlot("default", { type: "Pie", radius: 100, startAngle: 45, labels: true, font: "normal normal 12pt Arial", labelWiring: "grey", labelStyle: "columns", fontColor: "black", labelOffset: "-10" }); //add the data series var pieData = [{ "x": "White", "y": graphic.attributes.B02001004, tooltip: "White: " + dojo.number.format(graphic.attributes.B02001004), legend: " 1. " }, { "x":"Black", "y":graphic.attributes.B02001007, tooltip: "Black / African American: " + dojo.number.format(graphic.attributes.B02001007), legend: " 2. " }, { "x": "Native American", "y": graphic.attributes.B02001010, tooltip: "Native American: " + dojo.number.format(graphic.attributes.B02001010), legend: " 3. " }, { "x": "Asian", "y": graphic.attributes.B02001013, tooltip: "Asian: " + dojo.number.format(graphic.attributes.B02001013), legend: " 4. " }, { "x": "Pacific Islander", "y": graphic.attributes.B02001016, tooltip: "Pacific Islander: " + dojo.number.format(graphic.attributes.B02001016), legend: " 5. " }, { "x": "Other", "y": graphic.attributes.B02001019, tooltip: "Other: " + dojo.number.format(graphic.attributes.B02001019), legend: " 6. " }, { "x": "Two or More", "y": graphic.attributes.B02001022, tooltip: "Two or More Races: " + dojo.number.format(graphic.attributes.B02001022), legend: " 7. " }, { "x": "Two Races (including Some Other Race)", "y": graphic.attributes.B02001025, tooltip: "Two or More Races (including Other): " + dojo.number.format(graphic.attributes.B02001025), legend: " 8. " }, { "x": "Two Races (excluding Some Other Race), Three or More Races", "y": graphic.attributes.B02001028, tooltip: "Two or More Races (Excluding Other): " + dojo.number.format(graphic.attributes.B02001028), legend: " 9. "} ]; pieChart.addSeries("January",pieData); //slice animation! new dojox.charting.action2d.MoveSlice(pieChart,"default"); //tooltips! new dojox.charting.action2d.Tooltip(pieChart,"default"); //render the chart pieChart.render(); //Add the legend ONLY if there is more than one category with values. If not, the DOJO code will fail var numOks = 0; if (graphic.attributes.B02001004 > 0) {numOks++;} if (graphic.attributes.B02001007 > 0) {numOks++;} if (graphic.attributes.B02001010 > 0) {numOks++;} if (graphic.attributes.B02001013 > 0) {numOks++;} if (graphic.attributes.B02001016 > 0) {numOks++;} if (graphic.attributes.B02001019 > 0) {numOks++;} if (graphic.attributes.B02001022 > 0) {numOks++;} if (graphic.attributes.B02001025 > 0) {numOks++;} if (graphic.attributes.B02001028 > 0) {numOks++;} if (numOks > 1) { var legend1 = new dojox.charting.widget.Legend({chart: pieChart}, theLegendDiv); } else { var catDesc; if (graphic.attributes.B02001004 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"White\"</SPAN>';} if (graphic.attributes.B02001007 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"Black\"</SPAN>';} if (graphic.attributes.B02001010 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"Native American\"</SPAN>';} if (graphic.attributes.B02001013 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"Asian\"</SPAN>'; } if (graphic.attributes.B02001016 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"Pacific Islander\"</SPAN>';} if (graphic.attributes.B02001019 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"Other\"</SPAN>';} if (graphic.attributes.B02001022 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"Two or More Races\"</SPAN>';} if (graphic.attributes.B02001025 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"Two Races (including Some Other Race)\"</SPAN>';} if (graphic.attributes.B02001028 > 0) { catDesc = '<SPAN style=\"font-style:italic\">\"Two Races (excluding Some Other Race), Three or More Races\"</SPAN>';} theLegendDiv.innerHTML = '<SPAN style=\"font-weight:bold\">NOTE:</SPAN> ' + catDesc + ' contains all values<br/><br/>'; } //var legend1 = new dojox.charting.widget.Legend({chart: pieChart}, theLegendDiv); return cp1.domNode; } I've also attached a screenshot to show what the popup would look like. The javascript error that pops up occurs in the dojo vml.xd.js file and has a description of "this.rawNode.path is null or not an object." Sadly, I need to support IE8 with this because that's the browser everyone within my organization has and my app is pretty worthless if I can't overcome this.

‎10-10-2012

Awesome! Thanks. I realized after posting that the datastore was more what I had in mind instead of the datagrid. At first, I thought that Rene's example would almost work for me since I do need to sort based on string values. My only catch is that I needed to sort by two fields (census tract being one and block group the other). As it turns out, there is a another field in my data which is a combination of the two which I had overlooked so Rene's code snippit works! Huzzah! Thanks again! Steve

‎10-10-2012

Has anyone found or written a function to take a featureSet and sort it based on a specified attribute? The only way I can think of right now would be to: create a dojo dGrid via code provide the featureSet as it's store sort the dGrid based on the appropriate column create a new featureSet based on the sorted store Thanks- Steve

‎10-08-2012

Many thanks to everyone's input in this thread. Getting this to work has been one of the toughest challenges for me since I started working with the javascript API. I do have things finally working but I did have to rethink my entire process. As several people pointed out, the callback routines were critical so I re-wrote my code to be less linear and more "modular." I had resisted this because of another constraint (this whole process will update an HTML template opened via an onClick event) but I did find a way. So to recap my solution... My button's onClick event starts everything by calling this function: function getProjectReport2(param) { var theParam = param.split(","); var theShape; var query = new esri.tasks.Query(); query.where = "FID=" + theParam[0]; query.outFields = ["*"]; query.returnGeometry = true; //Specify the appropriate point/line map service depending on what was clicked switch (theParam[1]) { case "point": var queryTask = new esri.tasks.QueryTask("http://dmc-arcgis.snoco.co.snohomish.wa.us/SnocoGISdev/rest/services/transportation/tipProjectsPoint/MapServer/0"); break; case "polyline": var queryTask = new esri.tasks.QueryTask("URL to Map Servce"); break; } //The new browser window must be opened in the function called by the 'onClick' event so //the new window is created here and its associated variable is created with a global scope. //Calculate the center of the screen for placement of the new window var center_left = (screen.width / 2) - (1000 / 2); var center_top = (screen.height / 2) - (600 / 2); newWindow = window.open('','mywindow','width=1000,height=600,menubar=yes,scrollbars=yes,left=' + center_left + ',top=' + center_top); var dQuery = queryTask.execute(query,createDeferredResults); } ...which then passes the feature onto a separate callback function. I decided to use a deferredList as Kelly had suggested: function createDeferredResults(featureSet) { var dTractRace, dTractIncome, dTractLep; dojo.forEach(featureSet.features, function(feature) { theTipProject = feature; }); var query = new esri.tasks.Query(); query.outFields = ["*"]; query.returnGeometry = true; query.geometry = theTipProject.geometry; qTractRace = new esri.tasks.QueryTask("URL Service #1"); qTractIncome = new esri.tasks.QueryTask("URL Service #2"); qTractLep = new esri.tasks.QueryTask("URL Service #3"); dTractRace = qTractRace.execute(query); dTractIncome = qTractIncome.execute(query); dTractLep = qTractLep.execute(query); defQuery = new dojo.DeferredList([dTractRace,dTractIncome,dTractLep]); defQuery.then(handleCensusResults); } Finally, another callback function where I finally get down to the task of updating my HTML template: function handleCensusResults(results) { var raceResults, incomeResults, lepResults; raceResults = results[0][1].features; incomeResults = results[1][1].features; lepResults = results[2][1].features; . . . processRaceResults(raceResults); } Once again, thank you ALL for helping me! Cheers, Steve

‎10-04-2012

Ok, my apologies. The light bulb went off with Wyatt's description as to what's happening. So my problem is waiting until the callback finishes and it sounds like the deferredList that Kelly was suggesting might be the way to do this? Here's my attempt to incorporate deferredList- function getProjectReport(theFid) { var theDocument, theGraphic theGraphic = returnTipShape(theFid); console.log(theGraphic.attributes.PROJECT); . . . } function returnTipShape(param) { var theParam = param.split(","); var query = new esri.tasks.Query(); query.where = "FID=" + theParam[0]; query.outFields = ["*"]; query.returnGeometry = true; var theShape; //Specify the appropriate point/line map service depending on what was clicked switch (theParam[1]) { case "point": var queryTask = new esri.tasks.QueryTask("http://dmc-arcgis.snoco.co.snohomish.wa.us/SnocoGISdev/rest/services/transportation/tipProjectsPoint/MapServer/0"); break; case "polyline": var queryTask = new esri.tasks.QueryTask("http://dmc-arcgis.snoco.co.snohomish.wa.us/SnocoGISdev/rest/services/transportation/tipProjectsLine/MapServer/0"); break; } dQuery = queryTask.execute(query); var dList = new dojo.DeferredList([dQuery]); dList.then(function(results) { var featureSet = results[0]; dojo.forEach(featureSet.features, function(feature) { theShape = feature; }); }); return theShape; } I thought that if I put the queryTask and deferredList calls into a function, that would isolate the process until it finishes. Of course, I get the same error so it looks like I've just moved the same issue around.

‎10-03-2012

Yes- I understand what Bill (and you) are saying. What I'm not doing a good job of saying is that I want/need to access theGraphic variable AFTER the conclusion of the queryTask.Execute routine. I need to re-use the geometry and some of it's attributes for subsequent queries on additional datasets. As my code currently exists, I can't- and I don't know what to change to get it to behave in the manner I need. I thought by declaring theGraphic as a variable at the beginning of the function it would persist and be accessible throughout the entire function but it's not (or I'm using it wrong).

‎10-03-2012

Hi Bill, There is only one item return via the query so that part is fine. The reason I included the console.log code line outside of the loop was to reinforce the point that my variable is not persisting beyond the scope of the forEach loop. This is something I want it to do.

‎10-03-2012

This is probably pretty easy but I can't seem to get what I'm doing wrong. I have a function, kicked off via a button click, that queries a particular layer, and then does some additional queries & data retrieval against three other layers. Basically, I have one location and I want to extract information from three other datasets that overlap its spatial extent. Anyways, what I've tried to do is an initial query to my layer which has my spatial location (using an FID which I pass to the function). Once I query that layer, I was to "save" the feature to a variable so I can quickly use it in my subsequent queryTask calls. Here's my simple code: function getProjectReport(theFid) { var theParam = theFid.split(","); var query = new esri.tasks.Query(); query.where = "FID=" + theParam[0]; query.outFields = ["*"]; query.returnGeometry = true; var theGraphic; //Specify the appropriate point/line map service depending on what was clicked switch (theParam[1]) { case "point": var queryTask = new esri.tasks.QueryTask("URL #1"); break; case "polyline": var queryTask = new esri.tasks.QueryTask("URL #2"); break; } queryTask.execute(query,function(featureSet) { dojo.forEach(featureSet.features, function(feature) { theGraphic = feature; }); }); console.log(theGraphic.attributes.PROJECT); } Now, the queryTask finds my record but when it gets to my "console.log" line, it errors out and tells me that my variable theGraphic is undefined. I've defined my variable at the beginning of my function so why doesn't my assignment persist after the end ofmy forEach loop? How do I fix this so I can re-use theGraphic later on in my function? Thanks again! Steve

My Ideas

Latest Contributions by SteveCole

Re: Dojo Charts not appearing under IE8

Re: Identify Task : Date Fields

Re: Firing an infoWindow from a data grid list

Re: Firing an infoWindow from a data grid list

Re: Dojo Charts not appearing under IE8

Re: Dojo Charts not appearing under IE8

Re: Example of a custom widget for the javascript viewer

Dojo Charts not appearing under IE8

Re: how to sort a featureset?

how to sort a featureset?

Re: Can't "save" a feature from QueryTask. Argh!

Re: Can't "save" a feature from QueryTask. Argh!

Re: Can't "save" a feature from QueryTask. Argh!

Re: Can't "save" a feature from QueryTask. Argh!

Can't &quot;save&quot; a feature from QueryTask. Argh!

Re: Remove Pop-Up Expand/Collapse Button

Re: Accessibility Issues: Ensure [role="img"] elem...

Re: Need help converting a csv with lat long to a ...

Re: Input Data Validation involving Note

Re: Near Me Widget / Experience Builder