Hello everyone,
I'm having trouble displaying the Pie chart. Found some examples that I put together but I cannot get it to work. Any help on how to do this or pointers on how to do this is greatly appreciated. Am I even going in the right direction? Below are the code that I have. 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 STATISTICs</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%;}
</style>
<script type="text/javascript" src="https://js.arcgis.com/3.28/"></script>
<script type="text/javascript">
var usFemalesNum, usMalesNum, usHomeOwnersNum, usRentersNum;
require
(
[
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/SpatialReference",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/tasks/StatisticDefinition",
"dojo/Deferred",
"dojo/promise/all",
"dojox/charting/Chart",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/SimpleTheme"
],
function(Map, ArcGISDynamicMapServiceLayer, SpatialReference, Query, Qt, statD, Deferred, all, Chart, Pie, Highlight, Tooltip, SimpleTheme)
{
var censusLayers = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer");
var map = new Map("mapDiv", {
basemap: "topo",
center: [-94.84, 39.69],
zoom: 5
});
censusLayers.setVisibleLayers([3]);
//US Females number
function totalFemales()
{
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 = ["FEMALES"];
var stats = new statD();
stats.statisticType = "sum";
stats.onStatisticField = "FEMALES";
stats.outStatisticFieldName = "sum_female_pop";
query.where = "1=1";
query.outStatistics = [stats];
//queryTask.execute(query, showFemalesSum, showFail);
queryTask.execute(query, function(result)
{
showFemalesSum(result).then(function(value)
{
retDef.resolve(value);
});
}, showFail);
return retDef;
}
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;
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;
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;
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);
//console.log("Inside of totalRenter() "+stats.outStatisticFieldName);
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;
//console.log("testing", totalSum, results.features);
document.getElementById('totalRenter').innerHTML = "Total Renters: " + totalSum;
retDef.resolve(totalSum);
return retDef;
}
map.addLayer(censusLayers);
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;
document.getElementById("totalOccupancy").innerHTML = "Total Occupancy: " + sum2;
///////////////////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(genderDataResult, fieldLabels)
{
var data = [], field;
for(field in fieldLabels)
{
data.push({
tooltip:fieldLabels[field],
y: +genderDataResult[field] //+ is to convert a value into a number, equivalent to parseInt()
});
}
return data;
}
function genderData(genderDataResult)
{
var fieldLabels =
{
"MALES": "Males",
"FEMALES": "Females"
}
return this.formatAttributesForGraph(genderDataResult, fieldLabels);
}
function genderGraph(genderDataResult)
{
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 10pt Tahoma",
fontColor: "black",
radius: 60 //radius of 60 pixels
}).addSeries("Series A", genderDataResult);
var tP = new Tooltip(genderChart, "default");
var hL = new Highlight(genderChart, "default");
genderChart.render();
}
});
});
}
);
</script>
</head>
<body>
<div id="mapDiv"></div>
<div id="genderPopData" style="font-weight: bold">
Total Gender Population in United States
<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>
<div id="genderGraph" style="font-weight: normal; padding:20px; ">
Gender Pie Chart:
</div>
</br>
<div id="housingData" style="font-weight: bold">
Owner Versus Renter in United States
<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>
</div>
</body>
</html>