Infographic widget

The Infographic widget provides 8 graphic templates to visualize and monitor attributes and statistic data from both feature layers in the map and extra data sources.

The visualization graph generated by Infographic 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 custom data are supported in certain templates.

Two data sources are available for the Infographic widget: the map and extra data sources.

  • For the map, only layers from feature services with query capabilities are supported currently.
  • For the extra data source, there are two categories:
    • The resultant output layer from the widget in the app, such as the Query and Geoprocessing widget.

      Note:
      The Infograhphic widget only listens to the result of the Query and Geoprocessing widget currently.

    • Added layers or statistics from Extra data source under the Attribute tab.

These eight templates are provided to visualize the field(s) values, field(s) statistics results, or feature count. See the following table for details.

Template Name

Display Value

Support 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 Chart

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

No

Column Chart

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

No

Bar Chart

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

No

Line Cart

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

No

Configure the infographic widget

The Infographic widget can be set to open automatically when the app starts. To do so, click the yellow dot on the widget to turn it dark green.

The following steps shows how to configure a graph with the Number template. The settings of three gauge related templates are similar to the Number template. For the settings of other four charting templates, including Pie, Column, Bar, and Line chart, see Chart widget.

  1. Hover over the Infographic widget and click the Edit button.

    The configuration window for this widget opens and the template choosing panel appears.

  2. Click the thumbnail of the Number template, and click OK.
  3. Choose the data source.

    It could be a feature layer in the map, an output layer of the widget, or an extra source added under Attribute tab.

  4. Click OK and enter the setting panel.
  5. Click the Change widget icon 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.

  6. Set interact conditions if the data source is a feature layer from the current map. Otherwise the options are disabled.

    • Use selection—Only use selected features to create the graph. If there is no selection in the source layer, the whole data set will be used.
    • Filter by extent—Only use features in the current map extent to create the graph.

    Tip:

    If the date source is a feature layer from the map and is loaded in on-demand mode, the Filter by extent option is checked and disabled.

    If the date source is a feature layer from the map and is loaded in snapshot mode, the Filter by extent option is enabled and unchecked by default.

    If the data source is from the extra data source, the Filter by extent option is disabled. Whether it's checked depends on the data source.

  7. Modify elements’ 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 in the template. Click element thumbnails to hide or show the corresponding elements.

      Element Thumbnails

    2. Click an element in the preview to highlight it.

      Drag the upper and lower borders to resize it. Drag the handler on the up- right corner to rearrange it.

      Re-arrange handler

    3. Click the Reset button Reset button to reset the layouts.
    4. Click Change Template to choose a different template.

      Beware this will erase all the exiting 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 content, font, text size, text color, alignment and link for the texts. Customize the background color of the element if needed.
    2. Under Image settings, set the image source, alignment, and link. Customize the background color of the element if needed.
    3. Under Number settings, there are three tabs: Data, Display, and Indicators.
      • Data—Decide whether the number is feature count or field statistics result.

        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 etc.) and background color of the element.

        Number units

        Tip:

        The value displayed in Gauge can not only be 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 number and the indicator icon. If the number meets the conditions, the element’s appearance will change accordingly.

        Add indicator

        Caution:

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

        Tip:

        The Gauge templates also supports ratio targets. Checking the Ratio option means the target is the percentage given the data range.

  9. 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 is checked during the configuration, the number changes when features from the source layer are selected.
  • If the Filter by extent option is checked during the configuration, the number changes when the map is panned or zoomed.
  • If indicators are set during the configuration, the color and icon change with the number.
  • The graph is updated when data gets refreshed upon the refresh interval.

Tip:

The chart templates have more interactions as follows:

  • Hovering over individual piece in the chart displays the category value and the field value, and makes the corresponding feature highlight on the map.
  • Click the Setting button Settings button to switch on or off the legend, data labels, and the axis.