First Name

Data Visualization

Communicate complex information in a visual way by using graphs, charts, trends, and/or maps.

What is the purpose of the data?

Ask yourself this question before choosing which type of data visualization to pair with the corresponding data set.

Comparisons

Measure the differences between two variables and/or groups of data.

- Simple bar graph
- Grouped bar graph
- Stacked bar graph

Source: PrimeNG Documentation Site (Horizontal Bar)

Correlations

Observe relationships between variables and how they could aid in predicting future data/trends.

- Scatter plot

Source: Charts.js Documentation Site (Scatter Chart)

Geographic

Show a user where a location is on a map. This aids in tracking data such as shipments and deliveries.

- GPS map
- Connection map

Source: Ready to Ship Planner

Part-to-whole

Separate pieces of data into sections that represent parts of a whole.

- Pie graph
- Doughnut graph
- Progress bar
- Polar area

Source: Collections Management

Mixed

Display different types of data visualization in one chart or graph if there are multiple purposes the data can fulfill.

- Line + bar chart

Source: PrimeNG Documentation Site (Combo)

Trends

View how data changes over time.

- Line graph

Source: Loans

Best Practice

Ensure users can easily break down the data they are presented.

Labeling

Consistent, concise labeling of axes and legends will aid in "telling the story" and help the user comprehend the representation of data.

Do

Labels are concise, hierarchy is established by placing bold weight on monetary data (this part of an Accounts Receivable application), and percentages give the user insight as to how much is in each aging bucket compared to the entire amount due.

Don't

Labels are too lengthy, making the UI crowded (based on the title, the user knows each progress bar has to do with aging data) and supplemental data is missing to give the user an idea of what the progress bars mean.

Supplemental format

Some users prefer an analytical text-based approach. Consider adding an alternative view by enabling a user to download a spreadsheet.

Source: Loans (supplemental format mockup)

Color usage

Part of communicating data is through use of color. Think of how a user may interpret color and how it will affect motivation and/or goals. Correlate color palettes with our messaging colors in the PrimeOne library or WinNG color library to show status.

- Green: Success (or positive)
- Blue: Neutral and/or informational
- Yellow: Warning
- Orange: Warning and/or nearing danger
- Red: Danger (or negative)

Do

The green within the progress bars resembles positivity, since the user is making progress towards paying off their loans.

Don't

Do not use red in this case since it could communicate a negative message to the user, even though they are making progress and paying off their loans.

Accessibility

It is the designer's and developer's responsibility to cross-check color contrast, text scaling, and alt text so all users can read and understand this form of data communication. Visit the Accessibility section to understand all of our standards.

Developer Tool

There are no specific chart components in PrimeNG or WinNG. They are based on Charts.js 3.3.2+, an open source HTML5 based charting library.