POST
|
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.
... View more
10-11-2012
07:59 AM
|
0
|
9
|
1924
|
POST
|
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
... View more
10-10-2012
08:20 AM
|
0
|
0
|
765
|
POST
|
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
... View more
10-10-2012
07:07 AM
|
0
|
5
|
2740
|
POST
|
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
... View more
10-08-2012
07:06 AM
|
0
|
0
|
133
|
POST
|
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.
... View more
10-04-2012
08:23 AM
|
0
|
0
|
768
|
POST
|
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).
... View more
10-03-2012
01:41 PM
|
0
|
0
|
768
|
POST
|
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.
... View more
10-03-2012
12:57 PM
|
0
|
0
|
768
|
POST
|
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
... View more
10-03-2012
12:10 PM
|
0
|
10
|
1374
|
POST
|
I decided to re-publish my service with the standalone table tucked inside it. Just seems like the easiest way to do it. Thanks again for the ideas! Steve
... View more
10-02-2012
06:57 AM
|
0
|
1
|
1896
|
POST
|
John/Mike, Thanks for responding. My table is located in a FileGeoDatabase so I can certainly publish it via ArcGIS Server. How do I publish JUST the table in ArcGIS Server? I tried adding the table to a blank MXD and publishing the MXD but the table isn't listed in the published service. Worst comes to worse, I could add the table into another existing map service and then access it through that service but I'd like to know how to publish a stand alone table.
... View more
10-01-2012
10:55 AM
|
0
|
0
|
1896
|
POST
|
I'm looking for some guidance on how to proceed with a certain task I'd like to implement which would use a standalone table. My app works with Census data and so once the user clicks on a cenus tract, I'd like to load up some additional information (based on the census tract number) which is stored in a separate, stand alone table. That's what I want to do- now how do I do that? After reviewing the API, I'm not sure how you "add" the table as a layer so that you can query it. The table will have a one to many relationship so I can't just join the table to my census tracts feature layer before serving it up as a service. Thanks! Steve
... View more
09-28-2012
08:06 AM
|
0
|
8
|
11706
|
POST
|
Derek, Unfortunately, the feature layers being used in my map are services on our developmental server so any full code post wouldn't work for you. The good news is that I have got it working. The short story is that I believe the javascript code was fine and I was just missing a parameter on the HTML side of things. I changed my design from a dojo combo box to a dojo FilteringSelect. After making the change, it still didn't work. After some head scratching, I modified my HTML Input tag to read <input id="cboTipList" dojoType="dijit.form.FilteringSelect" searchAttr="PROJNAME" name="WidgetName" pageSize="12" placeHolder="Select A TIP Project" onChange="zoomRow(dijit.byId('cboTipList').value);"> and it *finally* worked. The key seems to be the "searchAttr" option, which I was originally missing. Whew!
... View more
09-24-2012
01:26 PM
|
0
|
0
|
440
|
POST
|
I would second Steve's suggestion about tying the popup to a feature layer. For example, in one of my maps, I define the popup content at the beginning of my initMap() function like this: var removalTemplate = new esri.InfoTemplate();
removalTemplate.setContent('<table cellspacing=\"5\" style=\"font-size:90%\"><tr><td style=\"vertical-align:top\"><b>Road Name:</b></td><td style=\"vertical-align:top\">${Name}</td></tr><tr><td style=\"vertical-align:top\"><b>Snow Removal Priority:</b></td><td style=\"vertical-align:top\">${Priority:formatPriorityLabel}</td></tr></table>');
removalTemplate.setTitle('${Name}'); Next, you specify the template when you create the feature layer: // Define the Snow Removal Route layer
theSnowRemovalLayer = new esri.layers.FeatureLayer("URL to feature layer", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate:removalTemplate,
outFields: ["*"],
opacity:0.80,
visible: false
}); Towards the end, but still within the initMap() function, I associate the popup with the specific feature layer: dojo.connect(theSnowRemovalLayer,"onClick",function(evt){
//Listener event for feature selection and the popup info widow
var query = new esri.tasks.Query();
query.geometry = pointToExtent(map,evt.mapPoint,15);
var deferred = theSnowRemovalLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
map.infoWindow.resize(map.width * 0.55,map.height * 0.25);
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(evt.mapPoint);
}); Hopefully that makes sense. Good luck! Steve
... View more
09-24-2012
07:51 AM
|
0
|
0
|
363
|
POST
|
Hi Derek, I've tried that line as well with no luck. I should have mentioned that I'm specifying v2.8 of the API since I'm doing the initial development locally and not on a server. This hasn't been a problem with a dojo datagrid so I assumed it wouldn't be a problem with the combo box..
... View more
09-24-2012
07:35 AM
|
0
|
0
|
440
|
POST
|
In a web map I'm developing, I want a combo box populated with project names and FID so that once the user selects a project, I can zoom to that project's feature extent. Within my Init() function, I'm using a query task like this: //Push the attributes of the TIP Projects into the combo box
var query = new esri.tasks.Query();
query.where = "1=1";
query.outFields = ["*"];
var queryTask = new esri.tasks.QueryTask("my feature layer URL");
queryTask.execute(query,populateCbo); Later down the line, my function "populateCbo" attempts to populate the combo box: function populateCbo(results) {
//Populate the dropdown list box with unique values
var values = [];
var features = results.features;
dojo.forEach (features, function(feature) {
curProject = feature.attributes.PROJECT;
curFid = feature.attributes.FID;
values.push({'project':curProject,'fid':curFid});
});
//Sort the values list by project name
//values.sort(by('project'));
var dataItems = {
identifier: 'fid',
label: 'project',
items: values
};
var store = new dojo.data.ItemFileReadStore({data:dataItems});
dijit.byId("cboTipList").store = store;
} Everything seems to work just fine until the line which populates the store variable. The dataItems variable has information in it but after stepping through the "store = .." line, the data property for store is still null. Am I not formatting the contents of dataItems properly? I'm not sure why it's not getting populated. Thanks! Steve
... View more
09-24-2012
07:11 AM
|
0
|
4
|
809
|
Title | Kudos | Posted |
---|---|---|
1 | yesterday | |
1 | 10-31-2024 02:51 PM | |
1 | a week ago | |
1 | 2 weeks ago | |
1 | 01-25-2024 08:29 AM |