Updated: May 24, 2018

Chart

Intro

The chart floorplan displays data using a full-width chart. In this floorplan, users can select chart items to see specific values, drill in to explore more details, and adjust a variety of chart criteria using filter options.

Usage

Dos

  • Use the chart floorplan when the user needs to be able to filter the data, adjust general chart settings, and explore individual values within the chart.
  • Use the chart floorplan as the final screen within a workflow.

Don’ts

  • Don’t use the chart floorplan when the user cannot interact with the chart; use the chart content table view cell instead.
  • Don’t use the chart floorplan to present chart data in the middle of a user workflow (for instance, as one attribute on an object screen); use the chart content table view cell instead.

Structure

Anatomy

A. Chart Title

The chart title should display the name of the chart, the name(s) of the series displayed, and an optional timestamp for the chart data.

B. Chart Summary

By default, the chart summary provides high-level details from the chart data – for instance, total sales in dollars ($) for the year. When the user taps on an item in the chart plot, details for that item will also appear in this section.

C. Chart Plot

This contains the visual representation of the chart data, including the chart items (for example, bars, columns, lines, and so on), x- and y-axes with titles, and axis labels and gridlines.

D. Legend

The legend describes which colors relate to which data series in the chart plot. For charts with only one series, the legend is not displayed.

E. Time Scope Section (regular width only — not yet available in the SDK)

This is an optional control for datasets that include time as a dimension. It allows users to select a particular sub-range of time to be displayed in the chart.

Additional Details

A. Chart Title

The chart title should reflect the quantitative (measure) and categorical (dimension) criteria data being displayed with the chart — for example, “Total Sales ($) by Month.”

Please be sure to set the chart title to update when the user changes the options in the filter menu and when the user drills into/out of the chart plot.

The subtitle line should indicate the series currently being displayed in the chart – for example, “2016-2017.”

B. Chart Summary

This displays summary information for the chart data series. Charts can display up to four data series at one time; if the data set contains more than four series, the user should be able to select which series to display using the filter menu.

Summary Name – this should be concise yet descriptive, including the unit(s) of measure if applicable (for example, $, °C, and so on). When users drill into their data, the summary name acts as a visual reference to reinforce the user’s location within the data set. For example, if a user drills down from a 12-month view for 2018 to explore data for April, the summary section title would change from “YTD ($)” to “April Total ($).”

Series Label – Please note that when there is only one series, the series label is not displayed. Where applicable, series labels should be sorted in descending order from most recent to least recent.

Trend – When there are two series, the up/down trend icons can be displayed. These should take semantic colors. When including a trend, make sure that it uses the same number of decimals as the summary values above.

C. Chart Plot

The chart plot should always include axis titles for the x- and y-axes.

You can select the number of gridlines to be displayed, but try to follow these guidelines:

  • For column and line charts, there should be a minimum of two y-axis gridlines with labels: a baseline and a line above the max value. If the chart data extends below the baseline (for example, into negative values), there should also be a minimum y-axis gridline with a label.
  • For horizontal bar charts, there are currently two x-axis gridlines with labels: a baseline and a single gridline.

 

Compact Landscape

(Not yet available in the SDK.)

When analytics charts appear in compact width in landscape mode, they take an alternate layout.

Anatomy

A. Chart Summary + Legend

By default, the chart summary provides high-level details from the chart data (for instance, total sales $ for the year). When the user selects a chart item from the chart plot, details for the item will also appear in this section.

The legend’s color dots are incorporated into the chart summary – there is no independent legend section. If the names of series grow longer than the available space in the chart summary, the series titles will be truncated. To see the full series titles, the user needs to switch to compact portrait mode to view the full legend.

B. Chart Plot

This contains the visual representation of the chart data, including the chart items (for example, bars, columns, lines, and so on), x- and y-axes with titles, and axis labels and gridlines.

Table View Mode

(Not yet available in the SDK.)

Table view mode is used to display all of the raw data related to the chart view. Analytics tables help users understand and explore complex quantitative information in a simple, straightforward manner. Table view mode is supported in both compact and regular modes.

Usage

Dos

  • Provide access to a table view mode when the user will need to review the full set of raw data for a chart.
  • When the dataset includes multiple series, structure the table data hierarchically so that users access each series independently.

Don’ts

  • Don’t show the data from multiple series at once. Allow the user to access data for one series at a time.
  • Don’t provide the same filter options in table view as in chart view; for table view, the only filter option should be Sort.

Structure

A. Chart Title

The chart title section displays the name of the chart, the name of the data series, and an optional timestamp for the chart data.

B. Table Header

The table header uses the x- and y-axis labels present in the chart view.

C. List of Data Cells

These cells provide raw data, with the option to drill down for additional information.

Behavior & Interaction

General

Selection

To select an item in the chart plot, the user either taps that item directly or taps and slides his/her finger onto it to make it active.

Drill down

When a chart item is selected, its data values appear in the chart summary section. Drill down is supported in the chart summary section, and you get to choose how the chart view is displayed on drill down. When possible, the measure (quantitative variable) should remain consistent during drill down.

Filter

The filter action allows the user to change the dimensions in the chart and to adjust sorting.

Interactions for Horizontal Bar Charts

Expanded Y-Axis Labels

Y-axis labels automatically expand to accommodate longer label text (up to a certain width), after which point they are truncated. If truncation occurs, users can reveal more of the y-axis labels by double-tapping to expand them. Double-tapping them again will return them to their default width.

Overflow

When there are more data rows than can fit on-screen at one time, the additional rows flow beneath the x-axis gridline and are accessed by vertically scrolling the chart plot.

Interactions for Regular Width

As discussed in Structure, the time scope section (not yet available in the SDK) is an optional control for regular width that lets users adjust the time range displayed in the chart. For example, in a chart with monthly sales for 2016, the default view displays sales data for all 12 months. The user can tap on the Q button to view monthly sales for just the current quarter and tap on the circle chevron buttons to cycle through each quarter in the data set.

Interactions for Table View (not yet available in the SDK)

Switching between Modes

To switch between chart and table view modes, users can tap the respective icon in the navigation bar. 

Drill Down

When multiple datasets are displayed in a chart and a specific item is selected, its data values appear in the chart summary section. To see these values in more detail within table view mode, users need to first switch from chart to table view mode and then drill down into one item in the list.