Chart

The Chart widget displays one or more quantitative attributes for a feature as a graphical representation of data. It is designed to make it easy for end users to observe possible patterns and trends in quantitative attribute data.

Configurable attributes

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

Attribute

Description

charts

Object[]. There is no default. An array of chart tasks. Depending on the chart mode, each task may have following attributes: name—String. There is no default. The name of the chart task displayed in the widget. url—String. There is no default. A feature layer URL for the layer you want to perform chart task. filter—Object. There is no default. The 'expr' attribute of filter takes the form of a basic SQL statement and uses it to filter features. description—String. There is no default. The description of the chart task. mode—String. There is no default. The mode of the chart task. The available values are feature, category, count, and field. If feature is selected, the chart task displays values feature by feature. If category is selected, the chart task displays values by category. If count is selected, the chart task displays feature counts by category. If field is selected, the chart task displays attribute values as charts. symbol—Object. There is no default. The feature symbol of the chart task. highLightColor—String. There is no default. he highlight color of the selected features. labelField—String; There is no default. The field is used as the chart axis label. This attribute exists when the mode is feature. valueFields—String[]. There is no default. The fields provide values to statistics. This attribute exists when the mode is feature, category, or field. categoryField—String. There is no default. The field used to categorize the chart. This attribute exists when the mode is category or count. operation—String. There is no default. Indicates the math method the chart task uses to calculate statistics. The available values are average, sum, max, and min. This attribute exists when the mode is category or field. webMapLayerId—String. There is no default. The ID of the source layer. If webMapLayerId is set, url will be ignored. types—Object array. There is no default. Each element of the types array is an object that contains two properties: type and display. The former is a string and has valid values including column, pie, bar, and line. The latter is an object. See the example below for details. sortOrder—Object. There is no default. It has a property named isAsc. isAsc is a Boolean and defines how to sort the category or label field value. When the value is true, ascending order applies; when false, descending order applies. This attribute exists when the display mode is feature, category, or count.

Example

{
        "charts": [{
          "url": "",
          "filter": {
            "logicalOperator": "AND",
            "parts": [],
            "expr": "1=1"
          },
          "description": "",
          "symbol": {
            "color": [0, 0, 128, 128],
            "size": 18,
            "angle": 0,
            "xoffset": 0,
            "yoffset": 0,
            "type": "esriSMS",
            "style": "esriSMSCircle",
            "outline": {
              "color": [0, 0, 128, 255],
              "width": 0.75,
              "type": "esriSLS",
              "style": "esriSLSSolid"
            }
          },
          "webMapLayerId": "SampleWorldCities_611_0",
          "mode": "feature",
          "name": "Display values feature by feature",
          "highLightColor": "#ff0000",
          "types": [{
            "type": "column",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }, {
            "type": "pie",
            "display": {
              "colors": ["#5d9cd3", "#eb7b3a", "#a5a5a5", "#febf29", "#4673c2", "#72ad4c"],
              "showDataLabel": true
            }
          }, {
            "type": "bar",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }, {
            "type": "line",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }],
          "labelField": "CITY_NAME",
          "valueFields": ["POP"],
          "sortOrder": {
            "isLabelAxis": true,
            "isAsc": true
          }
        }, {
          "url": "",
          "filter": {
            "logicalOperator": "AND",
            "parts": [],
            "expr": "1=1"
          },
          "description": "",
          "symbol": {
            "color": [0, 0, 128, 128],
            "size": 18,
            "angle": 0,
            "xoffset": 0,
            "yoffset": 0,
            "type": "esriSMS",
            "style": "esriSMSCircle",
            "outline": {
              "color": [0, 0, 128, 255],
              "width": 0.75,
              "type": "esriSLS",
              "style": "esriSLSSolid"
            }
          },
          "webMapLayerId": "SampleWorldCities_611_0",
          "mode": "category",
          "name": "Display values by category",
          "highLightColor": "#ff0000",
          "types": [{
            "type": "column",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }, {
            "type": "pie",
            "display": {
              "colors": ["#5d9cd3", "#eb7b3a", "#a5a5a5", "#febf29", "#4673c2", "#72ad4c"],
              "showDataLabel": true
            }
          }, {
            "type": "bar",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }, {
            "type": "line",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }],
          "categoryField": "POP_RANK",
          "operation": "average",
          "valueFields": ["POP"],
          "sortOrder": {
            "isLabelAxis": true,
            "isAsc": true
          }
        }, {
          "url": "",
          "filter": {
            "logicalOperator": "AND",
            "parts": [],
            "expr": "1=1"
          },
          "description": "",
          "symbol": {
            "color": [0, 0, 128, 128],
            "size": 18,
            "angle": 0,
            "xoffset": 0,
            "yoffset": 0,
            "type": "esriSMS",
            "style": "esriSMSCircle",
            "outline": {
              "color": [0, 0, 128, 255],
              "width": 0.75,
              "type": "esriSLS",
              "style": "esriSLSSolid"
            }
          },
          "webMapLayerId": "SampleWorldCities_611_0",
          "mode": "count",
          "name": "Display feature counts by category",
          "highLightColor": "#ff0000",
          "types": [{
            "type": "column",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }, {
            "type": "pie",
            "display": {
              "colors": ["#5d9cd3", "#eb7b3a", "#a5a5a5", "#febf29", "#4673c2", "#72ad4c"],
              "showDataLabel": true
            }
          }, {
            "type": "bar",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }, {
            "type": "line",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }],
          "categoryField": "POP_RANK",
          "sortOrder": {
            "isLabelAxis": true,
            "isAsc": true
          }
        }, {
          "url": "",
          "filter": {
            "logicalOperator": "AND",
            "parts": [],
            "expr": "1=1"
          },
          "description": "",
          "symbol": {
            "color": [0, 0, 128, 128],
            "size": 18,
            "angle": 0,
            "xoffset": 0,
            "yoffset": 0,
            "type": "esriSMS",
            "style": "esriSMSCircle",
            "outline": {
              "color": [0, 0, 128, 255],
              "width": 0.75,
              "type": "esriSLS",
              "style": "esriSLSSolid"
            }
          },
          "webMapLayerId": "SampleWorldCities_611_0",
          "mode": "field",
          "name": "Display attribute values as charts",
          "highLightColor": "#ff0000",
          "types": [{
            "type": "column",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }, {
            "type": "pie",
            "display": {
              "colors": ["#5d9cd3", "#eb7b3a", "#a5a5a5", "#febf29", "#4673c2", "#72ad4c"],
              "showDataLabel": true
            }
          }, {
            "type": "bar",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }, {
            "type": "line",
            "display": {
              "colors": ["#5d9cd3"],
              "showHorizontalAxis": true,
              "showVerticalAxis": true
            }
          }],
          "operation": "max",
          "valueFields": ["POP_RANK", "LABEL_FLAG"]
        }]
      }