Community

New Pie Chart, Overriding Old One

477
3
Jump to solution
04-15-2019 10:36 PM
TateM
by
New Contributor III
‎04-15-2019 10:36 PM

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">
  <!--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>
0 Kudos
1 Solution

Accepted Solutions
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎04-16-2019 06:24 AM

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

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

View solution in original post

0 Kudos
3 Replies
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎04-16-2019 06:24 AM

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

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
TateM
by
New Contributor III
‎04-16-2019 01:54 PM

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? 

0 Kudos
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎04-16-2019 01:58 PM

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