Populate Grid - flip rows and columns

TracySchloss · ‎10-19-2015

I have two years' worth of county based demographic statistics.

I have the same information for each year. For example: totalPopulation, PopulationOver18, Population17_44, Population45_64 etc

On a map click event for the county layer, I've been asked to display it with years for the columns and rows for the population breakouts, This format is my question.

I typically use dGrid. It seems like I can manipulate the data prior to populating it, but I can't quite wrap my brain around how to go about this.

Example:

COUNTY NAME

Statistic	Year 1	Year2
Total Population	123	145
Population Over 18	56	66

I don't know if this is a true pivot table, or if this is just a 'turning data on it's head' sort of format.

TracySchloss · ‎10-26-2015

I wrote up an example using some dummy data in arrays. Eventually the arrays will be populated from the results of a task (either identify or query, I haven't decided.)

I'm hoping that I'm making a a simple mistake, as opposed to flawed logic of how this could work. I'm setting breakpoints to evaluate the components and see there are values. Obviously not the right format, or my grid would be populated.

<!DOCTYPE html>
  <html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Populate Grid from My Arrays</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.13/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.13/esri/css/esri.css"/>


<script type="text/javascript">
var dojoConfig = {
  parseOnLoad: false,
  async:true
};
</script>
<script type="text/javascript" src="https://js.arcgis.com/3.13compact/"></script>
</head>
<body class="claro">
      <script type="text/javascript">
        require([
        "dojo/on",
        "dojo/parser",
        "dojo/_base/array",
        "dgrid/Grid",
        "dojo/store/Memory",
        "dojo/domReady!"
  ], function(
  on, parser,arrayUtils, Grid, Memory ) {

        var columnName = ["fieldName","2015","2030"];
        var fields=["total","age17_44","age45_64","age65_84", "age85plus"]
        var valCurrent= [1000, 200, 300, 450,350];
        var valEst = [500, 100,200,150, 50]
        var outputArr = [];


        for (index = 0; index < valCurrent.length; index++) {
        var rowObj = {
          id:index,
          fieldName:fields[index],
          val2015:valCurrent[index],
          val2030:valEst[index]
        };
        outputArr.push(rowObj)
      }; 
          var currentMemory = new Memory({
            data: outputArr,
            idProperty: 'id'
        });
      var grid = new Grid({
            columns: {
                id: "id",
                fieldName: "Field",
                val2015: "2015",
                val2030: "2030"
            }
        }, "outputGrid");


grid.set('store', currentMemory);
grid.startup();
console.log('you are here');
});
        </script>
        <div id="outputGrid">
         
        </div>
    </body>
</html>

Here's a JSbin version:

JS Bin - Collaborative JavaScript Debugging

TracySchloss · ‎10-27-2015

Got it! I switched to grid.renderArray, as opposed to Memory. It should work for my purposes.

<!DOCTYPE html>
  <html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Populate Grid from My Arrays</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.13/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.13/esri/css/esri.css"/>


<script type="text/javascript">
var dojoConfig = {
  parseOnLoad: false,
  async:true
};
</script>
<script type="text/javascript" src="https://js.arcgis.com/3.13compact/"></script>
</head>
<body class="claro">
      <script type="text/javascript">
        require([
        "dojo/on",
        "dojo/parser",
        "dojo/_base/array",
        "dgrid/Grid",
        "dojo/domReady!"
  ], function(
  on, parser,arrayUtils, Grid ) { 
        var cols = {fieldName: "Field",val2015:"2015",val2030:"2030"}
        var fields=["Total","Age17_44","Age45_64","Age65_84", "Age85plus"]
        var valCurrent= [1000, 200, 300, 450,350];
        var valEst = [500, 100,200,150, 50]
        var outputArr = [];
          for (index = 0; index < valCurrent.length; index++) {
            var rowObj = {
              fieldName:fields[index],
              val2015:valCurrent[index],
              val2030:valEst[index]
            };
            outputArr.push(rowObj)
          }; 
      var grid = new Grid({
        columns:cols
        }, "outputGrid");       
        grid.renderArray(outputArr);
        grid.startup();
});
     </script>
        <div id="outputGrid">     
      </div>
    </body>
</html>