Displaying results In Pie Chart

614
2
Jump to solution
04-10-2019 10:28 PM
TateM
by
New Contributor III

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>
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
SherbazHashmi
New Contributor

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

0 Kudos
2 Replies
SherbazHashmi
New Contributor

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

0 Kudos
TateM
by
New Contributor III

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 ? 

0 Kudos