Know your chart: A quick guide for chart design

Some years ago, I was working on a project where I was asked to design a dashboard-style app. The team discovered that there was a lot of data to work with and our users need to deal with a lot of data every day. The big challenge was to determine the type of chart to use to solve these needs, and we went to search for a lot of examples on Dribbble (deeehhhhh). As you can imagine, there were a lot of great and not that cool ways to solve the visual requirements. We worked in a lot of ideas that looked visually impressive in our dashboards, big mistake…

We discover that some information needs a specific format and also requirements to be described, and some of our ideas just didn’t match those goals.

That’s the reason because I decided to start this project, as a quick cheatsheet to handle and understand better the requirements and how to solve it. I have been working in know your chart as a quick reference to understand your data and how to apply good practices to your design. I also worked in some visual prototypes and just let my creativity explore some crazy concepts.

First of all the data…

Understand the data is a key element in the process, what are you trying to communicate? what is the best way to solve it?

If you know better the information that you are handling, your design decisions will be more accurate.

Here is a small brief of different types of data:

Quantitative data is information about quantities; that is, information that can be measured and written down with numbers. Examples: Age, size, height, width, etc.

Discrete data is based on counts. Only a finite number of values is possible, and the values cannot be subdivided meaningfully. For example, the number of parts damaged in shipment. Examples: number of trucks, number of students in a classroom. number of services accomplished

Continuous data is data that can have any value within a range. Examples: A person’s height: could be any value (within the range of human heights), not just certain fixed heights, time in a race: you could even measure it to fractions of a second, a dog’s weight, the length of a leaf, etc.

Categorical data is any data that can be grouped into different categories: Examples: Number of products type, type of accounts for clients, etc.

The Charts

Bar Chart

It’s one of the most common ways to visualize information because it’s clear and easy to understand. Bar Charts are used to show categorized information and the behavior of certain entities. Bar Charts are cool when you are trying to compare data across long periods and its easy to show important values.

Perfect Mix:
Combine This with a Map Chart.

Nice to have:
Highlight category and sortings.

SMART:
Stack it!

Line Chart

Like the Bar Chart, is one of the most commons graphic displays. It’s used to show data across the time and consists in the connection of points using a single line. This type of chart allows you to show trends, acceleration, and other value sequences.

Especially cool when you know a specific period, and the corresponding data related to that period.

Perfect Mix:
Bar Charts.

SMART:
Don’t show more than four line trends by Chart. Shade it to create an area chart.

Pie Chart

If you have a small data set, Pie charts are the best choice. The less the number of slices is. The more impact and ease of understanding the user gets. Pie charts are the best option to show percentages and visual comparison. The main approach is to show part-of-whole relations and proportions.

Perfect Mix:
Map Charts.

SMART:
Don’t use more than 5–6 slices.
The sum should be always 100%.
The order is very important!

Scatter Plot

This type of chart allows you to show different pieces of information related. It is an effective way to show trends and concentrations. It’s really helpful to show the relationship between two items, for example, amounts, increments, etc.

It’s a very important tool to helps you to focus on defined issues for future predictions and research

SMART:
Add filters, drill down into different levels of detail.
Add a trend line to the chart when the correlation between data is defined.
Use shapes, colors, and more visual elements to tell a story.

Gantt Chart

Gantt Charts show the start and end of the projects or periods. Also allows you to be aware of deadlines and other issues related to project success and good communication

This type of chart is amazing for planning and schedule projects and provide people with key information on the work to be done and when.

Normally, it includes a list of activities, with the duration over time. It’s really helpful in the estimation and the activities that need to be worked in parallel.

Construction:
Rows: Activities & tasks.

Columns:
Period.

Important:
Show Who is responsible for the activities.
Add a description and progress.
Add status color.
Show dependencies.

Use when:
You are working over deadlines, delivery dates.

Conclusion, for now…

Well, I think for now this is all, I’m going to continue working on this for a while. Let me know if this is helpful to you!, I’m glad to chat about it!