Create data visualizations using tables, summary statistics, also known as metrics, and charts. These types of visualizations are useful for displaying key statistics and trends on sites and pages. Site owners and edit group members can create data visualizations using private and public datasets. Only people with whom the data is shared can view a table, chart, or statistic when signed in to a site or page.
Create a table
Use the Text card to organize information in a table.
Tip:
To create a table using HTML, select </> Edit in HTML on the Text card.
To create a table, complete the following steps:
- Open a site or page in edit mode.
- On the Customize panel, select Layout.
- Drag a Text card onto an existing row.
- Select the table option.
- Select the number of cells you want per row and column and click to insert the table.
- To add or remove rows or columns, select a cell and choose the insert or delete rows or columns buttons. Select the delete button to remove the table entirely.
Tip:
To add a header, select the top row of your table and select the Toggle table header button. Headers make it easier for those who use assistive technologies to navigate a table's content.
- Select Save layout.
Display a summary metric
Use the Summary statistic card to show key performance indicators and more. You can configure a card to use a dynamic or static value. Dynamic values are generated from a dataset query and are automatically updated as the dataset is updated. Static values are entered and updated manually. Only those with whom the summary statistic has been shared will be able to view the statistic.
To display a summary metric, complete the following steps:
- Open a site or page in edit mode.
- On the Customize panel, select Layout.
- Drag a Summary statistic card onto an existing row.
- For Type, select Dynamic or Static.
- For Dynamic cards, choose Select content, select a dataset, and choose Add. Select Layer / table and for Attribute, choose a field from the dataset.
- For
Aggregation, choose the type of operation to perform on the selected field.
- For text and date fields, choose count, minimum, or maximum.
- For number fields, choose count, minimum, maximum, sum, average, standard deviation, or variance.
- Optionally, to add an additional filter, turn on Attribute filters and select an attribute, filter type, and parameters, which will vary depending on field type. To delete a filter, select the More actions button
. - For Static cards, enter a Display value.
- Turn on Formatting if needed; enter the units to show and choose their placement.
- For dynamic summary statistics that rely on larger or slower services, set a Server timeout period under Advanced configuration to allow more time to respond, if needed.
- Under Details, enter a Title, Subtitle, and Trailing text, as needed. To provide a link to the statistic's dataset, turn on Display source link (Dynamic only). On the live site, this link will go to the item details page as the preview page.
Tip:
If you show trailing text, ensure that its text color contrasts with the background color of the row. - Under Appearance, select alignment type and text color for the statistic.
- Under Sharing, you can enable sharing so that users can copy and share a direct link to this card on this page. With sharing enabled, you can set the Share button to display only on hover or to always be visible.
- Select Save layout.
Display a line, bar, pie, or scatterplot chart
Use the Chart card to create and display a variety of chart types. Use a Bar chart to summarize and compare categorical data. Use a Line chart to visualize change over a continuous range, such as time or distance. Use a Pie chart to illustrate how individual parts relate to a whole set, when there are only a few categories in the data. Use a Scatterplot to show the relationship between two numeric variables; display one variable on the x-axis and the other variable on the y-axis.
To display one of these charts, complete the following steps:
- Open a site or page in edit mode.
- On the Customize panel, select Layout.
- Drag a Chart card onto an existing row.
- Select a Chart type (Bar chart is selected by default).
- Select Find an item.
- Select an item from the available data services and select a layer or table (if needed).
- Select Save.
- For Choose category attribute, choose the primary charting item from your data.
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Optionally, from Choose value attribute, choose a numeric field to serve as a value metric for your category attribute. The default statistical operation on this field is Sum. You can change the operation using the drop-down menu under Choose value attribute. The value attribute supports Minimum, Maximum, Sum, Average, and Count. If selecting Count, the value attribute is deselected (as there is no need for an additional field to count the category attribute).
Numeric and string fields can be used in charts. By default, when you select a category attribute, the resulting chart will be a count of this attribute.
- Open the Options menu to customize the display of your chart with the following settings:
- Sort enables you to choose how your attribute data is displayed. Select an attribute and click the sort button next to the attribute to display data in ascending or descending order.
- Height (px) allows you to set a height value (pixels) for your chart.
- Chart title allows you to display a title for your chart. If displaying a title, enter a name and choose an alignment.
- For Primary chart color, enter a color code or use the color picker to choose a color.
- For the Bar chart, enter a Category label and Value label.
- For the Line chart, enter a Category label for each point and a Value Label for the metric (shown in the tooltip).
- For the Pie chart, enter a Category label for each pie wedge and Value label for the metric (shown in the tooltip).
- For the Scatterplots, enter an X axis label and Y axis label to display on your chart.
- Set the Server connection timeout (seconds) higher (for large services) to allow the service more time to respond.
- Select Save layout.
Display a JSON chart
Use the Chart card and create a custom chart with JSON using a specific chart specification.
To display a JSON chart, complete the following steps:
- Open a site or page in edit mode.
- On the Customize panel, select Layout.
- Drag a Chart card onto an existing row.
- Select the JSON chart.
- Enter your JSON in the JSON chart definition field.
- Optionally, in the Options section, you can enable or disable and customize the Chart title and Height (in pixels) settings.
- Set the Server connection timeout (seconds) higher (for large services) to allow the service more time to respond.
- Select Save layout.
Datasets
The datasets array specifies an ArcGIS feature service URL and query parameters. Refer to the REST API documentation to learn more about query parameters.
{ "datasets": [ { "url": "SampleArcGISFeatureService_URL", "name" : "Number_of_SUM",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}
Series
The series array allows you to specify the mappings between fields in the service response and the visual aspects of the chart (x,y axes, color and size for scatterplot charts, and radius for pie charts).
{ "series": [ { "source": "Number_of_SUM", "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" }} ] }
Overrides
The overrides property allows you to specify visual overrides, such as color or positioning, for the entire chart.
"overrides": {
"legend": {
"enabled": true
},
"backgroundColor": "#E6E6FA",
"backgroundAlpha": 1
}
}
Specifications
The specifications property allows you to input an entire Cedar schema for a purely custom chart. View examples for existing chart specifications.
Bar chart example
{
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Number_of_SUM",
"query": {
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [
{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}
]
}
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": {"field": "Number_of_SUM", "label": "Number of Students"},
"source": "Number_of_SUM"
}
]
}
Horizontal bar chart example
{
"type": "bar-horizontal",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Number_of_SUM",
"query": {
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [
{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}
]
}
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": {"field": "Number_of_SUM", "label": "Number of Students"},
"source": "Number_of_SUM"
}
],
"overrides": {
"categoryAxis": {
"labelRotation": -45
}
}
}
Grouped bar chart example
Note:
Each series will match to a group.{
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Jordan",
"query": {
"where": "City='Jordan'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Dewitt",
"query": {
"where": "City='Dewitt'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Fayetteville",
"query": {
"where": "City='Fayetteville'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Jordan Students"},
"source": "Jordan"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
"source": "Dewitt"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
"source": "Fayetteville"
}
]
}Scatterplot chart example
{
"type": "scatter",
"datasets": [ {
"url": "https://services1.arcgis.com/bqfNVPUK3HOnCFmA/arcgis/rest/services/Demographics_(Median_Household_Income)/FeatureServer/0"
}],
"series": [
{
"category": {"field": "TotalPop2015", "label": "Population"},
"value": {"field": "MedianHHIncome2015", "label": "Median Median Household Income"}
}
]
}
Bubble scatterplot chart example
{
"type": "scatter",
"datasets": [
{
"url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0"
}
],
"series": [
{
"category": {"field": "Number_of", "label": "Number of Teachers"},
"value": {"field": "F_of_teach", "label": "Fraction of Teachers"},
"size": {"field": "Not_Taught", "label": "Number not Taught"}
}
]
}
Timeline chart example
Note:
Category must be a datetime field. {
"type": "timeline",
"datasets": [
{
"url": "https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/DC_Crashes/FeatureServer/0",
"query": {
"where": "REPORTDATE > '2008-10-01' AND REPORTDATE < '2008-11-01'",
"orderByFields": "REPORTDATE ASC",
"sqlFormat": "standard"
}
}
],
"series": [
{
"category": {
"field": "REPORTDATE",
"label": "Date"
},
"value": {
"field": "MAJORINJURIES",
"label": "Major Injuries"
}
}
]
}