Related Pages: /wiki/spaces/UserExp/pages/2033324017
...
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.
...
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
Type | Usage | Image |
|---|---|---|
Line chart |     | |
Area chart |  | |
Chart with Stacked/Grouped (upto 100%), |    | |
 |
Usage & Behavior
General guidelines
...
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.
...
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 >>
State | Image | Comment |
|---|---|---|
Regular | ||
Hover | ||
Active | ||
Selected | ||
Selected, Hover | ||
Disabled | ||
Read Only | ||
Error | ||
Warning | ||
Focused | ||
Focused, Hover | ||
Focused, Selected |
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
Type | Description | Image |
|---|---|---|
Vertical line | to indicate the current time (e.g.: 12:30 PM) |  |
Special values (red line/text) | to indicate special values (e.g. Forecast above Volume) |  |
Special values (red dot) | to indicate special values (e.g. Forecast above Volume) special values (e.g. Forecast above Volume) are indicated (as red dot/line/text) - keep the full text??? |  |
zoom mechanism component |
|  |
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.
...
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
Text field | Drop-down | |
|---|---|---|
<<Images with Focus>> | <<Images with Focus>> | |
Tab | <<Description >> | |
Space | ||
Enter | ||
Esc | ||
Arrows |
<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>>
1st level | 2nd level | 3rd level |
|---|---|---|
<See examples in https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1924924444/Copy+of+Dual+List+Selector+Temporary#Focus-regions >>
Design
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
...
To delete afterwards:
...