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.
|
font | Object—The text color and font settings.
|
dataFormat | Object—The data format settings.
|
statistic | Object—Statistical manner of data.
|
indicators | Object array—Defines an indicator to enhance the display style of the data (when a certain condition of the indicator is met).
|
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.
|
dataSource | Object.
|
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
}
}