The Top Aspects of Effective JavaScript Dashboard Design
| Quick Start Guide | |
|---|---|
| What You Will Need |
ARJS Standalone Designer or a designer on any framework A Data source to connect to |
| Controls Referenced | Pageless Reports |
| Tutorial Concept | This tutorial explores the fundamentals of Dashboard Reporting, including how to choose effective visuals and create a Dashboard Layout that improves readability and communicates key insights. You’ll also learn how to use consistent Color Palettes and design principles to build clear, accessible dashboards with ActiveReportsJS. |
In this blog, we will explore the concept of Dashboards, what they are, what they are used for, what makes a good dashboard, and how you can make them using ActiveReports JS. We will focus mainly on dashboards, but you can apply the lessons learned to improve overall report design and readability across all your JavaScript Reporting needs.
Want to Try it Out? Download ActiveReportsJS Today!
What Are Dashboards?
Dashboards are a type of report that groups visuals and other indicators to provide an “at a glance” view of a specific topic. In most cases, they are static, but there is a growing trend toward providing more interactions that let viewers change and tailor the data at view time. Dashboards are used to report the general broad strokes of the data and give the viewers a good sense of the overall picture. Normal reports are best for diving into the data itself, as they are not limited to fit within the constraints of a single page or slide.
Dashboards are now all over the place in today’s world, on the web, on the phone, and on the TV. Usually, they are simple, consisting of a few visuals and key points, but they can easily become denser depending on the audience and the data involved.
A goal to keep in mind when creating any report, including dashboards, is whether the information you want to display is useful to the people viewing it.
How Are They Useful?
Dashboards usually serve a specific purpose when they are made. To highlight specific key values for planning/reviewing with, give live data on performance, give statistics on a specific topic, and many more use cases.
When looking at a Dashboard, the visuals and KPIs are hand-selected to highlight specific information from a larger dataset, so they, by their nature, are a good way to condense and make larger trends readable for users to view and quickly understand the relationships and trends in the data.
This catered experience is because the author needs to know their audience to properly know what to highlight and how to do so.
Think of a scientific article when it is in a peer-reviewed journal vs a general release on a news website. The audiences are different, and the general population is not informed of all the nuances that a scientist would be in a peer-reviewed journal. So obviously, you would build the visuals and story you are trying to tell for each audience differently.
Knowing your audience is half of the work when making a dashboard, or any report in general. Once you specify your audience, you need to start building the information and story for them.
What Makes a Visual Good for a Dashboard
The visuals on a dashboard need to be considered as part of the larger picture rather than just something else on a page. Real estate on the dashboard is more limited than on a report that can grow page by page as needed. Thus, different data is properly shown in different visuals, and everything from color to placement of a visual will affect the readability of the dashboard overall
Here is a list of tips to help you select better visuals for your dashboard reports.
-
Sizing:
-
Different visuals will be better used at different sizes based on the visual type. Some are good at many sizes, but others, like Line or Bar charts, need to be above a certain size to allow the reader to get the information the visual presents. When a line or line area chart is too small, information about complex movements or series on the chart will easily get lost as noise. So keep the sizing in mind when you wireframe your dashboard, and make sure to leave enough space so the user has clear readability for your visuals.
-
-
Location:
-
We will discuss this more later in the blog, but the location of a visual will also play into how well it works. Different visuals have different appeals to the viewer, as well as varying information density. Placing a table on the left or right side, depending on the dashboard layout, can affect readability by disrupting the natural flow of the rest of the report.
-
Here is an image that illustrates the natural flow our eyes follow in the Western world as we read line by line from left to right. Other areas would have a different flow direction, as their eyes were trained to different writing directions and flows. Keep this in mind for multinational.
-
-
Information Density and Resistance:
-
Some denser visuals will not work on a dashboard because they do not fit. Think of tables and Tablix-style visuals that typically have a lot of non-visual information in them. Use these sparingly due to their size and density; they can cause issues that block the flow of the report or keep the reader from looking at anything else. If you need the data to dive into, maybe consider a partner report to lighten the dashboard load and improve readability. A big visual in the middle of the dashboard may get your point across well, but it can be placed so that it feels like a boulder your reader may get stuck on.
-
Visual type
-
Different visuals are best for different things. Depending on the dashboard's needs, you should use different visuals. Ranking of stuff should be bar or column charts; change over time is best with line charts or sparklines; part breakdowns should be pie/doughnut (3-5 slices) or stacked charts. So on and so forth.
-
Think about how different data is usually shown on other dashboards, as some visuals almost have paradigms for what should and should not be done with them.
-
-
What Makes a Good Layout?
The layout of a dashboard is another factor that can help or hinder your ability to share what you need when creating it. Here are some topics to help you better lay out your dashboard.
-
Visual Hierarchy
-
There is a concept called visual hierarchy that affects how a reader views a dashboard. It is basically that the user's eyes are drawn to specific areas of the dashboard in a given order. Usually starting with the title at the top and then looking from the top left to right, then top to bottom on the left, then working their way over through the middle using the path of least resistance. This is what I mentioned earlier with the flow for a dashboard.
-
-
Know your audience and build for them so they can share effectively
-
If your audience is the general public, you should share or highlight different information with your visuals and place them in prime areas, vs professionals who may want to focus on different data. IE professionals may want denser visuals and have more information due to a tighter layout.
-
-
There are different styles of dashboard layouts
-
There are a few different types of visuals/items on a dashboard. They usually can fall under a few categories: titling/text, navigation and filtering, KPIs, and smaller and main visuals. When they are put into a layout
-
Top Bar
Side Bar
-
The color of the items can affect accessibility and readability
-
Colors should have a consistent meaning
-
Ensure you use colors that are not too close or have common readability issues, such as those that affect color-blind users, Such as Red/Green. These are common colors across design still, but there are differences in the shades, as well as alternative cues that assist those who cannot discern the colors visually.
-
Do not have lots of colors; keep the palette small and consistent. Aim for about 5-10 that match the overall theme of the report/dashboard, with the ability to highlight important items.
-
ARJS has palettes for charts and other items on it, so you can use these as a good starting point to build off of.
-
-
Types of Palettes that you can make or find
 |
Monochromatic One color in several shades Analogous Multiple colors near each other on the color wheel Complementary Two Complementary (opposite side of the color wheel) colors in several shades Triadic A set of three colors that are a third apart on the color wheel Compound (Split Complementary) Set of three colors, two analogous and one complementary for the color between them Gradient A smooth transition between two hues |
What types of Dashboards are there?
There are multiple types of dashboards out there; each has a purpose and different priorities. Some will be real-time for operations; others will be strategic and projected over the coming months. Highlighting different areas as well as using different levels of interactivity as the audience changes between each type.
However, it is more about the data you input than about how the dashboards are made. As mentioned earlier, different visuals are better at showing off different data. Therefore, a planning dashboard will look different from an operations dashboard because each is built for a specific use case.
How to Make a Dashboard Report With ARJS
Now let's go through the process of making a dashboard using ARJS.
First, select the Pageless report style when creating a new report. (Other report types can be used, but pageless is the best for most dashboard use cases)
-
The designer will allow you to have multiple Sections, which are effectively pages or slides that make up the report. This is similar to sections on continuous reports. (Sections are made at the bottom and can be selected to view their properties)
-
Determine the dimensions
-
You can set the size and number of sections at any time. Keep in mind the medium/shape you want the dashboard to be on and size accordingly. You can change these as needed in the section properties.
-
After selecting the report type, you need to then determine the audience and data you have/need to highlight.
-
Determine the audience and the data needed
-
Create datasets for the report using the data sources you have. (Keep in mind, fewer columns will perform better, so focus on what data you actually will need.)
-
Create parameters if needed for filtering.
-
They can be controlled via the Click action or via the sidebar’s parameter panel. However, if you are filtering data, it is better to pass the parameter so the filtering is done on the request rather than processing all the data and filtering it afterward.
-
-
-
Start laying the actual dashboard elements onto the section
-
Determine whether you want a Top or Side Bar nav style.
-
Lay out report elements based on their size and type.
-
Remember density and the natural flow your audience's eye will take.
-
KPIs typically are more up and to the left as they are less dense. So they are one of the things authors want to highlight first.
-
-
-
Once you have items laid out, you can start to connect the data and then update the pallet to fit the overall vision for the report.
-
You can use a preselected palette on some report items but there is also the ability to use a custom palette.
-
-
-
Format all titles/to have a similar style/structure as well as location.
-
If they are different, user will pay attention to that rather than the visual you are titling.
-
-
Once you have all visuals hooked to data and properly titled review the dashboard.
-
On this review, you want to determine if there is anything that you need to add or remove from the dataset or to the dashboard as a whole.
-
This review will usually catch any mistakes.
-
After that you will have a dashboard report that has a good layout, structure, and palette, which will help enhance your data and help your readers walk away from the dashboard with a better understanding of the topic.
For an in depth walk through on how to make a dashboard please look at Get Started With Pageless Reports documenation and the Pageless Reports demo.
If you want to learn more about how to make more dynamic dashboard that allow viewers to change them at run time of a report via click actions please look at this Dynamic Chart demo.
Want to Try it Out? Download ActiveReportsJS Today!