Hello everyone,
I am having some trouble overriding the old pie chart data with new one. Any help or pointers would be greatly appreciated.
So currently everything is working fine. But when I click on a feature to get the new attributes and use that attributes to input into the existing pie chart. I expect and wanted to make the old pie chart graphic disappear and the new one appear in its place with the new attributes/values reflect. But instead of that, I got another pie chart added on right underneath the old one. See the attached code, any idea on how to resolve this? Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatitble" content="IE=Edge" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>TEST STATISTICse</title>
<link rel="stylesheet" href="
https://js.arcgis.com/3.28/esri/css/esri.css">
<link rel="stylesheet" href="
http://js.arcgis.com/3.28/dijit/themes/claro/claro.css">
<style>
html, body, #mapDiv{border:0; margin:0; padding:0; height:80%; width:100%;}
var usFemalesNum, usMalesNum, usHomeOwnersNum, usRentersNum;
require
(
[
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/tasks/StatisticDefinition",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/dom",
"dojo/on",
"dojo/Deferred",
"dojo/promise/all",
"dojox/charting/Chart",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/SimpleTheme",
"dojo/domReady!"
],
function(Map, ArcGISDynamicMapServiceLayer, FeatureLayer, Query, Qt, statD, SimpleFillSymbol, SimpleLineSymbol,
dom, on, Deferred, all, Chart, Pie, Highlight, Tooltip, SimpleTheme)
{
}
function showFail(error)
{
console.error(error);
}
function showFemalesSum(results)
{
var retDef = new Deferred();
if (!results.hasOwnProperty("features") || results.features.length === 0) {
return;
}
var totalSum = results.features[0].attributes.sum_female_pop;
//console.log("testing", totalSum, results.features);
document.getElementById('totalFemales').innerHTML = "Total Females: " + totalSum.toLocaleString();
retDef.resolve(totalSum);
return retDef;
}
//US Males number
function totalMales()
{
var retDef = new Deferred();
var queryTask = new Qt("
https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
var query = new Query();
query.returnGeometry = false;
query.outFields = ["MALES"];
var stats = new statD();
stats.statisticType = "sum";
stats.onStatisticField = "MALES";
stats.outStatisticFieldName = "sum_male_pop";
query.where = "1=1";
query.outStatistics = [stats];
//queryTask.execute(query, showMalesSum, showFail);
queryTask.execute(query, function(result)
{
showMalesSum(result).then(function(value)
{
retDef.resolve(value);
});
}, showFail);
return retDef;
}
function showMalesSum(results)
{
var retDef = new Deferred();
if (!results.hasOwnProperty("features") || results.features.length === 0) {
return;
}
var totalSum = results.features[0].attributes.sum_male_pop;
//console.log("testing", totalSum, results.features);
document.getElementById('totalMales').innerHTML = "Total Males: " + totalSum.toLocaleString();
retDef.resolve(totalSum);
return retDef;
}
//Owner Number
function totalOwners()
{
var retDef = new Deferred();
var queryTask = new Qt("
https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
var query = new Query();
query.returnGeometry = false;
query.outFields = ["OWNER_OCC"];
var stats = new statD();
stats.statisticType = "sum";
stats.onStatisticField = "OWNER_OCC";
stats.outStatisticFieldName = "sum_owner";
query.where = "1=1";
query.outStatistics = [stats];
//queryTask.execute(query, showOwnerSum, showFail);
queryTask.execute(query, function(result)
{
showOwnerSum(result).then(function(value)
{
retDef.resolve(value);
});
}, showFail);
return retDef;
};
function showOwnerSum(results)
{
var retDef = new Deferred();
if (!results.hasOwnProperty("features") || results.features.length === 0)
{
return;
}
var totalSum = results.features[0].attributes.sum_owner;
//console.log("testing", totalSum, results.features);
document.getElementById('totalOwners').innerHTML = "Total Homeowners: " + totalSum.toLocaleString();
retDef.resolve(totalSum);
return retDef;
}
//Renter Number
function totalRenters()
{
var retDef = new Deferred();
var queryTask = new Qt("
https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
var query = new Query();
query.returnGeometry = false;
query.outFields = ["RENTER_OCC"];
var stats = new statD();
stats.statisticType = "sum";
stats.onStatisticField = "RENTER_OCC";
stats.outStatisticFieldName = "sum_renter";
query.where = "1=1";
query.outStatistics = [stats];
//queryTask.execute(query, showRenterSum, showFail);
queryTask.execute(query, function(result)
{
showRenterSum(result).then(function(value)
{
retDef.resolve(value);
});
}, showFail);
return retDef;
}
function showRenterSum(results)
{
var retDef = new Deferred();
if (!results.hasOwnProperty("features") || results.features.length === 0)
{
return;
}
var totalSum = results.features[0].attributes.sum_renter;
document.getElementById('totalRenter').innerHTML = "Total Renters: " + totalSum.toLocaleString();
retDef.resolve(totalSum);
return retDef;
}
map.addLayer(fLayer);
map.on("load", function()
{
all([totalFemales(), totalMales(), totalOwners(),totalRenters()]).then(function(results)
{
usFemalesNum = results[0];
usMalesNum = results[1];
usHomeOwnersNum = results[2];
usRentersNum = results[3];
//console.info(usFemalesNum, usMalesNum, usHomeOwnersNum, usRentersNum);
var num = usMalesNum;
var num2 = usFemalesNum;
var num3 = usHomeOwnersNum;
var num4 = usRentersNum;
//var ratio = Math.floor((num / num2) * 100);
var sum = num + num2;
var sum2 = num3 + num4;
document.getElementById("totalPop").innerHTML = "Total Population: " + sum.toLocaleString();
document.getElementById("totalOccupancy").innerHTML = "Total Occupancy: " + sum2.toLocaleString();
///////////////////Get data to put in Pie chart function.
function genderDataArray()
{
var femalesNum = results[0];
var malesNum = results[1];
return [femalesNum,malesNum];
}
var genderDataResult = genderDataArray();
///////////////////////////////////Start of trying to Display Pie Chart from the results. /////////////////////////
function formatAttributesForGraph(attributes, fieldLabels)
{
var data = [], field;
for(field in fieldLabels)
{
data.push({
tooltip:fieldLabels[field],
y: +attributes[field] //+ is to convert a value into a number, equivalent to parseInt()
});
}
return data;
}
function genderData(attributes)
{
var fieldLabels =
{
"MALES": "Males",
"FEMALES": "Females"
}
return this.formatAttributesForGraph(attributes, fieldLabels);
}
var genderTheme = new SimpleTheme({
colors: ["#8888ff", "#ff8888"]
})
genderChart = new Chart("genderGraph");
//add in a customize theme
genderChart.setTheme(genderTheme).addPlot("default",{
type: Pie,
font: "normal normal 8pt Tahoma",
fontColor: "black",
radius: 60 //radius of 60 pixels
}).addSeries("Series A", genderDataResult);
var amin_aa = new Tooltip(genderChart,"default");
var anim_bb = new Highlight(genderChart, "default");
genderChart.render();
});
map.disableScrollWheel();
map.disablePan();
map.disableDoubleClickZoom();
});
on(fLayer, 'click', function(e)
{
//node.value = e.graphic.attributes.FEMALES;
var stateFnum, stateMnum, stateOwnerNum, stateRenterNum;
document.getElementById("popUSA").innerHTML = "Total Gender Population "+ e.graphic.attributes.STATE_NAME;
document.getElementById("occupancyUSA").innerHTML = "Owner Versus Renter "+ e.graphic.attributes.STATE_NAME;
document.getElementById("totalFemales").innerHTML = "Total Females: "+ e.graphic.attributes.FEMALES.toLocaleString();
document.getElementById("totalMales").innerHTML = "Total Males: " + e.graphic.attributes.MALES.toLocaleString();
document.getElementById("totalOwners").innerHTML = "Total Homeowners: " + e.graphic.attributes.OWNER_OCC.toLocaleString();
document.getElementById("totalRenter").innerHTML = "Total Renters: " + e.graphic.attributes.RENTER_OCC.toLocaleString();
stateFnum = e.graphic.attributes.FEMALES;
stateMnum = e.graphic.attributes.MALES;
stateOwnerNum = e.graphic.attributes.OWNER_OCC;
stateRenterNum = e.graphic.attributes.RENTER_OCC;
document.getElementById("totalPop").innerHTML = "Total Population: " + (stateFnum + stateMnum).toLocaleString();
document.getElementById("totalOccupancy").innerHTML = "Total Occupancy: " + (stateOwnerNum + stateRenterNum).toLocaleString();;
map.on('click',executeClickQuery);
var queryTask5 = new Qt("
https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
var mySymbol = new SimpleFillSymbol("none",
new SimpleLineSymbol("solid", new dojo.Color([0,255,255]), 3.2), new dojo.Color([255,255,0,0.25]));
var query = new Query();
query.returnGeometry = true;
function executeClickQuery(evt)
{
query.geometry = evt.mapPoint;
queryTask5.execute(query, showResults);
}
function showResults(featureSet)
{
map.graphics.clear();
dojo.forEach(featureSet.features, function(feature){
var graphic = feature;
graphic.setSymbol(mySymbol);
map.graphics.add(graphic);
});
}
//console.log("No " + stateFnum + " " + stateMnum);
var genderTheme = new SimpleTheme({
colors: ["#8888ff", "#ff8888"]
})
genderChart = new Chart("genderGraph");
//add in a customize theme
genderChart.setTheme(genderTheme).addPlot("default",{
type: Pie,
font: "normal normal 8pt Tahoma",
fontColor: "black",
radius: 60 //radius of 60 pixels
}).addSeries("Series A", [stateFnum,stateMnum]);
var amin_aa = new Tooltip(genderChart,"default");
var anim_bb = new Highlight(genderChart, "default");
genderChart.render();
});
}
);
</script>
</head>
<body>
<div id="mapDiv"></div>
</br>
<span id="popUSA" style ="font-weight: bold">Total Gender Population USA</span>
<div id="totalFemales" style="font-weight: normal; padding:3px">
Total Females:
</div>
<div id="totalMales" style="font-weight: normal; padding:3px">
Total Males:
</div>
<div id="totalPop" style="font-weight: normal; padding:3px">
Total Population:
</div>
<div id="genderGraph" style="font-weight: normal; padding:0px; position: absolute; left: 350px; top: 470px;width: 130px; height: 130px">
<!--Gender Pie Chart:-->
</div>
</br>
</br>
<span id="occupancyUSA" style ="font-weight: bold">Owner Versus Renter USA</span>
<div id="totalOwners" style="font-weight: normal; padding:3px">
Total Homeowners:
</div>
<div id="totalRenter" style="font-weight: normal; padding:3px">
Total Renters:
</div>
<div id="totalOccupancy" style="font-weight: normal; padding:3px">
Total Occupancy:
</div>
<!-- <div id="occupancyGraph" style="font-weight: normal; padding:20px; ">
Occupancy Pie Chart:
</div> -->
</body>
</html>
