DataReviewer - Dashboard Results with Filter | ArcGIS API for JavaScript 3.29

This sample shows how to fetch and display a filtered dashboard summary from a Reviewer dataset. The summary is total counts of a value in the specific or custom (user-defined) fields in the Reviewer dataset's REVTABLEMAIN or REVBATCHRUNTABLE tables. The summary displays the number of occurrences of a unique value in a field in these tables. This sample filters dashboard summary with an instance of ReviewerFilters. The ReviewerFilters instance contains one or more attribute filters depending on what values the user selects in the UI. Filters added to a ReviewerFilters instance work like a query. The live sample retrieves dashboard summary from a hosted instance of Data Reviewer for Server.

Code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dashboard Get Results with Attribute Filter Sample</title>    
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/grid/resources/claroGrid.css">
<script src="https://js.arcgis.com/3.29/"></script>
<style>
 .reviewerGrid {
   font-size: 0.75em;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.reviewerForm {
	width: 530px;
	font-size: .7em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.submitButton {
	float: right;
	padding: 5px;
	width: 150px;
	font-size: 1.1em;
	border: 2px solid #CCC;
	margin: 0px 0px 10px 0px;
}	
label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 130px;
	padding-top: 5px;
}
select{
	padding: 5px;
	width: 385px;
	margin: 0px 0px 10px 0px;
	border: 2px solid #CCC;
}
.message {
	float: right;
	padding: 5px;
	width: 280px;
}

.errorMessage{
	float: right;
	padding: 5px;
	width: 280px;
	color: #C41111;
}
</style>
  <script>
  //This should point to the Data Reviewer soe
  var drsSoeUrl = "https://datareviewer.arcgisonline.com/arcgis/rest/services/Samples/reviewerDashboard/MapServer/exts/DataReviewerServer";
  var dashboardTask;
  var reviewerFilters;
  require(
  [
     "dojo/parser",
     "dojo/on",
     "dojo/dom",
     "dojo/query",
     "dijit/registry",
     "dojo/_base/array",
     "esri/tasks/datareviewer/DashboardTask",
     "esri/tasks/datareviewer/ReviewerFilters",
     "dojox/charting/widget/Chart",
     "dojox/charting/plot2d/Pie",
     "dojox/charting/themes/Claro",
     "dojox/grid/DataGrid",
     "dojo/data/ItemFileReadStore",
     "dojo/domReady!"
  ], 
  function( parser, on, dom, query, registry, array, DashboardTask, ReviewerFilters, Chart, Pie, Distinctive, DataGrid, ItemFileReadStore) {
    parser.parse();
    // specify proxy for request with URL lengths > 2k characters
    esriConfig.defaults.io.proxyUrl = "/proxy/";
      
     // create a new DashboardTask with the DRS SOE URL
     dashboardTask = new DashboardTask(drsSoeUrl);
     
     //Retrieve Dashboard FieldNames and 
     //Create radio buttons
     dashboardTask.getDashboardFieldNames();
     var count = 1;
     dashboardTask.on("get-dashboard-field-names-complete",function(fieldNames){
        array.forEach(fieldNames.fieldNames, function(fieldName, i) {
            dom.byId("dashboardFieldNamesCombo")[i] = new Option( fieldName, fieldName); 
        });
     });
    
     // handle getResults button click event
     on(dom.byId("getResultsButton"), "click", function(evt) {
        getDashboardResults(reviewerFilters);
     });
    
     // handle the filter checkboxes click event
     on(query('[name=\"chkBoxGroup\"]'), "click", applyAttributeFilters);

     function getDashboardResults(reviewerFilters) {
        //Identify the Dashboard field that user has selected 
        var selectedField = dom.byId("dashboardFieldNamesCombo").value;
        
        // retrieve the results by user selected field
        if((reviewerFilters !== undefined) && (reviewerFilters !== null) && (reviewerFilters.getCount() >0))
        {
            dashboardTask.getDashboardResults(selectedField, reviewerFilters);	
        }
        else
        {
            dashboardTask.getDashboardResults(selectedField);
        }

        dashboardTask.on("get-dashboard-results-complete",function(response){        
           // make content visible
           dom.byId("mainContent").style.visibility = "visible";

           // now process the response, this is necessary because the
           // dojo chart expects an array of key-value pairs in the
           // format of [{text:<label>,y:<value>}]
           var mappedArray = [];
           array.forEach(response.dashboardResult.fieldValues, function(item, i) {
              mappedArray.push({
                 text : item,
                 y : response.dashboardResult.getCount(item)
              });
           });

           // update the chart
           var chart = registry.byId("chart").chart;
           chart.removeSeries("reviewer");
           chart.addSeries("reviewer", mappedArray);
           chart.render();

           //set datagrid layout
           var gridLayout=[[
               {field: 'text', name: selectedField, width:'250px'},
               {field: 'y', name: 'COUNT', width:'100px'}
           ]];

           //creating store for datagrid
           var store = new ItemFileReadStore({
              data : {
                 items : mappedArray
              }
           });
           // update the datagrid
           var grid = registry.byId("dashBoardResultsGrid");
           grid.setStructure(gridLayout);
           grid.setStore(store);
           
        });
        dashboardTask.on("error", function(error) {
           var grid = registry.byId("dashBoardResultsGrid");
           grid.setStore(null);
           showMessage("dashboardMessages", "Error occurred  " + error.error.message, "errorMessage");
        });
     }
    
     //error handling
     function showMessage(divName, text, className) {
        var messageDiv = dom.byId(divName);
        messageDiv.innerHTML = "";
        messageDiv.className = className || "";
        messageDiv.innerHTML = text;
     }            
     // Add reviewer filters
     function applyAttributeFilters(evt) {
        // create a new ReviewerFilters instance
        reviewerFilters = new ReviewerFilters();
        query('[name=\"chkBoxGroup\"]').forEach(function(chkbox) {
           if(chkbox.checked) {
              // populate the ReviewerFilters instance with
              //  attributeFilters (by severity in this case)
              reviewerFilters.addAttributeFilter("SEVERITY", parseInt(chkbox.value));
           }
        });
        //check if there is at least one filter
        if(reviewerFilters.getCount() > 0)
           getDashboardResults(reviewerFilters);
        else
           getDashboardResults();
     }
  });
  </script>
</head>
<body class="claro">
<h2 align="center">Dashboard Get Results with filters Sample</h2>
    <div style="width:100%; overflow-x: auto;" >
        <div style="padding: 0px 20px 0px 0px; float:left;">
            <div class="reviewerForm" >
                <label for="dashboardFieldNamesCombo">Dashboard results by:</label>
                <select id="dashboardFieldNamesCombo"></select>
                <button id="getResultsButton" title="GetResults" class="submitButton">Get Dashboard Results</button>	
                <div id="dashboardMessages" class="message"></div>
            </div>
        </div>
    </div>
  <div id="mainContent" style="width:100%;visibility: hidden">
     
     <div style="width: 100%; padding-bottom: 20px" class="label">
        <div style="margin-bottom: 15px"  >
           Filter dashboard results by Severity
        </div>
        <input type="checkbox" value="1" name="chkBoxGroup" />
        Severity 1  
        <input type="checkbox" value="2" name="chkBoxGroup" />
        Severity 2  
        <input type="checkbox" value="3" name="chkBoxGroup" />
        Severity 3  
        <input type="checkbox" value="4" name="chkBoxGroup" />
        Severity 4  
        <input type="checkbox" value="5" name="chkBoxGroup" />
        Severity 5  
     </div>
     
     <div id="chart" title="Distribution of Reviewer results"
     data-dojo-type="dojox/charting/widget/Chart"
     theme="dojox.charting.themes.Claro"
     style="width: 500px; height: 400px; float:left;" >
        <div class="plot" name="default" type="Pie" radius="120" fontColor="#000" labelStyle="default" labelOffset="-30"></div>
     </div>
     
     <div style="padding: 0px 20px 0px 20px; float:left;">
        <table id="dashBoardResultsGrid" columnReordering="false"
        data-dojo-type="dojox/grid/DataGrid"  autoHeight="true" autoWidth="true" class="reviewerGrid">
     </div>
  </div>
</body>
</html>

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	Sample Code
`/`	Focus search
`es`	Explore in the Sandbox
`s`	Share in online code editor
`vl`	View live example

Explore in the sandbox Open in CodePen View live sample Download as a zip file

Description

Code

Keyboard shortcuts

Explore in the sandbox Open in CodePen
View live sample
Download as a zip file