Dashboard Results with filter

Application Source Code

• DashboardResultsWithFilter.mxml

DashboardResultsWithFilter.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright (c) 2008-2014 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.
//
////////////////////////////////////////////////////////////////////////////////
-->
<s:Application 
               minHeight="400"
               minWidth="600"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:drs="com.esri.drs.*"
               pageTitle="Dashboard Get Results by FEATURE CLASS and Filter by SEVERITY Sample">

    <!--

    Data Reviewer's dashboard statistics provides the ability to report on the
    quality of the data. Statistics are total counts of a unique value in a specific
    or custom (user-defined) field in the Reviewer workspace's tables.
    This sample shows how to retrieve and display dashboard statistics by
    Feature Class and to filter it by Severity with an instance of ReviewerFilters.
    The ReviewerFilters instance may contain one or more attribute filters depending
    on what values the user selects in the user interface.
    A filter works like a where clause.

    -->
    <fx:Declarations>

        <!-- Create a DashboardTask and configure its URL and event handlers -->
        <drs:DashboardTask id="dashboardTask"
                           url="{_soeUrl}"
                           getDashboardResultsComplete="dashboardTask_getDashboardResultsCompleteHandler(event)"
                           getDashboardFieldNamesComplete="dashboardTask_getDashboardFieldNamesCompleteHandler(event)" 
                           fault="faultHandler(event)"
                           showBusyCursor="true"
                           disableClientCaching="true"/>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import com.esri.drs.DashboardResult;
            import com.esri.drs.DashboardTask;
            import com.esri.drs.DataReviewerTaskEvent;
            import com.esri.drs.ReviewerFilters;
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
            import mx.rpc.Fault;
            import mx.rpc.events.FaultEvent;
            import spark.events.IndexChangeEvent;
            // use this as the pie chart's data provider
            [Bindable]private var _resultList:ArrayList = new ArrayList();
            //Dashboard Field Name collection 
            [Bindable]public var dashboardFieldNames:ArrayList = new ArrayList();
            //Amazon instance for Data Reviewer Server. Change to your Data Reviewer Server SOE URL to run this sample in your environment
            private var _soeUrl:String = "http://datareviewer.arcgisonline.com/arcgis/rest/services/Samples/reviewerDashboard/MapServer/exts/DataReviewerServer";
            private var _filters:ReviewerFilters;

            protected function getDashboardFieldNames(event:FlexEvent): void
            {
                // hide chart
                currentState = "normal";
                dashboardTask.getDashboardFieldNames();
            }
            
            protected function dashboardTask_getDashboardFieldNamesCompleteHandler(event:DataReviewerTaskEvent):void
            {
                for each (var fieldName:String in event.result)
                {
                    dashboardFieldNames.addItem(fieldName);
                }
                fieldNamesList.selectedIndex=0;
            }
            
            protected function fieldNamesList_changeHandler(event:IndexChangeEvent):void
            {
                currentState = "normal";
            }
            public function getData_clickHandler(event:MouseEvent):void
            {
                // display chart
                currentState = "data";
                //clear previous selections
                for (var i:uint = 0; i < checkBoxGroup.numElements; i++)
                {
                    var checkBox:CheckBox = CheckBox(checkBoxGroup.getElementAt(i));
                    checkBox.selected=false;                    
                }
                //call dashboardTask to get the results
                dashboardTask.getDashboardResults(fieldNamesList.selectedItem);
            }

            public function checkBox_change(evt:Event):void
            {
                _filters = new ReviewerFilters();

                for (var i:uint = 0; i < checkBoxGroup.numElements; i++)
                {
                    var checkBox:CheckBox = CheckBox(checkBoxGroup.getElementAt(i));

                    if (checkBox.selected)
                        _filters.addAttributeFilter("SEVERITY", parseInt(checkBox.name));
                }
                //call dashboardTask to get the results
                dashboardTask.getDashboardResults(fieldNamesList.selectedItem, _filters);
            }

            private function dashboardTask_getDashboardResultsCompleteHandler(event:DataReviewerTaskEvent):void
            {
                //clear previous results first
                _resultList = new ArrayList();
                var result:DashboardResult = event.result as DashboardResult;

                if (result == null)
                {
                    currentState = "error";
                }
                else
                {
                    // parse the results and convert into a pie chart data provider
                    for each (var item:Object in result.fieldValues)
                    {
                        _resultList.addItem({ text: item, count: result.getCount(item)});
                    }
                    currentState = "data";
                }
            }

            private function faultHandler(event:FaultEvent):void
            {
                var fault:Fault = event.fault;
                var msg:String = fault.faultString;

                if (fault.content != null && fault.content as Array != null)
                    msg = fault.content[1].message;
                errorMsg.text = "Error: " + msg;
                currentState = "error";
            }
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal"/>
        <s:State name="data"/>
        <s:State name="error"/>
    </s:states>
    <s:controlBarContent>
        <s:Label width="100%" text="The following sample displays dashboard statistics from an ArcGIS Data Reviewer for Server hosted on Amazon. Dashboard statistics are displayed in a pie chart. To run the sample against your own Data Reviewer Server, see comments in code for _soeUrl variable."/>
    </s:controlBarContent>
    <s:Scroller width="100%" height="100%">
        <s:VGroup>
            <s:Form width="30%">
                <s:layout>
                    <s:FormLayout gap="-5"/>
                </s:layout>
                <s:FormHeading label="Dashboard Get Results with filters"/>
                <s:FormItem label="Dashboard Result By: ">
                    <s:DropDownList id="fieldNamesList" 
                                    creationComplete="getDashboardFieldNames(event)" 
                                    dataProvider="{dashboardFieldNames}" 
                                    width="100%" 
                                    change="fieldNamesList_changeHandler(event)" />
                </s:FormItem>
                <s:FormItem>
                    <s:layout>
                        <s:HorizontalLayout horizontalAlign="right"/>
                    </s:layout>
                    <s:Button id="getData"
                              height="25"
                              label="Get Dashboard Results"
                              click="getData_clickHandler(event)"/>
                </s:FormItem>
            </s:Form>

            <!-- Filters, Chart and Data Grid -->
            <s:VGroup id="mainContent"
                      paddingTop="20"
                      gap="4"
                      includeIn="data">
                <s:Label fontSize="15" paddingLeft="20" text="Filter dashboard results by selecting one or more severity values: "/>
                <s:HGroup id="checkBoxGroup" width="100%" paddingLeft="20">
                    <s:CheckBox id="Severity1" name="1"
                                height="30"
                                fontSize="15"
                                label="Severity 1"
                                click="checkBox_change(event)"/>
                    <s:CheckBox id="Severity2" name="2"
                                height="30"
                                fontSize="15"
                                label="Severity 2"
                                click="checkBox_change(event)"/>
                    <s:CheckBox id="Severity3" name="3"
                                height="30"
                                fontSize="15"
                                label="Severity 3"
                                click="checkBox_change(event)"/>
                    <s:CheckBox id="Severity4" name="4"
                                height="30"
                                fontSize="15"
                                label="Severity 4"
                                click="checkBox_change(event)"/>
                    <s:CheckBox id="Severity5" name="5"
                                height="30"
                                fontSize="15"
                                label="Severity 5"
                                click="checkBox_change(event)"/>
                </s:HGroup>
                <s:HGroup id="charts" paddingLeft="30" gap="20">
                    <mx:PieChart id="dashboardPieChart"
                                 width="350" height="100%"
                                 fontWeight="bold"
                                 paddingLeft="30"
                                 dataProvider="{_resultList}"
                                 showDataTips="true">
                        <mx:series>
                            <mx:PieSeries id="dashboardPieSeries"
                                          calloutGap="1"
                                          field="count"
                                          labelPosition="insideWithCallout"
                                          maxLabelRadius="0.3"
                                          nameField="text"
                                          reserveExplodeRadius="0.1"/>
                        </mx:series>
                    </mx:PieChart>
                    <mx:Legend 
                               width="100" height="100%"
                               paddingTop="120"
                               dataProvider="{dashboardPieChart}"/>
                    <s:VGroup paddingLeft="100" paddingTop="80" gap="4">
                        <s:Group width="380" verticalScrollPosition="50">
                            <mx:DataGrid id="fcDG"
                                         width="350" height="300"
                                         dataProvider="{_resultList}">
                                <mx:columns>
                                    <mx:DataGridColumn id="dataGridColumn1"
                                                       width="230"
                                                       headerText="{fieldNamesList.selectedItem}"
                                                       dataField="text"/>
                                    <mx:DataGridColumn id="dataGridColumn2"
                                                       width="120"
                                                       textAlign="left"
                                                       minWidth="20"
                                                       headerText="COUNT"
                                                       dataField="count"
                                                       headerWordWrap="false"/>
                                </mx:columns>
                            </mx:DataGrid>
                        </s:Group>
                    </s:VGroup>
                </s:HGroup>
            </s:VGroup>

            <!-- Error message -->
            <s:HGroup id="error"
                      color="red"
                      horizontalAlign="center"
                      paddingLeft="20"
                      paddingTop="20"
                      includeIn="error"
                      itemCreationPolicy="immediate">
                <s:Label id="errorMsg" fontSize="15" text="Error"/>
            </s:HGroup>
        </s:VGroup>
    </s:Scroller>
</s:Application>