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:
|
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"]
}]
}