Hide Table of Contents
esri
arcgis
dijit
geometry
layers
renderer
symbols
tasks
Class: Infographic
[ AMD Module Require | Legacy Module Require ]
Module Require
require(["esri/dijit/geoenrichment/InfoGraphic", ... ], function(Infographic, ... ){ ... });
Description
Class added 3.6
Displays an
Note that a css stylesheet needs to be included:
Displays an
Infographic of one or more variables that describe the geographic context of a location.
Note that a css stylesheet needs to be included:
<link rel="stylesheet" href="//js.arcgis.com/3.6/js/esri/dijit/geoenrichment/themes/common/main.css">
Samples
Search for samples that use this class.Class hierarchy
esri.dijit.geoenrichment.Infographic
Constructors
| Constructor | Description |
|---|---|
| new Infographic(params,srcNodeRef) | Creates a new Infographic dijit using the given DOM node. |
Properties
| Property | Type | Description |
|---|---|---|
| cacheLimit | Number | The number of Infographic's for which data retrieved is cached for that browser session. |
| countryID | String | The ID of the country for which data is retrieved. |
| datasetID | String | The ID of the dataset to which variables used in this Infographic belong. |
| expanded | Boolean | If true, the Infographic will be displayed in its expanded state. |
| returnGeometry | Boolean | When true, output geomentry will be available as the geometry property in the returned object of the "data-ready" event handler. |
| studyArea | GeometryStudyArea | The study area for this Infographic. |
| studyAreaOptions | RingBuffer | DriveBuffer | IntersectingGeographies | The options to apply to the study area. |
| title | String | The title of the Infographic. |
| type | String | The type of the Infographic. |
| variables | String[] | The set of variables displayed in this Infographic. |
Methods
| Method | Return Value | Description |
|---|---|---|
| startup() | None | Finalizes the creation of this dijit. |
Events
[ On Style Events | Connect Style Events ]
All On Style event listeners receive a single event object. The event properties listed below are accessed from this event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
| On Event | Event Properties | Description |
|---|---|---|
| data-error | <Object> error | Fires if an error occurs in retrieving data for the study area. Should be used in favor of onDataRequest. |
| data-load | None | Fires when loading data for the study area. Should be used in favor of onDataLoad. |
| data-ready | <Object> provider | Fires when data for the study area is ready. Should be used in favor of onDataReady. |
| data-request | None | Fires when requesting data for the study area. Should be used in favor of onDataRequest. |
| resize | <Number[]> size | Fires when the Infographic is resized. Should be used in favor of onResize. |
Constructor Details
Creates a new
Infographic dijit using the given DOM node.Parameters:
| <Object> params | Required | Various optional parameters that can be used to configure the dijit. All properties can be passed into the constructor as options. variables, type and studyArea are required when constructing an Infographic. |
| <String | DOMNode> srcNodeRef | Required | Reference or id of an HTML element where the Directions widget should be rendered. |
Code Snippet:
require([
"esri/dijit/geoenrichment/Infographic",
"esri/geometry/Point",
"esri/tasks/geoenrichment/GeometryStudyArea",
"dojo/domReady!"
], function(Infographic, Point, GeometryStudyArea){
var infographics = new Infographic({
studyArea: new GeometryStudyArea({ geometry: new Point(-120.44,34.95) }),
type: "AgePyramid",
variables: ["Age.*"]
}, "infographics");
infographics.startup();
});Property Details
The number of
Infographic's for which data retrieved is cached for that browser session.The ID of the country for which data is retrieved. Optional when constructing an
Refer to the GeoEnrichment Coverage section of the ArcGIS GeoEnrichment Service documentation to find the countries where data are available. The "Two-Digit Country Code" column in the first table lists all the country codes you may use.
Infographic. If not specified, the server will automatically determine the country. Specifying the country ID can eliminate computational cost and potentially improve the performance of your application.
Refer to the GeoEnrichment Coverage section of the ArcGIS GeoEnrichment Service documentation to find the countries where data are available. The "Two-Digit Country Code" column in the first table lists all the country codes you may use.
Code Snippet:
countryID: "US"
The ID of the dataset to which variables used in this
Refer to the GeoEnrichment Coverage section of the ArcGIS GeoEnrichment Service documentation to find available dataset. Request latest available datasets at
Infographic belong. If not specified, the server will automatically determine the dataset. Specifying the dataset ID can eliminate computational cost and potentially improve the performance of your application.
Refer to the GeoEnrichment Coverage section of the ArcGIS GeoEnrichment Service documentation to find available dataset. Request latest available datasets at
http://geoenrich.arcgis.com/arcgis/rest/services/World/GeoenrichmentServer/Geoenrichment/Countries?f=pjson&token=<your_own_token>.Code Snippet:
datasetID: "USA_ESRI_2013"
If true, the
Infographic will be displayed in its expanded state. The default value is true.Default Value: true
When true, output geomentry will be available as the
geometry property in the returned object of the "data-ready" event handler. If you do not intend to add the output geometry to the map, set it to false to improve performance.Default Value: false
<GeometryStudyArea> studyArea
The study area for this
Infographic. Required when constructing an Infographic.<RingBuffer | DriveBuffer | IntersectingGeographies> studyAreaOptions
The options to apply to the study area. Optional when constructing an
Infographic. The default value is a RingBuffer with 1-mile radius.Default Value: new RingBuffer({"radii": [ 1 ], "units": "esriMiles"})
Code Snippet:
studyAreaOptions: new DriveBuffer({radii: [ 2 ], units: "esriMiles"})The title of the
Infographic. Optional when constructing an Infographic. If not specified, the title of the GeoEnrichment dataset will be displayed as the title.The type of the
Infographic. Required when constructing an Infographic.
"OneVar"displays the value of a variable. If multiple variables are specified, only the first in the array will be displayed."RelatedVariables"displays values of multiple variables."AgePyramid"displays an age pyramid based on the demographic data. Must specifyvariables: ["Age.*"]to get complete age data."Tapestry"displays Lifestyles-Esri Tapestry Segmentation data in theInfographic. Must specifyvariables: ["Tapestry.*"]to get complete tapestry data.
Known Values: "RelatedVariables" | "AgePyramid" | "Tapestry" | "OneVar"
The set of variables displayed in this
To return all variables in a category, specify this value as
The availability of variables varies from country to country. You may use this application to find variables available in your study area, or refer to the Data collections section in the ArcGIS GeoEnrichment Service documentation to find available variables.
Infographic. Required when constructing an Infographic.
To return all variables in a category, specify this value as
["<category_name>.*"].
The availability of variables varies from country to country. You may use this application to find variables available in your study area, or refer to the Data collections section in the ArcGIS GeoEnrichment Service documentation to find available variables.
Method Details
Finalizes the creation of this dijit. This method should be called after the constructor for this dijit is called and before letting the users interact with it.
Event Details
[ On Style Events | Connect Style Events ]
Fires if an error occurs in retrieving data for the study area. Should be used in favor of onDataRequest.
Event Properties:
| <Object> error | The error message returned by the GeoEnrichment service. |
Fires when data for the study area is ready. Should be used in favor of onDataReady.
Event Properties:
| <Object> provider | A provider object containing GeoEnrichment results. When returnGeometry is set to true, you may use the provider.getGeometry() to get the returned geometry. |
Code Snippet:
require([
"esri/graphic", "esri/symbols/SimpleFillSymbol", ...
], function(Graphic, SimpleFillSymbol, ... ){
infographics.on("data-ready", function (evt) {
map.graphics.add(new Graphic(evt.provider.geometry, new SimpleFillSymbol()));
});
});Fires when requesting data for the study area. Should be used in favor of onDataRequest.