Dashboard Results
Description
This sample shows how to fetch and display dashboard statistics from a Reviewer workspace. Dashboard statistics report on the quality of your data. These statistics are total counts of a value in the specific or custom (user-defined) field in the Reviewer workspace's REVTABLEMAIN or REVBATCHRUNTABLE tables. Statistics show the number of occurrences of a unique value in a field in these tables.
The DashboardTask class exposes methods to retrieve these statistics and the field names from which statistics are generated. This sample fetches dashboard statistics using the getDashboardResults function.
The live sample retrieves dashboard statistics from a hosted instance of Data Reviewer for Server. The following code sample fetches dashboard statistics from a local instance of Data Reviewer for Server. You must specify the URL of your own Data Reviewer for Server and relative paths to your local copies of drs.js, style.css, and proxy.ashx.
Note:The Data Reviewer API for JavaScript 3.4 or later requires a proxy page to support POST requests and ArcGIS token-based authentication.
Code
The following sample requests Dashboard results by severity.
<!DOCTYPE html>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright (c) 2011-2015 Esri
//
// All rights reserved under the copyright laws of the United States
// and applicable international laws, treaties, and conventions.
//
// You may freely redistribute and use this software, with or without
// modification, provided you include the original copyright and use
// restrictions. See use restrictions in the file use_restrictions.txt.
//
////////////////////////////////////////////////////////////////////////////////
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" type="text/css" href="../style.css"/>
<title>Dashboard Get Results Sample</title>
<!-- configure dojo -->
<script>
dojoConfig = {
async:true,
parseOnLoad : true
};
</script>
<!-- load esri api and dojo -->
<script src="http://js.arcgis.com/3.13/"></script>
<!-- load drs api -->
<script src="../drs_js_api/drs.js"></script>
<script>
//This should point to the Data Reviewer soe
var drsSoeUrl = "http://datareviewer.arcgisonline.com/arcgis/rest/services/Samples/reviewerDashboard/MapServer/exts/DataReviewerServer";
var dashboardTask;
require([
"dojo/parser",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"drs/DashboardTask",
"dojox/charting/widget/Chart",
"dojox/charting/plot2d/Pie",
"dojox/charting/themes/Claro",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dojo/domReady!"
],
function(parser, on, dom, registry, array, DashboardTask, Chart, Pie, Distinctive, DataGrid, ItemFileReadStore) {
//identify proxy page to use
esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
esri.config.defaults.io.alwaysUseProxy = false;
// create a new DashboardTask with the DRS SOE URL
dashboardTask = new DashboardTask(drsSoeUrl);
//Retrieve Dashboard FieldNames and populate combo box
var dashboardFieldNamesDeferred = dashboardTask.getDashboardFieldNames();
dashboardFieldNamesDeferred.then(function(fieldNames){
array.forEach(fieldNames.fieldNames, function(fieldName, i) {
dom.byId("dashboardFieldNamesCombo")[i] = new Option( fieldName, fieldName);
});
}, function(error) {
showMessage("dashboardMessages", "Error occurred " + error.message, "errorMessage");
});
// handle getResults button click event
on(dom.byId("getResultsButton"), "click", function(evt) { getDashboardResults(); });
function getDashboardResults() {
//Identify the Dashboard field that user has selected
var selectedField = dom.byId("dashboardFieldNamesCombo").value;
// retrieve the results by user selected field.
var deferred = dashboardTask.getDashboardResults(selectedField);
// we're using dojo deferred 'then' function to set callback and errback functions
deferred.then(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);
}, function(error) {
var grid = registry.byId("dashBoardResultsGrid");
grid.setStore(null);
showMessage("dashboardMessages", "Error occurred " + error.message, "errorMessage");
});
}
//error handling
function showMessage(divName, text, className) {
var messageDiv = dom.byId(divName);
messageDiv.innerHTML = "";
messageDiv.className = className || "";
messageDiv.innerHTML = text;
}
});
</script>
</head>
<body class="claro">
<h2 align="center">Dashboard Get Results 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" >
<!-- Chart -->
<div id="chart" title="Distribution of Reviewer results" style="width: 500px; height: 400px; float:left;"
data-dojo-type="dojox/charting/widget/Chart" theme="dojox.charting.themes.Claro">
<div class="plot" name="default" type="Pie" radius="120" fontColor="#000" labelStyle="default" labelOffset="-30"></div>
</div>
<!-- Data Grid -->
<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">
</table>
</div>
</div>
</body>
</html>
5/7/2015