Skip To Content

Infographic widget

The Infographic widget provides eight graphic templates you can use to visualize and monitor attributes and statistical data in the map and from the extra data sources.

The visualization graph generated by the Infographic widget is dynamic, refreshing when the map extent or data source changes, and can be interactive with the map. The targets and corresponding indicators for the data are supported in certain templates.

Two data sources are available when you configure the Infographic widget—Map and Extra data source:

  • When Map is chosen as data source, only feature layers with query capabilities are supported, and the refresh interval for layers can be set on the Map tab.
    Note:

    A feature layer is a single layer that can be created from a map service or feature service, from ArcGIS Online or ArcGIS Enterprise items, or from an array of client-side graphics. As a result, a feature layer can be added from the following sources:

    • An ArcGIS Server service URL from a feature service
    • An ArcGIS Server service URL from a sublayer of map service
      Caution:

      The layer added from a map service as a group is available from Extra data source but not from the Map data source.

    • Hosted feature service
    • Feature collection

  • When Extra data source is chosen, you can add the Layer and Statistics type from the extra data source under the Attribute tab, or use the resultant output layer from other widgets in the app. When data is added as Layer, it could be a feature layer, table, or an image service vector layer. When data is added as Statistics, it stores the feature count of group data (if specified) and performs server-side calculation on the sum, average, maximum, and minimum values of the group (if specified) based on one or more numeric fields.
    Note:

    Currently, the Infographic widget only takes into account the results of the Query and Geoprocessing widgets.

There are some limitations regarding the Map data source. With the Map data source, features on the map may be loaded by snapshot or on-demand mode. When features are loaded by on-demand mode, they are filtered by the current map extent, so you can't turn off the Filter by extent option in the configuration. In fact, all the services by default use on-demand mode except the hosted feature service. For the point hosted feature, when the number of features is less than or equal to 4,000, snapshot mode is enabled; when greater than 4,000, on-demand mode is enabled. For the polyline and polygon hosted feature, the threshold is 2,000 features with 250,000 vertices.

However, the above limitation does not exist when the data is added from Extra data source. You can control the Filter by extent option.

The following templates are provided so you can visualize field values, field statistics results, or feature counts. See the following table for details.

Note:

Except for the first four templates listed in the table, the rest of templates are referred as chart template in this topic.

The percentage stacked chart, which is an extension of the stacked chart, compares the percentage that each value contributes.

Template nameDisplay valueSupport custom indicators

Number

  • Feature count
  • Field statistics

Yes

Gauge

  • Feature count
  • Field statistics

Yes

Vertical Gauge

  • Feature count
  • Field statistics

Yes

Horizontal Gauge

  • Feature count
  • Field statistics

Yes

Pie

  • Field values
  • Categorized statistics
  • Categorized feature counts
  • Field statistics

No

Donut

  • Field values
  • Categorized statistics
  • Categorized feature counts
  • Field statistics

No

Bar

  • Field values
  • Categorized statistics
  • Categorized feature counts
  • Field statistics

No

Stacked Bar

  • Field values
  • Categorized statistics
  • Categorized feature counts *
  • Field statistics *

* Although the mode is supported, the stacked effect may not be seen due to one data series.

No

Percentage Stacked Bar

  • Field values
  • Categorized statistics
  • Categorized feature counts *
  • Field statistics *

* Although the mode is supported, the stacked effect may not be seen due to one data series.

No

Column

  • Field values
  • Categorized statistics
  • Categorized feature counts *
  • Field statistics *

No

Stacked Column

  • Field values
  • Categorized statistics
  • Categorized feature counts *
  • Field statistics *

* Although the mode is supported, the stacked effect may not be seen due to one data series.

No

Percentage Stacked Column

  • Field values
  • Categorized statistics
  • Categorized feature counts *
  • Field statistics *

* Although the mode is supported, the stacked effect may not be seen due to one data series.

No

Line

  • Field values
  • Categorized statistics
  • Categorized feature counts
  • Field statistics

No

Area

  • Field values
  • Categorized statistics
  • Categorized feature counts *
  • Field statistics *

No

Stacked Area

  • Field values
  • Categorized statistics
  • Categorized feature counts *
  • Field statistics *

* Although the mode is supported, the stacked effect may not be seen due to one data series.

No

Percentage Stacked Area

  • Field values
  • Categorized statistics
  • Categorized feature counts *
  • Field statistics *

* Although the mode is supported, the stacked effect may not be seen due to one data series.

No

Configure the Number template

This widget can be set to open automatically when an app starts. To enable this feature, click the Open this widget automatically when the app starts button Open this widget automatically when the app starts on the widget, which turns it dark green.

The following steps show how to configure a graph with the Number template. The settings of three gauge-related templates are similar to the Number template.

  1. Hover over the widget and select Configure this widget button Configure this widget to open the configuration properties dialog box.
  2. Click the thumbnail of the Number template, and click OK.
  3. Choose the data source.

    This can be a feature layer in the map, an output layer of the widget, or an extra data source added on the Attribute tab.

  4. Click OK and enter the setting panel of the template.
  5. Click the Change widget button to replace the default icon for this widget with your own image.

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

  6. Set interact conditions if the data source is a feature layer from the current map.
    • Use selection—Only use selected features to create the graph. If there is no selection in the source layer, the entire dataset will be used.
    • Filter by extent—Only use features in the current map extent to create the graph.
      • If the data source is a feature layer from the map and is loaded in on-demand mode, the Filter by extent option is checked and can't be turned off.
      • If the data source is a feature layer from the map and is loaded in snapshot mode, the Filter by extent option can be turned on and off.
      Note:

      If a layer is added from Map in the extra data source, the Filter by extent option can be turned on when you click the Set button under Filter in the Configure data source window and check Only the features within the current map extent under Extent in the Data source filter window. However, once Filter by extent is on, it can't be turned off unless Only the features within the current map extent is unchecked.

  7. Modify an element's layout.

    The left panel is not only a preview of the graph but also a flexible layout editor.

    1. The title, description, image, and number are elements that can be added to the template. Click an element thumbnail to hide or show the corresponding element.

      Element thumbnails

    2. Click an element in the preview to highlight it, and drag the upper and lower borders to resize it. Drag the handle in the upper right corner to rearrange it.

      Rearrange handle

    3. Click the Reset Reset to reset the layouts.
    4. Click Change Template to choose a different template, such as Gauge.

      Caution:

      This will delete all the existing settings and open a new, blank template.

  8. Click each element to set its parameters.

    All changes take effect in the preview synchronously.

    1. Under Text settings, set the text, font, text size, text color, alignment, and link for the text. Optionally customize the background color of the element.
    2. Under Image settings, set the image source, alignment, and link. Optionally customize the background color of the element.
    3. Under Number settings, set the options on the Data, Display, and Indicators tabs.

      • Data—Set the data format of the result number to either Feature count or Field statistics.

        Data format

      • Display—Set the number’s unit, decimal places, prefix, and suffix. You can also customize the common text parameters (font, text size, text color, and alignment) and background color of the element.

        Number units

        Tip:

        The value displayed in the Gauge template can be not only the number of a feature count or field statistics, but also the proportion of that number in the provided data range.

      • Indicators—Set the target values and corresponding indicators. There are two optional indicators: the color of the value and the indicator icon. If the target value meets the conditions, the element’s color and icon, if set, will change accordingly.

        Add indicator

        Caution:

        The indicators are executed in top-down order. The final appearance is determined by the last condition that data meets.

        Tip:

        The Gauge template also supports ratio targets. This means the target is the percentage given the data range.

  9. Click OK to finish the configuration.

Configure the Column template

Compared to the Chart widget, the chart templates are enhanced with the following features:

  • Use the layer's symbol as chart color when applicable.
    Note:

    The Use layer's symbol option is on the Display tab. Whether or not the option is available depends on the type of layer renderer in the map and the display mode you choose on the Data tab. For example, when the layer is rendered by unique values without a symbol, and Display values feature by feature is chosen, you have the option to use the layer's symbol color as the chart color.

  • Predefine custom colors for value fields when applicable.
  • When the date field is chosen as Category field in display mode, parse the minimum period into one of selected units, including year, month, day, hour, minute, and second.
  • Sort the chart by the value or label.
  • Set the maximum categories for performance.
  • Set the text size for both horizontal and vertical axises.
  • Use the extra data source.
  • Set a modern look and feel.

  1. Click the thumbnail of the Column template, and click OK.
  2. Repeat steps from 2 to 7 in Configure the Number template section.
  3. Click each element to set its parameters.

    All changes take effect in the preview synchronously.

    1. Under Text settings, set the text, font, text size, text color, alignment, and link for the text. Optionally customize the background color of the element.
    2. Under Chart settings, choose the Data tab. Set a display mode and associated parameters.

      Generally, there are four display modes:

      • Display values feature by feature—This chart depicts values of one or multiple fields for each feature in the layer and displays values feature by feature. For example, in a cities layer, you may want to display the population for each city as a bar or column. 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.
      Note:

      Choose more than one value field for stacked charts.

    3. Choose the Display tab. Set display parameters. You may set chart color to use layer's symbol or custom colors defined for selected value fields. You may also set the text size for both horizontal and vertical axises.
  4. Click OK to finish the configuration.

Use the Infographic widget

Activate the Infographic widget in the app by clicking the widget icon.

Activate Infographic widget

  • If the Use selection option was checked during configuration, the number changes when features from the source layer are selected.
  • If the Filter by extent option was checked during configuration, the number changes when the map is panned or zoomed.
  • If indicators were set during configuration, the color and icon change with the number.
  • The graph is updated when the data is refreshed.

Note:

You can also do the following with the chart templates:

  • Hover over individual pieces in the chart. The category and field values display, and the corresponding feature is highlighted on the map.
  • Click the Settings button Settings to turn the legend, data labels, and axis on or off.