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

Infographic

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

Configurable attributes

The following table describes common configurations.

Attribute

Description

background

Object. The background settings for the dijit.

  • backgroundColor—String. The background color.
  • alignment—Object. The alignment of the dijit.
    • horizontal—String. Valid values are left, center, and right.
    • vertical—String. Valid values are top, middle, and bottom.
  • link—String. Adds a connection for the dijit.

font

Object—The text color and font settings.

  • font—Object.
    • fontFamily—String. Valid values are Arial, Comic Sans MS, Courier New, Garamond, Tahoma, Times New Roman, and Verdana.
    • bold—Boolean.
    • italic—Boolean.
    • underline—Boolean. This is invalid for the gauge dijit.
  • fontSize—Number. Data range is 12–60.
  • textColor—String. The font color.

dataFormat

Object—The data format settings.

  • unit—String. Numerical unit. Valid values are none, billion, million, thousand, and percentage.
  • decimalPlaces—Number. Decimal digit. Data range is 0–9.
  • prefix—String. Numeric prefix.
  • suffix—String. Numeric suffix.

statistic

Object—Statistical manner of data.

  • type—String. Valid values are Features and FeatureStatistics.
  • fieldname—String. The name of the statistics field.
  • statisticsType—String. The statistics type. Valid values are sum, average, maximum, and minimum.

indicators

Object array—Defines an indicator to enhance the display style of the data (when a certain condition of the indicator is met).

  • value—Number array. A numeric value used to compare with real values.
  • operator—String. Valid values are greater, smaller, between, equal, and not equal.
  • valueColor—String. The value color that satisfies the condition.
  • iconInfo—Object. The icon that satisfies the condition. This applies to a number dijit only.
    • color—String. The icon color.
    • icon—String. The icon shape. Valid values are icon-up, icon-down, icon-stop, icon-start, icon-danger, icon-alarm, icon-right, icon-wrong, icon-like, and icon-unlike.
    • placement—String. The icon position. Valid values are left, replace, and right.
  • gaugeColor—String. The gauge color that satisfies the condition. This applies to a gauge dijit only.
  • isRatio—Boolean. Determines whether the value is displayed as a percentage rate. This applies to a gauge dijit only.

The following table describes the configurable attributes of the Infographic widget.

Attributes

Description

layout

See the layout configuration documentation.

dijits

Object array—Provides an initial object after a template is chosen.

  • id—String. Automatically generated. The ID of the dijit. Corresponds to the ID in the layout.
  • type—String. The type of dijit. There are five types: text, image, number, gauge, and chart.
  • visible—Boolean. Determines whether the current dijit is visible.
  • config—Object. Current dijit configuration information. The configuration of the five dijits are different. The following is an introduction:

  • text—Object.
    • background—See background in the previous table.
    • font—See font in the previous table.
    • text—String. The text to display.
  • image—Object.
    • background—See background in the previous table.
    • image—String. The image URL or base64 string.
  • number—Object.
    • indicators—See indicators in the previous table.
    • background—See background in the previous table.
    • font—See font in the previous table.
    • dataFormat—See dataFormat in the previous table.
    • statistic—See statistic in the previous table.
  • gauge—Object.
    • shape—String. The shape of the gauge. Valid values are horizontal, vertical, and curved.
    • min—Number. Minimum value of the data range.
    • max—Number. Maximum value of the data range.
    • indicators—See indicators in the previous table.
    • display—Object. The display style of the gauge dijit.
      • backgroundColor—String. The background color of the gauge dijit.
      • gaugeColor—The default gauge color.
      • dataLabels—Object. The label style of the gauge chart.
        • state—Boolean. Determines whether the style set in dataLabels is effective.
        • textColor—String. The color of the gauge data label.
        • dataRange—Boolean. Determines the data range.
        • targetValue—Boolean. Determines the target value.
      • currentValue—Object. The value style in the gauge chart.
        • state—Boolean. Determines whether the style set in currentValue is effective.
        • isRatio—Boolean. Determines whether the value is displayed as a percentage rate.
        • font—See font in the previous table.
        • dataFormat—See dataFormat in the previous table.
      • statistic—See statistic in the previous table.
  • chart—Object.
    • mode—String. The mode of the chart to display values. The available values are feature, category, count, and field. If feature is selected, the chart displays values feature by feature. If category is selected, the chart displays values by category. If count is selected, the chart displays feature counts by category. If field is selected, the chart displays attribute values as charts.
    • type—String. The type of chart. Valid values are column, bar, line, and pie.
    • labelField—String. The field is used as the chart axis label. This attribute exists when the mode is feature.
    • valueFields—String. The fields provide values to statistics. This attribute exists when the mode is feature, category, or field.
    • dateConfig—Object. This parameter appears in the category and count modes when the category field is esriFieldTypeDate type.
      • isNeedFilled—Boolean. Determines whether to display the time without data.
      • minPeriod—String. The smallest unit of time. The valid values are year, month, day, hour, minute, second, and automatic.
    • sortOrder—Object. How to sort the chart.
      • isLabelAxis— Boolean. Determines whether to sort by the label. When it is false, use the value to sort.
      • isAsc— Boolean. Determines whether it is sorted by ascending order.
      • field—The sorted field. It is valid only when the display mode is feature or when the display mode is category and isLabelAxis is false.
    • maxLabels—Number. The number of labels to render in the chart. This value can be empty when the chart is not a pie chart. When it is empty, there are no restrictions. When the chart is not a pie chart, the maximum value is 3000; otherwise the maximum value is 100.
    • nullValue—Boolean. In the calculation of the maximum, minimum, and average, it determines whether to calculate null as 0. This parameter is valid only in category and field modes.
    • useLayerSymbology—Boolean. Determines whether to render the chart with the color of the layer rendering symbol on the map. This parameter is valid only if the layer is selected from the current map. For feature mode, the parameter is valid. For category and count modes, only ClassBreakRenderer and UniqueValueRenderer are supported when the category field is set to the same field that the layer is rendered. For field mode, this parameter is invalid.
    • backgroundColor—String. The background color of the chart.
    • colors—String. The array of colors used to render the chart.
    • showLegend—Boolean. Determines whether to display the legend.
    • legendTextColor—String. The color of the legend label.
    • showHorizontalAxis—Boolean. Determines whether to display the horizontal axis. This attribute exists when the type is column, bar, or line.
    • horizontalAxisTextColor—String. The color of the horizontal axis text. This attribute exists when the type is column, bar, or line.
    • showVerticalAxis—Boolean. Determines whether to display the vertical axis. This attribute exists when the type is column, bar, or line.
    • verticalAxisTextColor—String. The color of the vertical axis text. This attribute exists when the type is column, bar, or line.
    • showDataLabel—Boolean. Determines whether to display the data label. This attribute exists only when the type is pie.
    • dataLabelColor—String. The color of the data label. This attribute exists only when the type is pie.

dataSource

Object.

  • dataSourceType—String. The type of data source. Valid values are DATA_SOURCE_FROM_FRAMEWORK and DATA_SOURCE_FEATURE_LAYER_FROM_MAP.
  • name—String. The name of the data source.
  • layerId—String. The ID of the selected layer.
  • useSelection—Boolean. This is a filter option. If true, use the selected features only. If false, use all of the features in the data source.
  • filterByExtent—Boolean. This is a filter option. If true, use the features in the current map extent only.

Default value declaration

All the default values are set in templates.json (path: ~/Infographic/settings/templates.json). Only the background color and font color will set the corresponding color based on different themes (when no specific settings are in templates.json).

Background color

  • Dashboard Theme: #222222.
  • Dart Theme: #4c4c4c.
  • Other themes: No default.

Example

{
	"layout": {...
	},
	"dijits": [{
		"id": "8737207323432901-1",
		"type": "text",
		"visible": true,
		"config": {
			"background": {
				"backgroundColor": "#FFF",
				"alignment": {
					"horizontal": "center",
					"vertical": "middle"
				},
				"link": ""
			},
			"font": {
				"font": {
					"fontFamily": "Arial",
					"bold": false,
					"italic": false,
					"underline": false
				},
				"fontSize": 16,
				"textColor": "#282828"
			},
			"text": "TITLE OF THE INFOGRAPHIC"
		}
	}, {
		"id": "8737207323432901-2",
		"type": "image",
		"visible": true,
		"config": {
			"background": {
				"backgroundColor": "#FFF",
				"alignment": {
					"horizontal": "center",
					"vertical": "middle"
				},
				"link": ""
			},
			"image":"http://..."
		}
	}, {
		"id": "8737207323432901-3",
		"type": "number",
		"visible": true,
		"config": {
			"indicators": [{
				"value": [1000],
				"operator": "greater",
				"valueColor": "#ff4500",
				"iconInfo": {
					"color": "#49B4CB",
					"icon": "icon-up",
					"placement": "right"
				}
			}],
			"background": {
				"backgroundColor": "#FFF",
				"alignment": {
					"horizontal": "center",
					"vertical": "middle"
				},
				"link": ""
			},
			"font": {
				"font": {
					"fontFamily": "Arial",
					"bold": false,
					"italic": false,
					"underline": false
				},
				"fontSize": "36",
				"textColor": "#59bad8"
			},
			"dataFormat": {
				"unit": "thousand",
				"decimalPlaces": 3,
				"prefix": "",
				"suffix": ""
			},
			"statistic": {
				"type": "Features",
				"fieldName": "POP",
				"statisticsType": "sum"
			}
		}
	}, {
		"id": "8737207323432901-4",
		"type": "text",
		"visible": true,
		"config": {
			"background": {
				"backgroundColor": "#FFF",
				"alignment": {
					"horizontal": "center",
					"vertical": "middle"
				},
				"link": ""
			},
			"font": {
				"font": {
					"fontFamily": "Arial",
					"bold": false,
					"italic": false,
					"underline": false
				},
				"fontSize": 14,
				"textColor": "#282828"
			},
			"text": "Description: additional information about this infographic."
		}
	}],
	"wid": "8737207323432901",
	"dataSource": {
		"dataSourceType": "DATA_SOURCE_FEATURE_LAYER_FROM_MAP",
		"name": "SampleWorldCities - Cities",
		"layerId": "SampleWorldCities_7883",
		"useSelection": true,
		"filterByExtent": true
	}
}