Create data visualizations using charts, tables, and summary statistics. These types of visualizations are useful for displaying key statistics and trends. Core team members can create data visualizations using private and public datasets. Only people with whom the data is shared will be able to view a chart or statistic when signed in to a site or page.
To get started, sign in to Portal for ArcGIS, and click Sites on the Overview page to view a list of your sites.
Tip:
You can also edit a site when viewing it in a browser. Be sure you're signed in and look for the edit button to the left of your site.
Create a table
Organize information in a table using the Text card.
Tip:
If you'd like to create a table using HTML, use Code View on the text card options to insert code.
- Drag a Text card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Click the table option.
- Select the number of cells you want per row and column.
- Once you've selected the size of your table, click to insert the table. Add or remove rows or columns by clicking inside a cell and choosing the insert or delete rows or columns buttons. Click the delete button to remove the table entirely.
Tip:
To add a header, click the top row of your table and click the Toggle table header button. Headers make it easier for those who use assistive technologies to navigate a table's content.
- Click Save.
Display key metrics
Use the Summary Statistics card to show key performance indicators and more. Summary statistics are generated from a dataset query and are automatically updated as the dataset is updated. Only those with whom the summary statistic has been shared will be able to view the statistic.
- Drag a Summary Statistic card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Click Add Data and choose a dataset. When editing the site, the source link below your statistic will link to the item details page for the dataset's preview page.
- For Statistic Field, choose a field from the selected dataset. .
- For
Statistic Type, choose the type of operation to perform on the selected field.
- For text and date fields, choose between count, minimum, and maximum.
- For number fields, choose between count, sum, minimum, maximum, average standard deviation, and variance.
- Optionally add a filter to your statistic by choosing an attribute from the Select an Attribute dropdown menu.
- Select an attribute to use for your filter.
- Click Add.
- Select the new attribute box to show the filter input. The input box will vary depending on the field type.
- Enter your desired filter.
- Click outside the filter box or press Enter.
- Enter a title in the Title text box.
- Optionally enter
text for Trailing Text to provide a link to the statistic's dataset, and change the Accent Color for the text.
Tip:
If you choose to show trailing text, ensure that its text color has contrasts with the background color of the row. - Click Save.
Customize statistic appearance
You can customize the appearance of metrics using the Summary Statistics card.
- After configuring a Summary Statistics card, click the Appearance menu under the Statistics Settings in the side panel.
- Optionally choose to insert a Title for the statistic. You can use this option to clearly define what your statistic measures.
- Add text to the Trailing Text field to provide additional information about the statistic, such as relevant details relating to its source or configuration.
Tip:
The difference between Title and Trailing Text - Adjusting the Accent Color changes the color of the metric only. Choose a color that clearly contrasts with the row's background color.
Bar charts
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Bar Chart will be selected by default.
- Click Add Data.
- Select an item from your available data services.
- 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. Once selected, the default statistical operation on this field is Sum. You can change the Statistical Operation setting by using the drop-down menu to the right of the Choose Value Attribute selector. The value attribute supports Min, Max, Sum, Average, and Count. By selecting Count, the value attribute is deselected (because 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.
- Click the Options menu to customize the display of your chart with the following settings:
- The Sort option 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.
- Set a height value (pixels) for your chart in the Height (px) text field.
- Choose to display a title for your chart by clicking the toggle button next to Chart Title. If displaying a title, enter its name in the provided text field and choose an alignment.
- Set Primary Chart Color by entering a color code, or click the color picker to choose a color.
- Provide text for the Category Label and Value Label fields.
- Click Save.
Pie charts
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Select the pie chart by clicking the circular pie chart button.
- Click Add Data.
- Select an item from your available data services.
- 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. Once selected, the default statistical operation on this field is Sum. You can change the Statistical Operation setting by clicking the drop-down arrow to the right of the Choose Value Attribute selector. The value attribute supports Min, Max, Sum, Average, and Count. By selecting Count, the value attribute is deselected (because 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.
- Click the Options menu to customize the display of your chart with the following settings:
- The Sort option 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.
- Set a height value (pixels) for your chart in the Height (px) text field.
- Choose to display a title for your chart by clicking the toggle button next to Chart Title. If displaying a title, enter its name in the provided text field and choose an alignment.
- Set Category Label text for the label of each pie wedge in the tooltip and Value Label text for the label of the metric in the tooltip.
- Click Save.
Line charts
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Select the line chart by clicking the line chart button.
- Click Add Data.
- Select an item from your available data services.
- 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. Once selected, the default statistical operation on this field is Sum. You can change the Statistical Operation setting by clicking the drop-down arrow to the right of the Choose Value Attribute selector. The value attribute supports Min, Max, Sum, Average, and Count. By selecting Count, the value attribute is deselected (because 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.
- Click the Options menu to customize the display of your chart with the following settings:
- The Sort option 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.
- Set a height value (pixels) for your chart in the Height (px) text field.
- Choose to display a title for your chart by clicking the toggle button next to Chart Title. If displaying a title, enter its name in the provided text field and choose an alignment.
- Set Primary Chart Color by entering a color code, or click the color picker to choose a color.
- Set Category Label text for the label of each point in the tooltip and Value Label text for the label of the metric in the tooltip.
- Click Save.
Scatterplots
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Select the line chart by clicking the scatterplot button.
- Click Add Data.
- Select an item from your available data services.
- For Choose X Axis 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.
- Select an attribute for the Choose Y Axis Attribute field. Choose a numeric field to serve as a value metric for your 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.
- Click the Options menu to customize the display of your chart with the following settings:
- The Sort option 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.
- Set a height value (pixels) for your chart in the Height (px) text field.
- Choose to display a title for your chart by clicking the toggle button next to Chart Title. If displaying a title, enter its name in the provided text field and choose an alignment.
- Set Primary Chart Color by entering a color code, or click the color picker to choose a color.
- Set labels for X Axis Label and Y Axis Label to display on your chart.
- Click Save.
JSON charts
Custom charts are created from JSON using a specific chart specification.
- Drag a Chart card onto an existing row.
- Hover over the card and click the settings button to switch to edit mode.
- Select the JSON tile.
- Enter your JSON in the JSON Chart Specification field.
- Optionally, in the Options section, you can enable or disable and customize the Chart Title and Height (in pixels) settings.
- Click Save.
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 override 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 specification property allows you to input an entire Cedar specification for a purely custom chart. View examples for existing chart specifications.
Box 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": "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"
}
]
}
Bubble scatterplot example
{
"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"
}
]
}
Timeline chart example
Note:
Category must be a datetime field.{
"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"
}
]
}