Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: Infographic

require(["esri/dijit/geoenrichment/Infographic"], function(Infographic) { /* code goes here */ });

Description

(Added at v3.6)
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.11/esri/dijit/geoenrichment/themes/common/main.css">

Samples

Search for samples that use this class.

Constructors

NameSummary
new Infographic(params, srcNodeRef)Creates a new Infographic dijit using the given DOM node.

Properties

NameTypeSummary
cacheLimitNumberThe number of Infographic's for which data retrieved is cached for that browser session.
countryIDStringThe ID of the country for which data is retrieved.
datasetIDStringThe ID of the dataset to which variables used in this Infographic belong.
expandedBooleanIf true, the Infographic will be displayed in its expanded state.
returnGeometryBooleanWhen true, output geometry will be available as the geometry property in the returned object of the "data-ready" event handler.
studyAreaGeometryStudyAreaThe study area for this Infographic.
studyAreaOptionsRingBuffer | DriveBuffer | IntersectingGeographiesThe options to apply to the study area.
subtitleStringAn HTML template string used to define the Infographic subtitle.
titleStringThe title of the Infographic.
typeStringThe type of the Infographic.
variablesString[]The set of variables displayed in this Infographic.

Methods

NameReturn typeSummary
setData(data, metadata?)NoneDefine the infographic data.
startup()NoneFinalizes the creation of this dijit.

Events

[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.

Events

NameEvent ObjectSummary
data-error
{
  error: <Object>
}
Fires if an error occurs in retrieving data for the study area.
data-loadFires when loading data for the study area.
data-ready
{
  provider: <Object>
}
Fires when data for the study area is ready.
data-requestFires when requesting data for the study area.
resize
{
  size: <Number[]>
}
Fires when the Infographic is resized.
Constructor Details

new Infographic(params, srcNodeRef)

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.
<Node | String> srcNodeRef Required Reference or id of an HTML element where the Infographic should be rendered.
Sample:
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

<Number> cacheLimit

The number of Infographic's for which data retrieved is cached for that browser session.

<String> countryID

The ID of the country for which data is retrieved. Optional when constructing an Infographic. If not specified, the server will automatically determine the country. Specifying the country ID can eliminate the 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.
Sample:
countryID: "US"

<String> datasetID

The ID of the dataset to which variables used in this 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>.
Sample:
datasetID: "USA_ESRI_2013"

<Boolean> expanded

If true, the Infographic will be displayed in its expanded state. The default value is true.
Known values: true | false
Default value: true

<Boolean> returnGeometry

When true, output geometry 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.
Known values: true | false
Default value: false

<GeometryStudyArea> studyArea

The study area for this Infographic. Required when constructing an Infographic.
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"})
Sample:
studyAreaOptions: new DriveBuffer({radii: [ 2 ], units: "esriMiles"})

<String> subtitle

An HTML template string used to define the Infographic subtitle. The default value is:
<div> ${address}</div><div>${name}</div>
If the study area is a point the address information is populated by performing a reverse geocode of the input study area. For other geometry types the value will be an empty string. The name information is a string representation of the studyAreaOptions used by the infographic. For example "1-mile ring". (Added at v3.7)

<String> title

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.

<String> type

The type of the Infographic. Required when constructing an Infographic.
  • "AgePyramid" displays an age pyramid based on the demographic data. Must specify variables: ["Age.*"] to get complete age data.
  • "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.
  • "Tapestry" displays Lifestyles-Esri Tapestry Segmentation data in the Infographic. Must specify variables: ["TapestryNEW.*"] to get complete tapestry data.

Note: Prior to version 3.16 specify "Tapestry" variables as ["Tapestry.*"] to get complete tapestry data.

Known values: "AgePyramid" | "OneVar" | "RelatedVariables" | "TapestryNEW"

<String[]> variables

The set of variables displayed in this 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

setData(data, metadata?)

Define the infographic data. By default the Infographic uses online Geoenrichment services to obtain data. This method allows you to override this behavior to provide data from your own source. For example, you can use a FeatureSet returned from the GeoenrichmentTask.enrich method. (Added at v3.7)
Parameters:
<FeatureSet> data Required Specify the FeatureSet containing the custom data to display in the Infographic.
<Object> metadata Optional Define the mappings of feature set attributes to Infographic display fields. Supported display fields are name and address.

startup()

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 Event ]

data-error

Fires if an error occurs in retrieving data for the study area. Should be used in favor of onDataRequest.
Event Object Properties:
<Object> error The error message returned by the GeoEnrichment service.

data-load

Fires when loading data for the study area. Should be used in favor of onDataLoad.

data-ready

Fires when data for the study area is ready. Should be used in favor of onDataReady.
Event Object 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.
Sample:
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()));
  });
});

data-request

Fires when requesting data for the study area. Should be used in favor of onDataRequest.

resize

Fires when the Infographic is resized. Should be used in favor of onResize.
Event Object Properties:
<Number[]> size The size of the Infographic.
[460,106]
Show Modal