Chart widget

The Chart widget displays quantitative attributes from an operational layer as a graphical representation of data. It makes it easier for end users to observe possible patterns and trends out of raw data. The operational layer can be:

  • A feature layer in the current map
  • A feature layer as an item in the portal
  • A feature layer from ArcGIS Server REST Service
    Tip:

    A feature layer can be from a map service, feature service, or dynamic map service. It also needs to support query capabilities to work with the Chart widget.

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 and calculate, then to display values of a feature layer as charts:

  • Display values feature by feature—Displays values feature by feature. The chart depicts values of one or multiple fields for each feature in the layer. For example, in a cities layer, you may want to display the population for each city as a bar, column, line, or pie chart. You may also want to display the male and female population as clustered bars and columns per city.
  • Display values by category—This chart depicts statistical values of one or multiple fields for each category of features in the layer. For example, in a cities layer, if you specify the state field as the category, you can display the total population for cities per state.
  • Display feature counts by category—This chart depicts total feature counts for each category of features in the layer. For example, in a cities layer, you can specify the population class field as the category, and calculate the counts of cities in each population class.
  • Display attribute values as charts—This chart depicts the statistical value for a specified field or fields in the layer. For example, in a cities layer, you can display the total population as a bar for all cities in the year 2000, and the other bar for a total population of all cities in the year 2010.

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:

  • The average value across features
  • The maximum value of all features
  • The minimum value of all features
  • The total value of all features

Configuring the Chart widget

The Chart widget can be set to open automatically when apps start. To do so, click the dot on the widget to turn it dark green.

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

  • Set the Data Source, Chart Title, and Description.
  • Select a way 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.
  1. Hover the mouse over the Chart widget and click the small edit icon Edit icon.

    This opens the configuration window for the widget. If there are any existing chart tasks, they show in the window.

  2. Optionally click the change widget icon button if you want to replace the default icon for this widget.

    A file explorer window opens allowing you to browse to a local image file to use as the widget icon.

  3. Click Add New to create a new chart.

    This opens the Set Data Source window. 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
  4. Caution:

    Web AppBuilder integrated in ArcGIS Online 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. Refer to ArcGIS Online ArcGIS Sever web services for more information.

  5. Click OK.

    This opens the Settings tab.

  6. Optionally click the Data Source filter Data source filter icon beside the Data Source field to create filter expressions for your data content.
    Filter data
  7. Type Chart Title and Description.
  8. Click the Chart Display drop-down arrow and choose Display values feature by feature.

    There are four options to analyze and calculate, then display values of a feature layer in a chart.

  9. 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.
    • With Display values feature by feature:
      1. Choose one or multiple fields in the 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. You can sort the fields by clicking the Sorting order iconSorting order icon.
      3. Choose at least one Chart Type and specify its display.
        Specify chart display
    • With Display values by category :
      1. Click the Category Field drop-down list and choose a field. This field is used to categorize features and label categories. Click the Sorting order icon Sorting order icon to sort the fields if needed.
      2. Choose one or multiple fields in the 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.
    • With Display feature counts by category:
      1. Click the Category Field drop-down list and choose a field. This field is to categorize features and label categories. Click the Sorting order icon Sorting order icon to sort the fields if needed.
      2. Choose at least one Chart Type and specify its display.
    • With Display attribute values as charts:
      1. Choose one or multiple fields in the Value Fields. For each selected field, the statistical value displays separately as bars, columns, lines, or pie segments.
      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.
  10. Click the symbol beside Selection Symbol to set the symbol for the charted features on the map.
  11. Click the color beside Highlight Color to set the highlighted color for the charted features on the map when hovering over the chart.
  12. Click the Preview tab to preview the chart. For Column, Bar, and Line chart type, their axis labels automatically rotate in response to the density of the bars, columns, and lines. When more than one field in the Value Fields are selected, these types of chart support multiple colors for the clustered bars, columns, and lines.
    Preview the chart
  13. Repeat steps 3-11 to add more chart tasks.
  14. Click the OK button to finish the configuration.

Using the Chart widget

When the Chart widget is activated in the application, provide three inputs to run it:

  1. Select a task to execute the chart.
  2. Make a spatial selection in the map by using the current map extent or drawing a graphic on the map. If the spatial selection results into a valid selection set, the chart automatically displays in the Chart Results tab when you click APPLY.
    Use spatial filter
  3. Hovering over each individual piece in the chart displays the category value and the field value, and the corresponding feature highlights on the map. Clicking each individual piece in the chart zooms to the charted features on the map. When more than one type of chart is configured, click the arrows to navigate through the individual types.
    Chart results
  4. Click the Display settingDisplay setting icon to change the chart display if you don't like the predefined one.
  5. Click the Enlarge tool to view the chart better.
Tip:

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