Back to Top

Insert charts, tables, and metrics

In this topic

  1. Create a table
  2. Display key metrics
  3. Bar charts
  4. Pie charts
  5. Line charts
  6. Scatterplots
  7. JSON charts

Create data visualizations using charts, tables, and summary statistics. These types of visualizations are useful for displaying key statistics and trends. Initiative and site 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 ArcGIS Hub.

To get started, sign in to ArcGIS Hub, and select Sites on the Overview page to view a list of your sites. If your organization has a license to ArcGIS Hub Premium, you can find your sites listed under Initiatives on the Overview page.

Tip:

You can also edit a site when viewing it in a browser. Be sure you're signed in to ArcGIS Hub and look for the edit button to the left of your site.

Create a table

Use the Text card to organize information in a table.

Tip:

If you'd like to create a table using HTML, use Code view on the text card options to insert code.

  1. Drag a Text card onto an existing row.
  2. Hover over the card and select the settings button to switch to edit mode.
  3. Select the table option.
  4. Select the number of cells you want per row and column.
  5. Once you've set 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. 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.

  6. Select Save.

Display key metrics

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.

  1. Drag a Summary statistic card onto an existing row.
  2. Hover over the card and select the edit button. For Type, select Dynamic or Static.
  3. For Dynamic cards, choose Select content, select a dataset, and choose Add. Select Layer / table and for Attribute, choose a field from the dataset.
  4. 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.
  5. To add an additional (optional) filter, turn on Attribute filters; select an attribute, filter type, and parameters (will vary depending on field type). To delete a filter, select the More actions button more actions.
  6. For Static cards, enter a Display value.
  7. Turn on Formatting if needed; enter the units to show and choose their placement.
  8. Under Advanced configuration (Dynamic only), set a Server timeout period if needed (to allow larger or slower services more time to respond).
  9. 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.

  10. Under Appearance, select alignment type and text color for the statistic.
  11. Under Sharing, you can enable sharing (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.
  12. Select Save.

Bar charts

Use the Chart card and create a bar chart to summarize and compare categorical data.

  1. Drag a Chart card onto an existing row.
  2. Hover over the card and click the settings button to switch to edit mode.
  3. Bar chart will be selected by default.
  4. Click Add data.
  5. Select an item from your available data services.
  6. 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.

  7. 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.

  8. 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.
  9. Set the Server connection timeout (seconds) higher (for large services) to allow the service more time to respond.
  10. Click Save.

Pie charts

Use the Chart card and create a pie chart to illustrate how individual parts relate to a whole set. Use a pie chart when there are only a few categories in the data.

  1. Drag a Chart card onto an existing row.
  2. Hover over the card and click the settings button to switch to edit mode.
  3. Select the pie chart by clicking the circular pie chart button.
  4. Click Add data.
  5. Select an item from your available data services.
  6. 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.

  7. 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.

  8. 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.
  9. Set the Server connection timeout (seconds) higher (for large services) to allow the service more time to respond.
  10. Click Save.

Line charts

Use the Chart card and create a line chart to visualize change over a continuous range, such as time or distance.

  1. Drag a Chart card onto an existing row.
  2. Hover over the card and click the settings button to switch to edit mode.
  3. Select the line chart by clicking the line chart button.
  4. Click Add data.
  5. Select an item from your available data services.
  6. 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.

  7. 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.

  8. 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.
  9. Set the Server connection timeout (seconds) higher (for large services) to allow the service more time to respond.
  10. Click Save.

Scatterplots

Use the Chart card and create 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.

  1. Drag a Chart card onto an existing row.
  2. Hover over the card and click the settings button to switch to edit mode.
  3. Select the line chart by clicking the scatterplot button.
  4. Click Add data.
  5. Select an item from your available data services.
  6. 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.

  7. 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.

  8. 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.
  9. Set the Server connection timeout (seconds) higher (for large services) to allow the service more time to respond.
  10. Click Save.

JSON charts

Use the Chart card and create a custom chart with JSON using a specific chart specification.

  1. Drag a Chart card onto an existing row.
  2. Hover over the card and click the settings button to switch to edit mode.
  3. Select the JSON tile.
  4. Enter your JSON in the JSON chart specification field.
  5. Optionally, in the Options section, you can enable or disable and customize the Chart title and Height (in pixels) settings.
  6. Set the Server connection timeout (seconds) higher (for large services) to allow the service more time to respond.
  7. 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 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 specification 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"
      }
    }
  ]
}

Feedback on this topic?

In this topic
  1. Create a table
  2. Display key metrics
  3. Bar charts
  4. Pie charts
  5. Line charts
  6. Scatterplots
  7. JSON charts