New Pie Chart, Overriding Old One

TateM — Tue, 16 Apr 2019 05:36:10 GMT

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%;}

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

   //var censusLayers = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
   var fLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
    outFields:["*"]
   });

   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.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">
  
</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>

</body>
</html>

Re: New Pie Chart, Overriding Old One

KenBuja — Sun, 12 Dec 2021 01:59:50 GMT

In the fLayer on click function, instead of instantiating a new genderChart, simply reuse the existing one (set up earlier in the script) by commenting out line 38

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();

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: New Pie Chart, Overriding Old One

TateM — Tue, 16 Apr 2019 20:54:07 GMT

Well that does it!

Very simple, can't believe I missed it.

Thanks alot Ken.

By the way how are you able to get the code to format nicely with the line number and all?

Re: New Pie Chart, Overriding Old One

KenBuja — Tue, 16 Apr 2019 20:58:36 GMT

Take a look at this blog. However, note that the Syntax Highlighter option does not appear when replying through the Inbox.

topic Re: New Pie Chart, Overriding Old One in ArcGIS JavaScript Maps SDK Questions

New Pie Chart, Overriding Old One

Re: New Pie Chart, Overriding Old One

Re: New Pie Chart, Overriding Old One

Re: New Pie Chart, Overriding Old One