Displaying results In Pie Chart

TateM · ‎04-10-2019

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)
{

}

  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>

SherbazHashmi · ‎04-11-2019

Hi Tate,

While I don't have a massive amount of experience with the libraries, it looks like you've wrapped your pie chart code within a function which doesn't seem to be running. I removed the chart code from the function and it worked. So for the Gender Graph for instance, I would suggest removing the genderGraph(genderDataResult) { } characters to run the code you have within your brackets.

Shoot me a response if you have any questions.

Sherbaz

View solution in original post

SherbazHashmi · ‎04-11-2019

Hi Tate,

While I don't have a massive amount of experience with the libraries, it looks like you've wrapped your pie chart code within a function which doesn't seem to be running. I removed the chart code from the function and it worked. So for the Gender Graph for instance, I would suggest removing the genderGraph(genderDataResult) { } characters to run the code you have within your brackets.

Shoot me a response if you have any questions.

Sherbaz

TateM · ‎04-11-2019

thanks Sherbaz! that works.

Now I got to get the pie chart repositioning to the right spot and be legible. I want it to display right after the "Gender Pie Chart:" in the div, maybe with the "Gender Pie Chart:" wording line up about mid way(half circle) of the chart. Do you have any tips on that ?