1. Get started

  2.  Welcome
  3.  Get started
  4.  Run as a Windows service
  5.  Build your first app
  6.  Requirements
  7.  Accessibility support
  8.  Development overview
  9.  About release versions
  10.  What's new
  11.  Frequently asked questions
  12. Working with apps

  13.  Home page
  14.  Create or import an app
  15.  Edit and launch an app
  16.  Choose a theme
  17.  Select a map or scene
  18.  Add widgets
  19.  Widgets overview
  20.  Configure app attributes
  21.  Preview apps on smaller screens
  22.  Export as a template
  23.  Edit or preview template
  24.  Use URL parameters
  25.  Upgrade apps
  26. Configure 2D widgets

  27.  About widget
  28.  Add Data widget
  29.  Analysis widget
  30.  Attribute Table widget
  31.  Batch Attribute Editor widget
  32.  Basemap Gallery widget
  33.  Bookmark widget
  34.  Business Analyst widget
  35.  Chart widget
  36.  Controller widget
  37.  Coordinate widget
  38.  Coordinate Conversion widget
  39.  Cost Analysis widget
  40.  Data Aggregation widget
  41.  Directions widget
  42.  Distance and Direction widget
  43.  District Lookup widget
  44.  Draw widget
  45.  Edit widget
  46.  Emergency Response Guide widget
  47.  Extent Navigate widget
  48.  Filter widget
  49.  Full Screen widget
  50.  Geocoder widget
  51.  GeoLookup widget
  52.  Geoprocessing widget
  53.  Grid Overlay widget
  54.  Gridded Reference Graphic widget
  55.  Group Filter widget
  56.  Image Measurement widget
  57.  Home Button widget
  58.  Incident Analysis widget
  59.  Infographic widget
  60.  Info Summary widget
  61.  Layer List widget
  62.  Legend widget
  63.  Measurement widget
  64.  My Location widget
  65.  Near Me widget
  66.  Network Trace widget
  67.  Oblique Viewer widget
  68.  Overview Map widget
  69.  Parcel Drafter widget
  70.  Print widget
  71.  Public Notification widget
  72.  Query widget
  73.  Related Table Charts widget
  74.  Report Feature widget
  75.  Reviewer Dashboard widget
  76.  Scalebar widget
  77.  Screening widget
  78.  Search widget
  79.  Select widget
  80.  Share widget
  81.  Situation Awareness widget
  82.  Smart Editor widget
  83.  Splash widget
  84.  Stream widget
  85.  Suitability Modeler widget
  86.  Summary widget
  87.  Swipe widget
  88.  Threat Analysis widget
  89.  Time Slider widget
  90.  Visibility widget
  91.  Zoom Slider widget
  92. Configure 3D widgets

  93.  3DFx widget
  94.  About widget
  95.  Basemap Gallery widget
  96.  Compass widget
  97.  Coordinate widget
  98.  Daylight widget
  99.  Full Screen widget
  100.  Home Button widget
  101.  Layer List widget
  102.  Legend widget
  103.  Measurement widget
  104.  My Location widget
  105.  Navigate widget
  106.  Search widget
  107.  Share widget
  108.  Slides widget
  109.  Splash widget
  110.  Zoom Slider widget
  111. Widget development

  112.  Get started
  113.  Naming conventions
  114.  In-panel and off-panel widgets
  115.  Deploy your widget
  116.  Required files
  117.  Widget manifest
  118.  Extend BaseWidget
  119.  Required properties
  120.  Define the template
  121.  Configure the Demo widget
  122.  Add i18n support
  123.  Make widgets user-friendly
  124.  Build your first app
  125.  Communication to app container
  126.  Widget properties
  127.  Make widgets responsive
  128.  Communication between widgets
  129.  Dojo dijit
  130.  Make widgets configurable in builder
  131.  Make widgets backward compatible
  132.  Create a controller widget
  133.  Widget life cycle
  134.  Add help for your widget
  135.  Create a feature action in your widget
  136.  Provide and consume data sources in widgets
  137.  Best practices for unit testing
  138. Theme development

  139.  Theme elements
  140.  Create a theme
  141. 3D development

  142.  3D development guide
  143. Sample code

  144.  Create a custom in-panel widget
  145.  Create a ListView widget
  146.  Create a custom widget using the Report dijit
  147.  Create a new theme
  148.  Create a new style for a theme
  149.  Create a new default layout
  150.  Create a nondefault layout
  151.  Create a new panel
  152.  Create a new layout widget
  153.  Create a controller widget
  154.  Create a feature action in your widget
  155.  Send a layer to the Attribute Table widget
  156.  Open multiple widgets simultaneously
  157.  Use other libraries
  158.  Change the URL of ArcGIS API for JavaScript
  159. Deployment

  160.  Deploy your app
  161.  Use proxy
  162.  Web-tier authentication
  163.  Custom widget and theme deployment
  164.  Upgrade custom widgets and themes
  165. Framework reference

  166.  CSS framework
  167.  FeatureActionManager class
  168.  FilterManager class
  169.  LayerInfo class
  170.  LayerInfos class
  171.  LayerNode class
  172.  LayerStructure class
  173.  PanelManager class
  174.  SelectionManager class
  175.  Utils class
  176.  WidgetManager class
  177. dijit

  178.  FeaturelayerChooserFromMap class
  179.  FeaturelayerServiceBrowser class
  180.  FeatureSetChooserForSingleLayer class
  181.  Filter class
  182.  ImageChooser class
  183.  ItemSelector class
  184.  LayerChooserFromMap class
  185.  RendererChooser class
  186.  Report class
  187.  SnapShot class
  188.  SymbolChooser class
  189. JSON reference

  190.  App configuration
  191.  Map configuration
  192.  Widget configuration
  193.  Widget pool configuration
  194.  Widget on-screen configuration
  195.  Panel configuration
  196.  Group configuration
  197.  DataSource configuration
  198.  About
  199.  Analysis
  200.  Attribute Table
  201.  Basemap Gallery
  202.  Bookmark
  203.  Chart
  204.  Coordinate
  205.  Directions
  206.  Draw
  207.  Edit
  208.  Full Screen
  209.  Geocoder
  210.  Geoprocessing
  211.  Controller
  212.  Home Button
  213.  Image Measurement
  214.  Infographic
  215.  Layer List
  216.  Legend
  217.  Loading Page
  218.  Measurement
  219.  My Location
  220.  Near Me
  221.  Oblique Viewer
  222.  Overview Map
  223.  Print
  224.  Query
  225.  Report Feature
  226.  Reviewer Dashboard
  227.  Scalebar
  228.  Search
  229.  Share
  230.  Splash
  231.  Stream
  232.  Swipe
  233.  Time Slider
  234.  Zoom Slider
  235. What's new archive

  236.  What's new in version 2.23
  237.  What's new in version 2.22
  238.  What's new in version 2.21
  239.  What's new in version 2.20
  240.  What's new in version 2.19
  241.  What's new in version 2.18
  242.  What's new in version 2.17
  243.  What's new in version 2.16
  244.  What's new in version 2.15
  245.  What's new in version 2.14
  246.  What's new in version 2.13
  247.  What's new in version 2.12
  248.  What's new in version 2.11
  249.  What's new in version 2.10
  250.  What's new in version 2.9
  251.  What's new in version 2.8
  252.  What's new in version 2.7
  253.  What's new in version 2.6
  254.  What's new in version 2.5
  255.  What's new in version 2.4
  256.  What's new in version 2.3
  257.  What's new in version 2.2
  258.  What's new in version 2.1
  259.  What's new in version 2.0
  260.  What's new in version 1.3
  261.  What's new in version 1.2
  262.  What's new in version 1.1

Chart widget

The Chart widget displays quantitative attributes from an operational layer as a graphical representation of data. It allows end users to observe possible patterns and trends out of raw data. The operational layer can be one of the following:

A chart can represent the attribute values of a single field, aggregated values for multiple fields, or the total counts for features. A bar or column chart can even represent the attribute values of multiple fields as clustered bars and columns. When using the Chart widget, you can also specify a spatial filter to request only desired features to be in the chart.

Generally, there are four options to analyze, calculate, and display values of a feature layer as charts:

When displaying attribute values as bars, lines, or segments in a pie chart, a statistical operator is performed on the field values. The aggregate can be one of the following:

Configure the Chart widget

This widget can be set to open automatically when an app starts. Hover over the widget and click the Do not open this widget when the app starts button Do not open this widget when the app starts to change the setting to Open this widget automatically when the app starts. (For widgets that you need to add to the app first, you can turn on this option after configuring the widget.)

The Chart widget supports multiple chart tasks. Configure the following parameters to make a chart:

  • Set the Data Source, Chart Title, and Description options.
  • Select how you want to analyze and display data.
  • Set the chart appearance by specifying its types, display settings, and data fields.
  • Set the map display for the data.
Steps:
  1. Hover over the widget and click the Configure this widget button Configure this widget to open the configuration window.
    NoteNote:

    If you need to add the widget to the app first, click a widget placeholder on the Widget tab. In the Choose Widget window that opens, select the widget and click OK.

  2. The configuration window for this widget appears. If there are any existing chart tasks, they appear in the window.

  3. Optionally click Change widget icon and replace the default icon for this widget with an image of your own.

    A file explorer window appears, allowing you to select a local image file to use as the widget icon.

  4. Click Add New to create a new chart.

    The Set Data Source window appears. The data source can be from a layer in the current map, portal, or ArcGIS Server service. For this exercise, choose Add Service URL and add a service URL.

    Set data source
  5. CautionCaution:

    When Web AppBuilder is integrated in ArcGIS Online, it can access public and secured services from ArcGIS Server. For secured services, however, it does not support ArcGIS Server with web-tier authentication, such as IWA, PKI, or LDAP authentication. See ArcGIS Server web services for more information.

  6. Click OK.

    The Settings tab opens.

  7. Optionally click the data source filter button Data source filter next to the Data Source field to create filter expressions for your data content.
    Filter data
  8. Provide a chart title and description.
  9. Click the Chart Display drop-down arrow and choose Display values feature by feature.

    There are four options to analyze, calculate, and display values of a feature layer in a chart. The appearance of a chart is specified by the chart type, color, value fields, and so on. It varies based on the display options of the chart.

    • For Display values feature by feature, do the following:
      1. Choose one or multiple fields in Value Fields. If multiple fields are selected, they display as clustered bars and column charts.
      2. Choose a label from the Category Label drop-down fields.
      3. Choose at least one Chart Type and specify its display.
        Specify chart display
    • For Display values by category , do the following:
      1. Click the Category Field drop-down list and choose a field. This field is used to categorize features and label categories.
      2. Choose one or multiple fields in Value Fields. If multiple fields are selected, they display as clustered bars and columns.
      3. Choose an operation from the Operation drop-down list. For aggregate values, four operations are supported: sum, average, minimum, and maximum.
      4. Choose at least one Chart Type and specify its display.
    • For Display feature counts by category, do the following:
      1. Click the Category Field drop-down list and choose a field. This field categorizes features and labels categories.
      2. Choose at least one Chart Type and specify its display.
    • For Display attribute values as charts, do the following:
      1. Choose one or multiple fields in Value Fields. For each selected field, the statistical value displays separately as a bar, column, line, or pie segment.
      2. Choose an operation from the Operation drop-down list. For aggregate values, four operations are supported: sum, average, minimum, and maximum.
      3. Choose at least one Chart Type and specify its display.

        NoteNote:
        For the pie chart, you can add a legend to your chart for any of the four display options. For other types of charts (for example, a bar chart), you can add a legend only if you select both the Display values feature by feature and Display values by category display options.

  10. Optionally, you can sort the fields if necessary by label or value.
  11. Click a symbol next to Selection Symbol to set the symbol for the charted features on the map.
  12. Click a color next to Highlight Color to set the highlighted color for the charted features on the map when hovering over the chart.
  13. Click the Preview tab to preview the chart. For column, bar, and line chart types, their axis labels automatically rotate in response to the density of the bars, columns, and lines. When multiple fields are selected in Value Fields, these types of charts support multiple colors for the clustered bars, columns, and lines.
    Preview the chart
  14. Repeat steps 3 through10 to add more chart tasks.
  15. Click OK to complete the configuration.

Use the Chart widget

When the Chart widget is activated in the app, follow these steps to run it:

Steps:
  1. Select a task to execute the chart.
  2. Make a spatial selection in the map using the current map extent or by drawing a graphic on the map. If the spatial selection results in a valid selection set, the chart automatically displays on the Chart Results tab when you click Apply.

    Use spatial filter

  3. Hover over each individual piece in the chart to display the category value and the field value and to highlight the corresponding feature on the map. Click each individual piece in the chart to zoom to the charted features on the map. When more than one type of chart is configured, click the arrows to browse through the individual types.

    Chart results

  4. Optionally click the settings button Display setting to change the chart display.
  5. Click the zoom in button to get a closeup view of the chart.
    TipTip:

    The maximum features to display in a chart depend on the maxRecordCount property set in the service.