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
	}
}