Related Pages: https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/2033324017

Description

Easily view trends in data over a period of time (e.g.: rising sales and large changes over time).
The Y axis shows numeric values and the X axis represents some key measurements (usually time).
Line charts are clear and easy to understand since you can see the specific trend for individual data group. Area charts are representing a volume especially as the part of the whole or when demonstrating the gap between variables.

Timeline enables easy view of a continues variables over time.
Area chart allows displaying a continues variable as the part-of-a-whole or view the difference between other variables.

Open

Open

Basic Flow

<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >> 
Special behaviour:

• usually include an indication for the current time as a vertical line (e.g.: 10AM). Sometime may include a 2 lines as per time range.

• in case of errors/notification, some of the data is indicate with a red color (specific point in time or a range).

Types 

Usage & Behavior

General guidelines

• Easily view trends in data over a period of time (e.g.: rising sales and large changes over time).

• Line chart enables enables comparing trend of multiple variables while area chart demonstrate the difference between them.

Line chart

• enables comparing trend of multiple variables.

• enables discussing trends over a certain time.

• The Y axis shows numeric values and the X axis represents some key measurements (usually time).

• Clear and easy to understand since you can see the specific trend for individual data group.

• Useful when you need to compare multiple values line is better, or to show different data groups, or easily show positive or negative relationships between two or more variables.

• When more than 2 areas overlapping it’s not readable (even while using transparency).

• If your goal is to let readers understand the distribution of your selected data, or how a data group performed within a certain time period.

• Useful for knowing general tendency and some other related details in your values.

Area chart

• Area charts have a close pattern to line charts.

• However, the room/gap between each line and the X axis is filled with a certain color, which demonstrate the difference between the displayed variables.

• Very suitable for showing part-to-whole details.

• Ideal for indicating the change among different data sets.

• If your goals include the composition of some aspects of the data.

• We have two basic categories: stacked and 100% stacked charts.

Overlapping Area charts

<<TBD rephrase>> Similar to grouped bar charts, overlapping bar charts are used to represent a comparison between two categories on the basis of multiple variables. But that’s not all, it’s specifically used when one variable is a part of another variable.

<<Show real example - WFM>>

Overlapping Line charts

Area - Line charts interactions

• <<TBD convert to LUX>>

Structure

<<Describe the different parts that structure the component. See example: Numeric stepper structure >>

Placement and Positioning

<<Where should the component be located on the screen. See example: Pagination placement and positioning>>

Default State

<<When there is more than one state for control or area. Including default values> see example: Numeric stepper default state >>

Content

<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>

Internal Logic

<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>

• <<use Click target to describe the interaction>>

  <<TBD - add a simple example of tooltip>>

  Example from Queue analytics for overlay area chart

   

States

<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>

Interaction

<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>

• In case the X axis represents time, additional elements may appear: (move to the charts examples table, the rest is as in legend above)

Examples

Validations and errors

<<Show images for Errors and warnings. See example: Radio button validations and errors>>

Transitions

<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>

Best practices

<Whenever a recommendation (not a must) is provided>>

Use Line chart:

• for showing comparisons, distributions, or trends between continuous data sets.

Don’t use

• <…>

General:

• You could try solid lines instead of straight lines.

• Make sure the height of your individual line does not beyond the normal range. Hence try not to fill the full screen of your chart, instead, leave some room at the top.

• You should not add too many lines to show your purpose.

Use Area chart:

• for summation relations for more than two different data groups.

Don’t use

• <…>

General:

• Do not insert too many data categories (should better no more than five data groups).

• Try to highlight the most important data group of your resources.

• Avoid very light or very close colors for your data groups. Make sure all of your details in the chart do not fade into the background.

• Time axis - is best used on horizontal axis from left to right. Don't skip values (even if there are no values).

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

• <…>

• <…>

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Focus management

<See examples in https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924924198/Copy+of+Combo+Box+Temporary#Focus-management , https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924759856/Copy+of+Numeric+Stepper+Temporary#Focus-management >>

Focus regions

1st level regions

<<Image>>

<See examples in https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924924444/Copy+of+Dual+List+Selector+Temporary#Focus-regions >>

Design

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>

To delete afterwards:

• https://uxdesign.cc/guide-to-data-visualization-comparison-part-1-678382ceef00