Charts in pop-ups provide a visual and meaningful way to display numeric attribute information. You can add pie charts, bar charts, column charts, and line charts.
Bar charts are best used to show data in discrete categories. Spaces between the elements separate the values. Bar charts can be oriented vertically or horizontally.
Line charts can be used to show change over time or a progression. A line chart implies an inherent order, progressing from left to right.
Pie charts are effective for showing the parts of a whole. All the attributes shown in the pie should add up to 100 percent.
Chart elements (and image elements) are a type of media element. They can be arranged vertically or arranged horizontally in a media group. By default, pop-ups are undocked but can be docked to display more information. Click the Dock button in the upper right of the pop-up.
About this tutorial
In this tutorial, you will learn how to configure bar, line, and pie charts in pop-ups. Open the completed sample map to view the configured pop-up charts. Click any feature to view the bar, line, and pie charts. The sample data focuses on crime statistics by neighborhood.
Note that the bar, horizontal bar, and line charts are in a media group. Use the arrows on the left and right of the chart in the group to advance to the next chart. The pie chart displays below the media group.
The map contains three layers:
Neighborhood Crime Totals (unconfigured)
The unconfigured layer that can be used to follow along in this tutorial.
Neighborhood Crime Totals (charts)
This layer is styled using Counts and Amounts (color). The charts all use a single color (orange).
Neighborhood Crime Totals (charts with colors)
This layer is styled using multiple fields using the Predominant Category style. Because the charts use the same fields, they automatically mirror the colors seen in the map.
Add chart elements to pop-ups
Step 1 – Open the sample map and Sign In. You can also follow along without signing in.
Step 2 – Open the Layers pane in the Contents (dark) toolbar. Hide the Neighborhood Crime Totals (charts) layer and show the Neighborhood Crime Totals (unconfigured) layer.
Step 3 – Ensure that the unconfigured layer is selected. In the Settings (light) toolbar click Pop-ups.
Step 4 – We will not need the default Fields list element, so it can be deleted. Click options (…), then Delete.
Step 5 – Add a chart element. Click Add content, then choose Chart.
Step 6 – Configure the chart.
While each chart is different, the chart configuration pane is similar for each chart type. Bar charts are the default, but note that Line and Pie are also options.
a – Choose a title, caption, and alternative text for the chart (optional).
b – Click Select fields.
c – Choose the desired fields to populate the chart. In this example we will use the yearly count fields (2001 to 2010). A checkmark appears next to the selected field.
Click Done when finished selecting fields. When finished configuring the chart, click Done again.
Step 7 – Add a horizontal bar chart to create a media group. Click the blue circle with + to add another media element. This will create a media group.
Step 8 – Choose Chart.
Step 9 – Choose the same fields as you did in Step 6 above. When finished click Done, then scroll to the bottom and set the orientation to Horizontal. When finished, click Done again.
Step 10 – Repeat again (starting at Step 7), but choose a Line chart.
Step 11 – Complete the chart configuration using the same yearly total fields (2001-2010).
The media group you have just created contains three charts: vertical bar, horizontal bar, and line. Hover over the chart to learn more about the data. Click the arrows on the left and right side of the media group to advance to the next chart.
Step 12 – Add a pie chart below the media group you just created.
Click Add content, then select Chart.
Step 13 – Select Pie as the chart type, then click Select fields.
Step 14 – Select the fields that total the types of crimes: Theft, Assault, Battery, and so on. Make sure to include All Other Crimes. Click Done when finished.
Step 15 – Complete the chart configuration by adding an optional title and description. Click Done when finished.
The pie chart appears below the media group created above and shows the various crime types. Hover over a pie slice to get more information about the data.
Add chart elements with color
The Neighborhood Crime Totals (charts) layer displays chart elements having a single color (orange). The layer uses a single field for the Counts and Amounts (color) style it uses.
Chart elements will automatically use color when multiple fields are used in the layer style and the chart elements use the same fields. The steps for creating the chart elements are the same as described above. The Neighborhood Crime Totals (charts with colors) is styled using multiple fields using the Predominant Category style. Because the chart elements use the same fields, they automatically mirror the colors seen in the map.
Each neighborhood polygon is colored by the predominant value, in this case the year with the highest number of crimes. The chart elements use the same color scheme to show the yearly totals.
To take a closer look at the configurations, follow the steps below.
Step 1 – Open the Layers pane in the Contents (dark) toolbar. Hide the Neighborhood Crime Totals (charts) and Neighborhood Crime Totals (unconfigured) layers, and show the Neighborhood Crime Totals (charts with colors) layer.
Step 2 – Ensure that the charts with colors layer is selected. In the Settings (light) toolbar click Styles. You’ll see that all fields with yearly totals for crimes from 2001 to 2010 are checked and the layer uses the Predominant category style.
Step 3 – In the Settings (light) toolbar click Pop-ups and expand the Media group.
Step 4 – Select any of the chart elements in the media group and note that the same fields have been used to configure the element.
Step 5 – Experiment with different colors by going back to the Predominant Category style options and choosing a different color ramp.
Note that the chart element colors will change automatically. Compare the example below with the one at the top of this section.
More information
For more information, see the following:
- Configure pop-ups (Help)
- View pop-ups (Help)
- Pop-ups: the essentials (Blog)
This post was originally published on March 23, 2011, and has been updated.
Commenting is not enabled for this article.